文字布局就是使网页中的文字合理分隔、排列有序或按设计者想要的格式去布局，对于这些要求，在HTML语言中，可以使用<HR>标签对文本内容进行分割，使用列表对文本内容进行整齐排列，使用<PRE>标签让指定的文本内容以指定的格式在网页中显示。下面就分别介绍使用不同的标签对文本内容进行布局。

本节单词记忆：标签 1.hr 2.ul 3.ol 4.li 5.pre 属性 1.type

网页学习网提示：html语言非常简单，不需要逻辑理解，而绝大部分朋友觉得它难以掌握，90%的原因在于英语单词不过关，所以每节记忆几个单词是非常有必要的。

一、如何使用内容分隔<HR>标签

<HR>（水平线）标签用于在页面上绘制水平线。此标签只有开始标签，没有结束标签，可使用属性控制水平线的显示。

语法:

其中，size用来指定水平线的高度，以像素为单位；color可用来设置水平线的颜色；width用于改变水平线的宽度，可以以像素为单位，也可以是窗口的百分比

示例1:

示例1在浏览器中预览效果如图1所示。

图1 水平线效果

小经验：如何制作垂直线呢？很简单，把<HR size=“300” coIor=”red” width=”1”>中的width值设为1，size的值稍微设大点即可。不过，在不同浏览器中显示的效果还不一样，这里指的是在IE中显示的情况。

二、如何使用列表

在HTML文档中可创建以下不同类型的列表：

● 无序列表

● 有序列表

1.无序列表

无序列表就是“项目列表”。列表项前面带有项目符号，包含在无序列表标签<UL>…</UL>内。列表中每项都用列表标签<LI>，其中LI表示列表项，结束标签</LI>为可选项。

语法:

其中，type属性决定了列表项开始的符号，它可以取disc（默认值，表示实心圆点）、circle（空心圆环）、square（空心正方形）这3个值。

2.有序列表

有序列表包含在<OL>…</OL>标签内。有序列表也显示列表项，区别在于有序列表的列表项以自动生成的顺序显示。

语法:

其中，type属性决定有序列表的序号类型，它可以取如下5个值：1、a、A、i、I，分别表示数字序列、小写英文字母序列、大写英文字母序列、小写罗马数字序列、大写罗马数字序列。

示例2:

示例2在浏览器中预览效果如图2所示，有序列表项前有数字序号，而无序列表项前都有空心圆环项目符号。

图2 有序列表和无序列表效果

三、如何使用预格式文本<PRE>标签

<PRE>标签用于显示预先在HTML代码中已定义好格式的文本。当文本显示在浏览器中时，会遵循已在HTML源文档中定义的格式。使用<PRE>标签显示HTML文档，如示例3所示。

示例3:

<PRE>标签的效果如图3所示。

图3 <PRE>标签效果

本节作业：

制作如下图网页。

注意事项：

1.结合前几节所学知识，灵活应用PRE。

2.分清有序列表和无序列表，type="A"可使有序列表如图显示。

网页学习网提示：光看教程是无法让你掌握HTML知识，最好是完成作业后才进入下一次教程，动起手来吧！

点击下载第一章案例及作业资源 返回《HTML入门经典》教程列表