HTML 标签使用总结

HTML 标签使用总结

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 元素