html标签不可替代css布局功能，因加粗斜体等仅表语义强调而非标题结构，须全页唯一且靠前，可嵌套不改层级，用于块级区域划分，用于行内局部修饰，需用css控制样式，仅为视觉换行，alt/title/aria-label服务对象不同且有优先级规则。
为什么 、 不能替代 ～
很多人一看到加粗、斜体，就顺手拿它当标题用，结果页面结构稀烂。浏览器和搜索引擎根本识别不出这是标题——只是强调内容重要性，才代表“这是整页的主标题”。语义错位直接导致SEO掉权、读屏软件跳过、后续用CSS重写样式时还得额外加!important。
-
<h1></h1>是文档层级锚点，必须全页唯一，且应出现在靠前位置 -
<strong></strong>可以嵌套在<p></p>、<li>甚至<span></span>里，不改变结构层级 - 用
<h2></h2>做小节标题时，必须确保它属于某个<h1></h1>之下，形成树状关系
和 在布局中到底怎么分工
把<div>当万能盒子塞内容，再用<code><span></span>包几个字加颜色，这种写法看似省事，实则埋下维护雷。关键不是“能不能用”，而是“该不该用”。
<div> 是块级容器，天然换行，适合划分页面区域：比如<code><div class="header">、<code><div class="article-section">
<li>
<code><span></span> 是行内容器，不打断文本流，只用于局部修饰：比如<span class="highlight">关键词</span>或<span aria-hidden="true">→</span>
- 误用后果：用
<span></span>包整段文字会导致CSS margin/padding 失效；用<div>包单个词会强制换行，破坏阅读节奏
<h3>用 <hr>、<br> 做分隔时的兼容性陷阱</h3>
<p><code><hr> 看似简单，但老项目里常有人写成<hr size="2" color="#ccc">，这在现代浏览器已不被支持——HTML5 已废弃所有 presentational 属性，必须用 CSS 控制。
- 正确写法：
<hr> + CSS：hr { border: none; height: 1px; background: #e0e0e0; }
-
<br> 是纯视觉换行，不是语义分段。连续写三个<br>来“空行”，等于放弃语义控制权，响应式断点时极易错位
- 真正需要分段，请用
<p></p>；需要留白，请用margin-top/bottom
alt、title、aria-label 这三个属性混用时的实际效果差异
图像标签<img>的这三个属性经常被当成一回事，但它们服务的对象完全不同。
-
alt 是图像缺失时的替代文本，也是屏幕阅读器唯一朗读的内容，必须简洁准确（如alt="微信登录按钮"）
-
title 是鼠标悬停时的提示框，纯视觉辅助，移动端基本无效，且无无障碍支持
-
aria-label 是绕过alt的强制覆盖方案，仅当图像本身无alt但又需提供可访问文本时使用（如图标字体）
- 冲突规则：
aria-label 优先级高于 alt，一旦同时存在，读屏器只读 aria-label
实际布局中最大的盲区，是把格式化标签当布局工具用。加粗、斜体、换行、水平线……它们只负责表达内容意图，不承担空间分配责任。真要控制位置、间距、流向，得靠 CSS 的 display、flex、grid —— HTML 标签只管“这是什么”，不管“它在哪”。
把<div>当万能盒子塞内容，再用<code><span></span>包几个字加颜色，这种写法看似省事，实则埋下维护雷。关键不是“能不能用”，而是“该不该用”。
<div> 是块级容器，天然换行，适合划分页面区域：比如<code><div class="header">、<code><div class="article-section"> <li> <code><span></span>是行内容器，不打断文本流，只用于局部修饰：比如<span class="highlight">关键词</span>或<span aria-hidden="true">→</span>- 误用后果：用
<span></span>包整段文字会导致CSS margin/padding 失效；用<div>包单个词会强制换行，破坏阅读节奏 <h3>用 <hr>、<br> 做分隔时的兼容性陷阱</h3> <p><code><hr>看似简单，但老项目里常有人写成<hr size="2" color="#ccc">，这在现代浏览器已不被支持——HTML5 已废弃所有 presentational 属性，必须用 CSS 控制。- 正确写法：
<hr>+ CSS：hr { border: none; height: 1px; background: #e0e0e0; } -
<br>是纯视觉换行，不是语义分段。连续写三个<br>来“空行”，等于放弃语义控制权，响应式断点时极易错位 - 真正需要分段，请用
<p></p>；需要留白，请用margin-top/bottom
alt、title、aria-label 这三个属性混用时的实际效果差异
图像标签
<img>的这三个属性经常被当成一回事，但它们服务的对象完全不同。-
alt是图像缺失时的替代文本，也是屏幕阅读器唯一朗读的内容，必须简洁准确（如alt="微信登录按钮"） -
title是鼠标悬停时的提示框，纯视觉辅助，移动端基本无效，且无无障碍支持 -
aria-label是绕过alt的强制覆盖方案，仅当图像本身无alt但又需提供可访问文本时使用（如图标字体） - 冲突规则：
aria-label优先级高于alt，一旦同时存在，读屏器只读aria-label
- 正确写法：
