一、区域标签
（一）div标签的定义
div标签是成对使用的，可将元素即将一些内容组合在一起形成一个区域，例如下列导航栏、分栏、广告都是一个个区域。可以这样说，div标签常用于组合块级元素，方便在后续通过 CSS 语言来对其格式化，且区域可以叠加。
<div></div>
在解析html文件时，浏览器会默认在 div 标签的前后进行一个换行处理。
（二）div标签的属性
这里主要介绍两个属性，即id属性和style属性，其中id属性代表该div标签区域的名称，它表示为id=""，而style属性代表区域的样式，如区域的大小、颜色等等，表示为style=""。
例如，下列html代码中，设定id属性，两个区域名称为container1和container2；设定style属性中背景颜色为灰色（#808080）和蓝色（#0000FF）、区域高宽度：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>my page</title> </head> <body> <div id="container1" style="background-color:#808080;width:350px;height:180px"> <h1>导航栏</h1> <p>Web前端开发</p> <p>计算机网络</p> <p>数据库原理与应用</p> <div id="container2" style="background-color:#0000FF;width:350px;height:180px"> <h1>最新文章</h1> <p>数据库原理与应用第一章</p> <p>数据库原理与应用第二章</p> </div> </body> </html>
运行结果如下：
二、列表标签
（一）列表标签的定义
列表标签分为有序列表、无序列表和自定义列表标签。列表中不仅仅能是文本，也可以是图片、链接等等或者嵌套新的列表。
（二）列表标签的类型
1、有序列表
（1）有序列表的定义
有序列表由<ol></ol>标签包围，其中各列用<li></li>表示，经浏览器解析后其每列带有数字标记列数。
例如，在vscode中下列html代码，如下：
<!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>Document</title> </head> <body> <ol> <li>星期一</li> <li>星期二</li> <li>星期三</li> </ol> </body> </html>
运行结果如下，我们可以看到“星期一”、“星期二”、“星期三”前面都带有数字标记：
（2）有序列表的属性
若不想使用阿拉伯数字进行标记，可以通过添加<ol></ol>标签的type属性，对有序列表中各列前面的标记进行更改。默认情况下type属性可以不用添加，因为默认的属性是type=“1”，它表示的是阿拉伯数字。
比如设置大写或者小写罗马数字，表示为<ol type="I"></ol>或<ol type="i"></ol>；设置大写或者小写英文，表示为<ol type="A"></ol>或<ol type="a"></ol>。
例如，在vscode中下列html代码，如下：
<!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>Document</title> </head> <body> <ol type="1"> <li>星期一</li> <li>星期二</li> <li>星期三</li> </ol> <ol type="I"> <li>星期一</li> <li>星期二</li> <li>星期三</li> </ol> <ol type="i"> <li>星期一</li> <li>星期二</li> <li>星期三</li> </ol> <ol type="A"> <li>星期一</li> <li>星期二</li> <li>星期三</li> </ol> <ol type="a"> <li>星期一</li> <li>星期二</li> <li>星期三</li> </ol> </body> </html>
运行结果如下：
2、无序列表
（1）无序列表的定义
无序列表与有序列表差不多，只不过其所有列是由<ul></ul>标签包围的，各列仍然是
<li></li>标签表示的，但经浏览器解析后其每列前带有小圆点标记。
例如，在vscode中下列html代码，如下：
<!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>Document</title> </head> <body> <ul> <li>星期一</li> <li>星期二</li> <li>星期三</li> </ul> </body> </html>
运行结果如下：
（2）无序列表的属性
无序列表也有属性，不过在HTML5中不支持，可以通过使用 CSS 语言来定义不同类型的无序列表标记，这里不进行展开。
3、自定义列表
自定义列表中所有列是由标签包围的，其中每列用 标签表示，且每列的描述用 标签表示，可以使用该标签直接对项目和注释进行组合，其实自定义列表也是Web语义化中的一种标签。
例如，在vscode中下列html代码，如下：
<!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>Document</title> </head> <body> <dl> <dt>星期一：</dt> <dd>每周的第一天</dd> <dt>星期二：</dt> <dd>每周的第二天</dd> <dt>星期三：</dt> <dd>每周的第三天</dd> </dl> </body> </html>
运行结果如下：
（三）列表标签的嵌套
列表标签可以进行嵌套。
例如，在vscode中下列html代码，如下：
<!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>Document</title> </head> <body> <ol> <li> <ul> <li>星期一</li> </ul> </li> <li> <ul> <li>星期二</li> </ul> </li> <li> <ul> <li>星期三</li> </ul> </li> </ol> </body> </html>
运行结果如下：
