Advanced text formatting
Description lists
<dl>
description lists
<dt>
description term描述项
<dd>
description definition描述定义
<dl>
<dt>soliloquy</dt>
<dd>
In drama, where a character speaks to themselves, representing their inner
thoughts or feelings and in the process relaying them to the audience (but
not to other characters.)
</dd>
<dt>monologue</dt>
<dd>
In drama, where a character speaks their thoughts out loud to share them
with the audience and any other characters present.
</dd>
<dt>aside</dt>
<dd>
In drama, where a character shares a comment only with the audience for
humorous or dramatic effect. This is usually a feeling, thought, or piece of
additional background information.
</dd>
</dl>
###Multiple descriptions for one term
<dl>
<dt>aside</dt>
<dd>
In drama, where a character shares a comment only with the audience for
humorous or dramatic effect. This is usually a feeling, thought, or piece of
additional background information.
</dd>
<dd>
In writing, a section of content that is related to the current topic, but
doesn't fit directly into the main flow of content so is presented nearby
(often in a box off to the side.)
</dd>
</dl>
Quotations
引用
Blockquotes
<blockquote>
Inline quotations
<q>
Citations
引文
cite
attribute
<p>
According to the
<a href="/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="/en-US/docs/Web/HTML/Element/q"><cite>MDN q page</cite></a>.
</p>
Abbreviations
缩略词
<abbr>
和 title
attribute
<p>
We use <abbr>HTML</abbr>, Hypertext Markup Language, to structure our web
documents.
</p>
<p>
I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with
the chainsaw.
</p>
Marking up contact details
<address>
<br />
the line break element
<address>
<p>
Chris Mills<br />
Manchester<br />
The Grim North<br />
UK
</p>
<ul>
<li>Tel: 01234 567 890</li>
<li>Email: [email protected]</li>
</ul>
</address>
Note: The <address>
element should only be used to provide contact information for the document contained with the nearest <article>
or <body>
element. It would be correct to use it in the footer of a site to include the contact information of the entire site, or inside an article for the contact details of the author, but not to mark up a list of addresses unrelated to the content of that page.
Superscript and subscript
<sup>
<sub>
<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
<p>
Caffeine's chemical formula is
C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.
</p>
<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>
Representing computer code
<code>
<pre>
the Preformatted Text element预格式化文本(保留空格)
<var>
<kbd>
keybord
<samp>
the sample output element
<pre><code>const para = document.querySelector('p');
para.onclick = function() {
alert('Owww, stop poking me!');
}</code></pre>
<p>
You shouldn't use presentational elements like <code><font></code> and
<code><center></code>.
</p>
<p>
In the above JavaScript example, <var>para</var> represents a paragraph
element.
</p>
<p>Select all the text with <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>
Marking up times and dates
<time>
让机器获取时间
datetime
attribute
<!-- Standard simple date -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- Just year and month -->
<time datetime="2016-01">January 2016</time>
<!-- Just month and day -->
<time datetime="01-20">20 January</time>
<!-- Just time, hours and minutes -->
<time datetime="19:30">19:30</time>
<!-- You can do seconds and milliseconds too! -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- Date and time -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- Date and time with timezone offset -->
<time datetime="2016-01-20T19:30+01:00">
7.30pm, 20 January 2016 is 8.30pm in France
</time>
<!-- Calling out a specific week number -->
<time datetime="2016-W04">The fourth week of 2016</time>