目录
一. 标题标签
1.1 标题标签的介绍
(a) 标题(Heading) 是通过 <h1>~<h6> 标签来进行定义的，一共有六对，其中<h1></h1>定义最大的标题；<h6></h6>定义最小的标题；它们是从大到小来进行排序的。
(b) 如下代码所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>(c) 然后保存代码在浏览器中运行，即可看到如下所示的页面，其中一级标题最大，六级标题最小
1.2 标题标签的使用
(a) 标题标签通常只应用于标题，而不能使用于文本，有些时候我们希望字体大一些而去使用标题这种做法是错误的，如果希望文本字体变大，后续我们可以使用CSS选择器对标签的大小进行改变。
(b) 标题标签的位置是可以进行改变的，上面我们看到默认生成的标题都是在浏览器的最左侧，实际上可以通过属性 align = "left | center | right"进行调整，默认位于左边；
(c) 如下代码，我对二三五六级标签均进行属性设置，保存
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>一级标题</h1>
<h2 align = "center">二级标题</h2>
<h3 align = "right">三级标题</h3>
<h4>四级标题</h4>
<h5 align = "center">五级标题</h5>
<h6 align = "right">六级标题</h6>
</body>
</html>(d) 再重新打开，就可以看到下图所示的样式，一级和四级标签不设置，默认在页面最左侧；二级和五级标签属性为"center"，在页面中间；三级和六级标签属性为"right"，位于页面右侧；
1.3 快速在浏览器打开的插件
如果有小伙伴和小编一样使用的VSCode开发的前端，可以下载一个快读在浏览器打开的小插件；
如下图，可以点击左侧黄色圈出来的按钮，就会出现扩展插件，然后搜索 "open in browser"，点击 "install" 安装即可。
安装完毕之后，我们再回到代码，右键点击页面，如下所示，就会多出先两个选项，第一个想选的意思是"打开页面在默认浏览器"，第二个选项意思是"打开页面在其他浏览器"，我们选择第一个就行。点击之后就会直接跳转到浏览器并展示出我们当前写的代码的效果，非常方便，就不需要先保存然后再找到对应的html文件再去打开了，提高我们的编程效率。
二. 段落、换行、水平线标签
2.1 段落标签<p></p>
(a) 段落就是我们常说的自然段，在页面中，如果我们要对一个物品或事物进行描述，通常都会采用段落标签<p></p>来进行修饰， 和我们课本上的一个自然段类似，一对<p></p>标签就是一个自然段，两对就是两个自然段。
(b) 如下代码所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>
</body>
</html>(c) 然后在浏览器打开，就可以看到三对<p></p>标签形成的三个段落。新的段落是自带换行功能的，但有些时候，我们可能在一个段落里也希望文本能够换行，这个时候就需要用到换行标签<br>了。
2.2 换行标签<br/>
换行标签并不是成对出现的，而是单独的一个标签<br/>，我们希望从那个文本开始换行，就直接把它加在文本后面就行了。
如下代码所示，我在诗句的后面加上<br/>换行，在浏览器中展示的效果就是换行，但换行后两个诗句仍然是一个段落。
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>锄禾日当午，<br/>汗滴禾下土</p>
<p>落霞与孤鹜齐飞，秋水共长天一色</p>
<p>零落成泥碾作尘，<br/>只有香如故</p>
</body>
2.3 水平线标签<hr/>
除了段落之间的换行标签之外，有些时候为了区分不同的段落，我们可能还需要用到水平线标签<hr></hr>，它的效果就是在页面中添加一条水平线。我们在刚才的三个不同的诗句段落之间都加一个水平线用以区分
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>锄禾日当午，<br>汗滴禾下土</p>
<hr></hr>
<p>落霞与孤鹜齐飞，秋水共长天一色</p>
<hr></hr>
<p>零落成泥碾作尘，<br>只有香如故</p>
</body>效果如下图，三个诗句段落之间就会出现分割线；
此外，标题标签还可以设置多种属性，
- color：设置水平线颜色；
- width：设置水平线长度；
- size：设置水平线高度；
- align：设置水平线对齐方式(默认居中)，可取值 left 或 right。
现在我们使用这几个属性给刚才的两条分割线装饰一下；
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>锄禾日当午，<br>汗滴禾下土</p>
<hr color="red" width="900px" size="10px" align="right"></hr>
<p>落霞与孤鹜齐飞，秋水共长天一色</p>
<hr color="blue" width="800px" size="12px" align="left"></hr>
<p>零落成泥碾作尘，<br>只有香如故</p>
</body>保存重新打开，浏览器效果如下所示
三. 图片标签
3.1 <img> 标签举例
(a) 不管我们登录什么样的网站，几乎都可以看到图片。京东、淘宝、天猫，包括抖音、B站等一些视频网站的视频封面等等，都需要用到图片，图片是网页的重要组成部分。而我们如果想要呈现一张图片，其实非常简单，图片标签为<img>单标签，和换行标签<br>一样。
(b) 首先我们在项目文件夹html内部再建立一个文件夹名为 "picture"，必须遵守存放文件的文件夹和html文件在同一个文件夹下，否则会无法引用。然后随便找几张图片，如下图所示，找到三张图片分别命名为 1、2、3。png是图片的格式后缀。
(c) 然后回到开发工具中，可以看到此时项目中就有了"picture"文件夹，且有我们新增的三张图片
(d) 然后，想要在页面中呈现出刚才的图片，直接使用标签<img src="">即可，双引号中写图片在项目文件夹中的路径即可，
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>锄禾日当午，<br>汗滴禾下土</p>
<hr color="red" width="900px" size="10px" align="right"></hr>
<p>落霞与孤鹜齐飞，秋水共长天一色</p>
<hr color="blue" width="800px" size="12px" align="left"></hr>
<p>零落成泥碾作尘，<br>只有香如故</p>
<img src="picture/1.png">
<img src="picture/2.png">
<img src="picture/3.png">
</body>(e) 保存，然后重新打开，效果如下所示，
(f) 除了src 属性以外，<img> 标签还提供了很多的其它属性；
- src：图片路径和图片名称；
- alt：规定图像的替代文本；
- width：规定图像的宽度；
- height：规定图像的高度；
- title：鼠标悬停在图片上给予提示；
下面我们依次对这几个属性进行测验。
3.2 alt 替代文本属性
(a) alt:它的作用就是在图片无法正常显示的时候代替图片，举个例子如下代码，我把图片 "1.png" 改为 "1.pnng"，然后添加 alt 属性值为 "spring" 图片；
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>锄禾日当午，<br>汗滴禾下土</p>
<hr color="red" width="900px" size="10px" align="right"></hr>
<p>落霞与孤鹜齐飞，秋水共长天一色</p>
<hr color="blue" width="800px" size="12px" align="left"></hr>
<p>零落成泥碾作尘，<br>只有香如故</p>
<img src="picture/1.pnng" alt = "spring图片">
<img src="picture/2.png">
<img src="picture/3.png">
</body>(b) 刷新浏览器页面，可以看到，原本的图片因为无法被代码识别已经不能正常显示了，取而代之的就是我们 alt 中的替代文本 "spring图片"，这就是 alt 属性的作用。
3.3 width图片宽度、heght图片高度属性
上图中显示的图片是我们引用图片的原始大小，如果我们想对图片的高度或者宽度进行修改，就可以使用 width = "?px" height = "?px"对图片大小进行设置，这里我随便设置几个值
<img src="picture/1.png" alt = "spring图片" width="100px" height="80px">
<img src="picture/2.png" width="200px" height="160px">
<img src="picture/3.png" width="150px" height="120px">然后保存，刷新浏览器页面，就可以看到我们对图片的大小设置已经生效了，如下图所示
3.4 title 图片标题属性
title 就是给图片取一个名字，原本我们将鼠标放在图片上是没有任何文本显示的，使用 title 我们就可以给图片添加一个名字，或者说是图片的简单描述，如下代码所示
<img src="picture/1.png" alt = "spring图片" width="100px" height="80px" title="spring图片">
<img src="picture/2.png" width="200px" height="160px" title="前端开发图片">
<img src="picture/3.png" width="150px" height="120px"title = "SQL Server图片">然后保存，刷新浏览器，我们将鼠标随便放在一张图片上，此时我们鼠标旁边就会浮现当前图片的 title 值。
四. 文本标签
4.1 文本标签的种类
| 标签 | 描述 |
| <em> | 定义着重文字 |
| <b> | 定义粗体文字 |
| <i> | 定义斜体文字 |
| <strong> | 定义加重语气 |
| <del> | 定义删除字 |
| <span> | 没有特定的个含义，普通文本标签，为了方便后期CSS添加样式独立出来的一种文本标签 |
4.2 文本标签的展示效果
为了方便各位小伙伴观看，我们来代码简单试一下这几种标签的展示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<em>着重语气文本</em>
<br>
<b>加粗文本</b>
<br>
<i>斜体文本</i>
<br>
<strong>加重文本</strong>
<br>
<del>删除字</del>
<br>
<span>普通文本标签</span>
</body>
</html>保存，然后在浏览器打开，就可以得到如下效果。
删除字文本的效果就是文本中间被划了一条横线；普通文本标签效果就是普普通通的文本字体；
个人感觉加粗文本标签<b></b>和加重文本标签<strong></strong>没什么区别；着重语气标签<em></em>和斜体文本标签<i></i>没什么区别；实际在使用多个时候小伙伴们可以根据文字展示的需要选择不同的文本标签样式。
4.3 文本标签与段落标签嵌套
上面六种文本标签还可以和之前学过的段落标签<p></p>标签嵌套使用，通常情况下，一个段落会有很多字，有些时候我们可能会对一段话中的某一句话或者某几个字进行加粗或者和重点标记，就可以将段落标签和文本标签嵌套使用。
简单举例如下
<body>
<p>
我今天早上要<em>吃油条</em>，今天中午要<b>吃米饭</b>，今天晚上要<i>吃火锅</i>，
<br>
明天早上<strong>喝豆浆</strong>，明天中午<del>吃米饭</del>，明天晚上<span>吃米饭</span>
</p>
</body>保存，然后打开浏览器，效果如下所示，一对<p></p>段落包含六句话，每句话的吃饭都有不同的样式，就形成了标签的嵌套使用
扫一扫
4026
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
