块级标签

知识点

• div 标签

• p 标签

• 标题标签

• 列表标签

---

一、div 标签

在 HTML 中，div 标签是最重要的一个块级元素，它可以是组合其他 HTML 元素的容器，相当于是个透明的盒子，可以把其他标签放在里面。

div 标签没有特定的含义，它主要是用于实现页面布局操作。如果与 CSS 一同使用，div 标签可用于对内容块设置样式属性。

同学们有没有发现这个特性有点像我们之前介绍的 span 标签，它们的区别在于 span 是行内元素，可以和其他元素共处一行，而 div 是块级元素，无论大小都不允许其他元素占自己的地盘。

div 标签的使用格式如下所示：

<div></div>

二、p 标签

对于段落标签，有一个可选的属性 align，用于表示段落相对浏览器窗口在水平位置上的对齐方式。它有三个可取值，每个可取值的含义如表所示：

属性值	说明
left	段落左对齐
right	段落右对齐
center	段落居中对齐

三、标题标签

页面上用于标题显示的 <hn> 系列标签。在 HTML 中一共有六级标题，用 <h1> ~ <h6> 来表示，其中 <h1> 的标题字号最大，依次递减。

在浏览器解析标题标签时，会将标题内容设为一个段落，字体设为黑体，字号大小根据 n 值的大小确定。

四、列表标签

• 无序列表
• 有序列表
• 自定义列表

1.有序列表

有序列表就是使用项目符号来标识项目，比如日常我们需要步骤化的操作，可以使用有序列表来表示。

其基本用法为：

<ol>
  <li>表一</li>
  <li>表二</li>
  <li>表三</li>
</ol>

我们可以使用 type 属性来改变排序符号，取值如下所示：

属性值	意义
A	用大写字母作为排序符号
a	用小写字母作为排序符号
I	用大写罗马字符作为排序符号
i	用小写罗马字符作为排序符号
1	用数字作为排序符号

2.无序列表

在 HTML 文档中，所谓无序列表，是指以实心圆 ●（默认）、空心圆 ○、实心方块 ■ 开头的，没有顺序的列表项目。比如，有时候我们会用无序列表的形式来做一个总结，这样会让内容看起来更加清晰。

基本用法为：

<ul>
  <li>表一</li>
  <li>表二</li>
  <li>表三</li>
</ul>

type 属性可以修改列表开头的符号，其取值如下：

属性值	意义
disc	实心圆 ●
circle	空心圆 ○
square	实心方块 ■

3.自定义列表

自定义列表跟前两种列表有些区别，用 dl 标签表示自定义列表，其中的 dt 是代表列表项，而 dd 是列表项的描述。比如：我们需要对列表项的内容进行解释的时候，就可以使用自定义列表了。

基本用法为：

<dl>
  <dt>表一</dt>
  <dd>表一的描述</dd>
  <dt>表二</dt>
  <dd>表二的描述</dd>
</dl>