html结构需严格按语义角色搭建：用替代div；标题层级递进（h1→h2→h3）；必须置于最开头，紧随其后；避免bom、确保utf-8无bom保存。
原型图确认后，HTML结构怎么搭才不返工
原型图定稿 ≠ HTML可以随便写。很多新手直接照着视觉稿“画像素”，结果语义混乱、后期改版成本翻倍。核心原则是：先理内容逻辑，再套标签，而不是先堆
再填文字。
实操建议：
- 把原型图里的每个区块按内容角色归类：导航栏、主标题、产品列表、用户评论、页脚——这些不是“位置”，而是语义角色
- 优先使用语义化标签：
<header></header>、<nav></nav>、<main></main>、<article></article>、<aside></aside>、<footer></footer>，而非通配<div> <li>标题层级必须严格递进：<code><h1></h1>只出现一次（页面主标题），<h2></h2>用于区块标题，<h3></h3>用于子模块，跳级或重复会破坏可访问性和SEO - 列表内容必须用
<ul></ul>/<ol></ol>，不要用<p></p>加换行模拟 -
<meta charset="UTF-8">必须放在最开头，否则浏览器可能已按默认编码解析了前面的内容 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">要紧随其后，否则移动端页面会缩成一团 -
<title></title>必须在内，且仅出现一次；它不是装饰，是浏览器标签页显示名+搜索引擎抓取依据 -
里第一行不建议直接写内容，先用<main></main>包裹主体，留出<header></header>和<footer></footer>的扩展空间 - 保存文件时手动选“UTF-8（无BOM）”，路径：
文件 → 另存为 → 编码 → UTF-8（无BOM） - 安装插件
Auto Rename Tag，改<div>开头时自动同步闭合标签，避免手滑漏删 <li>启用<code>emeraldwalk.RunOnSave，每次保存自动执行prettier格式化，防止团队协作时结构缩进混乱 - 别依赖实时预览插件看效果——它不校验HTML合法性；真正验证用浏览器开发者工具的
Elements面板，看DOM树是否干净、无意外包裹 - 所有交互区域（按钮、链接、表单控件）必须有明确的
role属性，比如<div role="button">，否则屏幕阅读器无法识别 <li>避免用<code><picture></picture>或<dialog></dialog>等新标签做核心功能，IE11及部分旧安卓WebView根本不支持 - 如果原型图要求“悬停显示副标题”，HTML里就得提前预留
<span class="subtitle"></span>，而不是靠JS动态innerHTML注入——后者在禁用JS时内容直接消失 - 图片标签必须带
alt属性，哪怕空着alt=""，否则WCAG合规测试直接失败
原型图是视觉契约，HTML结构是逻辑契约。两者对齐的关键不在像素匹配，而在内容意图是否被准确表达——漏掉一个
HTML文档骨架里哪些标签不能少、顺序不能错
、、三者嵌套关系固定，但新手常漏掉<meta charset="UTF-8">或把<title></title>放错位置，导致中文乱码或SEO失效。
关键检查点：
为什么用VS Code写HTML比记事本容易踩坑
记事本保存时默认ANSI编码，打开index.html一看中文全变问号；VS Code默认UTF-8，但若没关掉“自动插入BOM”选项，某些服务器（如Nginx）会因BOM头报HTTP 500错误。
开箱即用设置：
从原型图到HTML，最容易被忽略的兼容性细节
原型图里一个居中的卡片，在Chrome看着完美，到了Safari里文字溢出、IE里Flex布局完全失效——问题常出在HTML结构没预留CSS钩子，或用了不兼容的语义标签。
务实做法：
<main></main>，后期加无障碍支持就得重写整页DOM。
