HTML5 标签 - 它们如何工作？我应该使用哪些？从定义开始 重要标签

2025-06-08

HTML5 标签 - 它们如何工作，我应该使用哪些标签？

从定义开始

重要标签

让我们深入探讨一下基础知识。无论您是否了解 HTML，都可能不清楚何时使用每个元素，甚至不清楚现在有哪些可用的元素。以下这份速查表应该对 Web 开发初学者和标记专家都有所帮助！

本文摘自Bits of Good 的 Web 开发训练营。如果您喜欢，欢迎点击此处免费观看完整课程（包含书面资源、视频演示和项目活动）！

从定义开始

HTML，即超文本标记语言，是一种用于定义网页“骨架”的语言。它不包含任何花哨的元素，而且单独使用肯定不会好看！它只是用来定义页面上显示的内容，包括图片、文本以及介于两者之间的所有内容。

所有现代浏览器都支持最新的 HTML 标准：HTML5。它新增了一系列功能来改进网页结构。例如，它添加了特殊元素来指示页面的“布局”，例如导航栏的位置、页脚的位置等等。这对于依赖屏幕阅读器浏览互联网的视障人士来说非常有用，因为现在可以直接从 HTML 中解释页面上的所有地标，比以往任何时候都更容易！

进入语法

在编写 HTML 时，你会用到一种叫做“标签”的东西。它基本上用来定义你想在网站上显示的内容块。你可以使用许多不同的标签来定义不同类型的内容，例如文本块、图片、标题等等。

例如，我们可以使用段落标签<p>来显示一段文本，如下所示：



<p>
  Hard work and no play makes Jack a dull paragraph.
</p>
Enter fullscreen mode Exit fullscreen mode

请注意，我们需要两次右击标签：一次用于定义其内容的起始位置，另一次用于定义其结束位置。在本例中，它开始于文本块之前（<p>），结束于文本块之后（</p>）。注意，需要添加一个/来表示结束标签和开始标签。从起始到结束的整个文本块称为元素。

属性

除了声明标签之外，您还可以为该标签添加一组属性attribute="value"以获取更多信息。这些属性使用起始标签内的格式编写。

和属性是最常见的，一旦我们开始使用 CSS ，class就会更好地解释它们。另一个示例是使用 声明页面使用的语言，如下所示。idlang

主包装器



<html lang="en-US">
  <body>
    <!-- More to come in here! -->
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

这是一个基本的包装器，你总是会想要把它放在 HTML 文件中。首先，我们创建基础html元素，并使用 指定页面的语言lang="en-US"。由于从加拿大到新加坡的任何人都可以访问你构建的网站，所以最好指定语言，以便翻译工具知道应该使用哪种语言！

接下来，我们添加正文，使网站的所有内容都生效。这由body元素表示。还要注意它的<!-- … -->内部。这是 HTML 注释的工作方式，因此括号内的内容不会显示在页面上。

注意：如果您使用 CodePen，每个 CodePen 都会自动为您在“HTML”框中输入的任何代码添加这些代码html和body包装器，并附带语言规范。因此，您无需在每个 CodePen 上都使用它，但请记住，在使用此工具之外构建网站时，这是一个重要的概念！

重要标签

HTML 标签有很多值得了解。您可以在这里找到完整列表，以下是一些入门必备的要点 🏃‍♂️

内容标签

  • <p>段落块；当您想在页面上添加一些文本时最常用的块
  • <h1>...<h6>一个标题块，h1其中 为最高级别的标题，h2为第二级别的标题，依此类推。报纸文章就是一个很好的例子，其中文章标题是h1，每个部分标题是h2，每个小标题是h3
  • ul/ol用于创建内容列表的块。ul如果您想要一个项目符号列表（按顺序排列），请使用 ；如果您ol想要一个编号列表（按顺序排列）， 请使用
    • li或list item ，针对列表中的每个元素
  • dl用于创建更复杂内容列表的块。其工作原理与ul/非常相似ol，但现在每个项目可以拥有标题和描述，并作为两个独立的块。非常适合具有页眉/正文结构的列表。
    • dt“定义标题”，或列表项的标题
    • dd“定义描述”，或者说是该列表项的内容。注意：这两个元素无需包装。只需将dd元素放置在其关联的 title 下方dt，列表项即可正常显示！如果确实需要，出于样式目的，可以安全地将它们包装在 中div。
  • <span>段落或标题内文本的包装器。这非常适合针对文本块中的特定行或单词进行自定义样式设置。
  • <a href="https://penguin.club">href指向其他网站或您自己网站内页面的网页链接。该链接由属性指定

注意：您可以通过添加属性来强制链接在新选项卡中打开，而不是在当前页面中打开target='_blank'

  • <img src="https://cute_cat.gif" alt="gif of a cat eating ice cream" />一张图片，包含来自链接的实际图片文件src以及alt图片描述。您可以将鼠标alt悬停在图片上或使用屏幕阅读器来阅读。
  • <button>一个可以点击的按钮。你可以使用 JavaScript 来实现按钮的实际操作，不过我们先不说这个秘密 😁

该内容布局的标签

  • <header>页面标题，通常包含网站横幅和导航栏
  • <footer>页脚，通常包含无法在其他地方找到的重要链接
  • <main>页面的主要内容区域。有助于与页眉和页脚区分开
  • <nav>网页的导航栏（也就是位于顶部的功能区，其中包含指向网站其他页面的所有链接）。通常在<header>
  • <section>主要内容的子部分。非常适合划分页面的各个部分。没错，部分嵌套部分也同样有效！
  • <div>定义容器的通用方法。在处理页面布局、尝试将内容定位到页面的特定位置时，你最终会用到这些方法。

<div>相对<section>

一般来说，你会用 a<section>将元素按共同主题分组，就像你在高中时写的读书报告大纲一样。<div>而 则不用于表达这种区分。以一篇新闻文章为例。我们可以说文章的内容和评论是两个独立的<section>元素。然而，每条评论，以及点赞和踩按钮的容器，都只是<div>s。

亲自尝试一下这些元素！

跳转到codepen.io并创建一个新的 Pen。开始将上面的一些标签粘贴到 HTML 部分，看看它们在预览框中显示的内容！

查看这些标签的实际效果

现在，让我们来看看一个完整的网站，看看它的 HTML 结构是怎样的。我们将使用浏览器的“检查器”来实现这一点，您可以访问https://gsg.surge.sh上的正式网站进行操作。我鼓励您在您喜欢的一些网站上也打开这个工具，看看他们是如何构建自己的标记的！

Golden Swarm Games 俱乐部启动页面截图
HTML 简介 - 检查真实网站的结构！
https://www.youtube.com/watch?v =I4FK_7pZJV8

觉得这有帮助吗？

太棒了！这篇文章是Bits of Good 组织用来指导新手入门的海量资源的一部分。如果你想……
💅学习如何徒手编写更优秀的 CSS 代码
⚙️掌握 JS 中的数组函数
📶了解如何与 API 交互
👩‍💻使用 JS 框架构建功能丰富的前端和后端
🏃‍♂️以及 Web 开发领域中的其他几乎所有内容，
快来 Bits of Good 训练营看看吧！所有活动、书面资源和项目均免费供你探索和分享 😁

在这里访问课程！

如果您有任何反馈、批评或内容建议，请发送邮件至hello@bitsofgood.org。

链接链接 https://dev.to/bholmesdev/html5-tags-how-do-they-work-and-which-ones-should-i-use-3nhl
Devto 翻译
PREV
理解 Redux 与 React
NEXT
使用 CSS 变量如何帮助我减少 JavaScript