HTML是声明式标记语言，只描述结构与语义，不执行逻辑；其核心价值在于通过语义化标签（如<header>、<nav>、<main>）明确内容角色，支撑SEO、无障碍访问与代码可维护性。
HTML 没有“代码逻辑”——它不执行条件判断、不循环、不定义函数，也不处理数据流。它只描述结构和语义。
HTML 不是编程语言，而是声明式标记
你写 <h1>标题</h1>，不是在“告诉浏览器怎么做”，而是在“告诉浏览器这是一级标题”。浏览器按规范渲染，但不会“计算”或“决策”。所有看似“行为”的东西（比如表单验证、跳转锚点）都依赖内置规则或外部 JS 驱动。
-
<input type="email" required>的邮箱格式校验，是浏览器自动触发的，但失败时只阻止提交，不提供自定义提示——要改提示就得用 JS 拦截invalid事件 -
<a href="#section2">跳转</a>能生效，前提是目标元素存在且有id="section2"；用class="section2"或name="section2"都无效 -
<video controls>显示播放控件，是浏览器内置 UI，无法用纯 HTML 改样式或删按钮；要定制就得用 JS + 自定义 DOM 替换
进阶的关键不在学更多标签，而在理解约束与协作边界
真正卡住人的，从来不是“怎么写 <article>”，而是“为什么这里该用 <section> 而不是 <div>”，或者“aria-labelledby 和 id 怎么配对才不被屏幕阅读器忽略”。这些细节决定可访问性、SEO 和长期维护成本。
- 语义错误比语法错误更难 debug：
<h2>嵌套在<p>里会直接被浏览器忽略（HTML 解析器静默修正），但结构语义已崩坏 - 表单中
<label for="xxx">的for值必须严格匹配对应<input id="xxx">，大小写、空格、引号类型（单/双）全敏感 -
<picture>+<source>的匹配顺序由浏览器决定，media查询不满足时才 fallback 到<img>，但不保证所有浏览器解析一致
真实项目里最容易翻车的三个地方
新手常以为“能显示就行”，但上线后才发现：链接打不开、表单提交后刷新白屏、盲人用户根本没法操作。这些问题几乎都出在 HTML 层面，且 JS 无法补救。
立即学习“前端免费学习笔记（深入）”；
- 锚点跳转失效：目标元素缺
id，或用了data-id、class代替；id值含空格或中文（如id="产品介绍"）也会在部分场景下失效 - 表单默认提交刷新：没加
event.preventDefault()，纯靠onsubmit="return false"是过时写法，且无法捕获 JS 错误 - 图片加载失败无降级：只写
<img src="a.jpg">，没配alt，也没用<picture>提供 WebP + JPEG 备选，导致低网速或新格式支持差的设备一片空白
HTML 的复杂性不在语法，而在它作为接口层所承载的隐性契约：和浏览器、辅助技术、搜索引擎、CSS 选择器、JS DOM API 的每一处约定，都必须严丝合缝。少一个 id，错一个 role，漏一个 alt，问题就藏在那里，等你上线后被用户撞上。
