理解 HTML 元素的基本构成与语法
掌握嵌套元素、空元素（自闭合元素）的概念与使用规范
区分块级元素（Block-level）与行内元素（Inline）的布局行为
养成编写语义化、结构清晰且符合最佳实践的 HTML 代码习惯
HTML 元素是构成网页内容和结构的基本单元。每一个元素通常由三部分组成：
开始标签：如 <p>
内容：如 “欢迎来到 TechBlog！”
结束标签：如 </p>
<p>欢迎来到 TechBlog！</p>浏览器通过解析这些元素，决定如何在页面上呈现内容。
某些元素没有内容，也不需要结束标签，称为空元素或自闭合元素，例如：
<br>：换行
<img>：插入图片
<input>：表单输入框
<hr>：水平分割线
虽然 HTML5 允许写作 <br>，但为了兼容性和清晰性，常写作 <br />。
<tagname>内容</tagname>关键要点
标签不区分大小写：<P> 和 <p> 效果相同
推荐使用小写：符合现代开发规范，提升可读性与一致性
必须正确闭合非空元素：避免浏览器自动修复导致的布局错乱
示例：标准 HTML 文档结构
<!DOCTYPE html>
<html>
<head>
<title>HTML 元素示例</title>
</head>
<body>
<h1>TechBlog</h1>
<p>计算机科学学习平台</p>
</body>
</html>此例中，
<html>包含<head>和<body>，而<head>又包含<title>—— 这就是典型的元素嵌套。
当一个 HTML 元素包含另一个元素时，就形成了嵌套结构。良好的嵌套是构建语义化、可维护网页的基础。
<body>
<div>
<h2>课程介绍</h2>
<p>本节讲解 <strong>HTML 元素</strong> 的核心概念。</p>
</div>
</body>正确嵌套：<div> → <h2> 和 <p>
错误嵌套：<p><div></p></div>（标签交叉闭合，会导致解析异常）
提示：现代浏览器会尝试“修复”错误的嵌套，但这可能导致意外的渲染结果，应尽量避免。
对于非空元素（如 <p>, <div>, <h1>），强烈建议显式写出结束标签。
反面示例：
<body>
<h2>欢迎来到 TechBlog</h2>
<p>你好，开发者！
</body>虽然浏览器会在开发者工具中自动补全
</p>，但这种写法：
容易引发后续元素归属错误
不利于团队协作与代码审查
违反 W3C 标准推荐实践
最佳实践：始终为非空元素配对开始与结束标签。
空元素不包含任何内容，也没有结束标签。常见空元素包括：
<h2>欢迎来到 TechBlog</h2>
<br />
<p>你好，世界！</p>注意：虽然
<br />中的/在 HTML5 中非必需，但在 XHTML 或追求严格格式的项目中仍被广泛使用。
HTML 元素根据其默认显示行为分为两大类：
独占一行，前后自动换行
默认占据父容器的全部宽度
可包含其他块级或行内元素
常见块级元素：
<div>, <p>, <h1>–<h6>,
<ul>, <ol>, <li>,
<section>, <article>, <header>, <footer>,
<form>, <table>不换行，与其他行内元素在同一行显示（若空间足够）
宽度由内容决定
不能包含块级元素（违反 HTML 规范）
常见行内元素：
<span>, <a>, <img>,
<strong>, <b>, <em>, <i>,
<br>, <input>
记忆技巧：块级像“盒子”，行内像“文字”。
HTML 元素 = 开始标签 + 内容 + 结束标签（空元素除外）
标签不区分大小写，但推荐全小写
必须正确嵌套，避免标签交叉
非空元素务必写结束标签，即使浏览器能自动补全
空元素（如 <br>, <img>）没有结束标签
块级元素独占一行，行内元素同行显示 —— 理解二者差异是布局基础
为什么 <p><div>内容</div></p> 在浏览器中可能无法按预期渲染？这违反了什么规则？
能否将 <div> 放在 <span> 内部？为什么？请从 HTML 语义和规范角度解释。
在响应式网页设计中，理解块级与行内元素的默认行为对 CSS 布局有何帮助？