HTML不是编程语言而是标记语言，核心是用语义化标签合理组织内容结构，需通过实操理解标签使用时机，而非死记语法；属性书写须规范，表单校验有边界，脚本加载策略影响DOM操作与性能。
HTML 不是编程语言，别从“学语法”开始
HTML 是标记语言，本质是给内容打标签。很多人卡在背 <div>、<code><section></section>、<article></article> 的语义区别上，结果写半年还是靠复制粘贴。真正卡住的不是标签名，而是不知道“什么时候该用哪个标签”。
实操建议：
- 先打开任意网页（比如知乎首页），右键「查看网页源代码」，重点看
<header></header>、<nav></nav>、<main></main>这类结构性标签怎么包裹真实内容 - 不要手写第一个 HTML 文件 —— 用浏览器开发者工具（F12）直接改页面里的
class或删掉某个<aside></aside>，观察布局变化 - 语义标签不是装饰：搜索引擎和读屏软件真会按
<h1></h1>→<h2></h2>层级理解内容，乱用<div> 套娃会导致 SEO 和无障碍访问失效 <h3>属性写法错一个空格就失效</h3> <p><code>class="nav-menu"和class = "nav-menu"在 HTML5 里都合法，但class="nav-menu" disabled里如果漏了引号或空格位置不对，浏览器可能忽略整个属性，或者把disabled当成另一个属性名（实际它是个布尔属性，不需要值）。常见错误现象：
立即学习“前端免费学习笔记（深入）”；
-
<img src="logo.png" alt="Company" logo>→ 缺引号，遇到空格或特殊字符直接截断 -
<a href="https://example.com" target="_blank" rel="noopener"></a>忘了rel="noopener"，新窗口打开时存在安全风险 -
<input type="text" required="required">写成required="true"—— 布尔属性只看是否存在，不认值
form 表单提交前根本没校验？那是没用对属性
很多人以为加了
required就万事大吉，结果用户点提交，浏览器弹个原生提示就完了，样式丑、逻辑不可控、后端还得再验一遍。这不是 HTML 的问题，是没理解它的校验边界。使用场景与限制：
-
required、minlength、pattern等只在表单调用submit()或用户点击<button type="submit"></button>时触发，JS 直接改value不触发 -
pattern用的是正则，但默认锚定在字符串首尾（相当于自动加 ^ 和 $），写pattern="[0-9]+"就行，不用写^[0-9]+$ - 校验失败时，
checkValidity()返回false，但不会自动滚动到错误字段 —— 这得自己用reportValidity()或手动聚焦
script 标签放哪儿，直接决定页面能不能用
把
<script></script>放在里又没加defer，脚本一执行，document.getElementById("app")肯定返回null—— 因为 DOM 根本还没解析完。参数差异与性能影响：
- 没加任何属性：
<script src="app.js"></script>→ 同步加载，阻塞 HTML 解析，DOM 构建暂停 - 加
async：<script async src="analytics.js"></script>→ 异步下载，下载完立刻执行，适合统计脚本，但执行时机不可控 - 加
defer：<script defer src="app.js"></script>→ 异步下载，等 DOM 解析完、DOMContentLoaded前执行，适合主业务 JS - 内联脚本（
<script>console.log(document.body);</script>）永远同步执行，放哪儿都一样，但别放里去操作 body 元素
复杂点在于：多个
defer脚本按顺序执行，但async不保证顺序；移动端弱网下，没加defer或async的脚本会让白屏时间明显变长。这些细节，光看教程根本意识不到。 -
