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

2021-03-20 20:33:53 阅读：219 来源： 互联网

标签：20 para 标签有用 HTML 2021 pm

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

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>元素允许你附上清晰的、可被机器识别的时间/日期来实现这种需求。

标签：20,para,标签,有用,HTML,2021,pm
来源： https://blog.csdn.net/wyzhang0214/article/details/115033179

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9