和不能互换位置，因为浏览器按单向流式解析：先收集中的元信息（如、），再构建的DOM树；错位会导致标题失效、内容被错误迁移。
是唯一必须的根容器，所有其他标签都得嵌套在里面；没它，浏览器连“这是个网页”都认不出来。
为什么
浏览器解析 HTML 是单向流式处理：遇到 就收集元信息（<title></title>、<meta charset="UTF-8">、<link>），遇到 才开始构建可见 DOM 树。如果把 写在 前面，部分浏览器会自动“纠错”——把错位内容挪进 ，但 <title></title> 可能已失效，页面标题变空或显示默认值。
-
里放<script></script>默认阻塞解析，除非加defer或async -
开头直接写文本？浏览器会悄悄包一层<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a> <p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p> </div> <a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>，但语义丢失，SEO 和屏幕阅读器无法识别 -
中写<h1></h1>或<p></p>—— 合法但无意义，这些标签只在中触发渲染和语义作用
<header></header>、<nav></nav>、<main></main> 这些语义标签真能替代 <div> 吗
<p>能，但不是“换个名字就行”。<code><main></main> 必须全页唯一且不可嵌套，否则辅助技术会混乱；<nav></nav> 不是所有链接集合都算——只有独立导航单元（如顶部菜单、侧边栏导航）才适用；<section></section> 要有明确主题，纯样式分隔用 <div> 更合适。
<ul><li>用 <code><div class="header"> 模拟 <code><header></header> —— CSS 样式照常生效，但屏幕阅读器读不出“这是页眉”，搜索引擎也不赋予结构权重
<main></main> 里再套 <main></main>：HTML5 验证器报错，部分 AT（辅助技术）跳过内层内容<article></article> 和 <section></section> 混用常见错误：<article></article> 表示可独立分发的内容（如博客正文），<section></section> 是逻辑分组（如“评论区”“相关文章”），二者层级不同
<template></template> 为什么是结构化渲染的关键枢纽
它不参与初始渲染，content 是只读 DocumentFragment，天生隔离副作用——里面写 <script></script> 不执行，<img alt="HTML标签是如何支撑起文档结构的" > 不加载，id 不注册到全局。这使它成为动态插入结构的安全起点。
立即学习“前端免费学习笔记（深入）”；
- 直接
el.appendChild(template.content)：第一次成功，第二次template.content已空，静默失败 - 正确做法是
template.content.cloneNode(true)或document.importNode(template.content, true) - 克隆后若含重复
id，document.getElementById()只返回第一个，需提前重命名或改用data-id - 表格行批量注入时，必须先 append 到
<tbody>，而非整个 <code><table> —— 浏览器对 <code><tr> 的父容器有硬性要求 <p>结构标签不是摆设，它们定义了浏览器如何理解内容、辅助技术如何朗读、搜索引擎如何索引。写错一个 <code><main></main>或漏掉lang属性，问题不会立刻报错，但会在 SSR hydration、无障碍测试、SEO 收录时集中爆发。
