刚才我们完成了网页中标题与段落元素的学习。在实际开发时，一个网页通常会包含多个相同元素，比如多个标题与段落。
对于相同标签的元素，我们又该如何区分定位呢？
| 对多个相同的标签分类 比如右图设置了七个段落元素，它们均使用相同的标签<p>。 若我们需要将A角色的台词与B角色的台词分组时，可以使用分类属性class。 |
|
为元素分类
| class 属性用来对相同的元素进行分类。 它的属性值就是每个分类的名称（类名）。名称可以设定为任意内容且该名称可以重复使用。 class 可以设置在任何元素中，是一个通用属性。 比如右边的代码： 为角色a的p元素添加，class="a"; 为角色b的p元素添加，class="b"， 再利用CSS分别为它们设置颜色。 |
|
设定唯一标识
| 除了使用class分类以外，我们还可以使用id属性为某个元素分配一个唯一的标识符。 id也是一个通用属性，它的使用方法和class类似。 但与class的区别在于，id属性的值是唯一的，类似于我们的身份证号码。 0右边的代码为"id=unlock"的p元素设定颜色。 |
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通用属性class</title> <style> #unlock{ color:green; } </style> </head> <body> <p class="a">A：宫廷玉液酒</p> <p class="b">B：一百八一杯~</p> <p class="a">A：这酒怎么样？</p> <p class="b">B：听我给你吹！</p> <p id='unlock'>点击此处解锁</p> </body> </html> |
 |
到这里，我们已经学习了<h1>、<p>、<br>三个标签，它们分别代表了标题、段落与换行三种元素。
它们经常用于处理网页中的文本内容，是最基础的文本标签。
文本格式化
| 有时我们希望为网页中的文本设置一些简单的样式，比如加粗、斜体或者下划线等。 这时可以使用HTML中的文本格式化标签。如图，右边展示了HTML中的一些相关元素。 |
|
文本格式化标签
| 这类格式化标签可以独立使用，也可以放在p元素中。 在使用时，将想要格式化的文字作为内容，放在相应的标签中即可。 如右边的代码，它同时标记了斜体、删除线、下划线与粗体。 |
|
Ps：
| 等等，刚才我们学到的文本格式化标签好像有一点特殊，例如右边的代码： p 元素标记的a、b 分为两行显示在网页中； 而b元素标记的c、d 则作为同一行显示在网页中。 | <!--一个元素占据一行--> <p>a</p> <p>b</p> <!--一行可以包含多个元素--> <b>c</b> <b>d</b>
|
其实，HTML中的元素在显示结构上又被分为两类：
第一类是类似于p元素的块级元素；
第二类是类似于b元素的行内元素。
|
|
|
块级元素
| 块级元素在浏览器显示时，通常会以新的一行开始。 块级元素中可以包含其他的行内或块级元素。 比如我们学过的 <h1>～<h6>、<p>标签都是块级元素。 |
|
行内元素
| 而行内元素在浏览器显示时，通常不会以新的一行开始，而是与其他元素在同一行显示。 比如之前提到的<b>、<i>标签。 行内元素中可以包含其他行内元素，但不能包含块级元素。 | <b>加粗</b> <i>倾斜</i>
|
本节课我们学习了以下知识：
1、网页中常见的文本元素，如标题元素与段落元素；
2、两个通用属性id与class；
3、元素的两种类型——块级元素与行内元素。
![[含文档+PPT+源码等]精品基于springboot实现的原生微信小程序酒店管理系统[包运行成功+永久免费答疑辅导]](https://img-blog.csdnimg.cn/img_convert/60c58f5a7f5a5a25dc9b1177964678b2.jpeg)
![[Linux] 逐层深入理解文件系统 （1）—— 进程操作文件](https://i-blog.csdnimg.cn/direct/1c33c6510a0f4007850a59b414f58fa4.png)
