【HTML】HTML 标签 ③ ( 链接标签 | 注释标签 )

韩曙亮

发布于 2023-03-30 19:03:06

10.5K00

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：0

代码可运行

文章目录

HTML 常用的标签有如下类型 :

排版标签
文本格式化标签
图像标签
链接标签 , 其中链接涉及到相对路径与绝对路径问题 ;

一、链接标签

连接标签格式 :

<a href="跳转链接" target="窗口打开方式">链接内容</a>

href 属性 : 设置链接的 URL 地址 , 该属性必须设置 ; 链接分为外部链接和内部链接 ;
- 外部链接 : 连接到外部网址 , 如百度搜索引擎 https://www.baidu.com/ ; <a href="https://www.baidu.com/">百度一下</a> ;
- 内部链接 : 链接到内部的 html 文件页面 , 如 index.html ; <a href="index.html">首页</a> ;
- 空链接 : 如果没有确定链接目标 , 设置 # 值 , 该链接暂时是空链接 ; <a href="#">空链接</a> ;
target 属性 : 设置窗口打开方式 , 可设置两种值 ;
- _self : 默认值 , 在本窗口打开 , 原窗口关闭 ;
- _blank : 在新窗口中打开 ; <a href="https://hanshuliang.blog.csdn.net/" target="_blank">5. 新页面打开链接</a> ;
链接内容 : 链接的载体一般是文本 , 此外图片 , 表格 , 视频等 , 都可以作为链接的载体 ; <a href="https://hanshuliang.blog.csdn.net/"><img src="image.jpg" width="100"/></a> ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
    </head>
    <body>
    	<a href="https://www.baidu.com/">1. 外部链接 : 百度一下</a>	
		<br />
		<a href="index.html">2. 内部链接 : 首页</a>
		<br />
		<a href="#">3. 空链接</a>
		<br />	
		4. 图片链接 : 
		<a href="https://hanshuliang.blog.csdn.net/"><img src="image.jpg" width="100"/></a>		
		<br />
		<a href="https://hanshuliang.blog.csdn.net/" target="_blank">5. 新页面打开链接</a>	
    </body>
</html>

展示效果 :

点击链接 1 , 原窗口消失 , 弹出百度页面 ;

点击链接 2 , 跳转到首页网页 ;

点击链接 3 , 没有任何效果 ;

点击链接 4 , 跳转到博客页面 ;

点击链接 5 , 原窗口保留 , 在新窗口显示博客页面 ;

二、注释标签

如果在 HTML 页面中进行代码注释 , 则可以使用注释标签 ;

<!-- 注释内容 -->

在注释标签中的内容 , 不显示在页面中 ;

注释是给程序员看的 , 用于标注代码作用 ; 通常情况下 , 都在代码的上方一行位置添加注释 ;

注释代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
    </head>
    <body>
		<!-- 外部链接, 链接到百度搜索引擎 -->
    	<a href="https://www.baidu.com/">1. 外部链接 : 百度一下</a>	
		<br />
		<!-- 内部链接, 链接到本项目的其它页面 -->
		<a href="index.html">2. 内部链接 : 首页</a>
		<br />
		<!-- 空链接, 不进行跳转 -->
		<a href="#">3. 空链接</a>
		<br />	
		<!-- 图片链接, 点击图片进行跳转 -->
		4. 图片链接 : 
		<a href="https://hanshuliang.blog.csdn.net/"><img src="image.jpg" width="100"/></a>		
		<br />
		<!-- 在新页面打开链接 -->
		<a href="https://hanshuliang.blog.csdn.net/" target="_blank">5. 新页面打开链接</a>	
    </body>
</html>

展示效果 :