当前位置：首页 > 文章列表 > 文章 > 前端 > HTML基础代码大全入门指南

HTML基础代码大全入门指南

2026-03-16 20:34:00 0浏览收藏

这篇文章系统梳理了HTML开发中极易被忽视却至关重要的核心规范与实战陷阱：从自闭合标签（如img、br、input）严禁闭合、p/div/span等必须显式闭合，到id全局唯一性对JS操作、CSS选择和无障碍访问的深层影响；从script置于head时因DOM未就绪导致的常见报错，到defer、DOMContentLoaded的精准应对策略；再到form提交时preventDefault的必要性及FormData的健壮数据收集方式——每一处都直击新手痛点，揭示“浏览器宽容”背后的隐患，并强调语义正确性、团队协作一致性和可访问性在真实项目中的不可妥协性。

新手HTML代码入门_HTML代码元素汇总【汇总】

HTML里哪些标签必须闭合，哪些可以不闭合

浏览器对标签闭合其实挺宽容，但“能不闭合”不等于“该不闭合”。像、、这类是**自闭合标签（void elements）**，语法上就不允许写 —— 浏览器会直接忽略后半截，甚至可能破坏后续结构。

而

、

、必须成对出现。漏掉很容易导致样式错乱或JS获取不到预期节点——尤其在用 document.querySelector('p') 时，返回的可能是嵌套异常的 DOM 树。

常见误操作：把
当成可选闭合，实际 A B 中第二个
会被自动补全闭合，但语义已模糊
HTML5 允许省略某些闭合（如

服务端渲染（如 PHP/Node）若拼接 HTML 字符串，漏闭合会直接导致整页解析失败，错误信息常是 Unexpected end of input

class 和 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或改逻辑，违背语义
Vue/React 组件中动态生成 id 要格外小心，v-for 循环里写死 id="item" 是典型翻车现场
无障碍访问（a11y）依赖 id 关联 label for="xxx" 或 aria-labelledby，这里重复 ID 会导致读屏软件静默失败

script 标签放 head 里为什么 JS 经常报错找不到元素

脚本执行时，浏览器按 HTML 解析顺序从上到下构建 DOM。放在里的 —— 它会并行下载，等 DOM 解析完再执行，且保证顺序

实在要内联脚本又得操作 DOM？用 DOMContentLoaded 事件包裹：document.addEventListener('DOMContentLoaded', () => { /* 操作代码 */ })

注意：IE8 及以下不支持 defer，如果还要兼容，老老实实挪到上方

form 表单提交时页面刷新了，怎么阻止

原生

提交默认触发页面跳转（GET）或刷新（POST），这是语义行为，不是 bug。想用 JS 控制流程，核心就一条：event.preventDefault()。

但光阻止还不够——表单验证、按钮状态、错误提示都得手动补上，否则用户点完按钮没反馈，以为卡了。

监听 submit 事件，不是 click：form.addEventListener('submit', e => { e.preventDefault(); /* 处理逻辑 */ })
别忘了给提交按钮加 type="button"，否则在某些框架里（如 Alpine.js）可能意外触发两次 submit
用 FormData 收集数据比遍历 input.value 更可靠，尤其遇到 忘记密码


        登录即同意 用户协议 和 隐私政策