HTML的最小有效结构需包含<!DOCTYPE html>、<html>根元素、含<meta charset="utf-8">的<head>和<body>；<div>与<span>应作为语义化标签的兜底选项；表单提交依赖name属性，JS/CSS定位依赖id；本地双击打开受file://协议限制，须用本地服务器开发。
HTML 不是编程语言，不需要“入门教程”式的系统学习；它是一套标记规则，打开编辑器写几行就能看到效果。关键不是学完所有标签，而是知道哪些标签该在什么场景下用、浏览器怎么理解它们、以及如何避免常见误解。
从 <html> 到能显示文字的最小结构是什么
很多初学者卡在第一行就报错，其实是漏了必需的骨架。浏览器渲染 HTML 时依赖明确的文档类型和根元素，否则可能触发怪异模式（quirks mode），导致样式错乱或 JS 行为异常。
-
<!DOCTYPE html>必须放在第一行，且不能有任何字符（包括空格、BOM）前置 -
<html>是根元素，里面必须有<head>和<body> -
<head>至少要包含<meta charset="utf-8">，否则中文会乱码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的第一个页面</title> </head> <body> <p>Hello World</p> </body> </html>
<div> 和 <span> 到底什么时候该用
这两个标签本身没有任何语义，但滥用会导致可访问性（a11y）和 SEO 问题。现代 HTML 推荐优先使用语义化标签，<div> 和 <span> 只在“没有更合适标签”时兜底。
-
<div>是块级容器，适合组织大块内容区域，比如页眉、侧边栏、卡片容器 -
<span>是内联容器，只用于局部样式或脚本控制，比如给一句话里的某个词加 class - 能用
<header>就别用<div class="header">；能用<article>就别套三层<div>
表单里 name 和 id 的区别经常被搞混
提交数据靠 name，JS 或 CSS 定位靠 id（或 class）。如果表单提交后后端收不到字段，大概率是漏写了 name 属性。
立即学习“前端免费学习笔记（深入）”；
-
<input name="email">→ 提交时字段名为email，值才会进请求体 -
<input id="email-field">→ 只用于document.getElementById('email-field')或label[for="email-field"] -
<label for="email-field">邮箱</label>中的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、浏览器渲染流程的耦合。一个 <img> 标签是否加载成功，可能取决于 src 路径、CORS 设置、图片格式支持、甚至 `loading="lazy"` 的兼容性。先让结构跑通，再一层层叠加约束条件。
