15个不可错过的HTML代码编写技巧与实用做法
作者：袖梨
2026-08-10
DOCTYPE必须顶格写且为<!DOCTYPE html>，lang属性需填对并动态更新，块级标签必须显式闭合，class名须语义化且用小写短横线，id须全局唯一。
DOCTYPE 必须顶格写，前面不能有空格或注释
浏览器看到开头不是 <!DOCTYPE html>，会直接进入怪异模式（Quirks Mode），<input type="date">、flex 布局、甚至盒模型计算都可能出错。这不是“看起来差不多”，而是真实渲染逻辑退化。
-
<!DOCTYPE html>必须是文件第一行，且前面**零字符**——删掉 BOM、删掉注释、删掉空行 - 别写成
<!doctype html>或<!DOCTYPE HTML>：大小写虽不报错，但部分校验工具和 CI 流水线会警告 - 旧项目迁移时，如果已有
<!DOCTYPE HTML PUBLIC ...>，直接换成<!DOCTYPE html>即可，HTML5 完全兼容
lang 属性不是摆设，得填对且动态更新
<html lang="zh-CN"> 影响屏幕阅读器发音、字体回退策略、搜索引擎语种识别。填错或留空，中文站点被当成英文处理，标点符号间距、拼音断词都可能异常。
- 静态页填
zh-CN（简体中文）、zh-TW（繁体）或en-US，别用zh这种模糊值 - 多语言站点必须用 JS 动态改：
document.documentElement.lang = 'ja-JP'，不能只靠初始值 - 服务端渲染（如 Next.js、Nuxt）需确保每个页面响应头的
Content-Language与lang一致，否则辅助技术会混乱
所有块级标签显式闭合，别信“HTML5 允许省略”
省略 </p> 或 </div> 看似省事，实际让 JS 操作 DOM 时节点顺序错乱，模板引擎（如 EJS、Django）嵌套生成时极易漏标签、整段结构塌陷。
-
<p>段落1</p><p>段落2</p>—— 显式闭合，JS 取parent.children顺序确定 - 自闭合标签统一用
<img src="x" >，不用<img src="x"/>（HTML5 不需要斜杠） - 语义标签如
<header>、<section>同样要闭合：<section><h2>标题</h2><p>内容</p></section>
class 名禁止用样式描述，必须语义化小写短横线
class="red-btn" 或 class="float-left" 是典型反模式。设计改色后 class 名就失效，JS 用它做逻辑判断会误判，团队协作时没人敢动这个“谎言 class”。
- 命名基于“它是什么”，不是“它长什么样”：用
user-avatar，不用circle-img；用article-meta，不用small-gray-text - 全小写 + 短横线：
search-input✅，searchInput❌，search_input❌ - id 尽量少用，必须全局唯一；锚点跳转时确保
href="#contact"和id="contact"拼写、大小写完全一致
lang 的动态同步和块级标签闭合在模板嵌套中的连锁崩塌——不是单个标签写错，而是漏掉一处，整片结构在 SSR 或 JS 操作时无声失效。 
