当前位置:首页 > 文章列表 > 文章 > 前端 > HTML编码规范有哪些?

HTML编码规范有哪些?

2026-05-14 10:55:31 0浏览 收藏
HTML编码规范绝非可有可无的“美观习惯”,而是关乎页面能否被正确解析、无障碍访问、搜索引擎收录及跨浏览器稳定运行的硬性技术契约——从强制声明DOCTYPE和lang属性以避免怪异模式与语音合成失效,到标签小写闭合、双引号包裹属性值、alt不可省略、data-*严格前缀等细节,每一项都直击渲染异常、DOM结构断裂、SEO降权甚至旧版IE完全崩溃的风险核心;它不是为取悦开发者而设的格式教条,而是浏览器解析器、辅助技术、自动化工具共同依赖的输入语言,忽略任何一条,轻则让屏幕阅读器沉默、重则使页面在真实世界中“失语”或“隐身”。

HTML中常见的编码规范有哪些

HTML 编码规范不是“可选习惯”,而是直接影响解析行为、可访问性、SEO 和跨浏览器一致性的硬约束。不遵守,轻则页面渲染错乱、屏幕阅读器报错,重则被搜索引擎降权或在旧版 IE 中完全失效。

DOCTYPE 和 lang 属性必须显式声明

没有 ,浏览器会进入怪异模式(Quirks Mode),CSS 盒模型、getBoundingClientRect() 行为、甚至 document.body 的尺寸都可能异常;缺失 lang 属性会让语音合成工具无法判断语种,也影响拼写检查和翻译插件。

  • 是中文页最低要求,不能只写 lang="zh-CN" 而忽略根元素
  • DOCTYPE 必须是首行且全小写: 合法, 不推荐
  • 不要混用:XHTML 风格的 在纯 HTML5 环境下多余且易引发命名空间冲突

标签名、属性名一律小写,且必须闭合非空元素

大小写混用(如

)虽被部分浏览器容忍,但会破坏与 XML 工具链的兼容性,且在服务端模板(如 Django、Jinja2)中容易触发解析错误。

  • 等所有元素名必须小写
  • classidsrcalt 等属性名也必须小写,ALTClass 属于无效属性
  • Hello

    必须闭合;

    Hello 在多数浏览器能“自动修复”,但 DOM 树结构可能意外提前截断后续内容

  • 自闭合标签(<input>)不加 />,即用 ,而非

属性值必须用双引号,alt 和 data-* 有强制语义要求

单引号或无引号(如 class=header)在含空格或特殊字符时会直接解析失败;alt 为空字符串 alt="" 是合法的,但等于放弃无障碍支持;data- 前缀缺失会导致 W3C Validator 报错且被某些前端框架忽略。

  • 所有属性值统一用双引号:Company name,禁止 src='logo.png'src=logo.png
  • alt 不可省略,装饰图可用 alt="",内容图必须描述图像信息,而非“图片”“图标”这类无意义词
  • 自定义数据必须用 data- 开头:
    合法,
    是非法属性,JS 中 dataset 无法读取
  • 表单控件必须有 name(提交用)和 id(关联 ),二者不可同名,否则 IE 会把 getElementById 指向第一个同名 name 元素

缩进与换行以可读性和解析安全为边界

缩进不是为了“好看”,而是避免嵌套逻辑误判。例如

内漏写 ,靠缩进一眼就能发现结构断裂;而换行过多(如每个属性一行)反而增加 diff 冲突概率,且对 gzip 压缩率不利。

  • 推荐 2 空格缩进(Bootstrap 规范),4 空格(百度/华为云规范)亦可,但整个项目必须统一,禁止混用 tab 与空格
  • 长属性值(如内联 SVG 或 base64 图片)建议折行,但必须确保折点不在引号中间或 URL 特殊字符处
  • 不要为压缩删换行:gzip 对空白符压缩效率极高,手动删除换行既难维护又无实质收益