下载掌阅APP，畅读海量书库
立即打开
文本是网站内容的集中体现，对文本进行格式设置是调整网站内容逻辑结构的基本手段。文本格式主要分为段落格式（包括列表格式）和字符格式。段落是指具有统一样式的一段文本，而字符是组成段落的基本元素，相当于段落的局部。
用于设置段落格式的标记符包括段落标记符<p>、换行标记符<br>、标题标记符<h1>～<h6>、水平线标记符<hr>。用于设置段落格式的基本属性是对齐属性align。
根据不同的情况，可以选择两种标记符控制文本的换行——<p>标记符和<br>标记符。<p>标记符用于将文档划分为段落（分为开始标记符<p>和结束标记符</p>）。而<br>标记符用于在文档中强制换行，它是自结束的标记符，一般写为<br>或<br/>。<p>标记符与<br>标记符的区别在于，前者用于将文本划分为段落，而后者用于在同一个段落中强制换行。
段落格式
正文中的段落都应使用<p>标记符进行分段，也就是说，逻辑上是段落的内容都应用<p>标记符包含，而不是用<br>标记符断开。这样做能确保HTML代码的逻辑含义正确、结构严谨，这是编写规范网页的基本要求之一。
在HTML中，用户可以通过<h n >标记符来标识文档中的标题和副标题，其中 n 是1～6的数字；<h1>标记符用于标识级别最高的标题，<h6>用于标识级别最低的标题。浏览器在解释标题标记符时，会自动改变文本的大小并将字体设为黑体，同时自动将内容设置为一个段落。
使用<h n >标记符时一定要根据网页内容的逻辑含义来用，而不是为了获得相应的格式效果（格式效果应由CSS设置）。换句话说，只有逻辑上是“一级标题”的内容才能使用<h1>标记符，而且<h2>标记符一定是在<h1>标记符之后。
在HTML中可以用添加水平线的方法分隔文档的不同部分。使用水平线将文档划分为不同的区块是一种很好的编程习惯。
添加水平线的标记符为<hr>，它与<br>类似，是自结束的标记符，一般写为<hr>或<hr/>。<hr>标记符包括size、width和noshade等属性。
size属性用于设置水平线的粗细，取值是整数，它表示以像素（pixel，px）为单位的该线的粗细程度，默认值是2。
像素是数字图像的最小单元。如光栅图像中的一个点，数字显示屏上的最小可寻址或可控制单位。
例如，要在文档中包含一条粗细为1像素的细线，则需将<hr>替换为 <hr size="1"> 。
width属性用于设置水平线的长度，取值既可以是数值（默认单位为px），也可以是该线所占浏览器窗口宽度的百分比。
例如，要生成一条100px长的水平线，HTML代码为 <hr width="100"> ；如果想将这个长度改成横跨60%的屏幕，则代码为 <hr width="60%"> 。
使用百分比作为长度单位指定水平线长度时，表示水平线占当前浏览器窗口宽度的百分比，这样我们用缩放操作更改浏览器窗口的大小时，相应水平线的长度也会随之改变。
在多数浏览器中，由<hr>标记符生成的水平线将以一种加阴影、具有立体效果的形式显示出来。但有时我们更希望使用一条简单的实线，此时就需在<hr>标记符内增加noshade属性。例如，如果要创建一条粗细为5px、长度为100px的实心水平线，对应的HTML代码如下：
<hr size="5" width="100" noshade="noshade">
像noshade这样属性的取值与属性名称相同的标记符属性，称为布尔属性。
在网页制作过程中，任何与显示效果有关的功能都应该由CSS而非HTML来实现，因此hr标记符的各种属性都是不建议使用的，相应效果都应使用CSS来设置。不过，在实际开发过程中，为了快速看到显示效果，使用HTML属性的方法偶尔可以作为一种过渡的权宜之计（在最终代码中不会存在，但测试时可以存在）。
段落对齐是常见的段落格式设置，例如，可以将一级标题用居中对齐方式显示，而将地址信息用右对齐方式显示。在HTML中，一般使用标记符的align属性设置段落对齐方式，其常见取值包括right（右对齐）、left（左对齐）、center（居中对齐）和justify（两端对齐）。
两端对齐是指将一行文本在排满的情况下向左右页边对齐，从而保证左右页边的文本不会出现类似“锯齿”的形状，该对齐方式通常用于出版物。由于绝大多数浏览器目前均不支持justify属性值，因此在网页制作时通常不使用该值。
align属性可应用于多种标记符，例如前面介绍的<p>、<h n >、<hr>等。对于不同的标记符，默认的align属性值不同。<p>和<h n >标记符的默认align属性值是left，而<hr>标记符的默认align属性值是center。
align属性在基于Web标准的网页制作中已经废弃，请在学习了CSS技术之后避免使用该属性。
以下通过一个具体的实例说明以上各标记符和属性的用法。请在“记事本”中输入以下代码，并将其保存为HTML文件。
<html> <head><title>李商隐</title></head> <body> <h1 align="center">李商隐</h1> <hr width="80%" size="1" /> <h2 align="center">锦瑟</h2> <p align="center">锦瑟无端五十弦，一弦一柱思华年。<br />庄生晓梦迷蝴蝶，望帝春心托杜鹃。<br />沧海月明珠有泪，蓝田日暖玉生烟。<br />此情可待成追忆，只是当时已惘然。</p> <h2 align="center">夜雨寄北</h2> <p align="center">君问归期未有期，巴山夜雨涨秋池。<br />何当共剪西窗烛，却话巴山夜雨时。</p> <h2 align="center">无题（一）</h2> <p align="center">昨夜星辰昨夜风，画楼西畔桂堂东。<br />身无彩凤双飞翼，心有灵犀一点通。<br />隔座送钩春酒暖，分曹射覆蜡灯红。<br />嗟余听鼓应官去，走马兰台类转蓬。</p> <h2 align="center">无题（二）</h2> <p align="center">相见时难别亦难，东风无力百花残。<br />春蚕到死丝方尽，蜡炬成灰泪始干。<br />晓镜但愁云鬓改，夜吟应觉月光寒。<br />蓬山此去无多路，青鸟殷勤为探看。</p> </body> </html>
在浏览器中打开该网页，效果如图2-1所示。
图2-1 设置段落格式网页效果
字体格式（包括大小、颜色、字体等）属于显示效果，通常使用CSS技术来进行设置（详见第3章和第6章），但在HTML中仍然可以用下面两种方式设置字体格式。
字体格式和列表格式
所谓物理字符样式，是指标记符本身就说明了所修饰字符的效果。例如，<b>标记符表示粗体，<sub>标记符表示下标。可以这么理解：b是bold（粗体）这个单词的首字母，而sub是subscript（下标）这个单词的前3个字母。
常用的物理字符样式对应的标记符及其功能如表2-1所示。
表2-1 常用的物理字符样式对应的标记符及其功能
使用这些物理字符样式时，只需将设置格式的字符括在标记符之间即可。例如，HTML代码<p>H<sub>2</sub>O</p>在网页中将显示为H 2 O。
物理字符样式由于是用HTML的方式修饰网页内容，不符合“内容与表现分离”的原则，因此应尽量避免使用。例如，HTML5规范对<b>标记符的描述是：在没有其他更合适的标记符时，才应该把<b>标记符作为最后的选项；应该使用<h1>～<h6>标记符来表示标题，使用<em>标记符来表示强调的文本，使用<strong>标记符来表示重要文本，使用<mark>标记符来表示标注的或突出显示的文本。
所谓逻辑字符样式是指标记符本身具有所修饰效果的逻辑含义。例如，<address>标记符本身的逻辑意义为“地址”，但并没有说明具体的物理效果。在使用逻辑字符样式时，应通过标记符表示内容的逻辑含义，使用CSS确定具体的显示效果。
常用的逻辑字符样式如表2-2所示。
表2-2 常用的逻辑字符样式
使用这些逻辑字符样式时，将要设置格式的字符括在标记符之间即可。例如，代码“<p>这里是<strong>需要强调的内容</strong></p>”会将在网页中以粗体方式强调内容。
由于逻辑字符样式符合“内容与表现分离”的原则，因此是替换物理字符样式的较佳选择。例如，用<strong>标记符替换<b>标记符，用<em>标记符替换<i>标记符。
列表是一种非常有效的展示信息的方式，能够增强文字内容的逻辑性。本节介绍如何在HTML中设置各种列表格式，包括有序列表、无序列表，以及嵌套列表。
有序列表也称数字式列表，它是一种在各项内容前显示有数字或字母的缩排列表，用来表示文本内容的前后顺序关系。例如，一个操作步骤列表（如菜谱）在逻辑上就应该是一个有序列表。
创建有序列表需要使用有序列表标记符<ol>和列表项标记符<li>，基本语法如下：
<ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ol>
ol标记符的type属性可用来设置数字序列样式，属性值如表2-3所示。
表2-3 有序列表的type属性值
例如，以下代码将创建一个以大写罗马数字排序的列表：
<ol type="I"> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ol>
用type属性设置列表类型显然也属于“设置显示效果”问题，建议使用CSS替代。
无序列表也称强调式列表，它是一种在各项内容前显示有特殊项目符号的缩排列表，用于表示并列的关系。例如，网站的导航条一般而言就应该是一个无序列表（只不过导航条有时显示为横向，而且没有列表符号，如何设计导航条请参见第6章）。
创建无序列表需使用无序列表标记符<ul>和列表项标记符<li>。与<ol>标记符类似，<ul>标记符也包含一个type属性，用于控制列表项前特殊符号的显示。无序列表中type属性的取值有3种：disc表示实心圆，为默认值；circle表示空心圆；square表示实心或空心的方块（取决于浏览器）。
因此，创建无序列表的基本语法如下：
<ul type="disc|circle|square"> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul>
如果把整个列表作为某个列表项下的内容，则能形成嵌套列表。有序列表和无序列表都可以嵌套，也可以互相嵌套，如以下实例代码所示（效果见图2-2）：
<html>
<head><title>混合嵌套列表</title></head>
<body>
<h1>如何开始玩《王者荣耀》？</h1>
<hr />
<ol>
<li>选择英雄：</li>
<ul type="square">
<li> 坦克（项羽、程咬金等）</li>
<li> 法师（诸葛亮、貂蝉等）</li>
<li> 射手（后羿、孙尚香等）</li>
<li> 战士（花木兰、杨戬等）</li>
<li> 刺客（孙悟空、阿珂等）</li>
<li> 辅助（鬼谷子、张飞等）</li>
</ul>
<li>组队战斗！</li>
</ol>
</body>
</html>
图2-2 混合嵌套列表网页效果