【H5 前端开发笔记】第 02 期：HTML标签之间的关系、HTML注释、标签属性
【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. 实际代码示例（强烈建议手敲理解）
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="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. 常用专有属性示例
<!-- 图片必须属性 --><imgsrc="photo.jpg"alt="产品照片"width="300"height="200"loading="lazy"><!-- 链接常用属性 --><ahref="https://example.com"target="_blank"rel="noopener noreferrer"title="打开官网">访问官网</a><!-- 表单常用属性 --><inputtype="text"name="username"placeholder="请输入用户名"requiredmaxlength="20">5. 布尔属性（Boolean Attributes）
特点：只写属性名，不需要写属性值，表示“开启”该功能。
<inputtype="checkbox"checked><!-- 已选中 --><buttondisabled>提交</button><!-- 不可点击 --><videocontrolsautoplaymuted></video>五、本期综合练习（建议全部手写一遍）
- 写一个完整的 HTML 页面，包含
header、nav、main、footer - 在
nav中用<ul>写导航菜单，两个li之间用注释说明“这是兄弟元素” - 给至少 3 个标签加上
id、class、title属性 - 使用
data-id="1001"自定义属性 - 用注释标注页面的主要区域（头部、内容区、底部）
六、笔记总结（建议抄写或高亮）
- HTML 是树状结构，标签存在父子、兄弟、祖先后代关系
- 注释用
<!-- -->，不能嵌套，主要用于解释和临时隐藏 - 属性写在开始标签内，格式为
属性名="属性值" - 全局属性（id、class、style、title、data-*）几乎所有标签都可用
- 布尔属性只写属性名即可
- 强烈推荐：多使用语义化标签 + 有意义的 class 和>