文字基础知识

与文本编辑器提供 <h1><h6> 标题的方式类似,另外还提供了多种设置文本部分格式的方法。 以有意义、直观的方式,HTML 提供了一组非常相似的语义元素和非语义元素来阐明散文的含义。

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

章节标题元素有 6 个:<h1><h2><h3><h4><h5><h6>,其中 <h1> 最重要 最少为 <h6>。多年来,开发者都知道浏览器会使用标题来概述文档。 这最初是目标,但浏览器尚未实现概览功能。不过,屏幕阅读器用户确实会使用标题 一种探索策略,以了解网页内容,即使用 h 键在标题之间导航。因此,确保 我们还是强烈建议您采用像编写文档概述一样的标题级别,可以使内容易于理解。

默认情况下,浏览器将 <h1> 设为最大,<h2> 略小,且每个后续标题级别更小 默认情况。有趣的是,默认情况下,浏览器还会根据 <article><aside><nav><h1> <section> 元素。

嵌套 H1 示例。

某些用户代理样式表包含以下选择器或类似选择器,它们可用于设置嵌套的 <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 属性将所引用信息的来源文档或消息的网址作为其值。此属性在 <q><blockquote> 上均有效。虽然它是网址,但机器可以读取,但读者看不到:

</p> 结束标记是可选的(且始终推荐),但 </blockquote> 结束标记始终是必需的。

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

#teachers 部分,HAL 引述为:“I'm 很抱歉 ,但我恐怕做不到。”其英语和法语代码为

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

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

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

<blockquote> 一样,<q> 元素支持 cite 属性。

HTML 实体

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

您经常使用的一些其他实体包括 &copy; 表示版权 (©)、&trade; 表示商标 (TM),&nbsp; 表示不间断空格。 如果您希望在两个字符或字词之间添加空格,同时防止在此处换行,则不换行空格会非常有用。 有超过 2000 个已命名字符引用。 但如果需要,每个字符(包括表情符号)都有一个以 &# 开头的等效编码。

您可以查看 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 中显示版权符号?

&copy;
c
&copyright

哪个元素用于指明某内容为引文?

<cite>
<quote>
<blockquote>