一个能被浏览器正常解析的html页面至少需包含、和三个基础标签，且中必须有和，不可省略，语义化标签应合理使用。
HTML文档必须包含哪些基础标签
一个能被浏览器正常解析的HTML页面，至少得有 、 和 这三个包裹结构。缺任何一个，浏览器虽然可能“凑合显示”，但会触发怪异模式（Quirks Mode），导致CSS和JS行为不可预测。
常见错误现象：页面样式突然错乱、document.querySelector 找不到元素、移动端缩放异常——十有八九是漏了 或没闭合 。
-
里至少要有<meta charset="UTF-8">，否则中文会乱码 -
<title></title>不是可选的，它影响浏览器标签页显示、SEO 和 屏幕阅读器识别 - 不要把
<script></script>或<link>直接写在外面——这种写法在HTML5中非法，部分编辑器甚至会标红
为什么 里的 不能省
没有这行，网页在手机上会以桌面宽度渲染（通常是980px），然后自动缩小显示，文字小得看不清，点击区域也变小。这不是UI问题，是根本没适配移动设备。
标准写法就是：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
width=device-width告诉浏览器用设备真实宽度，不是固定像素值 -
initial-scale=1.0防止双击放大或页面加载时意外缩放 - 别写成
content="width=375"—— 这样只适配iPhone SE，其他设备全崩 - 这个
<meta>必须放在靠前位置，如果它底下还有别的<meta>或<link>，某些旧版Android WebView会忽略它
里最常误用的语义化标签
很多人一上来就用 <div> 套所有内容，结果搜索引擎看不懂结构，屏幕阅读器念出来全是“div、div、div”。其实几个基础语义标签就能解决大部分场景：
<ul>
<li>主标题用 <code><h1></h1>，副标题用 <h2></h2>～<h6></h6>，别跳级（比如 <h1></h1> 后直接 <h3></h3>）
@#@#@#@#@#@#@#@#@#@0，把HTML源码粘进去，它会标出所有结构错误，比如：
<ul><li>
<code>End tag for "head" seen, but there were open elements. —— 说明 <div> 或 <code><p></p>
Element “main” not allowed as child of element “body” in this context. —— 可能是因为 <main></main> 写在了 <header></header> 外面且没父容器Section lacks heading. Consider using “h2”-“h6” elements to add an explicit heading. 这类提示直接影响可访问性结构问题往往藏在嵌套深处，靠肉眼很难发现，验证工具报的每一行，都值得点开对应行号去看上下文。
document.querySelectorAll('*').forEach(el => { if (!el.parentElement && el !== document.documentElement) console.warn('孤立节点:', el); });
