HTML是标记语言而非编程语言，核心作用是定义网页结构与语义；DOCTYPE必须首行声明以避免怪异模式；lang属性影响无障碍、SEO和翻译；meta charset须置于head最前以防乱码；应优先使用语义化标签。
HTML 不是编程语言，也不是框架或运行时环境，它是一套由 W3C 和 WHATWG 共同维护的标记语言规范，核心作用是定义网页内容的结构与语义。浏览器解析 HTML 文档时，会据此构建 DOM 树，后续 CSS 渲染和 JavaScript 交互都依赖这个结构基础。
为什么 DOCTYPE html 必须写在第一行？
它不是 HTML 标签，而是文档类型声明（DTD），告诉浏览器：“请用 HTML5 标准严格解析，不要退化到怪异模式（Quirks Mode）”。一旦缺失、位置错误或拼写为 （小写但无引号问题不大），部分旧版 IE 或某些嵌入式 WebView 可能触发兼容性降级，导致盒模型、<code>rem 计算、Flex 布局等行为异常。
- 必须独占首行，前面不能有任何字符（包括空格、BOM、注释）
是唯一被现代标准接受的写法；<code>..>属于 XHTML 时代遗留，已淘汰- VS Code 输入
!+ Tab 自动生成的模板默认就是合规写法，可直接用
lang 属性到底影响什么？
它不控制页面显示样式，但直接影响屏幕阅读器朗读逻辑、搜索引擎对页面语言的识别、以及部分浏览器自动翻译的触发判断。若设为 en 而页面实际是中文，会导致语音助手读音错乱，Google 搜索结果页可能降权或误标语言。
- 推荐始终显式设置，值应匹配页面主体内容语言，如简体中文用
zh-CN，繁体中文用zh-TW - 嵌套多语言内容时，可在局部元素上覆盖，例如：
<p lang="en">API response: <code>{"status":"ok"} - 不写
lang不报错，但 WCAG 无障碍标准明确要求，也是 SEO 基础项
<meta charset="UTF-8"> 必须尽可能靠前，理想位置是 的第一行。因为浏览器从上到下解析，如果它出现在 <title></title> 或外部 CSS 之后，前面的文本（比如 <title>你好</title>）可能已被按系统默认编码（如 ISO-8859-1）解码，造成标题乱码，且无法挽回。
立即学习“前端免费学习笔记（深入）”；
-
<meta charset>应在所有含文本内容的标签之前，包括<title></title>、<meta name="description"> -
<meta name="viewport">建议紧随其后，确保移动端缩放逻辑尽早生效 -
<link rel="stylesheet">和<script></script>位置较灵活，但脚本若含同步 DOM 操作，需确保在对应 HTML 结构之后（通常放前）
很多人把 <div> 当万能容器滥用，但语义缺失会破坏可访问性与 SEO。例如用 <code><div onclick="submit()"></div> 模拟按钮，屏幕阅读器不会识别为可交互控件；用 <div class="header"> 替代 <code><header></header>，会使辅助技术无法感知页面区域划分。
- 优先使用语义化标签：
<header></header>、<nav></nav>、<main></main>、<article></article>、<section></section>、<footer></footer> -
<h1></h1>～<h6></h6>必须体现层级关系，不可只为变大字体而跳级（如<h1></h1>后直接<h3></h3>） - 列表内容必须包裹在
<ul></ul>/<ol></ol>中，不能只用<br>或<p></p>模拟
真正难的不是记住每个标签怎么写，而是理解“结构即含义”——浏览器和辅助工具只认 DOM 层级与标签语义，不读 CSS 类名或 JS 注释。一个没闭合的 <p></p>、一处错位的 lang、一段裸写的中文标题，都可能让整页在特定环境下失效。
