导航型页面用<nav>或<div>包裹链接，结构极简；内容型页面须用<main>与语义标题层级；HTML5标签需兼容处理；DOCTYPE错误会触发怪异模式。
导航型页面的HTML结构特征
导航型页面核心是链接组织，不是内容展示。它不追求语义深度，而是强调链接密度与视觉权重分布。
常见错误是把频道导航页写成<section>嵌套结构——没必要。这类页面用<div>或<nav>包裹一组<a>即可，<h1>通常只出现一次（网站名），栏目名用<p>或<span>更轻量。
- 频道导航页（如镜像站首页）：结构极简，常为
<body>直出<ul>或<table>，每个<li>含一个<a href="..."> - 内容导航页（如新闻首页）：需用
<nav>包裹，栏目标题可用<h2>，但同一层级栏目间不用嵌套<section>——否则会误导搜索引擎认为存在多层正文结构 - 重要性排序必须靠HTML顺序，而非CSS
order：左上→右上→左→右的视觉动线，要靠标签书写顺序体现，不能靠float或grid强行调整
内容型页面的HTML结构关键点
内容型页面（如博客文章、产品详情页）必须严格遵循语义层级，<main>是强制容器，且只能有一个。
容易踩的坑是把整篇文字塞进一个<div>里再加class修饰——这等于放弃浏览器默认的文档大纲解析能力。
立即学习“前端免费学习笔记（深入）”；
-
<article>用于独立可分发的内容单元（如一篇博文），<section>用于逻辑分组（如“技术参数”“用户评价”），二者不可混用 -
<h1>必须且仅出现一次，代表页面主题；后续标题必须严格递进：<h2>→<h3>，跳级（如<h1>后直接<h3>）会导致大纲断裂 - 图片若承载信息（如商品主图、流程示意图），必须配
<img src="..." alt="...">；纯装饰图用CSSbackground-image，不进HTML结构
HTML4与HTML5结构差异的实际影响
HTML5不是“加功能”，而是重新定义了结构表达权。最直接的影响是：不写<header><footer>也能跑，但用了就意味你主动交出了结构解释权给浏览器和辅助工具。
兼容性陷阱在于IE8及以下：它们不认识<section>等新标签，会当作未知元素忽略样式，但不会报错——结果是CSS没生效，页面布局塌陷，开发者却查不到错误信息。
- 必须配合
document.createElement("section")或引入html5shiv.js才能让旧IE识别语义标签 -
<nav>在HTML4里可用<div class="nav">替代，但前者会被屏幕阅读器明确 announce 为“navigation”，后者只会读作“div” -
<main>没有对应的HTML4等价物，硬要降级只能用<div role="main">，但部分旧AT（辅助技术）不识别role属性
DOCTYPE声明错误引发的隐性问题
不写<!DOCTYPE html>或写错（如漏空格、大小写混用），浏览器会进入怪异模式（Quirks Mode），此时box-sizing、line-height、甚至getElementById的行为都可能偏离预期。
这不是报错，而是静默降级——页面看起来“差不多”，但跨浏览器时尺寸计算、事件冒泡顺序、甚至getBoundingClientRect()返回值都会不一致。
- HTML4的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">已无必要，现代项目统一用<!DOCTYPE html> - 哪怕只多一个空格（如
<! DOCTYPE html>），也会触发怪异模式 - Node.js服务端渲染时，模板引擎拼接HTML字符串容易在
<!DOCTYPE>前注入BOM或空白字符，导致声明失效
<article>，就得接受它带来的大纲约束、辅助技术解读方式和SEO权重分配逻辑——删掉比乱用更安全。 
