【H5 前端开发笔记】第 02 期：HTML标签之间的关系、HTML注释、标签属性
（2026 最新版 · 结构清晰 · 可直接作为学习笔记）
一、本期核心知识点概览
本期我们重点学习 HTML 的三大基础概念：
- HTML 标签之间的关系（父子、兄弟、祖先、后代）
- HTML 注释的正确写法与作用
- 标签属性（Attribute）的详细用法
掌握这三点，是写出规范、清晰、可维护 HTML 代码的前提。
二、HTML 标签之间的关系（非常重要）
HTML 文档本质是一个树状结构（DOM 树）。标签之间存在明确的层级关系。
1. 常见关系术语
| 关系名称 | 英文术语 | 含义说明 | 示例 |
|---|---|---|---|
| 父元素 | Parent | 直接包含当前元素的上一级元素 | <div> 是 <p> 的父元素 |
| 子元素 | Child | 直接被当前元素包含的下一级元素 | <p> 是 <div> 的子元素 |
| 兄弟元素 | Sibling | 拥有同一个父元素的元素 | 两个 <li> 互为兄弟 |
| 祖先元素 | Ancestor | 当前元素的父元素、父元素的父元素…… | <body> 是所有可见元素的祖先 |
| 后代元素 | Descendant | 当前元素包含的所有子级、孙子级…… | <div> 的后代包含里面的所有标签 |
| 根元素 | Root | 整个文档的顶级元素 | <html> |
2. 实际代码示例（强烈建议手敲理解）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>标签关系示例</title>
</head>
<body> <!-- 祖先元素、根元素之一 -->
<header> <!-- body 的子元素 -->
<nav> <!-- header 的子元素，body 的后代 -->
<ul>
<li>首页</li> <!-- ul 的子元素，li 之间互为兄弟 -->
<li>关于我们</li>
</ul>
</nav>
</header>
<main> <!-- body 的子元素，与 header 是兄弟 -->
<article> <!-- main 的子元素 -->
<h1>文章标题</h1>
<p>这是段落内容<span>重点文字</span></p> <!-- p 的子元素是 span -->
</article>
</main>
<footer></footer> <!-- body 的子元素，与 header、main 是兄弟 -->
</body>
</html>
记忆口诀：
父子关系看直接包含，兄弟关系看同级，祖先后代看包含关系。
三、HTML 注释（Comments）
1. 写法
<!-- 这是一行注释内容 -->
<!--
这是一个多行注释
可以写很多行
常用于解释复杂结构或临时隐藏代码
-->
2. 注释的作用
- 解释代码意图，提高可读性
- 临时隐藏某些代码（调试时非常有用）
- 团队协作时标注 TODO、注意事项等
3. 注意事项（2026 规范）
- 注释不能嵌套！下面写法错误：
<!-- 外层注释
<!-- 内层注释 --> <!-- 错误！ -->
-->
- 注释不会被浏览器显示，也不会影响页面性能
- 生产环境建议删除过多注释，减少文件体积
四、标签属性（Attribute）详解
1. 基本概念
属性是写在开始标签里面，用于给标签提供额外信息或功能的键值对。
语法格式：
<标签名 属性名="属性值" 属性名="属性值">
2. 属性分类（2026 最新理解）
- 全局属性（Global Attributes）：几乎所有标签都可以使用
- 专有属性：只有特定标签才支持（如
<img>的src、alt）
3. 常用全局属性（必须掌握）
| 属性名 | 含义说明 | 推荐写法示例 |
|---|---|---|
id | 唯一标识，一个页面只能出现一次 | id="main" |
class | 类名，可重复，用于 CSS 和 JS 选择 | class="box red" |
style | 行内样式（不推荐大量使用） | style="color:red;" |
title | 鼠标悬停时显示的提示文字 | title="删除此项" |
lang | 语言声明 | lang="zh-CN" |
data-* | 自定义数据属性（非常重要！） | data-id="123" data-user-name="张三" |
hidden | 隐藏元素（布尔属性） | hidden |
tabindex | 控制 Tab 键聚焦顺序 | tabindex="0" |
4. 常用专有属性示例
<!-- 图片必须属性 -->
<img src="photo.jpg" alt="产品照片" width="300" height="200" loading="lazy">
<!-- 链接常用属性 -->
<a href="https://example.com"
target="_blank"
rel="noopener noreferrer"
title="打开官网">
访问官网
</a>
<!-- 表单常用属性 -->
<input type="text"
name="username"
placeholder="请输入用户名"
required
maxlength="20">
5. 布尔属性（Boolean Attributes）
特点：只写属性名，不需要写属性值，表示“开启”该功能。
<input type="checkbox" checked> <!-- 已选中 -->
<button disabled>提交</button> <!-- 不可点击 -->
<video controls autoplay muted></video>
五、本期综合练习（建议全部手写一遍）
- 写一个完整的 HTML 页面，包含
header、nav、main、footer - 在
nav中用<ul>写导航菜单，两个li之间用注释说明“这是兄弟元素” - 给至少 3 个标签加上
id、class、title属性 - 使用
data-id="1001"自定义属性 - 用注释标注页面的主要区域（头部、内容区、底部）
六、笔记总结（建议抄写或高亮）
- HTML 是树状结构，标签存在父子、兄弟、祖先后代关系
- 注释用
<!-- -->，不能嵌套，主要用于解释和临时隐藏 - 属性写在开始标签内，格式为
属性名="属性值" - 全局属性（id、class、style、title、data-*）几乎所有标签都可用
- 布尔属性只写属性名即可
- 强烈推荐：多使用语义化标签 + 有意义的 class 和 data-* 属性
第 03 期预告：《HTML 常用语义化标签与文本格式化标签》
（h 系列、p、strong、em、span、div、section、article、nav、header、footer、main、aside 等）
需要我立即补充以下任意内容，请直接回复：
- 本期完整示例代码（带详细注释的可运行 HTML 文件）
- 标签关系思维导图（文字版）
data-*自定义属性的实战用法（配合 JS 预习）- 把第 01 期 + 第 02 期笔记合并成一份完整文档
- 本期练习的标准参考答案
继续加油！第 02 期笔记到此结束。
你的前端基础正在稳步打牢！✨
