HTML-一些自己不常用但很有用的标签

2023-12-13 12:36:15

记录一些自己不常用的标签

blockquote

<blockquote>块级引用元素，表示的是其中的文字是引用的内容。通常在渲染的时候，可以使用CSS 的margin-left以及margin-right加一些缩进。

如果引文来源于网络，那么可以将原内容的URL地址设置到cite属性上，此时的URL地址不会显示在页面中。如果想要以文本的形式告诉读者引文的出处时，可以通过<cite>(这里区别于上边的属性)元素添加引文出处。(没有设置样式)
栗子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>blockquote标签</title>
</head>
<body>
    <blockquote cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML">
        “超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。
    </blockquote>
    <q>引自于<cite>MDN-HTML</cite></q>
</body>
</html>

q

<q>标签：引用内容比较短，也就是在行内医用较短的内容而非创建一个单独的引用块。可以使用<q>（Quotation）元素。

MDN中的栗子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Quote examples</title>
  </head>
  <body>
    <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>


  </body>
</html>

MDN中的题目：

<p>你好！欢迎访问我的激励网页！孔子曰：</p>
<p>譬如为山，未成一篑，止，吾止也。譬如平地，虽覆一篑，进，吾往也。</p>
<p>要保持乐观，不要说泄气的话。（源自 Affirmations for Positive Thinking。）</p>

把中间的段落变成块引用，它要包含cite属性
把第三个段落的一部分变成行内引用，它要包含cite属性
每一个引用都要包含<cite>元素

你需要的引用源：

http://www.brainyquote.com/quotes/authors/c/confucius.html 对应 “孔子曰”。
http://www.affirmationsforpositivethinking.com/ 对应 “不要说泄气的话”。

修改后：

<p>你好！欢迎访问我的激励网页！<a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>孔子</cite></a>曰：</p>
<blockquote cite="https://zh.wikipedia.org/zh-hans/孔子">
  <p>譬如为山，未成一篑，止，吾止也。譬如平地，虽覆一篑，进，吾往也。</p>
</blockquote>
<p>要保持乐观，<q cite="http://www.affirmationsforpositivethinking.com/">不要说泄气的话</q>。（源自 <a href="http://www.affirmationsforpositivethinking.com/"><cite>Affirmations for Positive Thinking</cite></a>。）</p>

abbr

<abbr>表示缩略语，在title属性中提供缩写的解释：
栗子：

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

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

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

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

address

<address>标签表示联系方式
栗子：

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

Chris Mills, Manchester, The Grim North, UK

<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

Written by Donald Duck.
Visit us at:
Example.com
Box 564, Disneyland
USA

sup sub

<sup>上标
<sub>下标

<p>水的化学方程式是 H<sub>2</sub>O。</p>
<p>如果 x<sup>2</sup> 的值为 9，那么 x 的值必为 3 或 -3。</p>

水的化学方程式是 H₂O。

如果 x² 的值为 9，那么 x 的值必为 3 或 -3。

code pre var kbd samp

下面的标签都可以用来标记计算机代码：

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

const para = document.querySelector('p');

para.onclick = function() {
  alert('噢，噢，噢，别点我了。');
}

请不要使用 <font> 、 <center> 等表象元素。

在上述的 JavaScript 示例中，para 表示一个段落元素。

按 Ctrl/Cmd + A 选择全部内容。

$ ping mozilla.org
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

time

<time datetime="2021-03-20">2021年3月20日</time>
<!-- 标准简单日期 -->
<time datetime="2021-03-20">20 March 2021</time>
<!-- 只包含年份和月份-->
<time datetime="2021-03">March 2021</time>
<!-- 只包含月份和日期 -->
<time datetime="03-20">20 March</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>

2021年3月20日

20 March 2021

March 2021

20 March

19:30

19:30:01.856

7.30pm, 20 January 2016

7.30pm, 20 January 2016 is 8.30pm in France

The fourth week of 2016

不同的格式不容易被电脑识别 — 假如你想自动抓取页面上所有事件的日期并将它们插入到日历中，<time>元素允许你附上清晰的、可被机器识别的时间/日期来实现这种需求。

码农公寓

HTML-一些自己不常用但很有用的标签

目录

blockquote

q

abbr

address

sup sub

code pre var kbd samp

time

码农公寓

目录

blockquote

q

abbr

address

sup sub

code pre var kbd samp

time

相关文章