HTML 元素（标签）和属性

Begindev 编辑部 March 25, 2026

在搭建好开发环境并理解了 HTML 文档的基本结构后，是时候深入了解让内容变得生动的核心组件了：HTML 元素和属性。

它们是你用来构建、组织和描述网页上每一条信息的积木——从标题、段落到图像和交互式表单。

元素和属性决定了你的内容如何呈现，以及浏览器如何解释你的文档。如果没有扎实地掌握这些概念，就无法创建有意义且功能正常的网页。

1. 什么是 HTML 元素？

HTML 元素是构成所有 HTML 文档的基本构建块。
HTML 元素通常也被称为 HTML 标签。

它们描述了网页内容的结构和含义。你可以把它们想象成容器，用来装载不同类型的内容，比如文本、图像，甚至是其他元素。你在网页上看到的每一个内容片段，从简单的段落到复杂的导航菜单，都是由 HTML 元素定义的。

1.1 HTML 元素的解剖结构

大多数 HTML 元素遵循一个清晰的结构：

开始标签（Opening Tag）：标志着元素的开始。它由尖括号包围的元素名称组成，例如 <p> 代表段落，<h1> 代表主标题。
内容（Content）：元素包含的实际信息。它可以是文本，也可以是其他 HTML 元素（这称为嵌套），或者是两者的组合。
结束标签（Closing Tag）：标志着元素的结束。它与开始标签类似，但在元素名称前包含一个斜杠，例如 </p> 或 </h1>。

示例

<p>  这是段落的内容。 </p>
 ^          ^        ^
 |          |        |
开始标签    内容    结束标签

1.2 嵌套 HTML 元素

HTML 元素可以放在其他 HTML 元素内部。这被称为嵌套（Nesting），这是你创建更复杂结构内容的方式。

当嵌套元素时，必须确保按照它们“打开”的相反顺序正确地“关闭”它们（即：后开先关）。

正确的嵌套示例：

<p>这是一个包含 <strong>粗体文字</strong> 的段落。</p>

在这里，<strong> 元素完全包含在 <p> 元素内部。

错误的嵌套示例：

<p>这是一个包含 <strong>粗体文字。</p></strong>

这是错误的，因为 <strong> 元素在 <p> 元素结束之前没有被正确关闭。这可能导致浏览器出现不可预测的显示问题。永远记得先关闭最里面的标签。

1.3 空元素（自闭合标签）

有些 HTML 元素没有任何内容，因此不需要结束标签。这些被称为空元素（empty elements）或自闭合标签。它们通常代表插入到文档中的东西，而不是包裹在一段内容周围。

常见例子：

<br>：代表换行（Line Break），强制随后的文本移到下一行。
<hr>：代表主题转换或水平线（Horizontal Rule），通常显示为横跨页面的一条线。

注意：在现代 HTML5 中，尾部的斜杠（例如 <br/>）是可选的，为了简洁通常会被省略。你在现代代码中主要会看到 <br> 和 <hr>。

2. 什么是 HTML 属性？

如果说元素定义了内容的类型，那么属性（Attributes）则为 HTML 元素提供额外的信息或特性。

属性总是指定在元素的开始标签中，并以 name="value"（名称="值"）成对出现。

2.1 HTML 属性的解剖结构

一个属性包含：

属性名称（Attribute Name）：你想为元素设置的属性名（例如 id, class, style）。
等号（=）：将属性名与它的值分隔开。
属性值（Attribute Value）：该属性的具体设置或数据，总是用引号括起来（双引号 "" 或单引号 '' 均可，但双引号最常用）。

演示

<p class="highlight" style="color: blue;">
     ^        ^
  属性名称    属性值

一个元素可以有多个属性，在开始标签内用空格分隔。

2.2 常见的 HTML 属性

虽然许多属性是特定于某些元素类型的（我们将在未来的课程中探索），但有些属性广泛适用于许多 HTML 元素。

1. id 属性

id 属性为整个文档中的 HTML 元素提供一个唯一的标识符。在同一个 HTML 页面中，不应该有两个元素拥有相同的 id 值。

目的：唯一地标识一个元素。这对于以下操作至关重要：

使用 CSS 针对特定元素进行独特样式设置。
使用 JavaScript 操作特定元素。
创建指向特定部分的页面内部链接（跳转链接）。

用法：<tagname id="uniqueName">

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ID 属性演示</title>
</head>
<body>
    <h1 id="mainTitle">欢迎来到我的独特页面</h1>
    
    <p id="introduction">这段话提供了页面内容的简短介绍。</p>
    
    <p>这是一个用于演示的普通段落，没有特定的 ID。</p>
</body>
</html>

2. class 属性

class 属性为一个 HTML 元素分配一个或多个类名。与 id 不同，class 名称不是唯一的，可以应用于同一个文档中的多个元素。

目的：将元素分组，以便可以集体设置样式或进行操作。这最常与 CSS 一起使用，将相同的样式应用于多个元素。
用法：<tagname class="className1 className2">（多个类名用空格分隔）

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Class 属性演示</title>
    <style>
        .highlight {
            background-color: yellow; /* 背景变黄 */
            padding: 5px;
        }
        .important {
            font-weight: bold; /* 加粗 */
            color: red; /* 变红 */
        }
    </style>
</head>
<body>
    <p class="highlight">这段文字将被高亮显示为黄色。</p>
    
    <p class="highlight important">这段文字既被高亮，又是重要的。</p>
    
    <p class="important">这段文字很重要，但没有高亮背景。</p>
    
    <p>这是一个没有任何类的普通段落。</p>
</body>
</html>

3. style 属性

style 属性允许你直接将内联 CSS 样式应用于单个 HTML 元素。它用于定义颜色、字体大小、背景等表现方面。

目的：对单个元素应用特定样式，覆盖从外部样式表或父元素继承的任何样式。
用法：<tagname style="property: value; property2: value2;">

示例

<h1 style="color: green;">一个绿色的标题</h1>

<p style="font-size: 18px; text-align: center;">这个段落有自定义大小并且居中。</p>

警告：虽然用于快速测试或非常具体的一次性样式很有用，但通常认为最佳做法是将样式（CSS）与内容（HTML）分离，使用外部样式表。这使你的代码更干净、更易于维护且更高效。

4. title 属性

title 属性提供关于元素的咨询信息。当用户将鼠标指针悬停在元素上时，这些信息通常显示为“工具提示（tooltip）”。

目的：为用户提供额外的上下文或元素的简短描述。
用法：<tagname title="这里写描述性文字">

示例

<p title="这段文字在悬停时提供额外信息。">
    将鼠标悬停在这句话上。
</p>

3. 实践示例与演示

让我们把学到的关于元素、嵌套和属性的知识结合起来，在上一章的基本文档结构之上，构建一个单一、全面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素与属性综合演示</title>
    
    <style>
        .highlight {
            background-color: #f0f8ff; /* 淡蓝色背景 */
            padding: 8px;
            border-left: 3px solid #007bff; /* 蓝色左边框 */
            margin-bottom: 10px;
        }
        .important-note {
            color: #dc3545; /* 红色字体 */
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1 id="pageHeading" title="我们演示页面的主标题。">
        探索 HTML 元素和属性
    </h1>

    <p class="highlight">
        欢迎深入了解 HTML 如何构建内容。网页上的每一条信息，从标题到交互控件，都始于一个 <strong>元素</strong>。
    </p>

    <p style="color: #6c757d; font-family: sans-serif;">
        在这些元素内部，我们经常使用 <span class="important-note">属性</span> 来添加 <em>额外信息</em>。这些属性向浏览器提供有关元素应如何表现或出现的具体指令。
    </p>

    <h2>理解基本元素类型</h2>

    <p id="firstSection" class="highlight">
        大多数元素都有一个 <strong style="color: darkgreen;">开始标签</strong> 和一个 
        <strong style="color: darkred;">结束标签</strong>，包裹着它们的内容。
    </p>

    <hr title="分隔内容部分的水平线。">

    <p class="highlight important-note" title="本节重点介绍元素类型和嵌套规则。">
        记住，*正确的嵌套* 至关重要。确保任何在另一个元素内部打开的元素也在其父元素结束之前关闭。例如，`<b><i>text</i></b>` 是正确的，但 `<b><i>text</b></i>` 是不正确的。
    </p>

    <br>

    <p>由于前面的换行元素，这段文字显示在新的一行。</p>
</body>
</html>

4. 总结

现在我们了解了 HTML 的基本构建块：元素和属性。

元素定义了内容的结构和含义（从标题到段落）。
属性为这些元素提供了额外的信息和属性，如唯一标识符（id）、可复用的类别（class）或直接样式（style）。

了解它们的解剖结构、如何正确嵌套它们，以及有内容元素与空元素之间的区别，对于编写有效且高效的 HTML 至关重要。

5. 附录：

5.1 常用 HTML 空元素列表

标签 (Tag)	名称/描述	主要用途	代码示例
`<img>`	图像 (Image)	在网页中嵌入图片。必须包含 src 和 alt 属性。	<img src="logo.png" alt="公司Logo">
`<br>`	换行 (Break)	在文本中产生一个强制换行（不产生新段落）。	第一行文本<br>第二行文本
`<hr>`	水平线 (Horizontal Rule)	创建一条水平分割线，表示内容的主题转换。	<p>第一章内容</p><hr><p>第二章内容</p>
`<input>`	输入框 (Input)	创建交互式表单控件（文本框、按钮、复选框等）。	<input type="text" placeholder="请输入姓名">
`<meta>`	元数据 (Metadata)	提供关于页面的元信息（编码、SEO 描述、视口设置）。	<meta charset="UTF-8">
`<link>`	链接 (Link)	定义文档与外部资源的关系（最常用的是链接 CSS 样式表）。	<link rel="stylesheet" href="style.css">
`<source>`	媒体源 (Source)	为 <video> 或 <audio> 标签指定多个媒体资源（不同格式）。	<source src="movie.mp4" type="video/mp4">
`<area>`	区域 (Area)	在图像映射（Image Map）中定义可点击区域。	<area shape="rect" coords="0,0,82,126" href="sun.htm">
`<base>`	基准 URL (Base)	为页面上所有相对 URL 指定基准 URL。	<base href="https://www.example.com/images/">
`<col>`	列 (Column)	规定表格中一列或多列的属性值。	<col span="2" style="background-color:red">

5.2 HTML 常见属性对照表

属性名	适用元素	说明
id	所有元素	为元素指定唯一的标识符。
class	所有元素	为元素指定一个或多个类名，用于 CSS 或 JavaScript 选择。
style	所有元素	直接在元素上应用 CSS 样式。
title	所有元素	为元素提供额外的提示信息，通常在鼠标悬停时显示。
data-*	所有元素	用于存储自定义数据，通常通过 JavaScript 访问。
href	<a>, <link>	指定链接的目标 URL。
src	<img>, <script>, <iframe>	指定外部资源（如图片、脚本、框架）的 URL。
alt	<img>	为图像提供替代文本，当图像无法显示时显示。
type	<input>, <button>	指定输入控件的类型（如 text, password, checkbox 等）。
value	<input>, <button>, <option>	指定元素的初始值。
disabled	表单元素	禁用元素，使其不可交互。
checked	<input type="checkbox">, <input type="radio">	指定复选框或单选按钮是否被选中。
placeholder	<input>, <textarea>	在输入框中显示提示文本。
target	<a>, <form>	指定链接或表单提交的目标窗口或框架（如 _blank 表示新标签页）。
readonly	表单元素	使输入框只读。
required	表单元素	指定输入字段为必填项。
autoplay	<audio>, <video>	自动播放媒体。
onclick	所有元素	当用户点击元素时触发 JavaScript 事件。
onmouseover	所有元素	当用户将鼠标悬停在元素上时触发 JavaScript 事件。
onchange	表单元素	当元素的值发生变化时触发 JavaScript 事件。