4.2 描述文本
HTML5淡化了元素的修饰功能，强调其固有的语义性，对于极个别的过时的、纯样式元素，不再建议使用，如font、center、s、strike。
4.2.1 强调文本
strong元素表示内容的重要性，而em元素则表示内容的着重点。根据内容需要，这两个元素既可以单独使用，也可以一起使用。
【示例1】在下面的代码中既有strong元素，又有em元素。浏览器通常将strong文本以粗体显示，而将em文本以斜体显示。如果em是strong的子元素，将同时以斜体和粗体显示文本。
<p><strong>警告：不要接近展品<em>在任何情况下</em></strong></p>
不要使用b元素代替strong，也不要使用i元素代替em。尽管它们在浏览器中显示的样式是一样的，但它们的含义却很不一样。
em元素在句子中的位置会影响句子的含义。例如，“<p><em>你</em>看着我</p>”和“<p>你看着<em>我</em></p>”表达的意思是不一样的。
【示例2】可以在标记为strong的短语中再嵌套strong文本。如果这样做，作为另一个strong的子元素的strong文本的重要程度会递增。这种规则对嵌套在另一个em里的em文本也适用。
<p><strong>记住密码是<strong>111222333</strong></strong></p>
其中，111222333文本要比其他strong文本更为重要。
可以用CSS将任何文本变为粗体或斜体，也可以覆盖strong和em等元素的浏览器默认显示样式。
注意，在旧版本的HTML中，strong所表示文本的强调程度比em表示的文本要高。不过，在HTML5中，em是表示强调的唯一元素，而strong元素表示的则是重要程度。
4.2.2 标记细则
HTML5使用small元素表示细则一类的旁注，例如，免责声明、注意事项、法律限制、版权信息等。有时我们还可以用它来表示署名，或者满足许可要求。
【示例1】small元素通常是行内文本中的一小块，而不是包含多个段落或其他元素的大块文本。
一些浏览器会将small元素包含的文本显示为小字号。不过，一定要在符合内容语义的情况下使用该元素，而不是为了减小字号而使用。
【示例2】在下面的示例中，第一个small元素表示简短的提示声明，第二个small元素表示包含在页面级footer里的版权声明，这是一种常见的用法。
small元素只适用于短语，因此不要用它标记长的法律声明，如“使用条款”和“隐私政策”页面。根据需要，应该用段落或其他语义元素标记这些内容。
提示：HTML5还支持big元素，用来定义大号字体。big元素包含的文字字体比周围的文字要大一号，如果文字已经是最大号字体，则big元素将不起任何作用。用户可以嵌套使用big元素逐步放大文本，每一个big元素都可以使字体大一号，直到上限7号文本。
4.2.3 特殊格式
b和i是HTML4遗弃的两个元素，分别表示粗体和斜体。HTML5重新启用这两个元素，作为其他语义元素都不适应的场景，即作为最后备选项使用。
b：表示出于实用目的提醒注意的文字，不传达任何额外的重要性，也不表示其他的语态和语气，用于如文档摘要里的关键词、评论中的产品名、基于文本的交互式软件中指示操作的文字、文章导语等。- i：表示不同于其他文字的文字，具有不同的语态或语气，或其他不同于常规之处，用于如分类名称、技术术语、外语里的惯用词、翻译的散文、西方文字中的船舶名称等。
【示例】下面的示例简单演示了b和i应用场景。
<p>这是一个<b>红</b>盒子，那是一个<b>蓝</b>盒子。</p>
<p>这块<i class="taxonomy">玛瑙</i>来自西亚。</p>
<p>这篇<i>散文</i>已经发表。</p>
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>
b文本默认显示为粗体，i文本默认显示为斜体，可以使用CSS重置它们的样式。
提示：b和i不包含任何明显的语义，但浏览者能够区分它们与周围的文字。在传统印刷中某些排版规则在现有的HTML语义中还没有对应的语义元素。例如，以斜体表示植物学名、具体的交通工具名称及外来语。这些词语不是为了强调而加上斜体的，只是排版惯例。为此，HTML5启用了早被废弃的b和i。
4.2.4 定义上标和下标
在传统印刷中，上标和下标是很重要的排版格式。HTML5使用sup和sub来定义上标文本和下标文本。上标和下标文本比主体文本稍高或稍低。常见的上标包括商标符号、指数和脚注编号等；常见的下标包括化学符号等。
【示例1】sup元素的一种用法就是表示脚注编号。根据从属关系，将脚注放在article的footer元素里，而不是整个页面的footer元素里。
为文章中每个脚注编号创建了链接，指向footer元素内对应的脚注，从而让访问者更容易找到它们。同时，注意链接中的title属性也提供了一些提示。
上标是对某些外语缩写词进行格式化的理想方式，例如，法语中用Mlle表示Mademoiselle（小姐），西班牙语中用3a表示tercera（第三）。此外，一些数字形式也要用到上标，如2nd、5th。下标适用于化学分子式，如H2O。
提示：sub和sup元素会轻微地增大行高。不过使用CSS可以修复这个问题。修复样式代码如下。
用户还可以根据内容的字号对上述样式做一些调整，使各行行高保持一致。
【示例2】对于下面的数学解题演示的段落文本，使用格式化语义结构能够很好地解决数学公式中各种特殊格式的要求。对于机器来说，也能够很好地理解它们的用途，效果如图4.1所示。
图4.1 格式化文本的语义结构效果
在上面的代码中，使用i元素定义变量x以斜体显示；使用sup元素定义二元一次方程中的二次方；使用b元素加粗显示常量值；使用big元素和b元素加大加粗显示“分解因式法”这个短语；使用small元素缩写操作谓词“由”和“得”的字体大小；使用sub元素定义方程的两个解的下标。
4.2.5 定义术语
在HTML中定义术语时，可以使用dfn元素对其做语义上的区分。例如：
<p><dfn id="def-internet">Internet</dfn>是一个全球互联网络系统，使用因特网协议套件（TCP/IP）为全球数十
亿用户提供服务。</p>
通常，dfn元素默认以斜体显示。由dfn标记的术语与其定义的距离远近相当重要。如HTML5规范所述：“如果一个段落、描述列表或区块是某dfn元素距离最近的祖先，那么该段落、描述列表或区块必须包含该术语的定义。”简言之，dfn元素及其定义必须挨在一起，否则便是错误的用法。
【示例】可以在描述列表（dl元素）中使用dfn元素。
仅在定义术语时使用dfn元素，而不能为了让文字以斜体显示就使用该元素。使用CSS可以将任何文字变为斜体。
dfn元素可以在适当的情况下包住其他的短语元素，如abbr。例如：
<p><dfn><abbr title="Junior">Jr.</abbr></dfn>他儿子的名字和他父亲的名字一样吗？ </p>
如果在dfn元素中添加可选的title属性，其值应与dfn术语一致。如果只在dfn元素里嵌套一个单独的abbr元素，dfn本身没有文本，那么可选的title只能出现在abbr里。
4.2.6 标记代码
使用code元素可以标记代码或文件名。如果代码中包含“<”或“>”字符，应使用<和>表示。如果直接使用“<”或“>”字符，将被视为HTML源代码处理。
【示例】本例使用code显示一块代码，为了格式化显示，这里同时使用pre元素包围code文本。
【拓展】
除了code外，其他与计算机相关的元素简要说明如下。
- kbd：用户输入指示。例如：
与code一样，kbd默认以等宽字体显示。
- samp：程序或系统的示例输出。例如：
<p>一旦在浏览器中预览，则显示<samp>Hello,World</samp></p>
samp默认以等宽字体显示。
- var：变量或占位符的值。例如：
<p>爱因斯坦称为是最好的<var>E</var>=<var>m</var><var>c</var><sup>2</sup>.</p>
var也可以作为占位符的值，例如，在填词游戏的答题纸上可以这样定义：<var>adjective</var>,<var>verb</var>。
var默认以斜体显示。
注意，可以在HTML5页面中使用math等MathML元素表示高级的数学相关的标记。
4.2.7 预定义格式
预定义文本就是可以保持文本固有的换行和空格。使用pre元素可以定义预定义文本。
【示例】下面的示例使用pre显示CSS样式代码，显示效果如图4.2所示。
预定义文本默认以等宽字体显示，可以使用CSS改变字体样式。如果要显示包含HTML元素的内容，应将包围元素名称的“<”和“>”分别改为其对应的字符实体<和>。
图4.2 定制pre预定义格式效果
pre默认为块显示，即从新一行开始显示，浏览器通常会对pre文本关闭自动换行，因此，如果包含很长的单词，就会影响页面的布局，或产生横向滚动条。使用下面的CSS样式可以对pre包含内容打开自动换行。
pre { white-space: pre-wrap;}
注意：不要使用CSS的white-space:pre代替pre的效果，这样会破坏预定义格式文本的语义性。
4.2.8 定义缩写词
使用abbr元素可以标记缩写词并解释其含义，还可以使用abbr的title属性提供缩写词的全称。提示，也可以将全称放在缩写词后面的括号里，或混用这两种方式。如果使用复数形式的缩写词，全称也要使用复数形式。
【示例】部分浏览器对于设置了title的abbr文本会显示为下画虚线样式，如果看不到，可以为abbr的包含框添加line-height样式。本例使用CSS主要设计下画虚线样式，以便兼容所有浏览器。
<style>
abbr[title] { border-bottom: 1px dotted #000; }
</style>
<p><abbr title=" HyperText Markup Language">HTML</abbr>是一门标识语言。</p>
当访问者将鼠标移至abbr上，浏览器都会以提示框的形式显示title文本，类似于a的title。
abbr使用场景：仅在缩写词第一次在视图中出现时使用。使用括号提供缩写词的全称是解释缩写词最直接的方式，能够让访问者更直观地看到这些内容。例如，使用智能手机和平板电脑等触摸屏设备的用户可能无法移到abbr元素上查看title的提示框。因此，如果要提供缩写词的全称，应该尽量将它放在括号里。
提示：在HTML5之前有acronym（首字母缩写词）元素，但设计和开发人员常常分不清楚缩写词和首字母缩写词，因此HTML5废除了acronym元素，让abbr适用于所有的场合。
4.2.9 标注编辑或不用文本
HTML5使用下面两个元素来标记内容编辑的操作。
- ins：已添加的内容。
- del：已删除的内容。
这两个元素可以单独使用，也可以搭配使用。
【示例1】在下面的列表中，上一次发布之后，又增加了一个条目，同时根据del元素的标注，移除了一些条目。使用ins元素的时候不一定要使用del元素，反之亦然。浏览器通常会让它们看起来与普通文本不一样。同时，s元素用于标注不再准确或不再相关的内容（一般不用于标注编辑内容）。
浏览器通常对已删除的文本加上删除线，对插入的文本加上下画线。可以用CSS修改这些样式。
【示例2】del和ins是少有的既可以包围短语内容（行内元素），又可以包围块级内容的元素。
del和ins元素都支持两个属性：cite和datetime。cite属性（区别于cite元素）用于提供一个URL，指向说明编辑原因的页面。
【示例3】下面的示例演示了del和ins两个元素的显示效果，如图4.3所示。
图4.3 插入和删除信息的语义结构效果
datetime属性提供编辑的时间。浏览器不会将这两个属性的值显示出来，因此它们的使用并不广泛。不过，应该尽量包含它们，从而为内容提供一些背景信息。它们的值可以通过JavaScript或分析页面的程序提取出来。
提示：HTML5指出：s元素不适用于指示文档的编辑，要标记文档中一块已移除的文本，应使用del元素。有时，这之间的差异是很微妙的，只能由个人决定哪种选择更符合内容的语义。仅在有语义价值的时候使用del、ins和s元素。如果只是出于装饰的原因要给文字添加下画线或删除线，可以用CSS实现这些效果。
4.2.10 指明引用或参考
使用cite元素可以标识引用或参考的对象，如图书、歌曲、电影、演唱会或音乐会、规范、报纸或法律文件等名称。
【示例】在下面的示例中，使用cite元素标记图书名称。
<p>他正在看<cite>红楼梦</cite></p>
注意：要引述源中内容，应该使用blockquote或q元素，cite只用于参考源本身，而不是源的内容。
HTML4允许使用cite引用人名，HTML5不再建议使用。例如，很多网站常用cite在博客或文章中引用作者或评论者的名字。
<p><cite>鲁迅</cite>说过：<q>地上本没有路，走的人多了就成了路。</q></p>
4.2.11 引述文本
blockquote元素表示单独存在的引述（通常很长），它默认显示在新的一行。而q元素则用于短的引述，如句子里面的引述。例如：
如果要添加署名，署名应该放在blockquote元素外面。可以把署名放在p元素里面，不过使用figure和figcaption元素可以更好地将引述文本与其来源关联起来。如果blockquote元素中仅包含一个单独的段落或短语，可以不必将其包在p元素中再放入blockquote元素。
浏览器应对q元素中的文本自动加上特定语言的引号，对blockquote元素文本进行缩进，cite元素属性的值则不会显示出来。不过，所有的浏览器都支持cite元素，通常对其中的文本以斜体显示。
【示例】下面这个结构综合展示了cite、q和blockquote元素以及cite引文属性的用法，演示效果如图4.4所示。
图4.4 引用信息的语义结构效果
提示：blockquote和q元素都有一个可选的cite属性，提供引述内容来源的URL。该属性对搜索引擎或其他收集引述文本及其引用的脚本来说是有用的。默认cite属性值不会显示出来，如果要让访问者看到这个URL，可以在内容中使用链接（a元素）重复这个URL。也可以使用JavaScript将cite的值暴露出来，但这样做的效果稍差一些。
blockquote和q元素可以嵌套。嵌套的q元素应该自动加上正确的引号。由于内外引号在不同语言中的处理方式不一样，因此要根据需要在q元素中加上lang属性，不过浏览器对嵌套q元素的支持程度并不相同，其实浏览器对非嵌套q元素的支持也不同。
4.2.12 换行显示
使用br元素可以实现文本换行显示。要确保使用br元素是最后的选择，因为该元素将表现样式带入了HTML，而不是让所有的呈现样式都交由CSS控制。例如，不要使用br元素模拟段落之间的距离。相反，应该用p标记两个段落并通过CSS的margin属性规定两段之间的距离。
【示例】对于诗歌、街道地址等应该紧挨着出现的短行，都适合用br元素。
<p>北京市 <br />
海淀区 <br />
北京大学 <br />
32号楼 </p>
每个br元素强制让接下来的内容在新的一行显示。如果没有br元素，整个地址都会显示在同一行。可以使用CSS控制段落中的行间距以及段落之间的距离。
4.2.13 修饰文本
span是没有任何语义的行内元素，适合包围短语、流动对象等内容，而div适合包含块级内容。如果希望为行内对象应用下面项目，则可以考虑使用span元素。
- HTML5属性，如class、dir、id、lang、title等。
- CSS样式。
- JavaScript脚本。
【示例】下面的示例使用span元素为行内文本“HTML”应用CSS样式，设计其显示为红色。
<style type="text/css">
.red { color: red; }
</style>
<p><span class="red">HTML</span>是通向WEB技术世界的钥匙。</p>
在上面的示例中，想对一小块文字指定不同的颜色，但从句子的上下文看，没有一个语义上适合的HTML元素，因此额外添加了span元素，定义一个类样式。
span没有语义，也没有默认格式，用户可以使用CSS添加类样式。可以对一个span元素同时添加class和id属性，两者区别：class用于一组元素，而id用于页面中单独的、唯一的元素。在HTML5中，没有提供合适的语义化元素时，微格式经常使用span为内容添加语义化类名，以填补语义上的空白。
4.2.14 非文本注解
在HTML4中，u为纯样式元素，用来为文本添加下画线。在HTML5中，u元素为一块文字添加明显的非文本注解，如在中文中将文本标为专有名词（即中文的专名号，用于表示人名、地名、朝代名等专名），或者标明文本拼写有误。
【示例】下面的示例演示了u的应用。
<p>When they <u class="spelling"> recieved</u> the package, they put it with <u class="spelling">there</u></p>
class是可选的，u文本默认仍以下画线显示，通过title属性可以为该元素包含的内容添加注释。
只有当cite、em、mark等其他语义元素不适用的情况下使用u元素。同时，建议重置u文本的样式，以免与同样默认添加下画线的链接文本混淆。