开始学习HTML 5 | 青训营笔记

129 阅读5分钟

这是我参与「第四届青训营 」笔记创作活动的的第9天

高阶文字排版

HTML中有许多其他元素可以用于格式化文本,如标记引文、描述列表、计算机代码和其他相关文本、下标和上标、联系信息等等。

描述列表

描述列表使用与其他列表类型不同的闭合标签——<dl>;除此之外,每一项都用<dt>元素闭合。每个描述都用<dd>元素闭合。例如:

<dl>
  <dt>内心独白</dt>
    <dd>戏剧中,某个角色对自己的内心活动或感受进行念白表演,这些台词只面向观众,而其他角色不会听到。</dd>
  <dt>语言独白</dt>
    <dd>戏剧中,某个角色把自己的想法直接进行念白表演,观众和其他角色都可以听到。</dd>
  <dt>旁白</dt>
    <dd>戏剧中,为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白,只面向观众,内容一般都是角色的感受、想法、以及一些背景信息等。</dd>
</dl>

浏览器的默认样式会在描述列表的描述部分描述术语之间产生缩进。

实际显示效果:

 
内心独白
   
戏剧中,某个角色对自己的内心活动或感受进行念白表演,这些台词只面向观众,而其他角色不会听到。
 
语言独白
   
戏剧中,某个角色把自己的想法直接进行念白表演,观众和其他角色都可以听到。
 
旁白
   
戏剧中,为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白,只面向观众,内容一般都是角色的感受、想法、以及一些背景信息等。

 

引用

HTML也有用于标记引用的特性,至于使用哪个元素标记,取决于引用内容是一块还是一行。

1.块引用

如果一个块级内容(一个段落、多个段落、一个列表等)从其他地方被引用,你应该把它用<blockquote>元素包裹起来表示,并且在cite属性里用URL来指向引用的资源。例如:

下面是MDN对于<blockquote>元素的原文描述:

<p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> 
(or <em>HTML Block Quotation Element</em>) 
indicates that the enclosed text is an extended quotation.</p>

引用为:

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

浏览器在渲染块引用时默认会增加缩进,作为引用的一个指示符。

实际效果为:

The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.

2.行内引用

行内元素用同样的方式工作,除了使用<q>元素。例如:

<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q></p>

3. 引文

cite属性内容不会被浏览器显示、屏幕阅读器阅读,需要使用JavaScript或CSS,浏览器才会显示cite的内容。如果你想要确保引用的来源在页面上是可显示的,更好的方法是为<cite>元素附上链接:

<p>According to the <a href="https://developer.mozilla.org/en US/docs/Web/HTML/Element/blockquote">
<cite>MDN blockquote page</cite></a>:
</p>
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>
<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended for short quotations that don't require paragraph breaks.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"><cite>MDN q page</cite></a>.</p>

缩略语

元素<abbr>常被用来包裹一个缩略语或缩写,并且提供缩写的解释(包含在title属性中)。例如:

<p>我们使用 <abbr title="超文本标记语言(Hyper text Markup Language)">HTML</abbr> 来组织网页文档。</p>
<p>第 33 届 <abbr title="夏季奥林匹克运动会">奥运会</abbr> 将于 2024 年 8 月在法国巴黎举行。</p>

显示效果如下(当光标移动到项目上时会出现提示):

我们使用 HTML 来组织网页文档。

第 33 届 奥运会 将于 2024 年 8 月在法国巴黎举行。

标记联系方式

HTML有个用于标记联系方式的元素:<address>。它仅仅包含你的联系方式。例如:

<address>
  <p>Chris Mills, Manchester, The Grim North, UK</p>
</address>

注意:<address>元素是未来标记编写HTML文档的人的联系方式,而不是其他任何内容。

上标和下标

<sub>包裹的元素为下标,以<sup>包裹的元素为上标。例如:

<p>咖啡因的化学方程式是 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub></p>
<p>如果 x<sup>2</sup> 的值为 9,那么 x 的值必为 3 或 -3。</p>

显示效果如下:

咖啡因的化学方程式是 C8H10N4O2

如果 x2 的值为 9,那么 x 的值必为 3 或 -3。

  ## 展示计算机代码 有大量的 HTML 元素可以来标记计算机代码:
  • <code>: 用于标记计算机通用代码。
  • <pre>: 用于保留空白字符(通常用于代码块)——如果您在文本中使用缩进或多余的空白,浏览器将忽略它,您将不会在呈现的页面上看到它。但是,如果您将文本包含在<pre></pre>标签中,那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。
  • <var>: 用于标记具体变量名。
  • <kbd>: 用于标记输入电脑的键盘(或其他类型)输入。
  • <samp>: 用于标记计算机程序的输出。

标记时间和日期

HTML支持将时间和日期标记为可供机器识别的格式<time>元素。例如:

<time datetime="2016-01-20">2016120 日</time>

还有许多其他支持的格式。例如:

<!-- 标准简单日期 -->

<time datetime="2016-01-20">20 January 2016</time>

<!-- 只包含年份和月份-->

<time datetime="2016-01">January 2016</time>

<!-- 只包含月份和日期 -->

<time datetime="01-20">20 January</time>

<!-- 只包含时间,小时和分钟数 -->

<time datetime="19:30">19:30</time>

<!-- 还可包含秒和毫秒 -->

<time datetime="19:30:01.856">19:30:01.856</time>

<!-- 日期和时间 -->

<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>

<!-- 含有时区偏移值的日期时间 -->

<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>

<!-- 调用特定的周 -->

<time datetime="2016-W04">The fourth week of 2016</time>

参考资料

高阶文字排版