<html> 是文档唯一根标签，强制要求；<head> 存储元数据（如字符集、标题、视口配置），不参与页面渲染，故内容不可见；<body> 承载所有可见内容，需用语义化标签（如<p>、<h1>）结构化布局；<!DOCTYPE html> 必须严格书写以避免怪异模式；lang 属性虽不报错但影响无障碍与SEO。
<html> 必须是整个文档的最外层根标签，没有它，浏览器就无法识别这是一个 HTML 文档 —— 这不是可选，是硬性规则。
为什么 <head> 里的内容不显示在页面上
因为 <head> 是元数据容器，只负责告诉浏览器“怎么处理这个页面”，比如字符编码、页面标题、CSS 和 JS 加载方式。它本身不参与渲染，所以你往里面写 <p>hello</p>，页面上也看不到。
-
<title>是唯一一个会间接影响视觉呈现的<head>子标签（显示在浏览器标签页上） -
<meta charset="UTF-8">必须放在<head>开头附近，否则中文可能乱码 —— 浏览器解析到它之前已按默认编码读取了部分字节 -
<meta name="viewport">对移动端至关重要；漏掉它，<body>里再 responsive 的布局也会被缩放成小窄条
<body> 里哪些标签能直接换行或分段
HTML 不靠回车换行，而是靠语义化标签控制结构。常见误区是用多个 <br> 模拟段落，这会让结构松散、不易维护。
-
<p>自带上下外边距，适合独立段落；连续多个<p>会自然分隔 -
<h1>到<h6>是块级标题，自带 margin，且隐含层级语义 —— 不要只为“看起来大”而滥用<h1> -
<div>是无语义通用容器，不自带样式，适合需要 CSS 控制布局但无特定语义的场景 -
<hr>是自闭合标签，表示主题分隔，不是装饰线；用 CSS 的border-bottom更灵活
<DOCTYPE html> 写错或漏掉的后果
漏掉或写成 <!doctype html>（小写）、<!DOCTYPE HTML>（大写）、甚至加空格如 <! DOCTYPE html>，都可能导致浏览器触发怪异模式（Quirks Mode）。
立即学习“前端免费学习笔记（深入）”；
- 表现可能是：盒模型计算异常、
width行为不符合标准、浮动塌陷更难修复 - 验证方式：打开 Chrome DevTools → Elements 面板顶部看 “Rendered as: Standards mode” 还是 “Quirks mode”
- 正确写法只有这一种：
<!DOCTYPE html>—— 严格区分大小写？不，HTML 不区分，但必须是全大写DOCTYPE+ 空格 +html，且不能有前置空格或注释
真正容易被忽略的，是 <html lang="zh-CN"> 中的 lang 属性。它不报错、不影响渲染，但关系到屏幕阅读器发音、搜索引擎语言判断、甚至某些 CSS 伪类（如 :lang()）的行为 —— 很多人写完骨架就忘了填，等要做无障碍或国际化时才回头补。
