1. 先聊聊为什么HTML5代码规范这么重要前几天团队在Review一批老页面有个功能模块的HTML写了八百多行嵌套层级平均超过六层一眼望去全是div和span连个section影子都看不到。更头疼的是标签大小写混用、属性值时带引号时不带引号、img标签缺alt属性的情况一抓一大把。一个新来的同事接手这个模块光梳理DOM结构就花了两天最后在周会上很无奈地问了一句这页面到底是怎么写出来的这个问题其实特别典型。很多前端新手甚至工作两三年的开发对HTML5的认知还停留在“能用就行”的层面觉得代码规范是后端或者架构师才需要操心的事HTML不就是拿标签拼拼凑凑吗但真到项目变大、人员流动、需要长期维护的时候不规范HTML带来的成本会成倍放大。这篇博文我打算系统地聊一聊HTML5代码规范这件事。不聊那些挂在官网上的教条式条文而是结合我这些年在一线写页面、带项目、做代码评审时实际遇到的情况把写一个“干净、可维护、经得起Review”的HTML5页面需要遵守的规则、背后的原理、踩过的坑一次性讲透。不管你是刚入门准备交HTML5网页设计作业的学生还是正在推进前端代码工程规范的团队负责人这篇文章应该都能给你一些能直接落地的参考。2. HTML5文档骨架与语义化设计思路2.1 从DOCTYPE到字符集开头三行不能错我见过太多页面第一行文档类型声明还是HTML4时代的写法一长串URL看着就累。HTML5的DOCTYPE只需要一行!DOCTYPE html这行声明不只是个形式它直接决定了浏览器用哪种模式来渲染页面。少了这一行或者写错浏览器可能进入怪癖模式Quirks Mode盒模型、行高这些基础样式都会出现诡异的差异同一个页面在Chrome和Safari里显示效果可能差出十万八千里。紧跟着的第二行是字符集声明同样有讲究meta charsetutf-8以前老规范里常见meta http-equivContent-Type contenttext/html; charsetutf-8这种长写法HTML5里简化为上面这样。为什么必须用UTF-8因为UTF-8几乎覆盖了全球所有语言的字符中英文混排、生僻字、特殊符号都能正确解析。团队协作时哪怕有人把文件编码搞成了GBK只要页面声明了UTF-8浏览器会按声明解析顶多显示乱码的概率小一些。不过这里我更推荐的做法是在编辑器层面就把默认编码锁定为UTF-8配合.editorconfig文件统一从源头杜绝编码问题。移动端适配相关的viewport标签虽然不强制但这个年代写HTML5页面基本人手一个meta nameviewport contentwidthdevice-width, initial-scale1.0这个标签控制的是移动端浏览器视口的宽度和缩放比例。没有它手机浏览器会默认用980像素左右的宽度来渲染页面然后整体缩小用户看到的就是一行行蚂蚁大小的文字。写响应式页面之前一定要先把这行加上这算是我见过的低年级前端犯过最多的“隐形错误”之一。2.2 语义化标签怎么选才是真的“语义”HTML5新增的语义化标签大概是这轮规范里面最核心的亮点了。header、footer、nav、main、article、section、aside这套标签系统让页面结构从“清一色div盒子”变成了“有明确含义的章节划分”。但很多人在实际使用的时候会走两个极端。第一个极端是保守全部用div加classheader来模拟语义这么做代码看起来没什么问题但搜索引擎和辅助技术比如读屏软件完全无法理解页面结构。第二个极端是滥用把section当成div的替代品啥都塞进去结果一个页面里面有几十个section嵌套了七八层语义反而更混乱了。我自己的判断标准是这样section里应该包含一个自然章节的内容通常带一个标题h1-h6article则是一个完整独立的内容单元理论上可以脱离上下文独立存在比如一篇博文、一条评论、一个商品卡片。如果一段内容纯粹是为了布局需要而包裹起来的那它就是div的本职工作不用强行赋予语义化标签。举一个实际页面结构例子body header网站头部包含Logo和主导航/header main article h1文章主标题/h1 p正文段落/p /article aside侧边栏放相关推荐和广告/aside /main footer版权信息和友情链接/footer /body有两点要注意第一main在一个页面里只能出现一次它代表页面的主要内容区第二header和footer不代表只能在页面顶部和底部用它们可以是article内部的头部和尾部表示文章的元信息区和脚注区语义的“上下文”要搞清楚。2.3 标题层级、列表与文本结构的最佳实践标题层级Heading Structure是什么我见过不止一次的情况是设计稿上没画标题逻辑开发随手就用h3开篇然后下面的章节标题又用了h2整个页面标题级别倒挂屏幕阅读器用户听完了一脸懵搜索引擎也不知道哪个是页面主题。规范要求很清楚页面只能有一个h1通常是站名或页面主标题然后按h2、h3、h4的顺序层层递进不允许跳级。也就是说你不要出现h2下面直接接h4的情况这中间缺的h3就是结构上的断层。段落文本方面也容易出问题。比如强调语气有人习惯用b或i这两个标签在HTML5里的语义已经被重新定义过b只表示“样式上加粗”不带任何强调含义真正表示“重要、需要强调”的内容应该用strong表示“语气上着重”的用em。搜索引擎在理解页面重点时strong和em的权重明显高于b和i。这算是很多前端老手都没在意的细节。列表的使用同样是规范重灾区。导航菜单应该用ul包li而不是用一串a平铺带顺序的步骤说明用ol自定义的键值对列表用dl、dt、dd。这个习惯直接决定了一个页面的信息结构在机器眼里是“有条理的列表”还是“一坨文字”。写代码的时候多花两秒想清楚用哪个标签后面做SEO和可访问性优化时能省下大量返工成本。3. 标签书写、属性与嵌套规范的核心细节3.1 标签大小写、引号、自闭合这些基本盘聊一个我每次代码评审都要强调的问题标签和属性名一律小写。HTML对大小写其实不敏感DIV和div渲染结果一样但在团队协作、版本对比、检索替换时大写混小写会让事情变得极其混乱。规范里写得很明白建议全部使用小写。我还见过类似Img Src...这种写法虽然浏览器能认但配合自动化检查和格式化工具时分分钟报错给你看。属性值用双引号而不是单引号更不是省略引号。什么是省略引号就是a hrefindex.html这种写法。浏览器确实可以解析但属性值里一旦出现空格、特殊字符马上就会解析错误而且这种代码在团队评审里基本是个送分题——肯定会被打回。统一的引号风格除了视觉上整齐还能减少后续脚本处理DOM属性时出现的边界问题。自闭合标签这块也有分歧。像img、br、input、hr这类空元素XML风格是img /HTML5风格是不加斜杠直接写img。我个人的习惯是不加斜杠因为HTML5的规范就是这样的XHTML的语法惯性可以放下了。不过如果你团队统一采用XML风格也没有问题关键是“全项目保持一致”不要一个页面里两种风格混着来。这里可以给一个直观的对比表项目推荐写法不推荐写法标签名divDIV属性引号classboxclassbox或classbox空元素img srca.jpg altaimg srca.jpg alta/img缩进2空格或4空格项目统一混合使用3.2 属性顺序与布尔属性的处理习惯属性顺序属于那种“不写也没事、写了明显更专业”的细节。我自己在看代码时如果发现一个标签的属性顺序是统一有规律的比如a class... href...>input typetext disabled input typecheckbox checked因为在JavaScript里操作这些属性时检索的属性名和HTML里写的是一致的不会因为某个disabledfalse字符串而出现“明明写了false元素还是禁用”的认知偏差。注意HTML里disabledfalse照样是禁用状态这个坑我教过好几次新人了。>