第3章 网页文本与段落信息组织
学前必读：
文本是网页的基本组成部分，也是视觉传达最直接的方式，运用经过精心处理的文字材料，完全可以制作出效果很好的版面，而不需要任何图形，本章主要讲述文字格式、段落格式和水平线的使用方法等。通过对本章的学习，读者可以掌握如何建立与制作出编排有序、整齐美观的网页格式文本，来提高文字的艺术表现力。
本章重点：
● 文本基本标记
● 标题元素标记
● 段落元素标记
● 文本的间隔和布局
● 水平分隔线元素标记
● 文本的样式设置
3.1 文本基本标记
在所浏览的各种各样的网页中，极少看见没有文字的网页。文字在网页中可以起到信息传递、导航以及交互等作用。<font>标记用来控制字体、字号和颜色等属性，它是HTML中最基本的标记之一，下面学习<font>标记的使用。
3.1.1 字体属性face
字体使用是网页设计中不可或缺的一部分。经常地，我们希望在网页中使用某一特定字体，但是该字体并非主流操作系统的内置字体，这样用户在浏览页面的时候就有可能看不到真实的设计。
face标记用于设置文本所采用的字体名称，使用者的浏览器中只有安装了设置的字体后，才可以正确显示，否则这些特殊的字体会被浏览器中的普通字体所代替。
基本语法：
<font face="字体的名称">…</font>
语法介绍：
在该语法中，face属性用来定义字体，任何安装在操作系统中的文字都可以显示在浏览器中，可以给face属性一次定义多个字体，字体直接使用“，”分割开，浏览器在读取字体时，如果第1种字体不存在，则使用第2种字体代替，以此类推。如果设置的几种字体在浏览器中都不存在，则会以默认字体显示。
案例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>字体属性</title>
</head>
<body>
<p><font face="宋体">一个人的快乐，不是因为他拥有的多，而是因为他计较的少。</font></p>
<p><font face="微软繁魏碑">心量狭小，则多烦恼，心量广大，智慧丰饶。</font></p>
<p><font face="经典中圆简">择善人而交，择善书而读，择善言而听，择善行而从。</font></p>
</body>
</html>
代码分析：
在代码中，加粗的代码标记分别用于设置不同的字体，在浏览器中浏览，效果如图3.1 所示，可以看到应用了不同的文字效果。
图3.1 设置不同的字体效果
3.1.2 字号属性size
文字的大小是引起用户注意的一个因素，使用<font>标记中的size属性可以设置文字大小。
基本语法：
<font size="文字大小">…</font>
语法介绍：
文字的大小有绝对和相对两种方式，size标记的属性如表3.1所示。
表3.1 size标记的属性
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>字号属性</title>
</head>
<body>
<p><font size=" 2">我为成功而生，不为失败而活。</font> </p>
<p><font size="4">我要欢呼庆祝，不要吸泣哀诉。</font></p>
<p><font size="10">我为胜利而来，不向失败低头。</font></p>
</body>
</html>
代码分析：
在代码中，加粗部分的代码标记分别用于设置文字不同的大小，在浏览器中浏览，效果如图3.2所示。
图3.2 设置文字的大小
3.1.3 颜色属性color
一般来说，网页的背景色应该柔和一些、素一些、淡一些，再配上深色的文字，使人看起来自然、舒畅。color标记用于设置文字的颜色。
基本语法：
<font color="字体的颜色">…</font>
语法介绍：
与网页背景色的设置类似，可以是一个已命名的颜色，也可以是一个十六进制的颜色值。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>颜色属性</title>
</head>
<body>
<p><font face="宋体" size="5" color="#E400FF">不是每一次努力都会有收获，但是，每一次收获都必须努力，这是一个不公平的不可逆转的命题。</font> </p>
<p> <font face="宋体" size="3" color="#FF2A00">记忆像是倒在掌心的水，不论你摊开还是紧握，终究还是会从指缝中一滴一滴流淌干净。</font> </p>
<p><font face="宋体" size="2" color="#3333CC">快乐和幸福那么相似,可是快乐就是幸福吗?</font> </p>
</body>
</html>
代码分析：
在代码中，加粗部分的代码标记用于设置不同的文字颜色，在浏览器中浏览，效果如图3.3所示。
图3.3 设置不同的文字颜色
3.2 标题元素<H1～H6>
在遵循网页标准制作网页的时候，为了使得设计更具有语义化，我们经常会在页面中用到h1～h6的标题属性。标题（h1～h6）标签是指HTML网页中对文本标题所进行的着重强调的一种标签，以标签<h1>、<h2>、<h3>到<h6>显示重要性的递减。
基本语法：
<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>
语法介绍：
<h1>～<h6>标签可定义标题，<h1>定义最大的标题，<h6> 定义最小的标题。
案例代码：
<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>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
</body>
</html>
代码分析：
在代码中，加粗部分的代码标记用于设置6种级别不同的标题，在浏览器中浏览，效果如图3.4所示。
图3.4 设置标题标记
提示：不同的浏览器，标题的尺寸大小是不相同的，但<h1>标题大约是标准文字高度的2～3倍，<h6>标题则比标准字体略小。
3.3 段落元素<p>
在网页中，如果要把文字有条理地显示出来，离不开段落标记的使用。HTML文档的基本单位是段落，就如同我们平时写文章一样，整个网页也可以分为若干个段落，而段落的标记就是<p>。
基本语法：
<p>段落文字<p>
语法介绍：
<p>是HTML文档中最常见的标记，<p>用来起始一个段落。段落标记可以没有结束标记</p>，而每一个新的段落标记开始的同时也意味着上一个段落的结束。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>段落元素</title>
</head>
<body>
人生最大的敌人是自己<p align="right">
人生最大的失败是自大<p align="center">
人生最大的愚蠢是欺骗
<p>
人生最大的错误是自卑<p>
</body>
</html>
代码分析：
在代码中，加粗部分的代码标记为段落标记，align="right"是设置段落为右对齐，align="center"是设置段落为居中对齐，在浏览器中预览，可以看到将文本成功地分段，效果如图3.5所示。
图3.5 段落效果
3.4 文本的间隔和布局
和大多数文本处理器一样，浏览器会把它找到的文字以适合显示窗口水平宽度的方式显示，当浏览器窗口宽松时，文本会自动调整以适应新的行宽，而窗口变窄时，文本会被挤压到下面去，但是与大多数文本处理器不同的是，HTML使用明确的换行标记<br>、缩进标记blockquote等控制文本的间隔和布局。
3.4.1 换行元素<br>
在HTML文本显示中，默认是将一行文字连续地显示出来，如果想让一个句子后面的内容在下一行显示就会用到换行符<br>。换行标记<br>的作用是在不另起一段的情况下将当前文本强制换行。
基本语法：
<br>
语法介绍：
一个<br>标记代表一个换行，连续的多个标记可以实现多次换行。
案例代码：
<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>在人生中，有对手才能有不断飞跃。<br>人生中有了对手，才会看到自己的不足；有了对手，才能有目的、有方向地完善自己……
</body>
</html>
代码分析：
在代码中，加粗部分的代码标记为设置换行标记，在浏览器中预览，可以看到换行的效果，如图3.6所示。
图3.6 换行效果
提示：<br>是唯一可以为文字分行的方法，其他标记如<p>，可以为文字分段。
3.4.2 缩进元素<blockquote>
<blockquote>与</blockquote>之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。
基本语法：
<blockquote cite="引用信息路径">块级元素的长引用文字</blockquote>
语法介绍：
blockquote标记长引用的时候必须同时给出首尾标记以指明引用界线，cite用于指定引用的原文档或信息的URL路径。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>缩进元素</title>
</head>
<body>
<blockquote cite="index.htm">为提高企业核心竞争力，公司不断强化质量管理，严格按照ISO9002国际质量体系标准生产、销售，以“诚信、优质、创新、提升”为企业经营理念，积极参与国际合作，引进国际上先进生产设备、技术和管理经验，在国际化发展战略的道路上不断迈进！公司的经营宗旨是“科技领先、用户至上、质量第一、诚信守法”，公司的经营理念是为客户提供更好更新的产品和服务。</blockquote>
</body>
</html>
代码分析：
在代码中，加粗的标记用于设置缩进元素，在浏览器中浏览，效果如图3.7所示。
图3.7 设置缩进元素效果
提示：浏览器把一个块级元素的长引用全部用缩进的方式进行显示，以表示和其他普通段落的不同。
3.4.3 保留格式元素<pre>
pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。
基本语法：
<pre>文字</pre>
语法介绍：
把制作好的文字排版内容前后加上始标记<pre>和尾标记</pre>，可以实现预格式化的效果。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>保留格式元素</title>
</head>
<body>
<pre>为提高企业核心竞争力，公司不断强化质量管理，
严格按照ISO9002国际质量体系标准生产、销售，
以“诚信、优质、创新、提升”为企业经营理念，积极参与国际合作，
引进国际上先进生产设备、技术和管理经验，在国际化发展战略的道路上不断迈进！
公司的经营宗旨是“科技领先、用户至上、质量第一、诚信守法”，
公司的经营理念是为客户提供更好更新的产品和服务。</pre>
</body>
</html>
代码分析：
在代码中，加粗的代码标记用于保留格式元素，在浏览器中浏览，效果如图3.8所示。
图3.8 保留格式元素效果
3.4.4 取消换行元素<nobr>
在网页中，如果某一行的文本过长，浏览器会自动对这段文字进行换行处理。可以使用nobr标记来禁止自动换行。
基本语法：
<nobr>不换行文字</nobr>
语法介绍：
nobr标记是成对出现的，以<nobr>开始，</nobr>结束，nobr用于强迫在一行显示内容。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>取消换行元素</title>
</head>
<body>
<nobr>深秋到了，走进空旷的校园，一阵冷风吹来，让人感到一阵凉意。 秋天的校园仍旧光彩宜人，树依旧是那么绿；花儿好像不知道深秋已经来了，依旧竞相开放，依旧用它那芳香吸引着只只蜜蜂；蝴蝶依旧在校园里翩翩起舞，依旧用它那美丽的身影吸引着同学们的目光。
</nobr>
</body>
</html>
代码分析：
在代码中，加粗部分的代码标记为取消换行标记，在浏览器中预览，可以看到文字在一行显示，如图3.9所示。
图3.9 不换行效果
3.4.5 引用元素<q>
当希望在句子内添加引用而不是将引用作为独立的缩进块时，可以使用<q>元素。HTML规范和XHTML规范中都规定，<q>元素中的文本在显示时需要包含在双引号中。<q>元素也能附带cite属性，该属性的值应该设置为指向引用来源的URL。
基本语法：
<q cite="引用信息路径">行内元素的短引用文字</q>
语法介绍：
在该语法中，cite用于指定引用的原文档或信息的URL路径。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>引用元素</title>
</head>
<body>
<q cite="index.html">深秋到了，走进空旷的校园，一阵冷风吹来，让人感到一阵凉意。</q>秋天的校园仍旧光彩宜人，树依旧是那么绿；花儿好像不知道深秋已经来了，依旧竞相开放，依旧用它那芳香吸引着只只蜜蜂；蝴蝶依旧在校园里翩翩起舞，依旧用它那美丽的身影吸引着同学们的目光。
</body>
</html>
代码分析：
在代码中，加粗部分的标记用于设置短引用，在浏览器中浏览，效果如图3.10所示。
提示：q标记在行内所引用的内容，显示文字和其他普通文本完全一样。设计者可以借助样式表CSS把引用内容和其他文字进行区分，包括粗体、斜体或下画线等。
图3.10 设置短引用
3.5 水平分隔线元素<hr>
在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明，这些水平线可以通过插入图片实现，也可以更简单地通过标记来完成。
3.5.1 粗细属性size
用<hr>标记可以在网页上画出一条横跨网页的水平分隔线，以分隔不同的文字段落。size属性控制水平线的粗细，以像素（pixel）为单位表示。
基本语法：
<hr size="粗细值">
语法介绍：
在网页中输入一个<hr>标记，就添加了一条默认样式的水平线。水平线的粗细值只能是像素值。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>水平线高度属性</title>
</head>
<body>
<p>做新时代人，开创新时代文化<br />
<hr size="3">
企业文化不是企业王冠上的装饰品，更不是企业成功之后的附庸风雅。企业文化是企业发展的灵魂，没有先进文化的企业是无生命力的，没有特色文化的企业是平庸的。我们必须建设面向现代化、面向世界、面向未来的，先进的，有特色的新时代企业文化。</p>
<p>企业文化的核心是价值观，其实先要看员工行为和工作氛围。企业文化的最大功能是达成共识，促进员工归宿感、认同感、自豪感的形成，促进企业目标的实现。希望通过企业文化，使集团以新的形象、新的风采，在新的世纪里稳步发展壮大。</p>
</body>
</html>
代码分析：
在代码中，加粗部分的标记为设置水平线的粗细，在浏览器中预览，可以看到将水平线粗细设置为3像素的效果，如图3.11所示。
图3.11 设置水平线的粗细
3.5.2 阴影属性noshade
noshade属性规定水平线的颜色呈现为纯色，而不是有阴影的颜色。
基本语法：
<hr noshade>
语法介绍：
noshade是布尔值的属性，它没有属性值，如果在<hr>元素中写上了这个属性，则浏览器不会显示立体形状的水平线，反之则无须设置该属性，浏览器默认显示一条立体形状带有阴影的水平线。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>水平线样式属性</title>
</head>
<body>
<p>做新时代人，开创新时代文化 <br /></p>
<hr size="3" noshade >
<p>企业文化不是企业王冠上的装饰品，更不是企业成功之后的附庸风雅。企业文化是企业发展的灵魂，没有先进文化的企业是无生命力的，没有特色文化的企业是平庸的。我们必须建设面向现代化、面向世界、面向未来的，先进的，有特色的新时代企业文化。</p>
<p>企业文化的核心是价值观，其实先要看员工行为和工作氛围。企业文化的最大功能是达成共识，促进员工归宿感、认同感、自豪感的形成，促进企业目标的实现。希望通过企业文化，使集团以新的形象、新的风采，在新的世纪里稳步发展壮大。</p>
</body>
</html>
代码分析：
在代码中，加粗部分的标记为设置无阴影的水平线，在浏览器中预览，可以看到水平线没有阴影，如图3.12所示。
图3.12 水平线没有阴影的效果
3.5.3 宽度属性width
width属性规定水平线的宽度，以像素计或百分比计。
基本语法：
<hr width="宽度">
语法介绍：
在该语法中，水平线的宽度值可以是确定的像素值，也可以是窗口的百分比。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>水平线的宽度</title>
</head>
<body>
<p>做新时代人，开创新时代文化<br /></p>
<hr size="3" width="500" noshade>
<p>企业文化不是企业王冠上的装饰品，更不是企业成功之后的附庸风雅。企业文化是企业发展的灵魂，没有先进文化的企业是无生命力的，没有特色文化的企业是平庸的。我们必须建设面向现代化、面向世界、面向未来的，先进的，有特色的新时代企业文化。</p>
<p>企业文化的核心是价值观，其实先要看员工行为和工作氛围。企业文化的最大功能是达成共识，促进员工归宿感、认同感、自豪感的形成，促进企业目标的实现。希望通过企业文化，使集团以新的形象、新的风采，在新的世纪里稳步发展壮大。</p>
</body>
</html>
代码分析：
在代码中，加粗部分的标记为设置水平线的宽度为500px，在浏览器中预览，效果如图3.13所示。
图3.13 设置水平线宽度
3.5.4 对齐属性align
水平线在默认情况下是居中对齐的，如果想让水平线左对齐或右对齐，就需要设置对齐方式。
基本语法：
<hr align="对齐方式">
语法介绍：
在该语法中对齐方式可以有3种，包括center、left和right，其中center的效果与默认的效果相同。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>水平线的对齐属性</title>
</head>
<body>
<p>做新时代人，开创新时代文化<br /></p>
<hr align="center" size="3" width="500" noshade>
企业文化不是企业王冠上的装饰品，更不是企业成功之后的附庸风雅。企业文化是企业发展的灵魂，没有先进文化的企业是无生命力的，没有特色文化的企业是平庸的。我们必须建设面向现代化、面向世界、面向未来的，先进的，有特色的新时代企业文化。</p>
<p><hr width="200" size="3" align="left" noshade> 企业文化的核心是价值观，其实先要看员工行为和工作氛围。企业文化的最大功能是达成共识，促进员工归宿感、认同感、自豪感的形成，促进企业目标的实现。<hr width="200" size="3" align="right" noshade>希望通过企业文化，使集团以新的形象、新的风采，在新的世纪里稳步发展壮大。</p>
</body>
</html>
代码分析：
在代码中，加粗部分的标记为设置水平线的对齐方式，在浏览器中预览，可以看到水平线不同对齐方式的效果，如图3.14所示。
图3.14 水平线的对齐方式
3.5.5 颜色属性color
在网页创作时，文字颜色是多姿多彩的，而水平线的颜色也是多姿多彩的。设置不同颜色的水平线可以为网页增色不少。
基本语法：
<hr color="颜色">
语法介绍：
颜色代码是十六进制的数值或者颜色的英文名称。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>水平线颜色属性</title>
</head>
<body>
<p>做新时代人，开创新时代文化 <br /></p>
<hr align="center" size="3" width="500" color="#f009CC" noshade>
<p>企业文化不是企业王冠上的装饰品，更不是企业成功之后的附庸风雅。企业文化是企业发展的灵魂，没有先进文化的企业是无生命力的，没有特色文化的企业是平庸的。我们必须建设面向现代化、面向世界、面向未来的，先进的，有特色的新时代企业文化。</p>
<p><hr width="200" size="3" align="left" noshade color="#00ffff"> 企业文化的核心是价值观，其实先要看员工行为和工作氛围。企业文化的最大功能是达成共识，促进员工归宿感、认同感、自豪感的形成，促进企业目标的实现。 <hr width="200" size="3" align="right" color="#ff0000" noshade>希望通过企业文化，使集团以新的形象、新的风采，在新的世纪里稳步发展壮大。</p>
</body>
</html>
代码分析：
在代码中，加粗部分的标记为设置水平线的颜色，在浏览器中预览，可以看到不同颜色的水平线效果，如图3.15所示。
图3.15 水平线的颜色
3.6 文本的样式设置
在HTML中，还有一些文本格式化标记用来设置文字以特殊的方式显示，如粗体标记、斜体标记和文字的上下标等。
3.6.1 放大元素<big>
big标记用来增大文本中字号的大小，它所包含的文字都会在原来的字号上增加一级。如果有多个<big>作用于同一个文本，则字号会被逐级增大。<big>作为一个行内元素，它可以成对出现在一段文字中的任何位置。
基本语法：
<big>大字号内容</big>
语法介绍：
在该语法中，在<big>与</big>标记之间的内容，可在定义的字号大小的基础上增加一级。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本样式放大元素</title>
</head>
<body>
<p>时尚资讯，<big>感悟人生真谛</big>。打造专属自己的<big>美丽模板</big>。</p>
</body>
</html>
代码分析：
在代码中，加粗部分的代码标记为设置大字号，在浏览器中预览效果，如图3.16所示。
图3.16 设置大字号效果
3.6.2 缩小元素<small>
small标记所包含的文字，在浏览器里显示会比普通文字小一级。如果有多个<small>元素作用于同一段文本上，则该段文本的字号会逐级缩小。<small>作为一个行内元素，它可以成对出现在一段文本中的任何地方。
基本语法：
<small>小字号内容</small>
语法介绍：
此标记的用法与大字号标记的用法基本相同，可在<small>与</small>标记之间输入小字号的内容。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本样式缩小元素</title>
</head>
<body>
时尚资讯，<small> 感悟人生真谛。</small> 打造专属自己的美丽模板。
</body>
</html>
代码分析：
在代码中，加粗部分的代码标记为设置小字号，在浏览器中预览，可以看到小字号的字体效果，如图3.17所示。
图3.17 设置小字号效果
3.6.3 斜体显示元素<i>、<em>和<cite>
<i>、<em>和<cite>是HTML中格式化斜体文本的最基本元素。在<i>和</i>之间的文字、在<em>和</em>之间的文字或在<cite>和</cite>之间的文字，在浏览器中都会以斜体字体显示。
基本语法：
<i>斜体文字</i>
<em>斜体文字</em>
<cite>斜体文字</cite>
语法介绍：
斜体的效果可以通过<i>标记、<em>标记和<cite>标记来实现。一般在一篇以正体显示的文字中用斜体文字起到醒目、强调或者区别的作用。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>斜体显示元素</title>
</head>
<body>
<i> 时尚资讯，感悟人生真谛。打造专属自己的美丽模板。</i>
</body>
</html>
代码分析：
在代码中，加粗部分的标记为设置文字的斜体效果，在浏览器中预览效果，如图3.18所示。
图3.18 文字的斜体效果
3.6.4 加粗的强调元素<strong>和<b>
<strong>是加重语气标签，<b>是粗体标签。它们均是加粗字体的作用。在大多数情况下，它们表现出来的效果也大致相同。该元素的首尾部分都是必须的，如果没有结尾标记，浏览器会认为从<b>开始的所有文字都是粗体。
基本语法：
<b>加粗的文字</b>
<strong>加粗的文字</strong>
语法介绍：
在该语法中，粗体的效果可以通过<b>标记来实现，还可以通过<strong>标记来实现。<b>和<strong>是行内元素，它可以插入到一段文本的任何部分。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>加粗的强调元素</title>
</head>
<body>
<strong> 对文字进行加粗</strong>
</body>
</html>
代码分析：
在代码中，加粗部分的标记为设置文字的加粗效果，在浏览器中预览效果，如图3.19所示。
图3.19 文字的加粗效果
3.6.5 下标元素<sub>
下标元素<sub>的英文原名为subscript，在各种数学公式、化学方程式中，下标元素有着广泛的应用。<sub>元素是行内元素，它可以成对地出现在一段文字的任何地方，并且可以将多个<sub>元素作用于同一段文字，也就是说，如果在<sub>元素里继续使用<sub>，那么被作用的文字将成为“下标的下标”。
基本语法：
<sub>下标内容</sub>
语法介绍：
在该语法中，只需要将下标内容放置在标记之间即可。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下标元素</title>
</head>
<body>
<p><strong>化学方程式</strong>
</p>
Fe<sub>3</sub>O<sub>4 </sub>
</body>
</html>
代码分析：
在代码中，加粗部分的标记为设置下标标记，在浏览器中预览效果，可以看到下标标记，如图3.20所示。
3.6.6 上标元素<sup>
上标元素<sup>的英文原名为superscript，在各种数学公式、日常计算应用、书籍文章注解甚至某些外语脚本里都有广泛的运用。<sup>元素也是行内元素，它可以成对出现在一段文字的任何地方，并且允许嵌套使用。因此如果在<sup>里再使用<sup>则会变成“上标的上标”。
图3.20 下标标记效果
基本语法：
<sup>上标内容</sup>
语法介绍：
在该语法中，上标标记的效果可以通过<sup>标记来实现。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上标元素</title>
</head>
<body>
<strong>代数方程式</strong>
<p>6x<sup>2</sup>+5x<sup>3</sup>+4=30</p>
</body>
</html>
代码分析：
在代码中，加粗部分的标记为设置上标标记，在浏览器中预览效果，可以看到上标标记，如图3.21所示。
图3.21 上标标记效果
3.7 课后习题
1.填空题
（1）______标记用来控制字体、字号和颜色等属性，它是HTML中最基本的标记之一。
（2）______是HTML文档中最常见的标记，______用来起始一个段落。段落标记可以没有结束标记______，而每一个新的段落标记开始的同时也意味着上一个段落的结束。
（3）在网页中如果某一行的文本过长，浏览器会自动对这段文字进行换行处理。可以使用______标记来禁止自动换行。
（4）______标记代表水平分割模式，并会在浏览器中显示一条线。标记用来增大文本中字号的大小，它所包含的文字都会在原来的字号上增加一级。
2.操作题
设置页面文本及段落的具体实例，如图3.22所示。
图3.22 设置页面文本及段落的效果