设计HTML5文本

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

1、通用文本

1.1、标题文本

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>标签可以定义标题文本，按级别高低从大到小分别为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在句子中的位置会影响句子的含义。例如，“<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表示的则是重要程度。

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>&copy; 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 quoi</i> 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>x</i><sup>2</sup>-<b>5</b><i>x</i>+<b>4</b>=0</p>
        <p>我们使用<big><b>分解因式法</b></big>来演示解题思路如下：</p>
        <p><small>由：</small>(<i>x</i>-1)(<i>x</i>-4)=0</p>
        <p><small>得：</small><br />
            <i>x</i><sub>1</sub>=1<br />
            <i>x</i><sub>2</sub>=4</p>
    </article>

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

显示效果如下图所示：

2.5、定义术语

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

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

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

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

    <p><dfn id="def-internet">Internet</dfn>是一个全球互联网络系统，使用因特网协议套件（TCP/IP）为全球数十亿用户提供
服务。</p>
    <dl>
        <!-- 定义“万维网”和“因特网”的参考定义  -->
        <dt> <dfn> <abbr title="World-Wide Web">WWW</abbr> </dfn> </dt>
        <dd>万维网（WWW）是一个互连的超文本文档访问系统，它建立在<a href="#def-internet">Internet</a>之上。</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>TAB</kbd>键，切换到提交按钮</li>
        <li>点按<kbd>RETURN</kbd>或<kbd>ENTER</kbd>键</li>
    </ol>

与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元素表示高级的数学相关的标记。

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">HTML</abbr>是一门标识语言。

使用可选的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元素）。

2.11、引述文本

blockquote元素表示单独存在的引述（通常很长），它默认显示在新的一行。而q元素则用于短的引述，如句子里面的引述。例如：

    <p>毛泽东说过：
        <blockquote>帝国主义都是纸老虎……</blockquote>
    </p>
    <p>世界自然基金会的目标是 : <q cite="http://www.wwf.org"> 建设一个与自然和谐相处的未来 </q>我们希望他们成功。</p>

如果要添加署名，署名应该放在blockquote的外面。可以把署名放在p里面，不过使用figure和figcaption可以更好地将引述文本与其来源关联起来。如果blockquote中仅包含一个单独的段落或短语，可以不必将其包在p中再放入blockquote。

浏览器应对q元素中的文本自动加上特定语言的引号，但不同浏览器的显示效果并不相同。

浏览器默认对blockquote文本进行缩进，cite属性的值则不会显示出来。不过，所有的浏览器都支持cite元素，通常对其中的文本以斜体显示。

【示例】下面这个结构综合展示了cite、q和blockquote元素以及cite引文属性的用法：

    <div id="article">
        <h1>智慧到底是什么呢？</h1>
        <h2>《卖拐》智慧摘录</h2>
        <blockquote cite="http://www.szbf.net/Article_Show.asp?ArticleID=1249">
            <p>有人把它说成是知识，以为知识越多，就越有智慧。我们今天无时无刻不在受到信息的包围和信息的轰炸，
似乎所有的信息都是真理，仿佛离开这些信息，就不能生存下去。但是你掌握的信息越多，只能说明你知识越丰富，并不等于
你掌握了智慧。有的人，知识丰富，智慧不足，难有大用；有的人，知识不多，却无所不能，成为奇才。</p>
        </blockquote>
        <p>下面让我们看看<cite>大忽悠</cite>赵本山的这段台词，从中你可以体会到语言的智慧。</p>
        <div id="dialog">
            <p>赵本山：<q>对头，就是你的腿有病，一条腿短！</q></p>
            <p>范  伟：<q>没那个事儿！我要一条腿长、一条腿短的话，那卖裤子的人就告诉我了！</q> </p>
            <p>赵本山：<q> 卖裤子的告诉你你还买裤子吗，谁像我心眼这么好啊？这样吧，我给你调调。信不信，你的腿
随着我的手往高抬，能抬多高抬多高，往下使劲落，好不好？信不信？腿指定有病，右腿短！来，起来！</q> </p>
            <p class="action">（范伟配合做动作）</p>
            <p>赵本山：<q>停！麻没？</q> </p>
            <p>范  伟：<q>麻了。</q> </p>
            <p>高秀敏：<q>哎，他咋麻了呢？</q> </p>
            <p>赵本山：<q>你跺，你也麻！</q> </p>
        </div>
    </div>

提示：可以对blockquote和q使用可选的cite属性，提供引述内容来源的URL。尽管浏览器通常不会将cite的URL呈现给用户。但从理论上讲，该属性对搜索引擎或其他收集引述文本及其引用的自动化工具还是有用的。如果要让访问者看到URL，可以在内容中使用链接（a元素）重复URL，也可以使用JavaScript将cite的值暴露出来，但这样做的效果稍差一些。

q元素引用的内容不能跨越不同的段落，在这种情况下，应使用blockquote。不要仅仅因为需要在字词两端添加引号就使用q。

blockquote和q元素可以嵌套，嵌套的q元素应该自动加上正确的引号。由于内外引号在不同语言中的处理方式不一样，因此应根据需要在q元素中加上lang属性，不过浏览器对嵌套q元素的支持程度并不相同，其实浏览器对非嵌套q元素的支持程度也不相同。由于q元素的跨浏览器问题，很多开发人员避免使用q元素，而是选择直接输入正确的引号或使用字符实体。

2.12、换行显示

使用br元素可以实现文本的换行显示。要确保使用br是最后的选择，因为该元素将表现样式带入HTML，而不是让所有的呈现样式都交由CSS控制。例如，不要使用br模拟段落之间的距离。相反，应该用p标记两个段落并通过CSS的margin属性规定两段之间的距离。

那么，什么时候该用br呢？实际上，对于诗歌、街道地址等应该紧挨着出现的短行都适合用br元素。例如：

    <p>北京市<br />
    海淀区<br />
    北京大学<br />
    32号楼</p>

每个br元素强制让接下来的内容在新的一行显示。如果没有br元素，整个地址都会显示在同一行，除非浏览器窗口太窄导致内容换行。可以使用CSS控制段落中的行间距以及段落之间的距离。在HTML5中，输入
或
都是有效的。

提示：hCard微格式(http://microformats.org/wiki/hcard)是用于表示人、公司、组织和地点的人类和机器都可读的语义形式。可以使用微格式替代上面示例中表示地址的方式。

2.13、修饰文本

span元素是没有任何语义的行内容器，适合包围字词或短语内容，而div适合包含块级内容。如果想将下面列出的项目应用到某一小块内容，而HTML又没有提供合适的语义化元素，就可以使用span。

• 属性，如class、dir、id、lang、title等。
• CSS样式。
• JavaScript行为。

由于span没有任何语义，因此应将它作为最后的选择，仅在没有其他合适的元素时使用它。例如：

    <style type="text/css">
    .red { color: red; }
    </style>
    <p><span class="red">HTML</span>是通向 WEB 技术世界的钥匙。</p>

在上面示例中，想对一小块文字指定不同的颜色，但从句子的上下文看，没有一个语义适合HTML元素，因此额外添加span元素定义一个类样式。

span没有任何默认格式，但就像其他HTML元素一样，可以用CSS添加自己的样式。可以对一个span元素同时添加class和id属性，但通常只应用这两个中的一个（如果真要添加的话）。二者的主要区别在于：class用于一组元素，而id用于标识页面中单独的、唯一的元素。

在HTML没有提供合适的语义化元素时，微格式经常使用span为内容添加语义化类名，以填补语义上的空白。要了解更多信息，可以访问http://microformats.org。

2.14、非文本注解

与b、i、s和small元素一样，HTML5重新定义了u元素，使之不再是无语义的、用于表现的元素。以前，u元素用来为文本添加下画线；现在，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文本的样式，以免与同样默认添加下画线的链接文本混淆。

3、特殊用途文本

HTML5为标识特定用途的信息新增了很多文本标签，具体说明如下。

3.1、标记高亮显示

HTML5使用新的mark元素实现突出显示文本，可以使用CSS对mark元素里的文字应用样式（不应用样式也可以），但应仅在合适的情况下使用该元素。无论何时使用mark，该元素总是用于提示浏览者对特定文本的注意。

最能体现mark元素作用的应用是在网页中检索某个关键词时呈现的检索结果，现在许多搜索引擎都用其他方法实现了mark元素的功能。

【示例1】使用mark元素高亮显示对“HTML 5”关键词的搜索结果：

    <article>
        <h2><mark>HTML5</mark>中国:中国最大的<mark>HTML5</mark>中文门户 - Powered by Discuz!官网</h2>
        <p><mark>HTML5</mark>中国,是中国最大的<mark>HTML5</mark>中文门户。为广大<mark>html5</mark>开发者提
供<mark>html5</mark>教程、<mark>html5</mark>开发工具、<mark>html5</mark>网站示例、<mark>html5</mark>视频、js教
程等多种<mark>html5</mark>在线学习资源。</p>
        <p>www.html5cn.org/  - 百度快照 - 86%好评</p>
    </article>

mark元素还可以标识引用原文，为了某种特殊目的而把原文作者没有重点强调的内容标示出来。

【示例2】使用mark元素将唐诗中的韵脚高亮显示出来：

    <article>
        <h2>静夜思 </h2>
        <h3>李白</h3>
        <p>床前明月<mark>光</mark>，疑是地上<mark>霜</mark>。</p>
        <p>举头望明月，低头思故<mark>乡</mark>。</p>
    </article>

注意：在HTML4中，用户习惯使用em或strong元素突出显示文字，但是mark元素的作用与这两个元素的作用是有区别的，不能混用。

mark元素的标示目的与原文作者无关，或者说，它不是被原文作者用来标示文字的，而是后来被引用时添加上去的，它的目的是吸引当前用户的注意力，供用户参考，希望能对用户有帮助。而strong是原文作者用来强调一段文字的重要性，如错误信息等，em元素是作者为了突出文章的重点文字而使用的。

提示：目前，所有最新版本的浏览器都支持mark元素。IE8以及更早的版本不支持mark元素。

3.2、标记进度信息

progress是HTML5的新元素，它指示某项任务的完成进度。可以用它表示一个进度条，就像在Web应用中看到的指示保存或加载大量数据操作进度的组件。

支持progress的浏览器会根据属性值自动显示一个进度条，并根据值对其进行着色。<progress>和</progress>之间的文本不会显示出来。例如：

    <p>安装进度: <progress max="100" value="35">35%</progress></p>

一般只能通过JavaScript动态地更新value属性值和元素里面的文本以指示任务进程。通过JavaScript（或直接在HTML中）将value属性的值设为35（假定max=“100”）。

progress元素支持三个属性：max、value和form。它们都是可选的，max属性指定任务的总工作量，其值必须大于0。value是任务已完成的量，值必须大于0、小于或等于max属性值。如果progress没有嵌套在form元素里面，又需要将它们联系起来，可以添加form属性并将其值设为该form的id。

目前，Firefox 8+、Opera11+、IE 10+、Chrome 6+、Safari 5.2+版本的浏览器都以不同的表现形式对progress元素提供支持。

【示例】下面简单演示如何使用progress元素：

    <section>
        <p>百分比进度: <progress id="progress" max="100"><span>0</span>%</progress></p>
        <input type="button" onclick="click1()"  value="显示进度"/>
    </section>
    <script>
    function click1(){
        var progress = document.getElementById('progress');
        progress.getElementsByTagName('span')[0].textContent ="0";
        for(var i=0;i<=100;i++)
            updateProgress(i);
    }
    function updateProgress(newValue){
        var progress = document.getElementById('progress');
        progress.value = newValue;
        progress.getElementsByTagName('span')[0].textContent = newValue;
    }
    </script>

注意：progress元素不适合用来表示度量衡，例如，磁盘空间使用情况或查询结果。如须表示度量衡，应使用meter元素。

3.3、标记刻度信息

meter是HTML5的新元素，它很像progress元素。可以用meter元素表示分数的值或已知范围的测量结果。简单地说，它代表的是投票结果。例如，已售票数（共850张，已售811张）、考试分数（百分制的90分）、磁盘使用量（如256 GB中的74 GB）等测量数据。

HTML5建议（并非强制）浏览器在呈现meter时，在旁边显示一个类似温度计的图形、一个表示测量值的横条，测量值的颜色与最大值的颜色有所区别（相等除外）。作为当前少数几个支持meter的浏览器，Firefox正是这样显示的。对于不支持meter的浏览器，可以通过CSS对meter添加一些额外的样式，或用JavaScript进行改进。

【示例】下面简单演示如何使用meter元素：

    <p>项目的完成状态: <meter value="0.80">80%完成</meter></p>
    <p>汽车损耗程度: <meter low="0.25" high="0.75" optimum="0" value="0.21">21%</meter></p>
    <p>十公里竞走里程:<meter min="0" max="13.1" value="5.5" title="Miles">4.5</meter></p>

支持meter的浏览器（如Firefox）会自动显示测量值，并根据属性值进行着色。<meter>和</meter>之间的文字不会显示出来。如最后一个示例所示，如果包含title文本，就会在鼠标悬停在横条上时显示出来。虽然并非必需的，但最好在meter里包含一些反映当前测量值的文本，供不支持meter的浏览器显示。

IE不支持meter，它会将meter元素里的文本内容显示出来，而不是显示一个彩色的横条。可以通过CSS改变其外观。

meter不提供定义好的单位，但可以使用title属性指定单位，如示例所示。通常，浏览器会以提示框的形式显示title文本。meter并不用于标记没有范围的普通测量值，如高度、宽度、距离、周长等。

meter元素包含7个属性，简单说明如下：

• value：在元素中特别标示出来的实际值。该属性值默认为0，可以为该属性值指定一个浮点小数值。它是唯一必须包含的属性。
• min：设置规定范围时，允许使用的最小值，默认为0，设定的值不能小于0。
• max：设置规定范围时，允许使用的最大值。如果设定时，该属性值小于min属性的值，那么把min属性的值视为最大值。max属性的默认值为1。
• low：设置范围的下限值，必须小于或等于high属性的值。如果low属性值小于min属性的值，那么把min属性的值视为low属性的值。
• high：设置范围的上限值。如果该属性值小于low属性的值，那么把low属性的值视为high属性的值；如果该属性值大于max属性的值，那么把max属性的值视为high属性的值。
• optimum：设置最佳值，该属性值必须在min属性值与max属性值之间，可以大于high属性值。
• form：设置meter元素所属的一个或多个表单。

提示：目前，Safari 5.2+、Chrome 6+、Opera 11+、Firefox 16+版本的浏览器支持meter元素。浏览器对meter的支持情况还在变化，关于最新的浏览器支持情况，可以访问http://caniuse.com/#feat=progressmeter。

有人尝试针对支持meter的浏览器和不支持meter的浏览器统一编写meter的CSS。在网上搜索“style HTML5 meter with CSS”就可以找到一些解决方案，其中一些用到了JavaScript。

3.4、标记时间信息

使用time元素标记时间、日期或时间段，这是HTML5新增的元素。呈现这些信息的方式有多种。例如：

    <p>我们在每天早上 <time>9:00</time> 开始营业。</p>
    <p>我在 <time datetime="2020-02-14">情人节</time> 有个约会。</p>

time元素最简单的用法是不包含datetime属性。在忽略datetime属性的情况下，它们的确提供了具备有效的机器可读格式的时间和日期。如果提供datetime属性，time标签中的文本可以不严格使用有效的格式；如果忽略datetime属性，文本内容就必须是合法的日期或时间格式。

time中包含的文本内容会出现在屏幕上，对用户可见，而可选的datetime属性则是为机器准备的。该属性需要遵循特定的格式。浏览器只显示time元素的文本内容，而不会显示datetime的值。

datetime属性不会单独产生任何效果，但可以用于在Web应用（如日历应用）之间同步日期和时间。这就是必须使用标准的机器可读格式的原因，这样程序之间就可以使用相同的“语言”共享信息。

提示：不能在time元素中嵌套一个time元素，也不能在没有datetime属性的time元素中包含其他元素（只能包含文本）。

在早期的HTML5说明中，time元素可以包含pubdate的可选属性。不过，后来pubdate已不再是HTML5的一部分。读者可能在早期的HTML5示例中见到过该属性。

**【拓展】**datetime属性（或者没有datetime属性的time元素）必须提供特定的机器可读格式的日期和时间。这可以简化为下面的形式。

    YYYY-MM-DDThh: mm: ss

例如（当地时间）：

    2020-11-03T17: 19: 10

表示“当地时间2020年11月3日17时19分10秒”。小时部分使用24小时制，因此表示下午5点应使用17，而非05。如果包含时间，秒是可选的。也可以使用hh:mm.sss格式提供时间的毫秒数。注意，毫秒数之前的符号是一个点。

如果要表示时间段，则格式稍有不同。有几种语法，不过最简单的形式为：

    nh nm ns

其中，三个n分别表示小时数、分钟数和秒数。

也可以将日期和时间表示为世界时。在末尾加上字母Z，就成了全球标准时间(Coordinated Universal Time，UTC)。UTC是主要的全球时间标准。例如（使用UTC的世界时）：

    2020-11-03T17: 19: 10Z

也可以通过相对UTC时差的方式表示时间。这时不写字母Z，写上-（减）或+（加）及时差即可。例如，含相对UTC时差的世界时：

    2020-11-03T17: 19: 10-03: 30

表示“纽芬兰标准时(NST)2020年11月3日17时19分10秒”（NST比UTC晚3小时30分）。

提示：如果确实要包含datetime，则不必提供时间的完整信息。

3.5、标记联系信息

HTML没有专门用于标记通信地址的元素，address元素是用以定义与HTML页面或页面一部分（如一篇报告或新文章）有关的作者、相关人士或组织的联系信息，通常位于页面底部或相关部分的内容中。至于address具体表示哪一种信息，取决于该元素出现的位置。

【示例】下面是一个简单的联系信息演示示例。

    <main role="main">
        <article>
            <h1>文章标题</h1>
            <p>文章正文</p>
            <footer>
                <p>说明文本</p>
                <address>
                <a href="mailto:zhangsan@163.com">zhangsan@163.com</a>.
                </address>
            </footer>
        </article>
    </main>
    <footer role="contentinfo">
        <p><small>&copy; 2020 baidu, Inc.</small></p>
        <address>
        北京8号<a href="index.html">首页</a>
        </address>
    </footer>

在大多数时候，联系信息的形式是作者的电子邮件地址或指向联系信息页的链接。联系信息有可能是作者的通讯地址，这时将地址用address标记就是有效的。但是用address标记公司网站“联系我们”页面中的办公地点，则是错误的用法。

在上面的示例中，页面中有两个address元素：一个用于article的作者，另一个位于页面级的footer里，用于对整个页面的维护。注意，article的address元素只包含联系信息。尽管article的footer里也有关于作者的背景信息，但这些信息位于address元素的外面。

address元素中的文字默认以斜体显示。如果address嵌套在article里，则属于其所在的最近的article元素，否则属于页面的body。说明整个页面的作者的联系信息时，通常将address放在footer元素里。article里的address提供的是该article作者的联系信息，而不是嵌套在该article里的其他任何article（如用户评论）的作者的联系信息。

address只能包含作者的联系信息，而不能包含其他内容，如文档或文章的最后修改时间。此外，HTML5禁止在address里包含h1～h6、article、address、aside、footer、header、hgroup、nav和section元素。

3.6、标记显示方向

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

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

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

【示例】设置用户名，根据语言的不同自动调整显示顺序：

目前，只有Firefox和Chrome浏览器支持bdi元素。

3.7、标记换行断点

HTML5为br引入一个相近的元素—wbr，它代表“一个可换行处”。可以在一个较长的无间断短语（如URL）中使用该元素，表示此处可以在必要的时候进行换行，从而让文本在有限的空间内更具可读性。因此，与br不同，wbr不会强制换行，而是让浏览器知道在哪里可以根据需要进行换行。

【示例】为URL字符串添加换行符标签，这样当窗口宽度变化时，浏览器会自动根据断点确定换行位置：

    <p>本站旧地址为https:<wbr>//<wbr>www.old_site.com/，新地址为https:<wbr>//<wbr>www.new_site.com/。</p>

3.8、标记旁注

旁注标记是东亚语言（如中文和日文）中一种惯用的符号，通常用于表示生僻字的发音。这些小的注解字符出现在它们标注的字符的上方或右方，常简称为旁注（ruby或rubi）。日语中的旁注字符称为振假名。

ruby元素以及它们的子元素rt和rp是HTML5中为内容添加旁注标记的机制。rt指明对基准字符进行注解的旁注字符。可选的rp元素用于在不支持ruby的浏览器中的旁注文本周围显示括号。

【示例】使用和标签为唐诗诗句注音：

    <style type="text/css">
    ruby { font-size: 40px; }
    </style>
    <ruby>少<rt>shào</rt>小<rt>xiǎo</rt>离<rt>lí</rt>家<rt>jiā</rt>老<rt>lǎo</rt>大<rt>dà</rt>回<rt>huí</rt></ruby>，
    <ruby>乡<rt>xiāng</rt>音<rt>yīn</rt>无<rt>wú</rt>改<rt>gǎi</rt>鬓<rt>bìn</rt>毛<rt>máo</rt>衰<rt>shuāi</rt></ruby>。

3.9、标记展开/收缩详细信息

HTML5新增details和summary元素，允许用户创建一个可展开、折叠的元件，让一段文字或标题包含一些隐藏的信息。

在一般情况下，details用来对显示在页面中的内容做进一步的解释，details元素内并不仅限于放置文字，也可以放置表单、插件或对一个统计图提供详细数据的表格。

details元素有一个布尔型的open属性，当该属性值为true时，details包含的内容会展开显示；当该属性值为false（默认值）时，其包含的内容被收缩起来不显示。

summary元素从属于details元素，当单击summary元素包含的内容时，details包含的其他所有从属子元素将会展开或收缩。如果details元素内没有summary元素，浏览器会提供默认文字以供单击，同时还会提供一个类似上下箭头的图标，提示details的展开或收缩状态。

当details元素的状态从展开切换为收缩，或者从收缩切换为展开时，均将触发toggle事件。

【示例】设计一个商品的详细数据展示：

    <details>
        <summary>HUAWEI Mate 40 Pro 5G</summary>
        <p>商品详情：</p>
        <dl>
            <dt>电池</dt>
            <dd>4400mAh</dd>
            ……
        </dl>
    </details>

收缩：

展开：

3.10、标记对话框信息

HTML5新增dialog元素，用来定义一个对话框或窗口。dialog在界面中默认为隐藏状态，可以设置open属性，定义是否打开对话框或窗口，也可以在脚本中使用该元素的show()或close()方法动态地控制对话框的显示或隐藏状态。

【示例1】下面是一个简单的演示示例：

    <dialog>
        <h1>Hi, HTML5</h1>
        <button id="close">关闭</button>
    </dialog>
    <button id="open">打开对话框</button>
    <script>
    var d = document.getElementsByTagName("dialog")[0],
        openD = document.getElementById("open"),
        closeD = document.getElementById("close");
    openD.onclick = function() {d.show();}          // 显示对话框
    closeD.onclick = function() {d.close();}        // 关闭对话框
    </script>

隐藏状态：

打开状态：

提示：在脚本中，设置dialog.open=“open"可以打开对话框，设置dialog.open=”"可以关闭对话框。

【示例2】如果调用dialog元素的showModal()方法可以以模态对话框的形式打开，效果如下图所示。然后使用::backdrop伪类设计模态对话框的背景样式。

    <style>
    ::backdrop{background-color:black;}
    </style>
    <input type="button" value="打开对话框"  onclick=" document.getElementById('dg'). showModal(); ">
    <dialog id="dg" onclose="alert('对话框被关闭')" oncancel="alert('在模式窗口中按下Esc键')">
        <h1>Hi, HTML5</h1>
        <input type="button" value="关闭"  onclick="document.getElementById('dg').close();"/>
    </dialog>

文章来源地址https://www.toymoban.com/news/detail-652525.html

到了这里，关于设计HTML5文本的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！