必须在最前面声明，否则浏览器按iso-8859-1解析，导致中文、emoji等乱码；需唯一、精准且长度适中，提升seo与无障碍体验；语义化标签（如、、）须严格嵌套，确保结构清晰、机器可读。
HTML文档结构不是套个就完事——真正影响可访问性、SEO和后续维护的，是标签用得对不对、嵌套得严不严谨。
为什么<meta charset="UTF-8">
没这行，中文、emoji、特殊符号大概率乱码，尤其表单提交或AJAX返回时字段值变成问号或方块。浏览器默认按ISO-8859-1解析，而现代网页几乎都用UTF-8。
-
<meta charset="UTF-8">必须放在最前面（越靠前越好），不能晚于任何<title></title>或<script></script> - 不要写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">——冗余且兼容性略差 - VS Code或WebStorm新建文件时默认带这个，但复制粘贴旧代码容易漏掉
<title></title>不只是浏览器标签页上显示的文字
它是搜索引擎结果页的第一行内容，也是屏幕阅读器朗读页面的起始标识。空<title></title>或泛泛写“首页”会直接降低SEO权重和无障碍体验。
- 每个页面
<title></title>必须唯一，且长度控制在50–60字符内（超出会被截断） - 建议格式：
页面核心内容 - 站点名，比如登录 - GitHub、React Hooks 使用指南 - 前端手册 - 服务端渲染或SPA中动态更新
<title></title>时，别只改DOM——要同步调用document.title = '...'，否则微信内置浏览器等可能不刷新
<div>堆内容<p>语义缺失的<code><div>嵌套会让结构扁平化，机器无法识别导航、主内容、侧边栏，CSS重置和JS选择器也容易失控。<ul>
<li>优先用语义化容器：<code><header></header>、<nav></nav>、<main></main>、<aside></aside>、<footer></footer>，它们自带隐式ARIA role
<main></main>必须且只能出现一次，且不应被<article></article>或<section></section>包裹——它是页面主体内容的根容器<div class="header">——先加<code>role="banner"过渡，再逐步替换为<header></header>
<h1></h1>到<h6></h6>不是字号调节器
它们构成页面的逻辑大纲（outline），被爬虫和辅助技术依赖。跳过层级（比如<h1></h1>后直接<h3></h3>）会导致大纲断裂，部分屏幕阅读器会报错或跳过内容。
- 一个页面应有且仅有一个
<h1></h1>（通常对应页面主题），其余按逻辑递进，不为样式妥协 - 用CSS控制视觉大小，而不是靠
<h2></h2>假装<h3></h3>——<h2></h2>语义仍是二级标题 - 避免用
<h1></h1>做Logo文字：它属于内容层级，不是装饰；Logo该用<img>或<span></span>配合aria-label
结构标签看似简单，但一旦在首屏HTML里埋下隐患，后面所有CSS布局、JS交互、SEO优化都会被动打补丁。最容易被忽略的是<main></main>的唯一性和<h1></h1>的大纲位置——这两处出错，连Lighthouse的无障碍评分都会直接掉档。
