一个合格的HTML文档必须包含<!DOCTYPE html>、<html>、<head>和<body>四部分；<!DOCTYPE html>须首行无前置内容以防怪异模式；<html lang="zh-CN">中lang属性不可省略以保障无障碍与SEO；<head>内<meta charset="UTF-8">、<meta name="viewport">和<title>缺一不可；<body>需用语义化标签替代纯<div>布局。
一个合格的HTML文档结构，必须包含 <!DOCTYPE html>、<html>、<head> 和 <body> 四个不可省略的部分；漏掉任意一个，都可能导致页面渲染异常、SEO失效或无障碍访问失败。
为什么 <!DOCTYPE html> 必须放在第一行且不能有任何前置内容
浏览器遇到非空白字符（包括注释、空格、BOM）出现在 <!DOCTYPE html> 之前时，会强制进入“怪异模式”（Quirks Mode），导致 CSS 盒模型、盒阴影、flex 布局等现代特性行为异常。常见现象是页面在 Chrome 看正常，但在 IE 或旧版 Safari 中错位、字体发虚、margin 折叠失效。
- 必须严格写成
<!DOCTYPE html>（全部小写，无空格，无引号，无额外属性） - VS Code 或 Notepad++ 新建文件后，先按 Ctrl+A 全选 → Delete，再输入，避免隐藏 BOM 字符
- 用
file -i filename.html（Linux/macOS）或 PowerShell 的Get-Content -Encoding Byte检查是否含 UTF-8 BOM
<html lang="zh-CN"> 中的 lang 属性不是可选项
不设 lang 会导致屏幕阅读器无法正确发音，搜索引擎无法判断页面语言归属，甚至影响某些字体回退逻辑（比如中英文混排时系统可能错误调用日文字体）。zh-CN 是简体中文最通用的值，zh-TW 用于繁体中文站点。
- 若页面含多语言区块（如英文引用段落），应在局部加
<blockquote lang="en"> - 不要写成
language="zh-CN"—— 这是无效属性，浏览器忽略 - 服务端渲染时，确保模板中
lang值与实际内容语言一致，避免硬编码成固定值
<head> 里这三行元信息缺一不可
<meta charset="UTF-8">、<meta name="viewport" content="width=device-width, initial-scale=1.0">、<title> 是现代网页的“生存底线”。少一个，轻则乱码、移动端缩放失控，重则被搜索引擎降权。
立即学习“前端免费学习笔记（深入）”；
-
<meta charset="UTF-8">必须在<head>最前面（紧随<title>之后也允许，但不能在<title>之后太远） -
viewport缺失时，iOS Safari 默认以 980px 宽度渲染，用户需双指放大才能看清文字 -
<title>不仅显示在标签页，还直接影响搜索结果点击率；长度建议控制在 30 字以内，避免被截断
<body> 内部语义化标签不是“锦上添花”，而是结构刚需
只用 <div> 套 <div> 虽然能跑通，但会让辅助技术（如读屏软件）、爬虫和维护者完全失去上下文。现代 HTML5 明确要求用 <header>、<nav>、<main>、<article>、<aside>、<footer> 替代无意义的 <div class="header">。
-
<main>在整个文档中只能出现一次，且必须包裹主体内容（不能只包导航或侧边栏） -
<article>表示可独立分发的内容单元（如博客文章、新闻条目），不是所有“区块”都该用它 - 避免嵌套冲突：比如
<header>里不要再放<header>，应改用<h1>～<h6>
真正难的不是写出结构，而是让结构在不同设备、不同辅助工具、不同爬虫规则下保持语义一致。比如 <figure> 和 <figcaption> 组合，看似只是图片加标题，实则告诉屏幕阅读器“这是一个独立媒体对象”，比单纯用 <p><img></p> 多一层含义。这种细节，往往在上线后被忽略，直到收到无障碍审计报告才补救。
