下面是一份结构清晰、适合整理为技术专栏或学习笔记的内容。📒
【H5 前端开发笔记】第 15 期：CSS 元素（标签）之间的层次关系与代码注释（复盘）
在网页开发中，HTML 标签并不是孤立存在的，而是形成 层级结构（DOM 树）。
CSS 的很多规则（例如选择器、继承、层叠）都依赖这种 元素之间的层次关系。
本期我们将复盘两个重要内容：
1️⃣ HTML 元素之间的 层级关系
2️⃣ CSS 与 HTML 的 代码注释规范
一、HTML 元素的层级结构
网页中的 HTML 标签通常呈现 树状结构（DOM Tree）。
示例：
<body>
<div class="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 学习的核心章节之一，也是前端面试高频知识点。🚀
