下载掌阅APP，畅读海量书库
立即打开
内容是网页的主体，而文字是内容的载体。HTML提供了很多标签，用于对文字进行排版和修饰，从而让文字在网页中呈现美观的效果。本节将讲解HTML中文字设计的相关内容。
扫码看微课
HTML文字类型的讲解
网页最主要的内容就是文字。文字类型的标签可以帮助开发者快速对文字进行排版。在HTML中，文字类型的标签包括标题标签、段落标签、列表标签、水平线标签以及换行标签。
HTML提供了6个级别的标题标签，依次为<h1>、<h2>、<h3>、<h4>、<h5>和<h6>。这6个标题标签的字号依次递减，其语法形式如下。
<h1>标题内容</h1>
标题标签包含一个可选属性align，该属性用于修改标签的对齐方式，可选值包括左对齐（left）、右对齐（right）、居中对齐（center）和两端对齐（justify）。
【示例2-1】 在网页中依次显示6个标题。
<!DOCTYPE html > <html xmlns=＂http://www.w3.org/1999/xhtml＂> <head> <meta http-equiv=＂Content-Type＂ content=＂text/html; charset=utf-8＂ /> <title>HTML文字设计</title> </head> <body> <h1 align=＂center＂>这是标题 1</h1> <h2 align=＂right＂>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6> </body> </html>
效果如图2.7所示。
图2.7 网页中的6个标题
在HTML中，通过段落标签<p>可以将大量的文字以段落的形式在网页中展示。在一个段落中，文本默认会跟随浏览器窗口的大小自动换行，其语法形式如下。
<p>文本内容</p>
【示例2-2】 在网页中依次显示3个段落。
<!DOCTYPE html > <html xmlns=＂http://www.w3.org/1999/xhtml＂> <head> <meta http-equiv=＂Content-Type＂ content=＂text/html; charset=utf-8＂ /> <title>HTML文字设计</title> </head> <body> <p>路上只我一个人，背着手踱着。这一片天地好像是我的；我也像超出了平常的自己。</p><p>月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。</p><p>虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。</p> </body> </html>
效果如图2.8所示。从图2.8中可以看出，无论代码中的文本格式是否紧凑，在网页中都会以<p>标签所在的位置对文本进行段落形式的排版。
图2.8 网页中的3个段落
列表的使用在网页中十分常见。当网页中需要并列展示多个同层次的选项时，就可以使用列表标签<li>表示，其语法形式如下。
<li>内容</li>
在HTML中，列表标签与其他标签搭配使用可以生成无序列表、有序列表和定义列表3种列表。
（1）无序列表，是<ul>和<li>标签配合使用实现的列表形式，其语法形式如下。
<ul>
<li>列表内容</li>
……
<li>列表内容</li>
</ul>
（2）有序列表，是<ol>和<li>标签配合使用实现的列表形式，其语法形式如下。
<ol>
<li>列表内容</li>
……
<li>列表内容</li>
</ol>
（3）定义列表，一般用于图文混排的情况，是<dl>、<dt>和<dd>标签配合使用实现的列表形式，其语法形式如下。
<dl>
<dt>名词或图片</dt>
<dd>解释内容</dd>
……
<dt>名词或图片</dt>
<dd>解释内容</dd>
</dl>
其中，<dl></dl>标签用于指定定义列表；<dt></dt>标签用于指定名词或嵌入图片；<dd></dd>标签用于对名词或图片进行解释。
【示例2-3】 在网页中展示多种列表。
<!DOCTYPE html >
<html xmlns=＂http://www.w3.org/1999/xhtml＂>
<head>
<meta http-equiv=＂Content-Type＂ content=＂text/html; charset=utf-8＂ />
<title>列表展示</title>
</head>
<body>
<h1>饮料</h1>
<ol>
<li>红茶</li>
<li>绿茶</li>
<li>果汁</li>
</ol>
<h1>蔬菜</h1>
<ul>
<li>白菜</li>
<li>菠菜</li>
<li>土豆</li>
</ul>
<h1>计算机硬件</h1>
<dl>
<dt>CPU</dt>
<dd>中央处理器作为计算机系统的运算和控制核心，是信息处理、程序
运行的最终执行单元。</dd>
<dt>内存条</dt>
<dd>随机存取存储器的缩写：RAM，也叫主存，是与CPU直接交换数据
的内部存储器。</dd>
</dl>
</body>
</html>
效果如图2.9所示。
图2.9 网页中的多种列表
在网页中，将段落或者网页分隔，可以使网页结构清晰。这时，可以使用水平线标签<hr/>。该标签属于单标签，使用其属性值可以改变水平线的样式，其语法形式如下。
<hr属性=＂属性值＂ />
<hr/>标签的属性如表2.2所示。
表2.2 <hr/>标签的属性
【示例2-4】 为网页添加多条水平线。
<!DOCTYPE html > <html xmlns=＂http://www.w3.org/1999/xhtml＂> <head> <meta http-equiv=＂Content-Type＂ content=＂text/html; charset=utf-8＂ /> <title>水平线</title> </head> <body> <h3>居中</h3> <hr align=＂center＂ /> <h3>加粗无阴影</h3> <hr size=＂5px＂ noshade=＂noshade＂ /> <h3>加粗有阴影</h3> <hr size=＂5px＂/> <h3>宽度边长两倍</h3> <hr width=＂200%＂ /> </body> </html>
效果如图2.10所示。
在网页中对文本进行强制换行或添加一个空白行，需要用到换行标签<br />。该标签属于单标签，可以在文本结尾处实现文本强制换行的效果，并显示一个空行。
【示例2-5】 为文本添加换行效果。
<!DOCTYPE html > <html xmlns=＂http://www.w3.org/1999/xhtml＂> <head> <meta http-equiv=＂Content-Type＂ content=＂text/html; charset=utf-8＂ /> <title>换行与空行</title> </head> <body> 两行之间 <br /> <br /> <br /> 实现添加3行空白行效果 <br /> 这里<br />实现<br />换行<br />效果<br />。 </body> </html>
效果如图2.11所示。
图2.10 为网页添加多条水平线
图2.11 为文本添加换行效果
扫码看微课
文本的控制、语义及特殊字符讲解
在网页展示中，为了强调某些内容，可以改变文本样式。例如，将关键字标红，把网页主题字体放大，将注意事项字体缩小等。
开发者在指定网页文本字体时建议使用常用的字体，这样客户端在访问网页时才能显示对应的字体样式。如果用到特殊的字体，则建议使用图片代替。
在 HTML 中使用标签<font>的属性可以控制对应文本的样式，其语法形式如下。
<font 属性=＂属性值＂>文本内容</font>
其中，属性主要包括文本的字体、字号、颜色等，<font>标签的属性如表2.3所示。
表2.3 <font>标签的属性
【示例2-6】 使用<font>标签属性修改文本的字号、字体与颜色。
<!DOCTYPE html > <html xmlns=＂http://www.w3.org/1999/xhtml＂> <head> <meta http-equiv=＂Content-Type＂ content=＂text/html; charset=utf-8＂ /> <title>修改文本字号字体颜色</title> </head> <body> <font size=＂+7＂ face=＂Verdana, Geneva, sans-serif＂>山居秋暝</font><br /> <br /> <font face=＂Georgia, Times New Roman, Times, serif＂>空山新雨后，天气晚来秋。</font> <font color=＂#CC3333＂ face=＂Courier New, Courier, monospace＂>明月松间照，清泉石上流。</font><br /> <font color=＂rgb(0,153,255)＂ face=＂Arial, Helvetica, sans-serif＂>竹喧归浣女，莲动下渔舟。</font> <font color=＂red＂ face=＂Tahoma, Geneva, sans-serif＂>随意春芳歇，王孙自可留。</font><br /> </body> </html>
效果如图2.12所示。从图2.12可以看出，古诗标题的字号与字体发生了改变，并且每一句古诗的颜色和字体也不同。
图2.12 设置文本的字号、字体与颜色
文本语义的控制是指着重对某段内容或文字进行语气上的强调，常用的方式是为文本添加加粗、斜体、下划线、高亮等样式。设置这些样式需要使用格式化标签，如表2.4所示。
表2.4 格式化标签
【示例2-7】 使用格式化标签修改文本样式。
<!DOCTYPE html > <html xmlns=＂http://www.w3.org/1999/xhtml＂> <head> <meta http-equiv=＂Content-Type＂ content=＂text/html; charset=utf-8＂ /> <title>文本格式化标签</title> </head> <body> <font size=＂36px＂ face=＂Verdana, Geneva, sans-serif＂><b>山居秋暝</b></font><br /> <br /> <font size=＂2px＂><i>作者：王维</i></font><br /> <br /> <font face=＂Georgia, Times New Roman, Times, serif＂>空山新雨后，天气晚来秋。</font> <font face=＂Courier New, Courier, monospace＂>明月<mark>松</mark></font>间照，清泉石上流。</font><br /> <font face=＂Arial, Helvetica, sans-serif＂><u><mark>竹</mark>喧归浣女，<mark>莲</mark>动下渔舟。</u></font> <font face=＂Tahoma, Geneva, sans-serif＂><s>随意春芳歇，王孙自可留。</s></font><br /> <p><cite>唐诗300首</cite></p> </body> </html>
效果如图2.13所示。从图2.13可以看出，古诗的标题为加粗样式，作者信息为斜体，描写植物的文本采用了高亮显示；第3句古诗添加了下划线，第4句古诗添加了删除线；在最后一行使用斜体表示该古诗引自《唐诗300首》。
图2.13 格式化标签修改文本样式
特殊字符包括常用的数学符号、单位符号、制表符等。在网页开发过程中，如果将特殊字符插入两个标签之间，就会被浏览器解析为普通文本进行处理，特殊字符会失去其本身的含义。例如，在<p>标签之间的文本中输入空格，在网页展示时，空格是不会显示的。
因此，HTML提供了对应的符号用于替代常用的特殊字符，如表2.5所示。
表2.5 特殊字符
【示例2-8】 使用特殊字符展示对应的符号。
<!DOCTYPE html > <html xmlns=＂http://www.w3.org/1999/xhtml＂> <head> <meta http-equiv=＂Content-Type＂ content=＂text/html; charset=utf-8＂ /> <title>特殊字符</title> </head> <body> <h1>   山居秋暝</h1> <p> 空山新雨后，天气晚来秋。</p> <p>    明月松间照，清泉石上流。</p> <p>    竹喧归浣女，莲动下渔舟。</p> <p>    随意春芳歇，王孙自可留。</p> ©XXX公司 ®；小机灵古诗 </body> </html>
效果如图2.14所示。从图2.14可以看到，在第一句古诗的<p>标签之间直接输入的空格在网页中不会显示。而在古诗的后三句中使用符号 ；指代空格符，可以使古诗的左侧添加空格。在网页的倒数第二行使用符号©；表示版权符号©，使用符号®；表示注册商标符号®。
图2.14 特殊字符的使用