HTML 标签使用总结

admin 6528 2025-10-01 03:45:18

HTML 元素是什么？元素是 HTML 的基石，它们描述了网页的结构和内容。它们是超文本标记语言（HyperText Markup Language）的“标记”（Markup）部分。

HTML 语法使用尖括号（“ <” 和 “>”）包裹 HTML 元素的名称。元素通常具有一个开始标签和一个结束标签，标签之间是元素包含的内容。两者之间的区别在于，结束标记带有一个正斜杠。

让我们看一些 HTML 标签的示例。

p 元素

标签代表段落，这是用于在 HTML 文档中创建文本行的最常见的标签。

的使用与其他标签兼容，可以在它包含的内容中添加超链接（）和粗体（）文本。

示例

Paragraph example

This is a paragraph. It is the first of many.

This is another paragraph. It will appear on a separate line.

你也可以将锚元素 嵌套在段落中。

示例

Here's a link to freeCodeCamp.

标题元素有六个标题元素——

、

、

、

、

、
。

标题元素用于表示其下方内容的重要性。标题的数字越小，内容的重要性越高。

例如，

元素表示页面的主标题，并且每页应该只有一个。这有助于搜索引擎了解页面的主要主题。

元素的重要性较低，低于较高级别的

元素。

示例

This is main heading.

This is subheading h2.

This is subheading h3.

This is subheading h4.

This is subheading h5.

This is subheading h6.

a 元素锚点（）元素创建指向另一个页面或文件的超链接。为了链接到其他页面或文件， 标记还必须包含 href 属性，该属性指示链接的目标。

开头和结束的 标签之间的文本就是链接。该文本应该是对链接目标的有意义的描述，而不是诸如“单击此处”之类的通用短语。使用屏幕阅读器的用户可以更好地在页面上的各个链接之间导航，并了解每个链接到的内容。

默认情况下，除非指定了另一个目标，否则链接页面将在当前浏览器窗口中显示。默认链接样式如下：

未访问的链接带有下划线，显示为蓝色已访问的链接带有下划线，显示为紫色活动的链接带有下划线，显示为红色示例 freeCodeCamp

你也可以创建一个链接，指向同一个页面的另一个部分：

Go to top

把 标签放在 标签中，可以把图像也变成一个链接：

列表元素HTML 中有两种主要的列表：有序列表（

    ）和无序列表（
      ）。所有列表都包含至少一个列表元素（
    • ）。

      无序列表无序列表以

        标签开头，用
      • 标签罗列项目。默认情况下，在无序列表中，所有罗列的项目都有项目符号。

        • Item

        • Item

        • Item

        输出：

        ItemItemItem有序列表有序列表以

          标签开头，用
        1. 标签罗列项目。默认情况下，在有序列表中，所有罗列的项目都有数字标记。

          1. First Item

          2. Second Item

          3. Third Item

          输出：

          First ItemSecond ItemThird Itemem 元素 元素用于强调 HTML 文档中的文本。这可以通过将要强调的文本分别包含在 标签和 标签中来完成。大多数浏览器会把包含在 标签中的文本渲染为斜体。

          注意： 标签不应用于在样式上以斜体显示文本。 标签用于强调文本。通常，需要用 CSS 格式在样式上将文本显示为斜体。

          示例

          Text that requires emphasis should go here.

          i 元素 元素用于表示以某种方式与其周围文本分开的文本。在默认情况下，用 标签括起来的文本将以斜体显示。

          在以前的 HTML 规范中， 标签仅用于表示要斜体显示的文本。但是，在现代语义 HTML 中，应在适当的地方使用诸如 和 之类的标签。

          你可以使用 元素的 class 属性来说明为什么标签中的文本与周围的文本不同。 你可能要显示该文本或短语是另一种语言的：

          The French phrase esprit de corps is often

          used to describe a feeling of group cohesion and fellowship.

          strong 元素 元素用于具有重要性或紧急性的文本。大部分浏览器将 元素包裹的文本渲染为加粗。

          注意： 标签不应用于将文本加粗。应使用 CSS 样式来加粗文本。

          示例

          This is really important.

          img 元素一个简单的 HTML 元素可以这样放在 HTML 文档中：

          this is a cool picture

          注意， 元素是自闭合的，不需要结束标签。

          alt 标签为图像提供替代文本。alt 标签的一个作用是为使用屏幕阅读器的视觉受损用户提供便利。这些用户可以通过阅读 alt 标签，来理解图像的含义。

          title 属性是可选的，提供图像的额外信息。当用户将鼠标悬停在图像上时，大部分浏览器会在提示框中显示此信息。

          注意，图像文件的路径可以是相对的，也可以是绝对的。同时，记住 img 元素是自闭合的，也就是说它不需要一个 标签，只需要用一个 > 闭合。

          示例my picture

          （HTML 文件在 https://example.com/index.html，和图像文件在同一个文件夹中。）

          等同于：

          my picture

          有时候， 元素也会使用另外两个属性来定义它的尺寸，height 和 width，如下所示：

          my picture

          值以像素为单位，但是大小通常以 CSS 而不是 HTML 指定。

          nav 元素