2.1 常见的块级标签

块级标签，顾名思义，此类标签在网页中显示为块。块级标签一般独占一行，新的块级标签将从新的一行开始排列，它可以容纳内联元素和其他块级元素。

2.1.1 ＜h1＞＜/h1＞...＜h6＞＜/h6＞：标题标签

标题标签的作用是设置段落标题的大小，共设置了6级，从1级到6级每级标题的字体大小依次递减。

基本语法如下：

＜h1＞标题文字＜/h1＞

代码示例如下：

效果如图2-1所示。

2.1.2 ＜hr/＞：水平线标签

水平线标签的作用是添加水平分隔线，让页面更容易区分段落。

基本语法如下：

＜hr/＞

代码示例如下：

效果如图2-2所示。

2.1.3 ＜p＞＜/p＞：段落标签

使用段落标签可以区分段落，不同的段落间会自动增加换行符，段落上下方各会有一个空行的间隔。

基本语法如下：

＜p＞段落文字＜/p＞

代码示例如下：

效果如图2-3所示。

2.1.4 ＜br/＞：换行标签

使用换行标签可以控制段落中文字的换行显示。一般的浏览器会根据窗口的宽度自动将文本进行换行显示。

基本语法如下：

＜br/＞

代码示例如下：

效果如图2-4所示。

2.1.5 ＜blockquote＞＜/blockquote＞：引用标签

使用引用标签来表示引用的文字，同时会将标签内的文字缩进显示。其cite属性表明引用的来源，一般表明引用网址。

基本语法如下：

＜blockquote cite="http：//www.jredu100.com"＞引用的文字＜/blockquote＞

代码示例如下：

效果如图2-5所示。

2.1.6 ＜pre＞＜/pre＞：预格式标签

预格式标签可以将文字按照原始的排列方式进行显示。

基本语法如下：

＜pre＞需要按原格式显示的文字＜/pre＞

代码示例如下：

效果如图2-6所示。

2.1.7 ＜ul＞＜li＞＜/li＞＜/ul＞：无序列表标签

无序列表是将文字段落向内缩进，并在每个列表项前面加上圆形（●）、空心圆形（〇）或方形（■）等符号，以达到醒目的效果。由于无序列表没有顺序编号，而是采用项目符号的形式，所以又被称为符号列表。

基本语法如下：

代码示例如下：

效果如图2-7所示。

2.1.8 ＜ol＞＜li＞＜/li＞＜/ol＞：有序列表标签

有序列表是将文字以特定的顺序来进行排列，每个列表项会向内缩进，并且它们之间以编号来标记，比如1、2、3、…。

基本语法如下：

＜ol＞标签的属性见表2-1。

编号样式的属性值见表2-2。

代码示例如下：

效果如图2-8所示。

2.1.9 ＜dl＞＜/dl＞：定义列表标签

定义列表适用于对名词、概念或主题的定义，第一部分是名词、概念或主题，并且通常只有一项，第二部分是相应的解释和描述，可以有多项。

基本语法如下：

代码示例如下：

代码运行效果如图2-9所示。

2.1.10 ＜div＞＜/div＞：分区标签

＜div＞标签可定义文档中的分区或节，将文档分割为独立的、不同的部分。它是可用于组合其他HTML5标签的容器。除此之外，由于它属于块级标签，浏览器会在其前后换行显示。

＜div＞标签的一个常见的用途是文档布局。它可以取代使用表格定义布局的老式方法。如果与CSS一同使用，＜div＞标签可用于对大的内容块设置样式属性。

基本语法如下：

＜div＞这是一个div＜/div＞

代码示例如下：

代码运行效果如图2-10所示，其中涉及的CSS相关知识将在后续章节详细讲解。