3.2 描述性文本_HTML5+CSS3+JavaScript从入门到精通（微课精编版）-QQ阅读男生玄幻网

书名：HTML5+CSS3+JavaScript从入门到精通（微课精编版）
作者名：前端科技
本章字数：2287字
更新时间：2021-03-29 23:34:36

3.2　描述性文本

在HTML4中，有一些侧重描述的文本标签，用户习惯用它们来设置文字以特殊的方式显示，如粗体、斜体和上下标等。在HTML5中，淡化了标签的修饰功能，强调其固有语义性，对于极个别过时的纯样式标签，不再建议使用，如<basefont>、、<center>、<s>、<strike>、等。

3.2.1　定义强调文本

视频讲解

标签用于强调文本，其包含的文字默认显示为斜体；标签也用于强调文本，但它强调的程度更强一些，其包含文字通常以粗体进行显示。

注意：粗体和斜体效果不代表强调的语义，用户可以根据需要使用CSS重置标签样式。在正文中，和标签使用的次数不应太频繁，且应该比更少。

提示：标签除强调之外，当引入新的术语，或者在引用特定类型的术语、概念时，作为固定样式的时候，也可以考虑使用标签，以便把这些名称和其他斜体字区别开来。

【示例】对于下面这段信息，分别使用和标签来强调部分词语，所显示的效果如图3.4所示。其中em强调信息以斜体显示，而strong强调的信息以粗体显示。

    <p>没有<em>最好</em>只有<strong>更好</strong>!</p>

图3.4　强调信息的语义结构效果

3.2.2　定义格式文本

视频讲解

文本格式多种多样，如粗体、斜体、大号、小号、下划线、预定义、高亮、反白等效果。为了排版需要，HTML5继续支持HTML4中部分纯格式标签，具体说明如下：

：定义粗体文本。与标签的默认效果相似。

提示：根据HTML5规范，在没有合适标签的情况才选用标签。应该使用<h1>～<h6>表示标题，使用标签表示强调的文本，使用标签表示重要文本，使用标签表示标注、突出显示的文本。

：定义斜体文本。与标签的默认效果相似。

<big>：定义大号字体。

提示：<big>标签包含的文字字体比周围的文字要大一号，如果文字已经是最大号字体，则<big>标签将不起任何作用。用户可以嵌套使用<big>标签逐步放大文本，每一个<big>标签都可以使字体放大一号，直到上限7号文本。

：定义小号字体。

提示：与<big>标签类似，标签也可以嵌套，从而连续地把文字缩小，每个标签都把文本的字体变小一号，直到达到下限的1号字。

：定义上标文本。以当前文本流中字符高度的一半显示，但是与当前文本流中文字的字体和字号都是一样的。

提示：当添加脚注，以及表示方程式中的指数值时，很有用。如果和<a>标签结合起来使用，就可以创建超链接脚注。

：定义下标文本。

提示：无论是标签，还是对应的标签，在数学等式、科学符号和化学公式中都非常有用。

【示例】对于下面这个数学解题演示的段落文本，使用格式化语义结构能够很好地解决数学公式中各种特殊格式的要求。对于机器来说，也能够很好地理解它们的用途，效果如图3.5所示。

图3.5　格式化文本的语义结构效果

在上面代码中，使用i元素定义变量x以斜体显示；使用sup元素定义二元一次方程中二次方；使用b元素加粗显示常量值；使用big元素和b元素加大加粗显示“分解因式法”这个短语；使用small元素缩写操作谓词“由”和“得”的字体大小；使用sub元素定义方程的两个解的下标。

3.2.3　定义输出文本

视频讲解

HTML元素提供了很多输出信息的标签，如下所示。

<code>：表示代码字体，即显示源代码。

<pre>：表示预定义格式的源代码，即保留源代码显示中的空格大小。

<tt>：表示打印机字体。

<kbd>：表示键盘字体。

<dfn>：表示定义的术语。

<var>：表示变量字体。

<samp>：表示代码范例。

【示例】下面这个示例中演示了每种输出信息的演示效果，如图3.6所示。虽然它们的显示效果不同，但是对于机器来说其语义是比较清晰的。

图3.6　输出信息的语义结构效果

3.2.4　定义缩写文本

视频讲解

<abbr>标签可以定义简称或缩写，通过对缩写进行标记，能够为浏览器、拼写检查和搜索引擎提供有用的信息。例如，dfn是Defines a Definition Term的简称，kbd是Keyboard Text的简称，samp是Sample的简称，var是Variable的简称。

<acronym>标签可以定义首字母缩写。例如，CSS是Cascading Style Sheets短语的首字母缩写，HTML是Hypertext Markup Language短语的首字母缩写等。

注意：HTML5不支持<acronym>标签，建议使用<abbr>标签代替。在<abbr>标签中可以使用全局属性title，设置在鼠标指针移动到<abbr>上时显示完整版本。

【示例1】下面示例比较了abbr和acronym元素在文档中的应用。

   <p><abbr title="Abbreviation">abbr</abbr>元素最初是在HTML3.0中引入的，表示它所包含的文本是一个更
长的单词或短语的缩写形式。浏览器可能会根据这个信息改变对这些文本的显示方式，或者用其他文本代替。
</p>
   <p><acronym title="Hypertext Markup Language">HTML</acronym>是目前网络上应用最为广泛的语言，也是
构成网页文档的主要语言。</p>

【示例2】IE6及其以下版本的浏览器不支持abbr元素，如果要实现在IE低版本浏览器中正确显示，不妨在abbr元素外包含一个span元素。

    <p><span title="Abbreviation"><abbr title="Abbreviation">abbr</abbr></span>元素最初是在HTML3.0中引入
的，表示它所包含的文本是一个更长的单词或短语的缩写形式。浏览器可能会根据这个信息改变对这些文本的显
示方式，或者用其他文本代替。</p>

3.2.5　定义插入和删除文本

<ins>标签定义插入到文档中的文本，<del>标签定义文档中已被删除的文本。一般可以配合使用这两个标签，来描述文档中的更新和修正。

<ins>和<del>标签都支持下面两个专用属性，简单说明如下：

　cite：指向另外一个文档的URL，该文档可解释文本被删除的原因。

　datetime：定义文本被删除的日期和时间，格式为YYYYMMDD。

【示例】下面演示示例的显示效果如图3.7所示。

    <p> <cite>因为懂得，所以慈悲</cite>。<ins cite="http://news.sanwen8.cn/a/2014-07-13/9518.html"
datetime="2014-8-1">这是张爱玲对胡兰成说的话</ins>。</p>
    <p> <cite>笑，全世界便与你同笑；哭，你便独自哭</cite>。<del datetime="2014-8-8">出自冰心的《遥寄印
度哲人泰戈尔》</del>，<ins cite="http://news.sanwen8.cn/a/2014-07-13/9518.html" datetime="2014-8-1">出自张爱
玲的小说《花凋》</ins> </p>

图3.7　插入和删除信息的语义结构效果

3.2.6　定义文本方向

视频讲解

如果在HTML页面中混合了从左到右书写的字符（如大多数语言所用的拉丁字符）和从右到左书写的字符（如阿拉伯语或希伯来语字符），就可能要用到bdi和bdo元素。

要使用bdo，必须包含dir属性，取值包括ltr（由左至右）或rtl（由右至左），指定希望呈现的显示方向。

bdo适用于段落里的短语或句子，不能用它包围多个段落。bdi元素是HTML5中新加的元素，用于内容的方向未知的情况，不必包含dir属性，因为默认已设为自动判断。

【示例】下面示例使用<bdo>标签让唐诗反向显示。

    <bdo dir="rtl">床前明月光，疑是地上霜。举头望明月，低头思故乡。</bdo>

上面示例演示效果如图3.8所示。目前，只有Firefox和Chrome浏览器支持<bdi>标签。

图3.8　定义反向显示文本