与代码显示、引用和列表相关的标签

本文解释了与代码显示、引用和列表相关的标签。

这解释了如何在HTML中编写源代码、引用、注释和列表。

YouTube Video

与代码显示相关的标签

<code> 标签

1Inline code example: <code>let x = 10;</code>

• <code> 标签是一个内联元素，用于在 HTML 文档中表示代码或程序片段。
• 默认情况下，它以等宽字体显示，增强代码的可读性。

<pre> 标签

function hello() {
    console.log("Hello, world!");
}

1<pre>
2function hello() {
3    console.log("Hello, world!");
4}
5</pre>

• <pre> 标签用于在HTML文档中以其原始格式显示文本。 使用此标签可以保留文本中的空白和换行符，保持其原始格式。它主要用于显示需要保持格式的内容，例如程序代码、诗歌或文本艺术。

    function hello() {
        console.log("Hello, world!");
    }
    

1    <pre>
2    function hello() {
3        console.log("Hello, world!");
4    }
5    </pre>

• 在 <pre> 标签中，空格会被保留，因此如果在结束标签前有一个空格，就会像本例中一样在结尾处出现一个空行。

<samp> 标签

1Sample system output: <samp>Error: Invalid input.</samp>

• <samp> 标签是一个 HTML 标签，用于表示计算机程序的输出。 它用于表示来自程序或系统的输出或信息。

<kbd> 标签

1Keyboard input example: <kbd>Ctrl</kbd> + <kbd>C</kbd>

• <kbd> 标签是一个 HTML 标签，用于表示用户输入。 它用于指示键盘输入或命令输入，例如快捷键。

<var> 标签

1Variable example: <var>x</var> = 5;

• <var> 标签用于表示程序或公式中的变量。 它用于强调程序或数学公式中的变量名称或变量。

用于引文等的标签

<blockquote> 标签

1<blockquote>
2    This is a blockquote for longer quotations.
3</blockquote>

• <blockquote> 标签用于表示长引用或来自其他来源的文本，通常在块级显示。

<q> 标签

1This is a short quote: <q>Short quote example.</q>

• <q> 标签是一个内联元素，用于表示短引用。 此标签可用于将文本的一部分或一个句子标记为引用。包含在 <q> 标签中的文本通常会显示引号。<q> 标签也可以嵌套。在这种情况下，内层引用通常使用不同类型的引号。

<cite> 标签

1Reference to a book: <cite>The Great Gatsby</cite>

• <cite> 标签是一个内联元素，用于指示引用或参考的来源。 主要用于指示作品的来源，例如作品标题、文章、论文、网页或书籍。

<address> 标签

1<address>123 Main Street, Springfield, USA</address>

• <address> 标签用于表示与文档或部分的作者或所有者相关的联系信息。 此标签通常包含电子邮件地址、电话号码、实体地址和类似信息。

<time> 标签

1<time datetime="2024-12-04">December 4, 2024</time>

• <time> 标签用于表示具体的时间点、持续时间或重复的时间。 该标签可以包含日期和时间，为文档提供语义信息。

<data> 标签

1<data value="2024">Current Year</data>

• <data> 标签用于将人类可读内容与机器可解析的值相关联。 该标签对于以便于程序处理的方式标记数据非常有用。

<details> 和 <summary> 标签

1<details>
2    <summary>More information</summary>
3    <p>Here is some additional content.</p>
4</details>

• <details> 标签创建了一个可折叠和展开的小部件。通过与 <summary> 标签一起使用，您可以设置一个可点击的部分来显示更多详情，常用于类似“阅读更多”的交互式显示。

用于列表显示的标签

<ul> 标签

1<ul>
2    <li>Item 1</li>
3    <li>Item 2</li>
4    <li>Item 3</li>
5</ul>

• 这是一个用于创建无序列表的标签。 列表中的每个项目都用 <li> 标签定义。默认情况下，每个列表项前都会显示一个黑点。

<ol> 标签

1<ol>
2    <li>Step 1</li>
3    <li>Step 2</li>
4    <li>Step 3</li>
5</ol>

• 此标签用于创建有序列表。 列表中的每个项目都用 <li> 标签定义。默认情况下，数字用于指示项目的顺序。

<dl> 标签

1<dl>
2    <dt>Term 1</dt>
3    <dd>Definition of Term 1</dd>
4    <dt>Term 2</dt>
5    <dd>Definition of Term 2</dd>
6</dl>

• 此标签用于创建包含术语和定义或名称和细节的配对列表。 列表项由 <dt> 和 <dd> 标签定义。术语或名称写在 <dt> 标签中，定义或解释写在 <dd> 标签中。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video