<meta charset="UTF-8">必须置于<head>最顶部，以确保浏览器在解析前1024字节内准确识别UTF-8编码，避免中文乱码、脚本执行失败及DOM异常；位置错误或缺失将导致解码错误不可逆。
零基础学网页布局，不是先背标签，而是先搞清浏览器真正依赖的骨架——<html>、<head>、<body> 这三个标签缺一不可，少一个，页面就可能不渲染、不识别字符、甚至被搜索引擎忽略。
为什么 <head> 里放 <meta charset="UTF-8"> 不是可选项
没这行，中文会变乱码，表单提交可能丢数据，连 console.log("你好") 在开发者工具里都可能显示为方块。它告诉浏览器：“接下来所有文本按 UTF-8 解码”，不是“建议”，是强制指令。
常见错误现象：
- 复制粘贴代码后中文显示为
或一堆问号 - 用 VS Code 写好 HTML，本地双击打开正常，但用 Live Server 启动后反而乱码（VS Code 默认保存为 UTF-8，但浏览器没被告知）
-
<title>里写中文正常，但<p>里中文异常——说明<meta>没生效或位置错了
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须放在
<head>最顶部，紧贴<head>开始标签之后 - 不要写成
<meta charset="utf8">（少横线）或<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">（过时写法，冗余） - 编辑器保存编码也要匹配：VS Code 右下角确认显示 “UTF-8”，不是 “GBK” 或 “ISO-8859-1”
<body> 里不能只塞 <div>，得有语义容器打底
新手常直接写：<body><div>标题</div><div>正文</div></body>。这样能显示，但对屏幕阅读器、SEO、后期 CSS 定位都埋了坑。
使用场景决定结构选择：
- 博客文章 → 用
<article>包裹全文，标题用<h1>，段落用<p> - 导航栏 → 用
<nav>，别只套<div class="nav"> - 页脚版权信息 → 用
<footer>，不是<div id="footer">
为什么重要？
- 搜索引擎靠这些标签理解内容层级，
<h1>权重远高于<div>里加粗的文字 - 盲人用户用读屏软件时，会听到 “导航区域”“主内容区”，而不是“一堆 div”
- CSS 里写
main h2 { margin-top: 1.5em; }比div div h2 { ... }更稳定、易维护
别在 <head> 里写样式或脚本，除非你明确知道后果
把 <style> 或 <script> 直接塞进 <head> 看似省事，但容易触发阻塞渲染或执行时机错乱。
典型问题：
-
<script>document.getElementById("app").innerHTML = "hello"</script>放<head>里 → 报错Cannot read property 'innerHTML' of null，因为 DOM 还没加载 -
<style>body { background: red; }</style>放<head>没问题，但若样式依赖外部字体（@import），会阻塞页面渲染，白屏时间变长
实操建议：
立即学习“前端免费学习笔记（深入）”；
- CSS 样式优先外链：
<link rel="stylesheet" href="style.css">，浏览器可并行加载 - JS 脚本默认放
<body>底部；若必须放<head>，加defer属性：<script src="app.js" defer></script> - 内联 JS 仅限极简初始化逻辑（如设置
data-属性），且务必用DOMContentLoaded包裹
真正卡住初学者的，从来不是标签记不全，而是没意识到：HTML 结构不是“怎么让内容显示出来”，而是“怎么让机器和人都能准确理解这段内容是什么、属于哪一部分”。哪怕只写三行，<html>、<head>、<body> 的闭合顺序，<meta charset> 的位置，<h1> 和 <div> 的语义差异，每一步都在影响后续所有可能性。
