Description list
In the HTML basics, we discussed how in the HTML tag basic list , but we did not mention a third type of list you occasionally encounter - a descriptive list (the Description List) . The purpose of this list is to mark a set of items and their related descriptions, such as terms and definitions, or questions and answers. Let's look at an example of a set of terms and definitions:
Inner Monologue In a drama, a character chants his inner activities or feelings. These lines are only for the audience, and other characters will not hear it. Language Monologue In a drama, a character directly chants his thoughts, and the audience and other characters can hear it. Narration In a drama, supplementary commentary chants outside the scene for rendering humor or dramatic effects are only for the audience. The content is generally the character's feelings, thoughts, and some background information.
The description list uses a different closing tag from other list types — ; In addition, each item is closed with a (description term) element. Each description is closed with a (description description) element. Let's complete the following markup example: <dl> <dt><dd>
<dl>
<dt>内心独白</dt>
<dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。</dd>
<dt>语言独白</dt>
<dd>戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。</dd>
<dt>旁白</dt>
<dd>戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。</dd>
</dl>The browser’s default style will generate indentation between the description description and description terms of the description list . MDN follows this convention very closely and also encourages more definitions of terms (but also embolden the terms for extra definition).
The following is the display result of the preceding code:
Inner monologue
In a drama, a character chants his inner activities or feelings. These lines are only for the audience, and other characters will not hear it.
Linguistic monologue
In a drama, a character directly chants his thoughts, and the audience and other characters can hear it.
Narrator
In a drama, supplementary notes outside the scene for rendering humor or dramatic effects are only for the audience, and the content is generally the character's feelings, thoughts, and some background information.
Please note: a term <dt> can have multiple descriptions at the same time <dd>
Quote
HTML also has features for marking quotes. As for which element tag is used, it depends on whether you quote a block or a line.
Block quote
If a block-level content (a paragraph, multiple paragraphs, a list, etc.) is quoted from other places, you should wrap it in an <blockquote>element to indicate it, and citeuse the URL in the attribute to point to the referenced resource. For example, the following example is the referenced MDN <blockquote>element page:
<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>To convert these into block quotes, we have to do this:
<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>The browser will add indentation by default when rendering block quotes, as an indicator of quotes; MDN does this, but also adds additional styles:
The HTML
<blockquote>Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.
In-line quote
Inline elements work the same way, except for using <q>elements. For example, the following tag contains a <q>quote from the MDN page:
<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>
By default, the browser puts it in quotation marks as normal text to indicate quotation, as shown below:
The quote element — <q> — is intended for short quotations that don't require paragraph breaks. (The <q> element is intended for short quotes that do not require paragraph breaks)
Citation
citeThe content of the attribute will not be displayed by the browser or read by the screen reader. JavaScript or CSS is required citefor the content to be displayed by the browser . If you want to ensure that the referenced source is displayable on the page, a better way is to <cite>attach a link to the element:
<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>
The default font style for citations is italics. You can refer to the code in quotations.html .
Abbreviations
Another fairly common element you see on the web is <abbr>-it is often used to wrap an acronym or abbreviation and provide an explanation of the abbreviation (included in the titleattribute). Let us look at the following two examples:
<p>我们使用 <abbr title="超文本标记语言（Hyper text Markup Language）">HTML</abbr> 来组织网页文档。</p>
<p>第 33 届 <abbr title="夏季奥林匹克运动会">奥运会</abbr> 将于 2024 年 8 月在法国巴黎举行。</p>
The display effect of these codes is as follows (a prompt will appear when the cursor is moved to the item):
We use HTML to organize web documents.
The 33rd Olympic Games will be held in August 2024 in Paris, France.
Mark contact
HTML has an element for marking contact information- <address>. It only contains your contact information, for example:
<address>
<p>Chris Mills, Manchester, The Grim North, UK</p>
</address>Superscript and subscript
You will occasionally use superscripts and subscripts when you use dates, chemical equations, and mathematical equations. <sup> And <sub>elements can solve such problems. E.g:
<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>
The output of these codes is:
The chemical formula of caffeine is C8H10N4O2.
If the value of x2 is 9, then the value of x must be 3 or -3.