WinDocs

切换主题

返回顶部
导航栏

高阶文本

作者:winter wang
更新于:11 天前
字数统计:532 字
阅读时长:2 分钟
阅读量:

相关内容参考：高阶文字排版 - 学习 Web 开发 | MDN (mozilla.org)

引用标签

  1. 块引用 <blockquote>
html
<blockquote cite="https://github.com/yk2012">
    块引用，这是一个块级别的引用，前面有缩进，还很大
</blockquote>
  1. 行内引用 <q>
html
<q cite="https://github.com/yk2012">这是一个行内引用，有个双引号</q>
  1. 引文 <cite>
html
<a href="https://github.com/yk2012"><cite>这是一个行内引用，字体变倾斜了</cite></a>

image.png

缩略语标签<abbr>

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

效果：

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

标记联系方式<address>

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

上标和下标

  • 上标<sup></sup>
  • 下标<sub></sub>

代码

  • <code>: 用于标记计算机通用代码。
html
<p>请不要使用 <code>&lt;font&gt;</code> 、 <code>&lt;center&gt;</code> 等表象元素。</p>
  • <pre>: 用于保留空白字符（通常用于代码块）——如果您在文本中使用缩进或多余的空白，浏览器将忽略它，您将不会在呈现的页面上看到它。但是，如果您将文本包含在<pre></pre>标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。
html
<pre><code>const para = document.querySelector('p');
para.onclick = function() {
    alert('噢，噢，噢，别点我了。');
}</code></pre>
  • <var>: 用于标记具体变量名。
html
<p>在上述的 JavaScript 示例中，<var>para</var> 表示一个段落元素。</p>
  • <kbd>: 用于标记输入电脑的键盘（或其他类型）输入。
html
<p>按 <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd> 选择全部内容。</p>
  • <samp>: 用于标记计算机程序的输出。
html
<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>

image.png

标记时间和日期 <time>

html
<time datetime="2016-01-20">2016年1月20日</time>

Contributors

winter wang