必须置于最顶部，以确保浏览器在解析前1024字节内准确识别utf-8编码，避免中文乱码、脚本执行失败及dom异常；位置错误或缺失将导致解码错误不可逆。

零基础学网页布局，不是先背标签，而是先搞清浏览器真正依赖的骨架——、、 这三个标签缺一不可，少一个，页面就可能不渲染、不识别字符、甚至被搜索引擎忽略。

为什么 里放 <meta charset="UTF-8"> 不是可选项

没这行，中文会变乱码，表单提交可能丢数据，连 console.log("你好") 在开发者工具里都可能显示为方块。它告诉浏览器：“接下来所有文本按 UTF-8 解码”，不是“建议”，是强制指令。

常见错误现象：

• 复制粘贴代码后中文显示为 或一堆问号
• 用 VS Code 写好 HTML，本地双击打开正常，但用 Live Server 启动后反而乱码（VS Code 默认保存为 UTF-8，但浏览器没被告知）
• <title></title> 里写中文正常，但 <p></p> 里中文异常——说明 <meta> 没生效或位置错了

实操建议：

• 必须放在 最顶部，紧贴 开始标签之后
• 不要写成 <meta charset="utf8">（少横线）或 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">（过时写法，冗余）
• 编辑器保存编码也要匹配：VS Code 右下角确认显示 “UTF-8”，不是 “GBK” 或 “ISO-8859-1”

里不能只塞 <div>，得有语义容器打底 <p>新手常直接写：<code><div>标题</div> <div>正文</div>。这样能显示，但对屏幕阅读器、SEO、后期 CSS 定位都埋了坑。

使用场景决定结构选择：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 博客文章 → 用 <article></article> 包裹全文，标题用 <h1></h1>，段落用 <p></p>
• 导航栏 → 用 <nav></nav>，别只套 <div class="nav"> <li>页脚版权信息 → 用 <code><footer></footer>，不是 <div id="footer"> <p>为什么重要？</p> <ul><li>搜索引擎靠这些标签理解内容层级，<code><h1></h1> 权重远高于 <div> 里加粗的文字 <li>盲人用户用读屏软件时，会听到 “导航区域”“主内容区”，而不是“一堆 div”</li> <li>CSS 里写 <code>main h2 { margin-top: 1.5em; } 比 div div h2 { ... } 更稳定、易维护

别在 里写样式或脚本，除非你明确知道后果

把 <style></style> 或 <script></script> 直接塞进 看似省事，但容易触发阻塞渲染或执行时机错乱。

典型问题：

• <script>document.getElementById("app").innerHTML = "hello"</script> 放 里 → 报错 Cannot read property 'innerHTML' of null，因为 DOM 还没加载
• <style>body { background: red; }</style> 放 没问题，但若样式依赖外部字体（@import），会阻塞页面渲染，白屏时间变长

实操建议：

• CSS 样式优先外链：<link rel="stylesheet" href="style.css">，浏览器可并行加载
• JS 脚本默认放 底部；若必须放 ，加 defer 属性：<script src="app.js" defer></script>
• 内联 JS 仅限极简初始化逻辑（如设置 data- 属性），且务必用 DOMContentLoaded 包裹

真正卡住初学者的，从来不是标签记不全，而是没意识到：HTML 结构不是“怎么让内容显示出来”，而是“怎么让机器和人都能准确理解这段内容是什么、属于哪一部分”。哪怕只写三行，、、 的闭合顺序，<meta charset> 的位置，<h1></h1> 和 <div> 的语义差异，每一步都在影响后续所有可能性。</div>