前端学习回顾-09

最新推荐文章于 2024-05-16 10:00:00 发布

huaqi_

最新推荐文章于 2024-05-16 10:00:00 发布

阅读量530

点赞数

分类专栏：前端学习回顾文章标签：前端 html css

本文链接：https://blog.youkuaiyun.com/huaqi_/article/details/122331325

版权

前端学习回顾专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了HTML中描述列表（Description List）、引用（包括块引用和行内引用）、引文、缩略语、联系方式标记、上标和下标、以及代码和时间日期的标记方法，帮助读者深入理解这些标签的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

描述列表（Description List）

描述列表的目的是标记一组项目及其相关描述，例如术语和定义、问题和答案。
描述列表使用与其他列表类型不同的闭合标签 <dl>，此外每一项用 <dt>（description term）元素包裹。每个描述用 <dd>（description definition）元素包裹。每一项 <dt> 可以对应多个描述 <dd>。
注：<dd> (description definition) 这里元素解释使用的是MDN英语原文，中文翻译版的元素解释为

(description description) 应该是一处错误，已提 issue。
代码示例：

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

描述列表代码结果
注：笔者使用的浏览器为 Google Chrome。结果可能与 Firefox 或其他浏览器不同。

引用

HTML 有用于标记引用的特性，<blockquote> 元素和 <q> 元素，至于使用那个元素，取决引用的是块元素还是行元素。

块引用

如果块级元素（段落、列表等）从其他地方被引用，需要使用 <blockquote> 元素进行包裹，并在其 cite 属性中使用 URL 指向引用的资源。*浏览器在渲染块引用时默认会增加缩进。*代码示例：

<!-- 块级元素未被引用元素包裹 -->
<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>

块引用对比结果

行内引用

当一个行内元素从其他地方被引用，除了使用 <q> 元素进行包裹，其余与块级引用并无差别。浏览器默认将其作为普通文本放入引号表示引用。行内引用旨在不需要分段的短引用。代码示例：

<!-- 行内元素未被引用元素包裹 -->
<p>The quote element — <code>&lt;q&gt;</code> — is intended
for short quotations that don't require paragraph breaks.</p>
<!-- 行内元素被引用元素包裹后 -->
<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>

行内引用对比结果

引文

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>

引文结果

缩略语（Abbreviation）

<abbr> 元素包裹一个缩略语或缩写，并且提供缩写的解释（包含在 title 属性中）。*当光标移动到项目上时，会出现提示。*代码示例：

<p>我们使用 <abbr title="超文本标记语言（Hyper text Markup Language）">HTML</abbr> 来组织网页文档。</p>

<p>第 33 届 <abbr title="夏季奥林匹克运动会">奥运会</abbr> 将于 2024 年 8 月在法国巴黎举行。</p>

缩略语结果

标记联系方式

<address> 元素用于标记编写 HTML 文档作者的联系方式，而不是其他任何内容。代码示例：

<!-- 以下两种方法都可以 -->
<address>
  <p>Chris Mills, Manchester, The Grim North, UK</p>
</address>
<address>
  <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
</address>

标记联系方式结果

上标（superscript）和下标（subscript）

当文档中出现日期、化学方程式和数学方程式时，有时需要使用上标和下标，这时就需使用 <sup>元素和 <sub>元素。代码示例：

<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>

上标和下标代码结果

展示计算机代码

<code>：用于标记计算机通用代码。
<pre>:：用于保留空白字符（通常用于代码块），如果文本中使用缩进符或者空格符，浏览器在渲染时将忽略他们，为使浏览器中展示的代码格式与文本编辑器中相同，可以将文本包裹在<pre></pre>元素中。
<var>:：用于标记具体变量名。
<kbd>:：用于标记输入电脑的键盘（或其他类型）输入。
<samp>:：用于标记计算机程序的输出。
代码示例：

<pre><code>const para = document.querySelector('p');

para.onclick = function() {
  alert('噢，噢，噢，别点我了。');
}</code></pre>

<p>请不要使用 <code>&lt;font&gt;</code> 、 <code>&lt;center&gt;</code> 等表象元素。</p>

<p>在上述的 JavaScript 示例中，<var>para</var> 表示一个段落元素。</p>


<p>按 <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd> 选择全部内容。</p>

<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

展示计算机代码结果

标记时间和日期

<time> 元素可将时间和日期标记为可供机器识别的格式。假如想自动抓取页面上所有事件的日期并将其插入到日历中，<time> 元素允许附上清晰的、可被机器识别的时间/日期用于实现该需求。
代码示例（注意 datetime 属性）：

<!-- 标准简单日期 -->
<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>