构建HTML5文档关键在于标签用得对，而非有没有用；误用结构标签会导致DOM重写、样式失效、脚本取不到元素及无障碍访问失败。
构建符合W3C标准的HTML5文档，关键不在标签“有没有用”，而在“用得对不对”。结构标签一旦误用，浏览器虽不报错，但会悄悄重写DOM，导致样式失效、脚本取不到元素、屏幕阅读器无法识别逻辑——表面正常，实则隐患深埋。
别在<p>里塞块级元素
<p>只允许行内容（phrasing content）：文字、<strong>、<em>、<img>、<a>等。以下写法全是错误：
-
<p><div>简介</div></p>→ 浏览器自动拆成<p></p><div>简介</div> -
<p><ul><li>优势</li></ul></p>→<p>被强制闭合，<ul>变成孤立节点 -
<p><h2>小节标题</h2></p>→ 同样触发提前闭合
需要包裹多段或混合内容？改用 <section> 或 <article>；想加标题或列表？先结束 <p>，再在父容器中独立放置 <h2> 和 <ul>。
<header>和<footer>不是“顶部横条”和“底部横条”
它们是语义化的区块级页眉/页尾，只承载与当前上下文直接相关的元信息：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<header>内可放<h1>～<h6>、简短说明性<p>、<logo>（自定义）等，但禁止嵌套<nav>、<main>、<section>或另一个<header> -
<footer>适合放版权、联系方式、相关链接，不能塞<nav>、<form>或整段<section>
若页面需“导航+页眉”组合，应让 <nav> 与 <header> 并列，或用 <section> 包裹二者，各自保留语义。
<ul>和<ol>必须直包<li>
<ul> 的内容模型明确要求子元素只能是零个或多个 <li>。中间插入任何其他标签都会破坏结构：
- 错误：
<ul><div class="item">首页</div></ul>→ 浏览器断开<ul>，<div>成为兄弟节点 - 后果：CSS 伪类（如
ul li:last-child）失效；无障碍阅读器无法识别为列表；JS 获取ul.children得到空数组
修复方式只有两种：把 <div class="item"> 换成 <li class="item">；或确需额外容器（如动画分组），就用 <li><div class="item">…</div></li>，确保 <div> 是 <li> 的子元素，而非 <ul> 的直接子元素。
慎用内联 style，结构标签不是样式钩子
<header>、<nav>、<section> 等结构标签支持 style 属性，但违背语义化初衷：
- 结构职责是表达层级与功能，不是控制外观
- 内联样式无法复用，难以响应式，不支持
@media或:hover - 优先用
class：如<header class="site-header--sticky">，对应 CSS 中统一管理
仅在极少数场景可破例：JS 必须动态计算像素值且无法通过 CSS 变量替代时，才考虑 style。
