设计HTML5文本

网页文本内容丰富、形式多样，通过不同的版式显示在页面中，为用户提供最直接、最丰富的信息。HTML5新增了很多文本标签，它们都有特殊的语义，正确使用这些标签，可以让网页文本更严谨、更符合语义。

1、通用文本

1.1、标题文本

、

、

、

、

、

标签可以定义标题文本，按级别高低从大到小分别为h1、h2、h3、h4、h5、h6，它们包含的信息依据重要性逐渐递减。其中，h1表示最重要的信息，h6表示最次要的信息。

【示例】根据文档结构层次，定义不同级别的标题文本。

    <div id="wrapper">
        <h1>网页标题h1>
        <div id="box2">
            <h2>栏目标题h2>
            <div id="sub_box1">
                <h3>子栏目标题h3>
                <p>正文p>
            div>
        div>
    div>

h1、h2和h3比较常用，h4、h5和h6不是很常用，除非在结构层级比较深的文档中才会考虑选用，因为一般文档的标题层次在三级左右。对于标题元素的位置，应该出现在正文内容的顶部，一般处于容器的第一行。

1.2、段落文本

在网页中输入段落文本，应该使用p元素，它是最常用的HTML元素之一。在默认情况下，浏览器会在标题与段落之间，以及段落与段落之间添加间距，约为一个字体的距离，以方便阅读。
【示例】使用p元素设计两段诗句正文。

    <p>白日依山尽，黄河入海流。p>
    <p>欲穷千里目，更上一层楼。p>

使用CSS可以为段落添加样式，如字体、字号、颜色等，也可以改变段落文本的对齐方式，包括水平对齐和垂直对齐。

2、描述性文本

HTML5强化了字体标签的语义性，弱化了其修饰性，对于纯样式字体标签不再建议使用，如acronym（首字母缩写）、basefont（基本字体样式）、center（居中对齐）、font（字体样式）、s（删除线）、strike（删除线）、tt（打印机字体）、u（下画线）、xmp（预格式）等。

2.1、强调文本

strong元素表示内容的重要性，而em表示内容的着重点。根据内容需要，这两个元素既可以单独使用，也可以一起使用。

【示例1】在下面的代码中既有strong，又有em。浏览器通常将strong文本以粗体显示，将em文本以斜体显示。如果em是strong的子元素，将同时以斜体和粗体显示文本。

    <p><strong>警告: 不要接近展品<em>在任何情况下em>strong>p>

不要使用b元素代替strong，也不要使用i元素代替em。尽管它们在浏览器中显示的样式是一样的，但是它们的含义不一样。

em在句子中的位置会影响句子的含义。例如，“

你看着我

”和“

你看着我

”表达的意思是不一样的。

【示例2】可以在标记为strong的短语中嵌套strong文本。如果这样做，strong的子元素的strong文本的重要程度会递增。这种规则对嵌套在em里的em文本也适用。

    <p><strong>记住密码是<strong>111222333strong>strong>p>

其中，“111222333”文本要比其他strong文本更为重要。

可以使用CSS将任何文本变为粗体或斜体，也可以覆盖strong和em等元素的浏览器默认显示样式。
注意：在旧版本的HTML中，strong所表示文本的强调程度比em表示的文本要高。不过，在HTML5中，em是表示强调的唯一元素，而strong表示的则是重要程度。

2.2、标记细则

HTML5重新定义了small元素，由通用展示性元素变为更具体的、专门标识所谓“小字印刷体”的元素，通常表示细则一类的旁注。例如，免责声明、注意事项、法律限制、版权信息等，有时还可以表示署名、许可要求等。

注意：small元素不允许被应用在页面主内容中，只允许被当作辅助信息以inline方式内嵌在页面上。同时，small元素也不意味着元素中内容的字体会变小，要将字体变小，需要配合使用CSS样式。

【示例1】small通常是行内文本中的一小块，而不是包含多个段落或其他元素的大块文本。

    <dl>
        <dt>单人间dt>
        <dd>399 元 <small>含早餐，不含税small>dd>
        <dt>双人间dt>
        <dd>599 元 <small>含早餐，不含税small>dd>
    dl>

一些浏览器会将small包含的文本显示为小字号。不过，一定要在符合内容语义的情况下使用该元素，而不是为了减小字号而使用该元素。

【示例2】第一个small元素表示简短的提示声明，第二个small元素表示包含在页面级footer里的版权声明，这是一种常见的用法。

    <p>现在订购免费送货。<small>（仅限于五环以内）small>p>
    <footer role="contentinfo">
        <p><small>© 2023 Baidu 使用百度前必读small>p>
    footer>

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

2.3、特殊格式

b和i元素是早期HTML遗留下来的元素，它们分别用于将文本变为粗体和斜体，因为那时候CSS还未出现。从HTML4和XHTML1开始不再使用，因为它们本质上是用于表现的。

当时的规范建议编码人员用strong替代b，用em替代i。事实证明，em和strong有时在语义上并不合适。为此，HTML5重新定义了b和i。

传统出版业里的某些排版规则在现有的HTML语义中还找不到对应物，其中就包括用斜体表示植物学名、具体的交通工具名称及外来语，这些词语不是为了强调而设置为斜体，只是样式上的惯例。

为了应对这些情况，HTML5没有创建一些新的语义化元素，而是采取一种很实际的做法，直接利用现有元素：em用于所有层次的强调，strong用于表示重要性，而其他情况则使用b和i。

这意味着，尽管b和i并不包含任何明显的语义，但浏览者仍能发现它们与周边文字的差别，而且还可以通过CSS改变它们粗体或斜体的样式。HTML5强调：b和i应该是其他元素（如strong、em、cite等）都不适用时的最后选择。

HTML5将b元素重新定义为：表示出于实用目的提醒读者注意的一块文字，不传达任何额外的重要性，也不表示其他的语态和语气，用于如文档摘要里的关键词、评论中的产品名、基于文本的交互式软件中指示操作的文字、文章导语等。例如，在以下代码中，b文本默认显示为粗体。

    <p>这是一个<b>红b>房子，那是一个<b>蓝b>盒子p>

HTML5将i元素重新定义为：表示一块不同于其他文字的文字，具有不同的语态或语气，或其他不同于常规之处，用于如分类名称、技术术语、外语里的惯用词、翻译的散文、西方文字中的船舶名称等。例如，在以下代码中，i文本默认显示为斜体。

    <p>这块<i class="taxonomy">玛瑙i>来自西亚p>
    <p>这篇<i>散文i>已经发表.p>
    <p>There is a certain <i lang="fr">je ne sais quoii> in the air.p>

2.4、定义上标和下标

使用sup和sub元素可以创建上标和下标，上标和下标文本比主体文本稍高或稍低。常见的上标包括商标符号、指数和脚注编号等；常见的下标包括化学符号等。例如：

    <p>这段文本包含 <sub>下标文本sub>p>
    <p>这段文本包含 <sup>上标文本sup>p>

【示例1】sup元素的一种用法就是表示脚注编号。根据从属关系，将脚注放在article的footer里，而不是整个页面的footer里。

    <article>
        <h1>王维h1>
        <p>王维参禅悟理，学庄信道，精通诗、书、画、音乐等，以诗名盛于开元、天宝间，尤长五言，多咏山水田园，与
孟浩然合称“王孟”，有“诗佛”之称<a href="#footnote-1" title="参考注释"><sup>[1]sup>a> 。p>
        <footer>
            <h2>参考资料h2>
            <p id="footnote-1"><sup>[1]sup>孙昌武《佛教与中国文学》第二章：“王维的诗歌受佛教影响是很显著的。因
此在生前，就得到‘当代诗匠，又精禅理’的赞誉。后来，更得到‘诗佛’的称号。”p>
        footer>
    article>

为文章中每个脚注编号创建链接，指向footer内对应的脚注，从而让访问者更容易找到它们。同时，链接中的title属性提供了一些提示。

上标是对某些外语缩写词进行格式化的理想方式。例如，法语中用Mlle表示Mademoiselle（小姐），西班牙语中用3a表示tercera（第三）。此外，一些数字形式也要用到上标，如2nd、5th。下标适用于化学分子式，如H2O。

提示：sub和sup元素会轻微地增加行高，不过使用CSS可以修复这个问题。修复样式代码如下：

    <style type="text/css">
    sub, sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }
    sup { top: -0.5em; }
    sub { bottom: -0.25em; }
    style>

用户可以根据内容的字号对CSS做一些调整，以使各行行高保持一致。

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

    <article>
        <h1>解一元二次方程h1>
        <p>一元二次方程求解有四种方法：p>
        <ul>
            <li>直接开平方法 li>
            <li>配方法 li>
            <li>公式法 li>
            <li>分解因式法li>
        ul>
        <p>例如，针对下面这个一元二次方程：p>
        <p><i>xi><sup>2sup>-<b>5b><i>xi>+<b>4b>=0p>
        <p>我们使用<big><b>分解因式法b>big>来演示解题思路如下：p>
        <p><small>由：small>(<i>xi>-1)(<i>xi>-4)=0p>
        <p><small>得：small><br />
            <i>xi><sub>1sub>=1<br />
            <i>xi><sub>2sub>=4p>
    article>

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

显示效果如下图所示：

2.5、定义术语

在HTML中定义术语时，可以使用dfn元素对其做语义上的区分。例如：

    <p><dfn id="def-internet">Internetdfn>是一个全球互联网络系统，使用因特网协议套件（TCP/IP）为全球数十亿用户提供
服务。p>

通常，dfn元素默认以斜体显示。由dfn标记的术语与其定义的距离远近相当重要。如HTML5规范所述：“如果一个段落、描述列表或区块是某dfn元素距离最近的祖先，那么该段落、描述列表或区块必须包含该术语的定义。”简言之，dfn元素及其定义必须挨在一起，否则便是错误的用法。

【示例】可以在描述列表（dl元素）中使用dfn：

    <p><dfn id="def-internet">Internetdfn>是一个全球互联网络系统，使用因特网协议套件（TCP/IP）为全球数十亿用户提供
服务。p>
    <dl>
        
        <dt> <dfn> <abbr title="World-Wide Web">WWWabbr> dfn> dt>
        <dd>万维网（WWW）是一个互连的超文本文档访问系统，它建立在<a href="#def-internet">Interneta>之上。dd>
    dl>

仅在定义术语时使用dfn，而不是为了让文字以斜体显示使用该元素。使用CSS可以将任何文字设置为斜体。

dfn可以在适当的情况下包住其他的短语元素，如abbr。例如：

    <p><dfn><abbr title="Junior">Jr.abbr>dfn>他儿子的名字和他父亲的名字一样吗？p>

如果在dfn中添加可选的title属性，其值应与dfn术语一致。如果只在dfn里嵌套一个单独的abbr，dfn本身没有文本，那么可选的title只能出现在abbr里。

2.6、标记代码

使用code元素可以标记代码或文件名。例如：

    <code>
    p{ margin:2em; }
    code>

如果代码需要显示“<”或“>”字符，应分别使用<和>表示。如果直接使用“<”或“>”字符，浏览器会将这些代码当作HTML元素处理，而不是当作文本处理。

要显示单独的一块代码，可以用pre元素包住code元素以维持其格式。例如：

    <pre>
    <code>
    p{
        margin:2em;
    }
    code>
    pre>

【拓展】：
其他与计算机相关的元素有kbd、samp和var，这些元素极少使用，不过可能会在内容中用到它们。下面对它们做简要说明。
使用kbd标记用户输入指示。例如：

    <ol>
        <li>使用<kbd>TABkbd>键，切换到提交按钮li>
        <li>点按<kbd>RETURNkbd>或<kbd>ENTERkbd>键li>
    ol>

与code一样，kbd默认以等宽字体显示。
samp元素用于指示程序或系统的示例输出。例如：

    <p>一旦在浏览器中预览，则显示<samp>Hello,Worldsamp>p>

samp默认以等宽字体显示。
var元素表示变量或占位符的值。例如：

    <p>爱因斯坦称为是最好的 <var>Evar>=<var>mvar><var>cvar><sup>2sup>.p>

var也可以作为内容中占位符的值，例如，在填词游戏的答题纸上可以放入adjective、verb。

var默认以斜体显示。注意，可以在HTML5页面中使用math等MathML元素表示高级的数学相关的标记。

2.7、预定义格式

使用pre元素可以定义预定义文本，它是计算机代码示例的理想元素。预定义文本就是可以保持文本固有的换行和空格。例如：

    <pre>
    p{
        margin:2em;
    }
    pre>

对于包含重要的空格和换行的文本（如这里显示的CSS代码），使用pre元素是非常适合的。同时，要注意code元素的使用，该元素可以标记pre外面的代码块或与代码有关的文本。

预定义文本通常以等宽字体显示，可以使用CSS改变字体样式。如果要显示包含HTML元素的内容，应将包围元素名称的“<”和“>”分别改为其对应的字符实体<和>。否则，浏览器就会试着显示这些元素。

一定要对页面进行验证，检查是否在pre中嵌套了HTML元素。不要将pre作为逃避以合适的语义标记内容和用CSS控制样式的快捷方式。例如，如果想发布一篇在字处理软件中写好的文章，不要为了保留原来的格式而简单地将它复制、粘贴到pre里。相反，应该使用p元素，以及其他相关的文本元素标记内容，编写CSS控制页面的布局。

同段落一样，pre默认从新一行开始显示，浏览器通常会对pre里面的内容关闭自动换行。如果这些内容很宽，就会影响页面的布局，或产生横向滚动条。

提示：使用下面的CSS样式可以对pre包含的内容打开自动换行，但在IE 7及以下版本中并不适用。

pre {
    white-space: pre-wrap;
}

在大多数情况下，不推荐对div等元素使用white-space:pre以代替pre，因为空格可能对这些内容（尤其是代码）的语义非常重要，而只有pre才能始终保留这些空格。同时，如果用户在其浏览器中关闭CSS，格式就丢失了。

3.8、定义缩写词

使用abbr元素可以标记缩写词并解释其含义。当然，不必对每个缩写词都使用abbr，只在需要帮助访问者了解该缩写词含义的时候使用。例如：

    <abbr title=" HyperText Markup Language">HTMLabbr>是一门标识语言。

使用可选的title属性提供缩写词的全称，也可以将全称放在缩写词后面的括号里（这样做更好）。另外，还可以同时使用这两种方式，并使用一致的全称。如果大多数人都很熟悉了，就没有必要对它们使用abbr并提供title，这里只是用它们演示示例。

通常，仅在缩写词第一次出现在屏幕上时，通过title或括号的方式给出其全称。用括号提供缩写词的全称是解释缩写词最直接的方式，以让尽可能多的访问者看到这些内容。例如，使用智能手机和平板电脑等触摸屏设备的用户可能无法移到abbr元素上查看title的提示框。如果要提供缩写词的全称，应该尽量将它放在括号里。

如果使用复数形式的缩写词，全称也要使用复数形式。作为对用户的视觉提示，Firefox和Opera等浏览器会对带title的abbr文字使用虚线下画线。如果希望在其他浏览器中也这样显示，可以在样式表中加上下面的样式。

abbr[title] { border-bottom: 1px dotted #000; }

无论abbr是否添加了下画线样式，浏览器都会将title属性内容以提示框的形式显示出来。如果看不到abbr有虚线下画线，可以为其父元素的CSS添加line-height属性。

提示：在HTML5之前有acronym（首字母缩写词）元素，但设计和开发人员常常分不清楚缩写词和首字母缩写词，因此HTML5废除了acronym元素，以让abbr适用于所有的场合。

当访问者将鼠标移至abbr上，该元素title属性的内容就会显示在一个提示框里。在默认情况下，Chrome等一些浏览器不会让带有title属性的缩写词与普通文本有任何显示上的差别。

2.9、标注编辑或不用文本

有时可能需要将在前一个版本之后对页面内容的编辑标出来，或者对不再准确、不再相关的文本进行标记。有两种用于标注编辑的元素：代表添加内容的ins元素和标记已删除内容的del元素。这两个元素既可以单独使用，也可以一起使用。

【示例1】在下面的列表中，继上一次发布之后，又增加了一个条目，同时根据del元素的标注，移除了一些条目。使用ins的时候不一定要使用del，反之亦然。浏览器通常会让它们看起来与普通文本不一样。同时，s元素用以标注不再准确或不再相关的内容（一般不用于标注编辑内容）。

    <ul>
        <li><del>删除项目del>li>
        <li>列表项目li>
        <li><del>删除项目del>li>
        <li><ins>插入项目ins>li>
    ul>

del和ins都支持cite和datetime两个属性。cite属性（区别于cite元素）用于提供一个URL，指向说明编辑原因的页面。

【示例3】下面演示del和ins两个元素的显示效果：

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

如果需要向访问者展示内容的变化情况，可以使用del和ins元素。例如，我们经常可以看见一些站点使用它们表示初次发布后的更新信息，这样可以保持原始信息的完整性。

• 使用ins标记的文本通常会显示一条下画线。由于链接通常以下画线表示，这可能会让访问者感到困惑。可以使用CSS改变插入的段落文本的样式。
• 使用del标记的文本通常会显示一条删除线。加上删除线以后，用户就很容易看出修改了什么。

提示：HTML5指出，s元素不适用于指示文档的编辑，要标记文档中一块已移除的文本，应使用del元素。有时，它们之间的差异是很微妙的，只能由个人决定哪种选择更符合内容的语义，仅在有语义价值的时候使用del、ins和s。如果只是出于装饰的目的给文字添加下画线或删除线，可以使用CSS实现这些效果。

2.10、指明引用或参考

使用cite元素可以定义作品的标题，以指明对某内容源的引用或参考。例如，戏剧、脚本或图书的标题，歌曲、电影、照片或雕塑的名称，演唱会或音乐会，规范、报纸或法律文件等。

【示例】在下面代码中，cite元素标记的是音乐专辑、电影、图书和艺术作品的标题。

    <p>他正在看<cite>红楼梦cite>p>

对于要从引用来源中引述内容的情况，使用blockquote或q元素标记引述的文本。要弄清楚的是，cite只用于参考源本身，而不是从中引述的内容。

注意：HTML5声明不应使用cite作为对人名的引用，但HTML5以前的版本允许这样做，而且很多设计和开发人员仍在这样做。HTML4的规范有以下例子。

    <cite>鲁迅cite>说过：<q>其实地上本没有路，走的人多了，也便成了路。q>

除了这些例子，有的网站经常用cite标记在博客和文章中发表评论的访问者的名字（WordPress的默认主题就是这样做的）。很多开发人员表示，他们将继续对与页面中的引文有关的名称使用cite，因为HTML5没有提供给他们认为可接收的其他元素（即span和b元素）。