一个合法HTML页面必须包含<!DOCTYPE html>、<html>、<head>和<body>四部分；<!DOCTYPE html>须顶格首行书写以避免怪异模式；lang属性应明确指定如zh-CN；<meta charset="UTF-8">须置于<head>内靠前位置防乱码；<title>需简洁准确且非空；<meta name="viewport">对移动端适配至关重要。
一个合法的 HTML 页面，必须包含 <!DOCTYPE html>、<html>、<head> 和 <body> 这四个部分，缺一不可；否则浏览器可能降级渲染，或搜索引擎无法正确识别页面语义。
为什么 <!DOCTYPE html> 必须写在第一行
它不是 HTML 标签，而是文档类型声明（doctype），作用是告诉浏览器“用标准模式解析这个页面”。如果漏掉、写错位置（比如缩进或前面有空格/注释），浏览器会进入怪异模式（Quirks Mode），导致 CSS 布局错乱、盒模型行为异常，甚至 document.querySelector 返回结果不稳定。
- 必须顶格写，前面不能有任何字符（包括空格、换行、BOM）
- 大小写不敏感，但惯例全大写加感叹号：
<!DOCTYPE html> - HTML5 只需这一种写法，不用写 DTD 地址（如旧版 XHTML 那样）
<html lang="zh-CN"> 里的 lang 属性到底要不要加
要加，而且建议明确指定。它影响屏幕阅读器发音、搜索引擎语言识别、部分 CSS 的 :lang() 伪类匹配，甚至某些字体 fallback 行为。中文站点不写 lang，可能导致标点符号渲染异常（比如引号用英文样式）或拼音输入法联想不准。
-
lang="zh"表示泛中文，lang="zh-CN"更精确，表示简体中文（中国大陆） - 值必须是合法的 BCP 47 语言标签，不能写成
lang="chinese"或lang="cn" - 如果页面含多语言内容（如中英混排），可在局部元素上覆盖，比如
<span lang="en">API</span>
<meta charset="UTF-8"> 放错位置会直接乱码
这个 <meta> 必须出现在 <head> 内、且尽可能靠前（最好第二行），否则浏览器在解析到它之前已按默认编码（如 ISO-8859-1）读取了后续内容，造成中文显示为方块或问号——此时刷新或清缓存都无效，必须改源码。
立即学习“前端免费学习笔记（深入）”；
- 不能放在
<body>里，也不该在<title>后面才出现 - UTF-8 是唯一推荐值，不要用
GBK或GB2312（兼容性差、易出错） - VS Code 等编辑器保存文件时务必选 “UTF-8 无 BOM”，否则 BOM 会干扰
<meta>生效
<title> 不只是浏览器标签栏文字
它是页面最重要的元信息之一，直接影响 SEO 排名、书签名称、社交平台分享卡片标题。空 <title> 或仅含空格，会让搜索引擎判定为低质页；重复标题则削弱关键词权重。
- 内容应简洁准确（5–60 字符），避免堆砌关键词
- 动态页面可用 JS 修改，但服务端首次响应必须有真实内容
- 不要用
<title> </title>或<title>Untitled</title>敷衍
真正容易被忽略的，是 <meta name="viewport"> ——它虽不影响基础结构合法性，但在移动设备上缺失会导致页面被缩放成一团小字，用户必须双指放大才能阅读。初学者常以为“先跑起来再说”，结果上线后发现手机访问体验极差。
