文本基础知识

正如您的文本编辑器提供 <h1><h6> 标题,以及大量以有意义且可视的方式格式化文本节的方法一样,HTML 提供了一组非常相似的语义化和非语义化元素来理解散文的含义。

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

标题,重新审视

有六个章节标题元素:<h1><h2><h3><h4><h5><h6>,其中 <h1> 最重要,<h6> 最不重要。多年来,开发者被告知标题被浏览器用来概述文档。这最初是一个目标,但浏览器尚未实现概述功能。但是,屏幕阅读器用户确实使用标题作为一种探索策略来了解页面的内容,并使用 h 键在标题之间导航。因此,确保标题级别的实现方式与您概述文档的方式相同,这使您的内容具有无障碍功能,并且仍然非常值得鼓励。

默认情况下,浏览器将 <h1> 样式设置为最大,<h2> 略小,每个后续标题级别在默认情况下都更小。有趣的是,浏览器默认情况下还会根据 <article><aside><nav><section> 元素的嵌套数量来减小 <h1> 字体大小。

Nested H1 examples.

某些用户代理样式表包含以下选择器或类似选择器,以将嵌套的 <h1> 元素样式化为级别较低的元素

h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

但是,无障碍对象模型 (AOM) 仍然正确报告元素的级别;在本例中为“标题,级别 1”。请注意,浏览器不会对其他标题级别执行此操作。也就是说,不要使用基于标题级别的浏览器样式。即使浏览器不支持概述,也要假装支持;像支持概述一样标记您的内容标题。这将使您的内容对搜索引擎、屏幕阅读器和未来的维护者(很可能就是您)有意义。

在标题之外,大多数结构化文本由一系列段落组成。在 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 的引语取自她的线下杂志,您将像这样编写块引用

参考文献元素 <cite> 没有隐式角色,应从其内容中获取其无障碍名称;不要包含 aria-label

为了在您无法使内容可见时给予应有的肯定,可以使用 cite 属性,该属性的值是所引用信息的源文档或消息的 URL。此属性在 <q><blockquote> 上均有效。虽然它是一个 URL,但它是机器可读的,但读者不可见

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

大多数浏览器都会向 <blockquote> 内联方向添加内边距,并将 <cite> 内容设置为斜体;这可以通过 CSS 控制。<blockquote> 不会添加引号,但可以使用 CSS 生成的内容添加引号。<q> 元素默认会添加引号,并使用适合语言的引号。

#teachers 部分中,HAL 被引述说:“我很抱歉,但我恐怕我做不到。”。英文和法文的代码如下

内联引用元素 <q> 添加了适合语言的引号。用户代理默认样式包括 open-quote 和 close-quote 生成的内容

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> 元素用于指示引语的来源,而不是引语本身。