--- title: 高阶文字排版 slug: learn/HTML/Introduction_to_HTML/Advanced_text_formatting tags: - 上下标 - 代码 - 引文 - 引用 - 描述列表 - 缩略语 translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting ---
HTML中有许多其他元素可以用于格式化文本,我们没有在HTML 文字处理基础中提到它们。本文中所描述的元素虽然少有人知,但仍然值得去学习(尽管仍然不是完整的列表)。在这里你将了解标记引文、描述列表、计算机代码和其他相关文本、下标和上标、联系信息等。
预备知识: | 熟悉 HTML 基础(包含在 开始学习 HTML 中)、HTML 文本格式(包含在 HTML 文字处理初步 中)。 |
---|---|
目标: | 学习一些不常见的 HTML 元素标记来使用高级语义功能。 |
在 HTML 基础部分,我们讨论了如何在 HTML 中标记基本的列表,但是我们没有提到你偶尔会遇到的第三种类型的列表—描述列表 (description list) 。这种列表的目的是标记一组项目及其相关描述,例如术语和定义,或者是问题和答案等。让我们看一组术语和定义的示例:
内心独白 戏剧中,某个角色对自己的内心活动或感受进行念白表演,这些台词只面向观众,而其他角色不会听到。 语言独白 戏剧中,某个角色把自己的想法直接进行念白表演,观众和其他角色都可以听到。 旁白 戏剧中,为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白,只面向观众,内容一般都是角色的感受、想法、以及一些背景信息等。
描述列表使用与其他列表类型不同的闭合标签— {{htmlelement("dl")}}; 此外,每一项都用 {{htmlelement("dt")}} (description term) 元素闭合。每个描述都用 {{htmlelement("dd")}} (description definition) 元素闭合。让我们来完成下面的标记例子:
<dl> <dt>内心独白</dt> <dd>戏剧中,某个角色对自己的内心活动或感受进行念白表演,这些台词只面向观众,而其他角色不会听到。</dd> <dt>语言独白</dt> <dd>戏剧中,某个角色把自己的想法直接进行念白表演,观众和其他角色都可以听到。</dd> <dt>旁白</dt> <dd>戏剧中,为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白,只面向观众,内容一般都是角色的感受、想法、以及一些背景信息等。</dd> </dl>
浏览器的默认样式会在描述列表的描述部分(description definition)和描述术语(description terms)之间产生缩进。MDN非常严密地遵循这一惯例,同时也鼓励关于术语的其他更多的定义(but also embolden the terms for extra definition)。
下面是前述代码的显示结果:
请注意:一个术语 <dt>
可以同时有多个描述 <dd>
,比如说:
现在是时候尝试一下描述列表了; 在输入区域的原始文本里添加相应的元素,使得它在输出区域是以描述列表的形式出现。如果你喜欢,你也可以使用你自己的描述术语和描述。
如果你做错了,你可以随时点击【重置】按钮。如果实在进行不下去,可以点击【显示答案】。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <style> body { font-family: '微软雅黑', Helvetica, Arial, sans-serif; margin: 10px; background: #f5f9fa; } h2 { font-size: 16px; } code, textarea { font-family: Consolas, Menlo, monospace; } .output { min-height: 160px; } .input { min-height: 160px; width: 95%; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } .controls { width: 96%; text-align: right; } </style> </head> <body> <h2>实时输出</h2> <div class="output"></div> <h2>可编辑代码</h2> <p class="a11y-label">按 ESC 退出编辑区域,按 Tab 可插入制表符 <code>'\t'</code> </p> <textarea id="code" class="input"></textarea> <div class="controls"> <button id="btn-reset">重置</button> <button id="btn-solution">显示答案</button> </div> <script> const btnReset = document.getElementById('btn-reset'); const btnSolution = document.getElementById('btn-solution'); const blockOutput = document.querySelector('.output'); const blockInput = document.querySelector('.input'); const original = `培根 整个世界的粘合剂。 鸡蛋 一块蛋糕的粘合剂。 咖啡 一种浅棕色的饮料。 可以在清晨带来活力。`; const answer = `<dl> <dt>培根</dt> <dd>整个世界的粘合剂。</dd> <dt>鸡蛋</dt> <dd>一块蛋糕的粘合剂。</dd> <dt>咖啡</dt> <dd>一种浅棕色的饮料。</dd> <dd>可以在清晨带来活力。</dd> </dl>`; let userEntry = ""; init(); btnReset.addEventListener('click', init); btnSolution.addEventListener('click', () => { if (btnSolution.textContent === '显示答案') { blockInput.value = blockOutput.innerHTML = answer; btnSolution.textContent = '隐藏答案'; } else { blockInput.value = blockOutput.innerHTML = userEntry; btnSolution.textContent = '显示答案'; } }); blockInput.addEventListener('keydown', (e) => { switch (e.key) { case 'Tab': e.preventDefault(); insertAtCursor('\t'); break; case "Escape": blockInput.blur(); break; } }); blockInput.addEventListener('keyup', () => { userEntry = blockInput.value; blockOutput.innerHTML = blockInput.value; if (btnSolution.textContent === '隐藏答案') { btnSolution.textContent = '显示答案'; } }); function init() { userEntry = blockOutput.innerHTML = blockInput.value = original; btnSolution.textContent = '显示答案'; } function insertAtCursor(text) { const scrollPos = blockInput.scrollTop; const cursorPos = blockInput.selectionStart; const front = blockInput.value.substring(0, cursorPos); const back = blockInput.value.substring( blockInput.selectionEnd, blockInput.value.length); blockInput.value = front + text + back; blockInput.selectionStart = blockInput.selectionEnd = cursorPos + text.length; blockInput.focus(); blockInput.scrollTop = scrollPos; } </script> </body> </html>
{{ EmbedLiveSample('Playable_code', 700, 500, "", "", "hide-codepen-jsfiddle") }}
HTML也有用于标记引用的特性,至于使用哪个元素标记,取决于你引用的是一块还是一行。
如果一个块级内容(一个段落、多个段落、一个列表等)从其他地方被引用,你应该把它用{{htmlelement("blockquote")}}元素包裹起来表示,并且在{{htmlattrxref("cite","blockquote")}}属性里用URL来指向引用的资源。例如,下面的例子就是引用的MDN的<blockquote>
元素页面:
<p>The <strong>HTML <code><blockquote></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><blockquote></code> Element</strong> (or <em>HTML Block Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p> </blockquote>
浏览器在渲染块引用时默认会增加缩进,作为引用的一个指示符;MDN是这样做的,但是也增加了额外的样式:
The HTML
<blockquote>
Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.
行内元素用同样的方式工作,除了使用{{htmlelement("q")}}元素。例如,下面的标记包含了从MDN<q>
页面的引用:
<p>The quote element — <code><q></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>
浏览器默认将其作为普通文本放入引号内表示引用,就像下面:
The quote element — <q>
— is intended for short quotations that don't require paragraph breaks.
(<q>元素旨在用于不需要分段的短引用)
{{htmlattrxref("cite","blockquote")}}属性内容不会被浏览器显示、屏幕阅读器阅读,需使用 JavaScript 或 CSS,浏览器才会显示cite
的内容。如果你想要确保引用的来源在页面上是可显示的,更好的方法是为{{htmlelement("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><blockquote></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><q></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>
引文默认的字体样式为斜体。你可以在quotations.html中参看代码。
到了主动学习的时间!在这个例子中我们想要你:
cite
属性cite
属性<cite>
元素你需要的引用源:
如果你做错了,你可以随时点击【重置】按钮。如果实在进行不下去,可以点击【显示答案】。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <style> body { font-family: '微软雅黑', Helvetica, Arial, sans-serif; margin: 10px; background: #f5f9fa; } h2 { font-size: 16px; } code, textarea { font-family: Consolas, Menlo, monospace; } .output { min-height: 160px; } .input { min-height: 160px; width: 95%; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } .controls { width: 96%; text-align: right; } </style> </head> <body> <h2>实时输出</h2> <div class="output"></div> <h2>可编辑代码</h2> <p class="a11y-label">按 ESC 退出编辑区域,按 Tab 可插入制表符 <code>'\t'</code> </p> <textarea id="code" class="input"></textarea> <div class="controls"> <button id="btn-reset">重置</button> <button id="btn-solution">显示答案</button> </div> <script> const btnReset = document.getElementById('btn-reset'); const btnSolution = document.getElementById('btn-solution'); const blockOutput = document.querySelector('.output'); const blockInput = document.querySelector('.input'); const original = `<p>你好!欢迎访问我的激励网页!孔子曰:</p> <p>譬如为山,未成一篑,止,吾止也。譬如平地,虽覆一篑,进,吾往也。</p> <p>要保持乐观,不要说泄气的话。(源自 Affirmations for Positive Thinking。)</p>`; const answer = `<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>`; let userEntry = ""; init(); btnReset.addEventListener('click', init); btnSolution.addEventListener('click', () => { if (btnSolution.textContent === '显示答案') { blockInput.value = blockOutput.innerHTML = answer; btnSolution.textContent = '隐藏答案'; } else { blockInput.value = blockOutput.innerHTML = userEntry; btnSolution.textContent = '显示答案'; } }); blockInput.addEventListener('keydown', (e) => { switch (e.key) { case 'Tab': e.preventDefault(); insertAtCursor('\t'); break; case "Escape": blockInput.blur(); break; } }); blockInput.addEventListener('keyup', () => { userEntry = blockInput.value; blockOutput.innerHTML = blockInput.value; if (btnSolution.textContent === '隐藏答案') { btnSolution.textContent = '显示答案'; } }); function init() { userEntry = blockOutput.innerHTML = blockInput.value = original; btnSolution.textContent = '显示答案'; } function insertAtCursor(text) { const scrollPos = blockInput.scrollTop; const cursorPos = blockInput.selectionStart; const front = blockInput.value.substring(0, cursorPos); const back = blockInput.value.substring( blockInput.selectionEnd, blockInput.value.length); blockInput.value = front + text + back; blockInput.selectionStart = blockInput.selectionEnd = cursorPos + text.length; blockInput.focus(); blockInput.scrollTop = scrollPos; } </script> </body> </html>
{{ EmbedLiveSample('Playable_code_2', 700, 500, "", "", "hide-codepen-jsfiddle") }}
另一个你在web上看到的相当常见的元素是{{htmlelement("abbr")}}——它常被用来包裹一个缩略语或缩写,并且提供缩写的解释(包含在{{htmlattrxref("title")}}属性中)。让我们看看下面两个例子:
<p>我们使用 <abbr title="超文本标记语言(Hyper text Markup Language)">HTML</abbr> 来组织网页文档。</p> <p>第 33 届 <abbr title="夏季奥林匹克运动会">奥运会</abbr> 将于 2024 年 8 月在法国巴黎举行。</p>
这些代码的显示效果如下(当光标移动到项目上时会出现提示):
我们使用 HTML 来组织网页文档。
第 33 届 奥运会 将于 2024 年 8 月在法国巴黎举行。
Note: 还有另一个元素<acronym>,它基本上与<abbr>相同,专门用于首字母缩略词而不是缩略语。 然而,这已经被废弃了 - 它在浏览器的支持中不如<abbr>,并且具有类似的功能,所以没有意义。 只需使用<abbr>。
在这个简单的主动学习任务中,我们希望你简单地标记一个缩写。你可以使用下面的示例,或者用自己的示例来替换。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<style>
body { font-family: '微软雅黑', Helvetica, Arial, sans-serif; margin: 10px; background: #f5f9fa; }
h2 { font-size: 16px; }
code, textarea { font-family: Consolas, Menlo, monospace; }
.output { min-height: 100px; }
.input { min-height: 100px; width: 95%; }
.a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; }
.controls { width: 96%; text-align: right; }
</style>
</head>
<body>
<h2>实时输出</h2>
<div class="output"></div>
<h2>可编辑代码</h2>
<p class="a11y-label">按 ESC 退出编辑区域,按 Tab 可插入制表符 <code>'\t'</code> </p>
<textarea id="code" class="input"></textarea>
<div class="controls">
<button id="btn-reset">重置</button>
<button id="btn-solution">显示答案</button>
</div>
<script>
const btnReset = document.getElementById('btn-reset');
const btnSolution = document.getElementById('btn-solution');
const blockOutput = document.querySelector('.output');
const blockInput = document.querySelector('.input');
const original = '<p>NASA 做了一些动人心弦的事情。</p>';
const answer = '<p><abbr title="美国国家航空航天局(National Aeronautics and Space Administration)">NASA</abbr> 做了一些动人心弦的事情。</p>';
let userEntry = "";
init();
btnReset.addEventListener('click', init);
btnSolution.addEventListener('click', () => {
if (btnSolution.textContent === '显示答案') {
blockInput.value =
blockOutput.innerHTML = answer;
btnSolution.textContent = '隐藏答案';
} else {
blockInput.value =
blockOutput.innerHTML = userEntry;
btnSolution.textContent = '显示答案';
}
});
blockInput.addEventListener('keydown', (e) => {
switch (e.key) {
case 'Tab':
e.preventDefault();
insertAtCursor('\t');
break;
case "Escape":
blockInput.blur();
break;
}
});
blockInput.addEventListener('keyup', () => {
userEntry = blockInput.value;
blockOutput.innerHTML = blockInput.value;
if (btnSolution.textContent === '隐藏答案') {
btnSolution.textContent = '显示答案';
}
});
function init() {
userEntry =
blockOutput.innerHTML =
blockInput.value = original;
btnSolution.textContent = '显示答案';
}
function insertAtCursor(text) {
const scrollPos = blockInput.scrollTop;
const cursorPos = blockInput.selectionStart;
const front = blockInput.value.substring(0, cursorPos);
const back = blockInput.value.substring(
blockInput.selectionEnd, blockInput.value.length);
blockInput.value = front + text + back;
blockInput.selectionStart =
blockInput.selectionEnd = cursorPos + text.length;
blockInput.focus();
blockInput.scrollTop = scrollPos;
}
</script>
</body>
</html>
{{ EmbedLiveSample('Playable_code_3', 700, 400, "", "", "hide-codepen-jsfiddle") }}
HTML有个用于标记联系方式的元素——{{htmlelement("address")}}。它仅仅包含你的联系方式,例如:
<address> <p>Chris Mills, Manchester, The Grim North, UK</p> </address>
但要记住的一点是,<address>
元素是为了标记编写HTML文档的人的联系方式,而不是任何其他的内容。因此,如果这是Chris写的文档,上面的内容将会很好。注意,下面的内容也是可以的:
<address> <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p> </address>
当你使用日期、化学方程式、和数学方程式时会偶尔使用上标和下标。 {{htmlelement("sup")}} 和{{htmlelement("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>
这些代码输出的结果是:
咖啡因的化学方程式是 C8H10N4O2。
如果 x2 的值为 9,那么 x 的值必为 3 或 -3。
有大量的HTML元素可以来标记计算机代码:
<pre></pre>
标签中,那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。让我们看看一些例子。你应该尝试运行一下(尝试运行一下other-semantics.html样例文件的拷贝):
<pre><code>const para = document.querySelector('p'); para.onclick = function() { alert('噢,噢,噢,别点我了。'); }</code></pre> <p>请不要使用 <code><font></code> 、 <code><center></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>
上面的代码显示效果如下:
{{ EmbedLiveSample('展示计算机代码','100%',300, "", "", "hide-codepen-jsfiddle") }}
HTML 还支持将时间和日期标记为可供机器识别的格式的 {{htmlelement("time")}} 元素。例如:
<time datetime="2016-01-20">2016年1月20日</time>
为什么需要这样做?因为世界上有许多种书写日期的格式,上边的日期可能被写成:
但是这些不同的格式不容易被电脑识别 — 假如你想自动抓取页面上所有事件的日期并将它们插入到日历中,{{htmlelement("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>
到这里你就完成了 HTML 语义文本元素的学习。但要记住,你在本课程中学到的并不是 HTML 文本元素的详细列表 — 我们想要尽量覆盖主要的、通用的、常见的,或者至少是有趣的部分。如果你想找到更多的 HTML 元素,可以看一看我们的HTML 元素参考(从 内联文本语义部分开始会是一个好的选择) 。在下一篇文章中我们将会学习用来组织 HTML 文档不同部分的 HTML 元素。
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/文件和网站结构", "Learn/HTML/Introduction_to_HTML")}}