文章目录
- 一、链接标签
- 二、注释标签
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>;
- 外部链接 : 连接到 外部网址 , 如 百度搜索引擎 https://www.baidu.com/ ;
- 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>展示效果 :
在这里插入图片描述