HTML的最小有效结构需包含、根元素、含的和；与应作为语义化标签的兜底选项；表单提交依赖name属性，JS/CSS定位依赖id；本地双击打开受file://协议限制，须用本地服务器开发。
HTML 不是编程语言，不需要“入门教程”式的系统学习；它是一套标记规则，打开编辑器写几行就能看到效果。关键不是学完所有标签，而是知道哪些标签该在什么场景下用、浏览器怎么理解它们、以及如何避免常见误解。
从
很多初学者卡在第一行就报错，其实是漏了必需的骨架。浏览器渲染 HTML 时依赖明确的文档类型和根元素，否则可能触发怪异模式（quirks mode），导致样式错乱或 JS 行为异常。
必须放在第一行，且不能有任何字符（包括空格、BOM）前置-
是根元素，里面必
须有 和 -
至少要包含，否则中文会乱码
须有 我的第一个页面 Hello World
和 这两个标签本身没有任何语义，但滥用会导致可访问性（a11y）和 SEO 问题。现代 HTML 推荐优先使用语义化标签， 和 是块级容器，适合组织大块内容区域，比如页眉、侧边栏、卡片容器
-
- 能用
；能用
表单里 name 和 id 的区别经常被搞混
提交数据靠 name，JS 或 CSS 定位靠 id（或 class）。如果表单提交后后端收不到字段，大概率是漏写了 name 属性。
-
email，值才会进请求体
-
document.getElementById('email-field') 或 label[for="email-field"]
-
for 必须匹配 id，不是 name
为什么本地双击打开 HTML 文件有时样式不生效
不是代码写错了，而是浏览器安全策略限制：当 URL 是 file:// 协议时，部分 CSS（如 @import）、JS（如 fetch）或字体文件会被拒绝加载，控制台报 Blocked loading resource from cross-origin script 类错误。
- 开发阶段务必用本地服务器，哪怕只是
npx serve、python3 -m http.server 或 VS Code Live Server 插件
- 不要依赖双击打开，那只是临时预览，不是真实运行环境
- 路径写法也受影响：
file:// 下相对路径容易解析错，而服务器环境下统一以 / 为站点根目录
HTML 的复杂点不在语法，而在它和 CSS、JS、HTTP、浏览器渲染流程的耦合。一个 loading="lazy"` 的兼容性。先让结构跑通，再一层层叠加约束条件。
这两个标签本身没有任何语义，但滥用会导致可访问性（a11y）和 SEO 问题。现代 HTML 推荐优先使用语义化标签， 提交数据靠 不是代码写错了，而是浏览器安全策略限制：当 URL 是 HTML 的复杂点不在语法，而在它和 CSS、JS、HTTP、浏览器渲染流程的耦合。一个 和 只在“没有更合适标签”时兜底。
是块级容器，适合组织大块内容区域，比如页眉、侧边栏、卡片容器
是内联容器，只用于局部样式或脚本控制，比如给一句话里的某个词加 class；能用
就别套三层
表单里
name 和 id 的区别经常被搞混name，JS 或 CSS 定位靠 id（或 class）。如果表单提交后后端收不到字段，大概率是漏写了 name 属性。
→ 提交时字段名为 email，值才会进请求体 → 只用于 document.getElementById('email-field') 或 label[for="email-field"]
中的 for 必须匹配 id，不是 name
为什么本地双击打开 HTML 文件有时样式不生效
file:// 协议时，部分 CSS（如 @import）、JS（如 fetch）或字体文件会被拒绝加载，控制台报 Blocked loading resource from cross-origin script 类错误。
npx serve、python3 -m http.server 或 VS Code Live Server 插件file:// 下相对路径容易解析错，而服务器环境下统一以 / 为站点根目录 标签是否加载成功，可能取决于 src 路径、CORS 设置、图片格式支持、甚至 `loading="lazy"` 的兼容性。先让结构跑通，再一层层叠加约束条件。
