HTML——标签（上）
导读
标签语义
- 学习技巧：理解标签的含义
目录
1.标题标签
<h1> </h1> //从1到6分别有六级标题
标签语义：作为标题，并依据重要性递减
特点
1.标题字体变粗，字号依次放大
2.标题独占一行
2.段落标签&换行标签
段落标签
<p> </p>
标签语义：分割段落
特点
1.文本会根据浏览器大小自动换行
2.段落与段落之间有间距
3.换行标签
<br />
标签语义：强制换行
特点
1.<br />是单个标签，放在需要换行的文字开头
2.行与行之间没有间距
4.文本格式化标签
语义 标签 说明 粗体 <strong> </strong>或者<b> </b> 前者语义更强烈 斜体 <em> </em>或<i> </i> 前者语义更强烈 删除线<del> </del>或<s> </s> 前者语义更强烈 下划线 <ins> </ins>或<u> </u> 前者语义更强烈
5.布局标签
<div> </div>
标签语义：装内容的大盒子
<span> </span>
标签语义：装内容的小盒子
特点
1.<div>用来布局，一行只能放一个
2.<span>用来布局，一行可以放多个
5.图像标签
<img src="图像URL" />
标签语义：引用图像
特点
1.src是<img>标签的必须属性，用于指定图像文件的路径和文件名
图像标签的其他属性
属性 属性值 说明
src 图片路径 必须属性 alt 文本 替换文本（图像不能显示的文字） title 像素 提示文本（鼠标位于图像上显示的文字） width 像素 设置图像的宽度 height 像素 设置图像的高度 border 像素 设置图像的边框粗细
注意
①图像标签可以拥有多个属性，必须写在标签名的后面
②属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
③属性采取键值对的格式，即key="value"的格式，属性="属性值"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图像标签</title>
</head>
<body>
<h4>图像标签的使用</h4>
<h4>alt 替换文本 图像显示不出来的时候用文字替换</h4>
<img src="我老婆1.jpg" alt="这是我老婆"/>
<h4>title 提示文本 鼠标放在图像上提示的文字</h4>
<img src="我老婆.jpg" title="这是我的老婆大和守安定"/>
<h4>width 给图像设置宽度</h4>
<img src="我老婆.jpg" width="250"/>
<h4>height 给图像设置高度</h4>
<img src="我老婆.jpg" height="100"/>
<h4>border 给图像设定边框</h4>
<img src="我老婆.jpg" border="15"/>
</body>
</html>
图像标签的路径
1.相对路径
以引用文件所在的位置为参考基础，而建立出的目录路径，即图片相对于HTML页面的位置
| 相对路径分类 | 符号 | 说明 |
| 同一级路径 | 与HTML文件同一级，如<img src="baidu.gif" /> | |
| 下一级路径 | / | 在HTML文件下一级，如<img src="images/baidu.gif" /> |
| 上一级路径 | ../ | 在HTML文件上一级，如<img src="../baidu.gif" /> |
2.绝对路径
指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
如"D:\web\img\logo.gif"或完整的网络地址"http://www.itcast.cn/images/logo.gif"
注意
本地文件使用"\"，网络地址使用"/"
6.超链接标签
<a herf="跳转目标" target="目标窗口的弹出方式"> 文本或图像</a>
标签语义：引出其他链接
| 属性 | 作用 |
| herf | 用于指定连接目标的url地址（必须属性） |
| target | 用于指定链接页面的打开方式（其中_self为默认值，_blank为在新窗口打开） |
链接分类
1.外部链接：如<a href="http://www.baidu.com">百度</a>
2.内部链接：网站页面之间的相互链接，直接链接页面名称即可，如<a href="index.html">首页</a>
3.空链接：没有确定目标，如<a href="#">首页</a>
4.下载链接：下载地址中的文件或压缩包
5.网页元素链接：为网页中的文本、图像、表格、音频、视频等添加超链接
6.锚点链接：点击特定文本可以快速定位到某个位置
- 在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第二集</a>
- 找到目标位置标签，里面添加一个id属性=名字，如<h3 id="two">第二集介绍</h3>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第二个网页</title>
</head>
<body>
<h4>外部链接</h4>
<a href="http://www.qq.com" target="_blank">腾讯</a>
<br />target 打开窗口的方式 默认的值是_self当前窗口打开页面 _blank新窗口打开
<h4>内部链接</h4>
<a href="我的第一个网页.html" target="_blank">内部链接</a>
<br />网页内部页面之间的相互链接
<h4>空链接</h4>
<a href="#">空链接</a>
<h4>下载链接</h4>
<a href="我老婆.jpg">下载文件</a>
地址链接的是文件exe.或者是.zip等压缩包的形式
<h4>网页元素的链接</h4>
<a herf="http://www.baidu.com"><img src=img.jpg/></a>
</body>
</html>
7.注释标签
<!-- 注释语句 --> 快捷键：ctrl+/
标签语义：解释代码
特点
1.程序不会执行注释内容
2.仅便于开发人员理解和阅读代码
8.特殊字符
在HTML页面中，一些特殊符号很难或者不方便直接使用，此时用下面的字符替代
| 特殊字符 | 描述 | 代码 |
| 空格符 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方 | ² |
| ³ | 立方 | ³ |
ps：空格、大于号、小于号使用较多，其他使用较少，如果需要回头查阅即可
总结：
1.掌握标签的书写注意规范
2.掌握HTML骨架标签
3.掌握超链接标签
4.掌握图片标签并区分alt和title的区别
5.掌握相对路径的三种形式
（本文是根据b站黑马程序员pink老师做的笔记）
612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
