HTML 元素与标签完全指南：构建网页结构的基础（cu/curriculum foundations 课程精讲）-创锋一号

HTML 元素与标签完全指南：构建网页结构的基础（cu/curriculum foundations 课程精讲）

【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum

HTML（HyperText Markup Language，超文本标记语言）负责定义网页的结构与内容，段落、标题、列表、图片和链接等所有网页组成要素，都由 HTML 元素承载。本篇指南以 elements_and_tags.md 为骨架，结合仓库中 HTML Foundations 系列课程，系统讲解开始/结束标签、元素构成、空元素（void elements）与语义 HTML，让你掌握书写标准 HTML 所需的第一块基石，并为后续 CSS 与 JavaScript 学习打下基础。

什么是 HTML 元素与标签

HTML 页面上几乎所有的元素，都只是「被一对 HTML 标签包裹起来的内容」。HTML 标签是定义网页结构与内容的核心构建块，浏览器正是通过识别标签来决定如何解析和呈现页面。

一个典型的元素由三部分组成：开始标签 + 内容 + 结束标签。

以段落元素为例，完整写法如下：

<p>some text content</p>

其中：

<p>是开始标签（opening tag）；
some text content是被开始与结束标签包裹的内容；
</p>是结束标签（closing tag）。

下图直观展示了这三部分在真实代码中的位置与关系：

开始标签与结束标签

开始标签告诉浏览器「这是一个 HTML 元素的起点」。它由一个放在尖括号<>内的关键字构成，例如段落元素的开始标签写作<p>。

结束标签告诉浏览器「这个元素到哪里结束」。它与开始标签几乎一样，唯一区别是在关键字之前多了一个正斜杠/，例如段落元素的结束标签写作</p>。

<p>一些文本内容</p>

注意：结束标签中的正斜杠/是 HTML 语法的一部分，它并非可选的「装饰」，漏掉它会破坏元素的完整结构。

元素是内容的容器

可以把 HTML 元素理解为内容的容器。开始标签与结束标签共同声明了容器所承载的内容，浏览器据此判断内容的类型，并决定如何解释和格式化它。

例如，浏览器看到<h1>标签就知道其中的文本是页面一级标题，会以更大、更粗的样式呈现；看到<p>就知道是段落，会在前后产生换行间隔。容器越准确，浏览器呈现的结果越符合你的意图。

使用正确的标签：语义 HTML 的价值

HTML 提供了一整套预定义标签，用于创建各种类型的元素。使用正确的标签承载正确的内容，就是所谓的语义 HTML（semantic HTML）——在 elements_and_tags.md 中明确提到，这会从两个重要方面影响你的网站：

搜索引擎排名：语义标签让搜索引擎爬虫更准确地理解页面内容的层级与含义，从而更恰当地为页面建立索引。
无障碍可访问性：正确标签能为依赖辅助技术（如屏幕阅读器）的用户提供上下文。仓库中的 semantic_html.md 给出了一个直观对比：同样表示「石头、剪刀、布」的按钮，用<div>包裹时屏幕阅读器只会朗读出文本，而改用<button>后朗读结果为 "Rock, button"，用户才能明确这是可交互的控件。

语义 HTML 的完整深度内容会在课程后续章节展开（参见 semantic_html.md 与 introduction_to_web_accessibility.md），本课你只需要建立「标签要与内容语义匹配」的意识。

空元素（Void Elements）

并非所有 HTML 元素都有结束标签。某些元素只有单独一个标签，例如<br>或<img>。它们被称为空元素（void elements），因为其内部「空空如也」——不包含任何内容，也因此无法像普通标签那样包裹内容。

<br> <!-- 换行 --> <img src="./images/dog.jpg"> <!-- 图片 -->

常见的空元素还包括：

元素	作用
`<br>`	换行
`<img>`	嵌入图片（用`src`属性指定图片来源）
`<hr>`	水平分割线
`<input>`	表单输入框
`<meta>`	文档元信息（如字符编码）
`<link>`	引入外部资源（如 CSS 文件）

关于「自闭合标签」的说法

你可能会听到「自闭合标签」（self-closing tags）这一叫法，它本质上就是空元素在末尾加上一个正斜杠的写法，例如：

<br /> <img />

这种写法在历史上被广泛使用，浏览器也完全可以正常渲染。但需要特别留意：最新版本的 HTML 规范不鼓励这种写法，并视其为无效。因此，现代写法应直接省略末尾斜杠，使用<br>、<img>即可。课程在 elements_and_tags.md 中也特意强调了这一点，避免初学者从旧资料中习得过时习惯。

元素如何接收附加信息：属性（Attributes）

虽然本课重点在标签本身，但理解元素离不开属性。在 links_and_images.md 中详细解释了：HTML 属性为元素提供附加信息，永远写在开始标签中，通常由「名称 + 值」两部分组成（并非所有属性都需要值）。

<a href="https://www.theodinproject.com/about">About The Odin Project</a>

href（hypertext reference）属性指定链接跳转目标；
src属性指定<img>图片文件的来源，用法与href类似；
alt属性为图片提供替代文本，在图片无法加载时显示，同时供屏幕阅读器朗读；
<html>上的lang属性声明页面语言，辅助技术与搜索引擎据此调整发音与解析方式（详见 html_boilerplate.md）。

空元素（如<img>）没有内容可包裹，正是通过src、alt这类属性把信息「嵌入」到页面中。

元素的三种关系：父元素、子元素与兄弟元素

当一个元素被嵌套在另一个元素内部时，就产生了父子关系：被嵌套的是子元素，容纳它的是父元素。处于同一嵌套层级、共享同一个父元素的元素互为兄弟元素。

<body> <p>第一个段落</p> <p>第二个段落</p> </body>

上例中<body>是父元素，两个<p>是其子元素，同时二者互为兄弟。

编写 HTML 时，用缩进来体现嵌套层级（课程示例统一使用每层两个空格），这能让父子、兄弟关系一目了然，也便于其他开发者阅读维护。这些关系在后续用 CSS 选择器定位元素、用 JavaScript 操作 DOM 时至关重要。

常见文本元素速查

结合 working_with_text.md，HTML 中最常用的文本元素包括：

段落<p>：浏览器会把 HTML 源码中的连续换行压缩为单个空格，因此想生成段落必须显式使用<p>标签包裹文本；
标题<h1>~<h6>：共 6 级，<h1>最大最重要，用于页面整体标题；<h6>最小，用于最次级小节，标题层级为内容提供层次结构；
加粗<strong>：使文本加粗，同时在语义上标记「重要」，部分屏幕阅读器会改变语调以强调该内容；
斜体<em>：使文本倾斜，语义上表示「强调」，同样会被辅助技术以特殊方式读出；
列表<ul>/<ol>/<li>：无序列表<ul>每项以圆点开头，适合顺序无关的内容（如购物清单）；有序列表<ol>每项以数字开头，适合顺序重要的内容（如菜谱步骤），二者内部的每一项都用<li>创建（详见 lists.md）。

把元素放进文档骨架

单个元素需要放置到正确的文档骨架中才能被浏览器正确渲染。按照 html_boilerplate.md，一个最小的完整 HTML 文档结构如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My First Webpage</title> </head> <body> <h1>Hello World!</h1> </body> </html>

<!DOCTYPE html>声明文档使用 HTML5 规范渲染；
<html>是文档的根元素，文档中所有其他元素都是它的后代；
<head>存放关于页面的元信息（如字符编码<meta charset="UTF-8">与浏览器标签页标题<title>），不放置任何页面可见内容；
<body>存放所有向用户展示的内容，是元素标签的「主战场」。

掌握元素与标签之后，就可以立即把它们应用到手边的实战中：课程配套项目 project_recipes.md 要求你构建一个菜谱网站，用<h1>标题、<a>链接、<ul>/<ol>列表与<img>图片组合出多页面站点——这正是元素与标签知识的第一次完整演练。

知识自测

以下问题覆盖本课核心知识点，可以据此自查掌握程度（完整练习任务与视频资源见 elements_and_tags.md）：

什么是 HTML 标签？
一个完整 HTML 元素由哪三部分组成？
什么是空元素（void elements）？它与普通元素有何不同？
为什么说使用正确的标签会影响搜索引擎排名与无障碍可访问性？
自闭合写法（如<br />）在当前 HTML 规范中的地位如何？

小结

HTML 元素由开始标签、内容与结束标签三部分构成，空元素则只有单个标签；把语义正确的标签用于对应内容，是兼顾 SEO 与无障碍的基础。在此基础上，属性为元素补充信息，嵌套关系构建出文档层级，<html>、<head>、<body>骨架则把一切组织起来。这套基础将贯穿后续的 working_with_text.md、links_and_images.md 等全部 HTML 课程，也是你迈向 CSS 与 JavaScript 的必经起点。

【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析