HTML基础代码大全入门指南
时间：2026-03-16 20:34:00 151浏览 收藏
这篇文章系统梳理了HTML开发中极易被忽视却至关重要的核心规范与实战陷阱：从自闭合标签（如img、br、input）严禁闭合、p/div/span等必须显式闭合，到id全局唯一性对JS操作、CSS选择和无障碍访问的深层影响；从script置于head时因DOM未就绪导致的常见报错，到defer、DOMContentLoaded的精准应对策略；再到form提交时preventDefault的必要性及FormData的健壮数据收集方式——每一处都直击新手痛点，揭示“浏览器宽容”背后的隐患，并强调语义正确性、团队协作一致性和可访问性在真实项目中的不可妥协性。
HTML里哪些标签必须闭合，哪些可以不闭合
浏览器对标签闭合其实挺宽容，但“能不闭合”不等于“该不闭合”。像 <input> 这类是**自闭合标签（void elements）**，语法上就不允许写
而 脚本执行时，浏览器按 HTML 解析顺序从上到下构建 DOM。放在 原生 但光阻止还不够——表单验证、按钮状态、错误提示都得手动补上，否则用户点完按钮没反馈，以为卡了。 HTML 看似简单，但每个标签、每个属性背后都有解析规则、兼容边界和协作约定。写完一版 HTML，用浏览器的开发者工具 Elements 面板点开看看实际生成的 DOM 结构，比对着文档猜更管用。 今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~、 必须成对出现。漏掉 很容易导致样式错乱或JS获取不到预期节点——尤其在用 document.querySelector('p') 时，返回的可能是嵌套异常的 DOM 树。 当成可选闭合，实际 会被自动补全闭合，但语义已模糊），但别依赖它——Prettier、VS Code 自动格式化默认仍补全，团队协作时容易引发 diff 污染Unexpected end of inputclass 和 id 的区别不只是“一个能重复一个不能”
id 是全局唯一标识，浏览器用它做锚点跳转（#header）、CSS 选择器（#nav）、JS 获取节点（document.getElementById('modal')）。一旦页面出现两个相同 id，getElementById 只返回第一个，CSS 里 #btn 也只会命中首个——这比样式失效更隐蔽，因为看起来“好像没出错”。class 是关系型标记，用于归类、复用样式和行为。一个元素可以有多个 class（class="btn btn-primary loading"），JS 也常用 querySelectorAll('.active') 批量操作。id 做纯样式控制，比如 id 要格外小心，v-for 循环里写死 id="item" 是典型翻车现场id 关联 label for="xxx" 或 aria-labelledby，这里重复 ID 会导致读屏软件静默失败script 标签放 head 里为什么 JS 经常报错找不到元素
里的 —— 它会并行下载，等 DOM 解析完再执行，且保证顺序DOMContentLoaded 事件包裹：document.addEventListener('DOMContentLoaded', () => { /* 操作代码 */ })defer，如果还要兼容，老老实实挪到 上方form 表单提交时页面刷新了，怎么阻止
提交默认触发页面跳转（GET）或刷新（POST），这是语义行为，不是 bug。想用 JS 控制流程，核心就一条：event.preventDefault()。submit 事件，不是 click：form.addEventListener('submit', e => { e.preventDefault(); /* 处理逻辑 */ })type="button"，否则在某些框架里（如 Alpine.js）可能意外触发两次 submitFormData 收集数据比遍历 input.value 更可靠，尤其遇到 <select multiple> 或文件上传时window.location.href = '/success' 显式控制，别依赖表单的 action 自动跳
