【H5 前端开发笔记】第 15 期：CSS 元素(标签)之间的层次关系与代码注释(复盘)
下面是一份结构清晰、适合整理为技术专栏或学习笔记的内容。📒
【H5 前端开发笔记】第 15 期：CSS 元素（标签）之间的层次关系与代码注释（复盘）
在网页开发中，HTML 标签并不是孤立存在的，而是形成层级结构（DOM 树）。
CSS 的很多规则（例如选择器、继承、层叠）都依赖这种元素之间的层次关系。
本期我们将复盘两个重要内容：
1️⃣ HTML 元素之间的层级关系
2️⃣ CSS 与 HTML 的代码注释规范
一、HTML 元素的层级结构
网页中的 HTML 标签通常呈现树状结构（DOM Tree）。
示例：
<body><divclass="container"><h1>标题</h1><p>段落内容</p></div></body>结构关系：
body └─ div ├─ h1 └─ p这种结构就是父子关系。
二、父元素与子元素
当一个标签包含另一个标签时：
- 外层标签：父元素
- 内层标签：子元素
示例：
<div><p>文本内容</p></div>关系：
| 元素 | 关系 |
|---|---|
| div | 父元素 |
| p | 子元素 |
三、祖先元素与后代元素
如果层级继续增加，就会出现祖先与后代关系。
示例：
<div><section><p>内容</p></section></div>结构：
div └ section └ p关系：
| 元素 | 关系 |
|---|---|
| div | p 的祖先 |
| section | p 的父元素 |
| p | div 的后代 |
四、兄弟元素
当两个元素拥有同一个父元素时，它们互为兄弟元素。
示例：
<ul><li>苹果</li><li>香蕉</li><li>橙子</li></ul>结构：
ul ├ li ├ li └ li三个<li>元素互为兄弟元素。
五、元素层级关系与 CSS
CSS 选择器经常依赖这些层级关系。
例如：
后代选择器
div p{color:red;}含义：
选择 div 内部所有 p子元素选择器
div > p{color:blue;}含义：
只选择 div 的直接子元素 p六、HTML 注释
HTML 支持使用注释来说明代码。
语法：
<!-- 注释内容 -->示例：
<!-- 网站头部 --><header>Logo</header>作用：
- 提高代码可读性
- 方便团队协作
- 标记代码模块
七、CSS 注释
CSS 也支持注释。
语法：
/* 注释内容 */示例：
/* 页面标题 */h1{color:blue;}八、代码注释的常见用途
在实际开发中，注释通常用于：
1 标记模块
/* header */.header{}/* navigation */.nav{}/* footer */.footer{}2 解释复杂逻辑
/* 解决浮动布局问题 */.clearfix{clear:both;}3 临时关闭代码
/* .box{ background:red; } */这样代码不会执行，但仍保留在文件中。
九、代码注释规范
良好的注释可以提升代码质量。
建议：
1️⃣ 注释模块结构
2️⃣ 注释复杂逻辑
3️⃣ 不要过度注释简单代码
例如：
不推荐：
/* 设置红色 */color:red;推荐：
/* 主标题颜色 */color:#333;十、常见项目结构示例
一个简单网页的 HTML 结构：
<body><!-- header --><header>网站标题</header><!-- navigation --><nav>菜单</nav><!-- main --><main>内容区域</main><!-- footer --><footer>页脚</footer></body>这样结构清晰易读。
十一、本期复盘
HTML 标签之间存在层级关系：
| 关系 | 说明 |
|---|---|
| 父元素 | 包含其他元素 |
| 子元素 | 被包含 |
| 祖先元素 | 更高层级 |
| 后代元素 | 所有内部元素 |
| 兄弟元素 | 同级元素 |
代码注释：
HTML 注释：
<!-- 注释 -->CSS 注释：
/* 注释 */作用：
- 提高可读性
- 方便维护
- 标记模块结构
如果你愿意，我可以继续帮你整理下一篇：
第 16 期：CSS 选择器全面详解（标签选择器 / 类选择器 / ID选择器 / 后代选择器 / 子选择器）
这是CSS 学习的核心章节之一，也是前端面试高频知识点。🚀