HTML5与CSS3基础教程学习笔记【第四章文本】

本文链接：https://blog.csdn.net/kzpx_1106/article/details/125628130

第四章文本

前言
4.1.添加段落
4.2.指定细则
4.3.标记重要和强调的文本
4.4.创建图
4.5.指明引用或参考
4.6.引述文本
4.7.指定时间
4.8.解释缩写词
4.9.定义术语
4.10.创建上标和下标
4.11.添加作者联系信息
4.12.标注编辑和不再准确的文本
总结

前言

除非网站添加了太多视频和图片，否则网页的大部分内容还是文本。本章将说明针对不同的文本类型，尤其是（但不仅仅是）那些句子或短语里的文本，应该选择哪些合适的 HTML 语义化元素。

在这里插入图片描述

4.1.添加段落

HTML 会忽略你在文本编辑器中输入的回车符和其他额外的空格。要在网页中开始一个新的段落，应该使用 p 元素。

...
<body>
<h1>Antoni Gaudí</h1>
<p>Many tourists are drawn to Barcelona 
➝ to see Antoni Gaudí's incredible 
➝ architecture.</p>
<p>Barcelona celebrated the 150th 
➝ anniversary of Gaudí's birth in 
➝ 2002.</p>
<h2 lang="es">La Casa Milà</h2>
<p>Gaudí's work was essentially useful. 
➝ <span lang="es">La Casa Milà</span> is 
➝ an apartment building and real people 
➝ live there.</p>
<h2 lang="es">La Sagrada Família</h2>
<p>The complicatedly named and curiously 
➝ unfinished Expiatory Temple of the 
➝ Sacred Family is the most visited 
➝ building in Barcelona.</p>
</body>
</html>

毫无疑问，p 是最常使用的 HTML 元素之一（注意：在实践中，我通常会使用 article 包住这些内容。这里省略了该标记，是为了让例子显得更为通用，同时避免产生 p 元素必须嵌套在article 中的印象）
创建新段落的步骤
(1) 输入 。
(2) 输入新段落的内容。
(3) 输入  结束这个段落。

4.2.指定细则

根据 HTML5，small 表示细则一类的旁注（side comment），“通常包括免责声明、注意事项、法律限制、版权信息等。有时我们还可以用它来表示署名，或者满足许可要求。”small 通常是行内文本中的一小块，而不是包含多个段落或其他元素的大块文本。
指定细则的步骤
(1) 输入 。
(2) 输入表示免责声明、注解、署名等类型的文本。
(3) 输入 

...
<body> <p>Order now to receive free shipping. 
<small>(Some restrictions may apply.)
➝ </small></p>
...
<footer role="contentinfo">
 <p><small>&copy; 2013 The Super 
➝ Store. All Rights Reserved. 
➝ </small></p>
</footer>
</body>
</html>

4.3.标记重要和强调的文本

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

...
<body> <p><strong>Warning: Do not approach the 
➝ zombies <em>under any circumstances</em>
➝ </strong>. They may <em>look</em> 
➝ friendly, but that's just because they want 
➝ to eat your arm.</p>
</body>
</html>

第一个句子既有 strong 又有 em，而第二个句子只有 em。
标记重要文本
(1) 输入 。
(2) 输入想标记为重要内容的文本。
(3) 输入 。
强调文本
(1) 输入 。
(2) 输入想强调的文本。
(3) 输入 。

4.4.创建图

你一定在报纸、杂志、报告等其他媒介上看到过图。通常，图是由页面上的文本引述出来的。本书的大多数页面都有这样的例子。在 HTML5 出现之前，没有专门实现这个目的的元素，因此一些开发人员想出了他们自己的解决办法（通常会使用不那么理想的、没有语义的 div 元素）。通过引入 figure 和figcaption，HTML5 改变了这种情况。图可以是图表、照片、图形、插图、代码片段，以及其他类似的独立内容。可以由页面上的其他内容引出 figure，figcaption 是
figure 的标题，可选，出现在 figure 内容的开头或结尾处。
创建图及其标题的步骤
(1) 输入 <figure>。
(2) 作为可选步骤，输入 <figcaption> 开始图的标题。
(3) 输入标题文字。
(4) 如果在第 (2)、(3) 步创建了标题，就输入 </figcaption>。
(5) 添加图像、视频、数据表格等内容的代码创建图。
(6) 如果没有在 figure 内容之前包含figcaption，则可以在内容之后复第 (2) ～(4)步。
(7) 输入 </figure>。

4.5.指明引用或参考

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

...
<body> <p>He listened to <cite>Abbey Road</cite> 
➝ while watching <cite>A Hard Day's Night
➝ </cite> and reading <cite>The Beatles 
➝ Anthology</cite>. <p>When he went to The Louvre, he learned 
➝ that <cite>Mona Lisa</cite> is also 
➝ known as <cite lang="it">La Gioconda
➝ </cite>.</p>
</body>
</html>

在这个例子中，cite 元素标记的是音乐专辑、电影、图书和艺术作品的标题（注意：最后一个例子中的 lang=“it” 表明 cite 文本的语言是意大利语）
引用参考的步骤
(1) 输入 <cite>。
(2) 输入参考的名称。
(3) 输入 </cite>。

4.6.引述文本

有两个特殊的元素用以标记引述的文本。blockquote 元素表示单独存在的引述（通常更长，但也可能不是），它默认显示在新的一行，如图所示。而 q 元素则用于短的引述，如句子里面的引述。

...
<body> <p>He especially enjoyed this selection from 
➝ <cite>The Adventures of Huckleberry Finn 
➝ </cite> by Mark Twain:</p>
<blockquote cite="http://www.
➝ marktwainbooks.edu/the-adventures-of-
➝ huckleberry-finn/">
 <p>We said there warn't no home like a 
➝ raft, after all. Other places do seem 
➝ so cramped up and smothery, but a 
➝ raft don't. You feel mighty free and 
➝ easy and comfortable on a raft.</p>
</blockquote>
<p>It reminded him of his own youth exploring 
➝ the county by river in the summertime.</p>
</body>
</html>

根据需要，blockquote 可长可短。可以包含 cite 属性（不要与第一段中出现的 cite 元素混淆）提供引述文本的位置。
1. 引述块级文本的步骤
(1) 输入<blockquote开始一个块级引述。
(2) 如果需要，输入 cite=“url”，其中url 为引述来源的地址。
(3) 输入 > 以结束开始标签。
(4) 输入希望引述的文本，并用段落等适当的元素包围。
(5) 输入 </blockquote>。
2. 引述行内文本的步骤
(1) 输入 <q 开始引述字词或短语。
(2) 如果需要，输入 cite=“url”，其中url为引述来源的地址。
(3) 如果引述内容的语言与页面默认语言（通过 html 元素的 lang 属性指定）不同，输入 lang=“xx”，其中 xx 是引述内容语言的两个字母的代码。这个代码用于判断需要使用的引号的类型（英语为 " "，而很多欧洲语言则为 «»），但浏览器对引号的呈现方式可能不同。
(4) 输入 > 以结束开始标签。
(5) 输入要引述的文本。
(6) 输入 </q>。

4.7.指定时间

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

...
<body> <p>The train arrives at <time>08:45</time> 
➝ and <time>16:20</time> on <time>
➝ 2017-03-19</time>.</p> <p>They made their dinner reservation for 
➝ <time datetime="2013-11-20T18:30:00">
➝ tonight at 6:30</time>.</p> <p>We began our descent from the peak of 
➝ Everest on <time datetime="1952-06-12T
➝ 11:05:00">June 12, 1952 at 11:05 a.m.
➝ </time></p> <p>The film festival is <time datetime=
➝ "2014-07-13">July 13</time>-<time 
➝ datetime="2014-07-16">16</time>.</p>
<!-- 不包含年份的例子 -->
<p>Her birthday is <time datetime="03-29">
➝ March 29th</time>.</p>
<!-- 时间段的例子 -->
<p>The meeting lasted <time>2h 41m 3s
➝ </time> instead of the scheduled <time 
➝ datetime="2h 30m">two hours and thirty 
➝ minutes</time>.</p>
</body>
</html>

如第一个例子所示，time 元素最简单的用法是不包含 datetime 属性。在忽略 datetime 属性的情况下，它们的确提供了具备有效的机器可读格式的时间和日期。在其余的例子中，由于提供了datetime 属性，time 标签中的文本并未严格使用有效的格式。
指定准确时间、日期或时间段的步骤
(1) 输入 <time 开始 time 元素。
(2) 如果需要，输入 datetime=“time”，其中 time 表示的是第 (4) 步中文本的机器可读格式。
(3) 输入 > 结束开始标签。
(4) 输入要显示在浏览器中的表示时间、日期或时间段的文本（如果第 (2) 步中没有包含 datetime 属性，参见第一条提示）。
(5) 输入 </time>。

4.8.解释缩写词

缩写词很常见，如 Jr.、M.D.，甚至 good ol’HTML。可以使用 abbr 元素标记缩写词并解释其含义。不必对每个缩写词都使用 abbr，只在需要帮助访问者了解该词含义的时候使用。
解释缩写词的步骤
(1) 输入 <abbr。
(2) 作为可选的一步，输入 title=“expansion”，其中expansion 是缩写词的全称。
(3) 输入 >。
(4) 然后输入缩写词本身。
(5) 最后输入 </abbr> 结束标签。
(6) 作为可选的一步，输入一个空格和(expansion)，其中expansion 是缩写词的全称。

4.9.定义术语

在印刷物中，首次定义术语通常会对其添加区别于其他文本的格式（英文通常为斜体，汉语通常为黑体或者楷体），在其后提到术语时则不再使用特殊格式。在 HTML 中定义术语时，可以使用 dfn元素对其作语义上的区分。仅用 dfn 包围要定义的术语，而不是包围定义。同印刷物的惯例一样，后续使用术语时不再
需要使用 dfn 对其进行标记，因为不再需要对其进行定义。（在 HTML 中，定义术语的地方称为“术语的定义实例”。）
标记术语的定义实例
(1) 输入 <dfn>。
(2) 输入要定义的术语。
(3) 输入 </dfn>。

4.10.创建上标和下标

比主体文本稍高或稍低的字母或数字分别称为上标和下标。HTML包含用来定义这两种文本的元素。常见的上标包括商标符号、指数和脚注编号等；常见的下标包括化学符号等。
创建上标和下标的步骤
(1) 输入  创建下标，或输入 创建上标。
(2) 输入要出现在下标或上标里的字符或符号。
(3) 根据第 (1) 步中使用的元素，输入 或  结束该元素。

4.11.添加作者联系信息

你或许以为 address 元素是用于标记通讯地址的，但其实并非如此（有一种例外的情况，参见第一条提示）。实际上，没有专门用于标记通讯地址的 HTML 元素。实际上，address 元素是用以定义与HTML 页面或页面一部分（如一篇报告或新文章）有关的作者、相关人士或组织的联系信息，通常位于页面底部或相关部分内。至于 address 具体示的是哪一种信息，取决于该元素出现的位置。
提供作者联系信息
(1)如果要为一个 article 提供作者联系信息，就将光标放在该元素内。如果要提供整个页面的作者联系信息，就将光标放在 body 中（更常见的做法是放在页面级的 footer 里）。
(2) 输入 <address>。
(3) 输入作者的电子邮件地址、指向联系信息页的链接等。
(4) 输入 </address>。

4.12.标注编辑和不再准确的文本

有时可能需要将在前一个版本之后对页面内容的编辑标出来，或者对不再准确、
不再相关的文本进行标记。有两种用于标注编辑的元素：代表添加内容的 ins 元素和标记已删除内容的 del 元素。这两个元素可以单独使用。
1. 标记新插入文本
(1) 输入 <ins>。
(2) 输入新内容。
(3) 输入 </ins>。
2. 标记已删除文本
(1) 将光标放在待标记为已删除的文本或元素之前。
(2) 输入 <del>。
(3) 将光标放在待标记为已删除的文本或元素之后。
(4) 输入 </del>。
3. 标记不再准确或不再相关的文本
(1) 将光标放在希望标记为不再准确或不再相关的文本的前面。
(2) 输入 <s>。
(3) 将光标放在希望标记的文本的后面。
(4) 输入 </s>。