Web前端开发笔记——第二章 HTML语言 第六节 区域标签列表标签
Posted 晚风(●•σ )
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web前端开发笔记——第二章 HTML语言 第六节 区域标签列表标签相关的知识，希望对你有一定的参考价值。
目录
一、区域标签
（一）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、自定义列表
自定义列表中所有列是由<dl></dl>标签包围的，其中每列用 <dt></dt>标签表示，且每列的描述用 <dd></dd> 标签表示，可以使用该标签直接对项目和注释进行组合。
例如，在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>
运行结果如下：
结语
以上就是全部内容，篇幅较长，感谢您的阅读和支持，若有表述或代码中有不当之处，望指出！您的指出和建议能给作者带来很大的动力！！！
以上是关于Web前端开发笔记——第二章 HTML语言 第六节 区域标签列表标签的主要内容，如果未能解决你的问题，请参考以下文章
Web前端开发笔记——第二章 HTML语言 第一节 标签元素属性
Web前端开发笔记——第二章 HTML语言 第十一节 语义标签
Web前端开发笔记——第二章 HTML语言 第七节 表格标签
Web前端开发笔记——第二章 HTML语言 第五节 图像标签