第4章　文字布局

文字布局指对文字进行处理并设置样式。文字布局在网页中的用途是必不可少的，主要涉及文章的段落、列表等，一篇文章在网页中的美观与文字的布局有很大关系。本章主要从HTML的布局标记作讲解，学完本章的内容，将会掌握以下内容：

❑行的控制；

❑文字对齐；

❑段落设置；

❑列表；

❑文字布局手把手。

4.1　行的控制

有时在页面中要对文字的行进行控制或处理，如设置其在某个位置换行、文本对齐等，对这行的文本设置不同的样式，因此学习行的控制是很重要的。行的控制主要分为换行控制和不换行控制。

4.1.1　换行控制

仔细想想，在前面学习的标记是否与行有联系呢？例如空一行出来。是的，就是前面学习过的＜p＞标记对。在这里告诉读者，＜p＞也可以单独使用，语法代码如下。

文字一＜p＞文字二

意思是文字一后面有一对＜p＞，简写为＜p＞，从网页上看，两行文字中间空出一行，也就是＜p＞的作用。代码4.1说明了行的控制。

代码4.1　源代码\第4章\p的用法.html

———————————————文件名：p的用法.html———————————————

01 ＜html＞

02 ＜head＞

03 ＜title＞＜p＞的用法＜/title＞

04 ＜/head＞

05 ＜body＞

06 ＜！—下面一行表示在文本中插入标记＜p＞—＞

07 文字一＜p＞文字二

08 ＜/body＞

09 ＜/html＞

【代码解析】代码4.1的第7行说明在文字中间插入标记＜p＞，使文本到此处中断本行，另起一段，效果如图4.1所示。

在前面也学过一个标记，＜br＞—强制换行符。标准的写法如下。

＜！—下面一行表示换行标记—＞

＜br/＞

当然，很多人喜欢写成＜br＞，这在语法上没有错，但最好是用标准写法。如果存在多个＜br＞，会出现多行空行，请读者思考为什么。代码4.2是表示＜br/＞的用法。

代码4.2　源代码\第4章\br的用法.html

—————————————-文件名：br的用法.html————————————————

01 ＜html＞

02 ＜head＞

03 ＜title＞＜p＞的用法＜/title＞

04 ＜/head＞

05 ＜body＞

06 文字一

07 ＜！—下面一行表示多个换行符—＞

08 ＜br＞

09 ＜br＞

10 ＜br＞

11 ＜br＞

12 文字二

13 ＜/body＞

14 ＜/html＞

【代码解析】在代码第6～12行中的两行文字中间加了4个换行符，即出现3个空行（其中第1个换行标记表示在第1行中换行，其他的表示在空行中换行），强制换行后的效果如图4.2所示。

图　4.1　＜p＞的用法

图　4.2　强制换行