文字基础知识

与文本编辑器提供 <h1><h6> 标题以及多种以有意义且直观的方式设置文本段落格式的方法类似,HTML 提供了一组非常相似的语义和非语义元素,用于赋予散文意义。

本部分将介绍标记文本的主要方式,即文本基础知识。然后,我们将讨论属性,之后再探讨标记文本的其他方式,例如列表、表格和表单。

标题,再次探讨

有六个部分标题元素:<h1><h2><h3><h4><h5><h6>,其中 <h1> 最重要,<h6> 最不重要。多年来,开发者一直被告知浏览器使用标题来概述文档。这最初是一个目标,但浏览器从未实现文档大纲功能,并且提议的大纲算法已正式从 HTML 规范中移除。不过,屏幕阅读器用户非常依赖标题作为探索策略来了解页面的内容,他们可以使用 h 键在标题之间切换。确保标题级别以逻辑方式实现(就像您为文档创建大纲一样),这样可让内容更易于访问,强烈建议您这样做。

默认情况下,浏览器会将 <h1> 设置为最大,<h2> 略小,后续每个标题级别的字号都会比上一个级别小。从历史上看,用户代理样式表还会减小嵌套在 <article><aside><nav><section> 等分段元素内的 <h1> 元素的字号。

某些用户代理样式表包含以下选择器(或类似选择器),用于将嵌套的 <h1> 元素设置为较低的标题级别:

/* Legacy UA stylesheet behavior (now removed from browsers and the HTML spec) */
h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

不过,无障碍对象模型 (AOM) 和屏幕阅读器从不根据嵌套情况修改标题级别;嵌套的 <h1> 始终报告为“标题,级别 1”。这导致了不一致的情况,即嵌套标题在视觉上显得较小,但对于辅助技术而言仍是顶级标题。

由于 HTML 规范移除了文档轮廓算法,因此浏览器也移除了这些旧版用户代理样式表规则。因此,嵌套的 <h1> 元素会保留其标准的 <h1> 字号,而不会自动缩小。

请勿依赖于将 <h1> 元素嵌套在分段元素内来实现视觉样式或结构层次。请始终根据文档结构,使用连续的标题元素(<h1><h6>)标记内容。这样可确保搜索引擎、屏幕阅读器和未来的维护人员能够清晰地了解您的内容。

除了标题之外,大多数结构化文本都由一系列段落组成。在 HTML 中,段落使用 <p> 标记进行标记;结束标记是可选的,但始终建议使用。

#about 部分包含一个标题和几个段落:

此部分不是地标,因为它没有无障碍名称。如需将此元素转换为地标角色 region,您可以使用 aria-labelledby 提供无障碍名称:

<section id="about"  aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

仅在适当的时候创建地标。如果地标过多,屏幕阅读器用户很快就会迷失方向。

引用和引文

在标记文章或博文时,您可能需要添加引用或摘录,并可选择是否显示引用信息。 这三个组件对应的元素如下:<blockquote><q><cite>(用于显示引用),或 cite 属性(用于提供更多搜索信息)。

#feedback 部分包含一个标题和三条评价;这些评价是块引用,其中一些包含引用,后面跟着一个包含引用出处的段落。为了节省空间,我们省略了第三条评价,标记如下:

有关引用作者或引用的信息不属于引用内容,因此不在 <blockquote> 中,而是在引用内容之后。 虽然这些是通俗意义上的引用,但实际上并未引用特定资源,因此封装在 <p> 段落元素中。

引述内容显示在三行中,包括作者姓名、之前担任的职位和职业抱负。<br> 换行符用于在文本块中创建换行符。它可用于实际地址、诗歌和签名块。不应使用换行符作为回车符来分隔段落。请关闭上一个段落,然后打开一个新段落。使用段落标记来表示段落不仅有利于无障碍功能,还支持样式设置。<br> 元素只是一个换行符,受极少数 CSS 属性的影响。

虽然我们在每个引用块后的段落中提供了引用信息,但之前显示的引用之所以采用这种编码方式,是因为它们并非来自外部来源。如果确实如此,则应引用来源。

如果评价是从评价网站、图书或其他作品中提取的,则 <cite> 元素可用于来源的标题。<cite> 的内容可以是书名、网站名称或电视节目名称,甚至是计算机程序的名称。无论来源是顺带提及,还是被引用或参考,都可以使用 <cite> 封装。<cite> 的内容是作品,而不是作者。

如果 Blendan Smooth 的引言摘自她的线下杂志,您应按如下方式编写 blockquote:

引用元素 <cite> 没有隐式角色,应从其内容中获取无障碍名称;请勿包含 aria-label

如果您无法显示内容,但仍需注明出处,可以使用 cite 属性,该属性的值为所引用信息的源文档或消息的网址。此属性对 <q><blockquote> 均有效。虽然它是一个网址,但可供机器读取,读者却看不到:

虽然 </p> 结束标记是可选的(但始终建议使用),但 </blockquote> 结束标记始终是必需的。

大多数浏览器都会在 <blockquote> 内嵌方向上添加边衬区,并使 <cite> 内容变为斜体;这可以通过 CSS 进行控制。<blockquote> 不会添加英文引号,但可以使用 CSS 生成的内容添加英文引号。<q> 元素默认会添加引号,并使用适合相应语言的引号。

#teachers 部分,HAL 的引述是:“对不起,,但我恐怕无法做到这一点。”相应代码(英语和法语)如下

内嵌引用元素 <q> 会添加适合相应语言的引号。用户代理默认样式包括左引号和右引号生成的内容:

q::before {content: open-quote;}
q::after {content: close-quote;}

添加 lang 属性是为了让浏览器知道,虽然网页的基本语言在 <html lang="en-US"> 开始标记中定义为英语,但此段文字采用的是其他语言。这有助于 Siri、Alexa 和 VoiceOver 等语音控制功能使用法语发音。它还会告知浏览器要呈现哪种类型的引号。

<blockquote> 类似,<q> 元素支持 cite 属性。

HTML 实体

您可能已经注意到转义序列或“实体”。由于 < 用于 HTML 中,因此您必须使用 &lt; 或不太容易记住的编码 &#60; 对其进行转义。HTML 中有四个保留实体:<>&"。它们的字符引用分别为 &lt;&gt;&amp;&quot;

您经常会用到的一些其他实体包括:版权符号 (©) 的实体 &copy;、商标符号 (™) 的实体 &trade; 和不间断空格的实体 &nbsp;。 如果您想在两个字符或字词之间添加空格,同时防止在该位置出现换行,不间断空格会非常有用。 有 2,000 多个命名字符引用。 不过,如果需要,每个字符(包括表情符号)都有一个以 &# 开头的编码等效项。

如果您查看 ToastyMcToastface 的研讨会评价(未包含在上面的代码示例中),会发现一些不寻常的文本字符:

<blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇</blockquote>

此引用块中的最后一句话也可以写成:

This has no&#x336;&#x33C;&#x356;&tcedil;&#x318;h&#x31D;&#x330;&#x329;&#x348;&#x317;i&#x319;&#x32A;n&#x34F;&#x329;&#x319;
&#x34D;&#x331;&#x32B;&#x31C;&#x31F;g&#x322;&#x323;&#x345; &#x317;&#x330;&#x353;&#x332;&#x31E;&#x300;t&#x359;&#x300;o&#x31F;
&#x316;&#x356;&#x339;&#x315; &#x353;&#x33C;&#x34E;&#x31D;&#x356;&#x32D;d&oacute;&#x32A;&#x320;&#x355;&#x31C; &#x34D;&#x331;
&#x34E;&#x35A;&#x32F;&#x31F;&#x301;w&#x32E;&#x332;&#x339;&#x355;&#x348;&#x31F;&#x35E;&igrave;th&#x322; &#x330;&#x333;
&#x32F;&#x32E;&#x347;

此混乱的代码中包含一些未转义的字符和一些命名字符引用。由于字符集是 UTF-8,因此引用块中的最后几个字符实际上不需要转义,如本例所示。只需对字符集中不支持的字符进行转义。如有需要,您可以使用多种工具来转义各种字符,也可以只确保在 <head> 中包含 <meta charset="UTF-8">

即使您将字符集指定为 UTF-8,当您想在屏幕上打印 < 字符时,仍然必须对该字符进行转义。 一般来说,您无需添加 >"& 的命名字符引用;但如果您想撰写有关 HTML 实体的教程,那么在教别人如何编写 < 代码时,您需要编写 &lt;。😀

哦,对了,笑脸表情符号是 &#x1F600;,但本文档声明为 UTF-8,因此不会进行转义。

检查掌握情况

测试您对 HTML 中的文本相关知识的掌握情况。

如何在 HTML 中显示版权符号?

c
请重试。
&copy;
正确!
&copyright
请重试。

哪个元素用于表示某段内容是引用?

<blockquote>
正确
<quote>
请重试。
<cite>
请重试。<cite> 元素用于指明引文的来源,而不是引文本身。