HTML5结构化文档的核心是语义化标签各司其职：<header>包顶部内容，<nav>专用于独立导航单元，<main>全页唯一且不可嵌套，<article>代表独立内容项，<section>需有明确主题，<aside>仅限相关旁注；CSS必须显式定义所有样式，结构与样式物理分离，确保可读性、可访问性与可维护性。
HTML5结构化文档的核心不是堆砌标签，而是让每个标签承担明确的语义职责，同时把视觉表现完全交给CSS——结构归结构，样式归样式，两者物理分离、逻辑协同。
用对语义标签，不为炫技，而为可读与可访问
语义标签不是装饰品，是页面的“骨架说明书”。
-
应包裹页面或章节顶部内容（如logo+主导航），不用于内部模块标题栏 - 专指导航链接集合，且必须是独立语义单元；页脚导航、侧边栏链接不属于
-
全页仅出现一次，代表用户核心关注内容，不能嵌套在
或 内 - 表示可独立分发的内容项（如一篇博客、一条新闻），自带隐含的独立上下文
-
需配有
–
标题，表达主题明确的文档分区，不是通用容器
- 只用于与主内容相关但可脱离存在的旁注（如术语解释、作者简介），非广告位或无关推荐
CSS不认语义，只认选择器：样式必须显式声明
浏览器对
- 别依赖元素选择器写全局样式（如nav { padding: 1rem; }），容易被重置样式或第三方库覆盖
- 推荐组合使用：
- 用[data-*]属性标记行为意图（如data-role="mobile-menu"），再用[data-role="mobile-menu"] { position: fixed; }控制，避免class语义混杂
- hr标签不是画线工具，而是主题分隔符；需用CSS重置外观，例如.major-break { height: 2px; background: #333; margin: 2rem 0; }
物理分离是硬性门槛，不是可选项
结构与样式必须在文件层面彻底解耦：
立即学习“前端免费学习笔记（深入）”；
- HTML中删除所有style属性、
- CSS全部写入外链文件（如style.css），通过引入，按重置→工具→布局→组件顺序加载
- JS放在底部，用defer属性确保DOM就绪后再执行，不干扰结构解析
- 低端环境兼容靠html5shiv补丁，而非降级使用这类伪语义写法
维护性来自清晰分工，而非技术堆叠
一个高可维护的HTML5文档，关键不在用了多少新特性，而在三点是否落地：
- 结构是否一目了然——打开HTML就能分辨出哪是导航、哪是正文、哪是补充信息
- 层级是否扁平合理——避免
- 样式是否与结构零耦合——换掉CSS文件，HTML仍能语义完整、无障碍可用、SEO有效
