HTML5页面编码规范

1前言HTML作为描述网页结构的超文本标记语言，在百度一直有着广泛的应用。本文档的目标是使HTML代码风格保持一致，容易被理解和被维护。2代码风格2.1缩进与换行[强制]使用4个空格做为一个缩进层级，不允许使用2个空格或tab字符。示例：ullifirst/lilisecond/li/ul[建议]每行不得超过120个字符。解释：过长的代码不容易阅读与维护。但是考虑到HTML的特殊性，不做硬性要求。2.2命名[强制]class必须单词全字母小写，单词间以-分隔。[强制]class必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。示例：!--good--divclass=sidebar/div!--bad--divclass=left/div[强制]元素id必须保证页面唯一。解释：同一个页面中，不同的元素包含相同的id，不符合id的属性含义。并且使用document.getElementById时可能导致难以追查的问题。[建议]id建议单词全字母小写，单词间以-分隔。同项目必须保持风格一致。[建议]id、class命名，在避免冲突并描述清楚的前提下尽可能短。示例：!--good--divid=nav/div!--bad--divid=navigation/div!--good--pclass=comment/p!--bad--pclass=com/p!--good--spanclass=author/span!--bad--spanclass=red/span[强制]禁止为了hook脚本，创建无样式信息的class。解释：不允许class只用于让JavaScript选择某些元素，class应该具有明确的语义和样式。否则容易导致cssclass泛滥。使用id、属性选择作为hook是更好的方式。[强制]同一页面，应避免使用相同的name与id。解释：IE浏览器会混淆元素的id和name属性，document.getElementById可能获得不期望的元素。所以在对元素的id与name属性的命名需要非常小心。一个比较好的实践是，为id和name使用不同的命名法。示例：inputname=foodivid=foo/divscript//IE6将显示INPUTalert(document.getElementById('foo').tagName);/script2.3标签[强制]标签名必须使用小写字母。示例：!--good--pHelloStyleGuide!/p!--bad--PHelloStyleGuide!/P[强制]对于无需自闭合的标签，不允许自闭合。解释：常见无需自闭合标签有input、br、img、hr等。示例：!--good--inputtype=textname=title!--bad--inputtype=textname=title/[强制]对HTML5中规定允许省略的闭合标签，不允许省略闭合标签。解释：对代码体积要求非常严苛的场景，可以例外。比如：第三方页面使用的投放系统。示例：!--good--ullifirst/lilisecond/li/ul!--bad--ullifirstlisecond/ul[强制]标签使用必须符合标签嵌套规则。解释：比如div不得置于p中，tbody必须置于table中。详细的标签嵌套规则参见HTMLDTD中的Elements定义部分。[建议]HTML标签的使用应该遵循标签的语义。解释：下面是常见标签语义p-段落h1,h2,h3,h4,h5,h6-层级标题strong,em-强调ins-插入del-删除abbr-缩写code-代码标识cite-引述来源作品的标题q-引用blockquote-一段或长篇引用ul-无序列表ol-有序列表dl,dt,dd-定义列表示例：!--good--pEsprimaservesasanimportantstrongbuildingblock/strongforsomeJavaScriptlanguagetools./p!--bad--divEsprimaservesasanimportantspanclass=strongbuildingblock/spanforsomeJavaScriptlanguagetools./div[建议]在CSS可以实现相同需求的情况下不得使用表格进行布局。解释：在兼容性允许的情况下应尽量保持语义正确性。对网格对齐和拉伸性有严格要求的场景允许例外，如多列复杂表单。[建议]标签的使用应尽量简洁，减少不必要的标签。示例：!--good--imgclass=avatarsrc=image.png!--bad--spanclass=avatarimgsrc=image.png/span2.4属性[强制]属性名必须使用小写字母。示例：!--good--tablecellspacing=0.../table!--bad--tablecellSpacing=0.../table[强制]属性值必须用双引号包围。解释：不允许使用单引号，不允许不使用引号。示例：!--good--scriptsrc=esl.js/script!--bad--scriptsrc='esl.js'/scriptscriptsrc=esl.js/script[建议]布尔类型的属性，建议不添加属性值。示例：inputtype=textdisabledinputtype=checkboxvalue=1checked[建议]自定义属性建议以xxx-为前缀，推荐使用data-。解释：使用前缀有助于区分自定义属性和标准定义的属性。示例：oldata-ui-type=Select/ol3通用3.1DOCTYPE[强制]使用HTML5的doctype来启用标准模式，建议使用大写的DOCTYPE。示例：!DOCTYPEhtml[建议]启用IEEdge模式。示例：metahttp-equiv=X-UA-Compatiblecontent=IE=Edge[建议]在html标签上设置正确的lang属性。解释：有助于提高页面的可访问性，如：让语音合成工具确定其所应该采用的发音，令翻译工具确定其翻译语言等。由于历史原因，有时候不得不继续使用zh-CN。比如中文维基百科，沿用了传统的zh-CN/zh-HK/zh-SG/zh-TW（按照标准应该使用zh-cmn-Hans-CN、zh-cmn-Hant-HK、zh-cmn-Hans-SG、zh-cmn-Hant-TW）。这时候，合理的软件行为，是将zh-CN等转化为zh-cmn-Hans（即转化为最常见的误用所对应的实际标准写法）。SelectorsLevel4已经加入了对BCP47高级匹配算法的支持，即支持:lang(*-Hans)的写法。语言的标签表示法的国际标准是RFC4646示例：htmllang=zh-CN简体中文htmllang=zh-cmn-Hans繁体中文htmllang=zh-cmn-Hant3.2编码[强制]页面必须使用精简形式，明确指定字符编码。指定字符编码的meta必须是head的第一个直接子元素。解释：见HTML5Charset能用吗一文。示例：htmlheadmetacharset=UTF-8....../headbody....../body/html[建议]HTML文件使用无BOM的UTF-8编码。解释：UTF-8编码具有更广泛的适应性。BOM在使用程序或工具处理文件时可能造成不必要的干扰。3.3CSS和JavaScript引入[强制]引入CSS时必须指明rel=stylesheet。示例：linkrel=stylesheethref=page.css[建议]引入CSS和JavaScript时无须指明type属性。解释：text/css和text/javascript是type的默认值。[建议]展现定义放置于外部CSS中，行为定义放置于外部JavaScript中。解释：结构-样式-行为的代码分离，对于提高代码的可阅读性和维护性都有好处。[建议]在head中引入页面需要的所有CSS资源。解释：在页面渲染的过程中，新的CSS可能导致元素的样式重新计算和绘制，页面闪烁。[建议]JavaScript应当放在页面末尾，或采用异步加载。解释：将script放在页面中间将阻断页面的渲染。出于性能方面的考虑，如非必要，请遵守此条建议。示例：body!--alotofelements--scriptsrc=init-behavior.js/script/body[建议]移动环境或只针对现代浏览器设计的Web应用，如果引用外部资源的URL协议部分与页面相同，建议省略协议前缀。解释：使用protocol-relativeURL引入CSS，在IE7/8下，会发两次请求。是否使用protocol-relativeURL应充分考虑页面针对的环境。示例：scriptsrc=//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js/script4head4.1title[强制]页面必须包含title标签声明标题。[强制]title必须作为head的直接子元素，并紧随charset声明之后。解释：title中如果包含ascii之外的字符，浏览器需要知道字符编码类型才能进行解码，否则可能导致乱码。示例：headmetacharset=UTF-8title页面标题/title/head4.2favicon[强制]保证favicon可访问。解释：在未指定favicon时，大多数浏览器会请求WebServer根目录下的favicon.ico。为了保证favicon可访问，避免404，必须遵循以下两种方法之一：1.在WebServer根目录放置favicon.ico文件。2.使用link指定favicon。示例：linkrel=shortcuticonhref=/favicon.icotype=image/x-icon4.3viewport[建议]若页面欲对移动设备友好，需指定页面的viewport。解释：viewportmetatag可以设置可视区域的宽度和初始缩放大小，避免在移动设备上出现页面展示不正常。比如，在页面宽度小于980px时，若需iOS设备友好，应当设置viewport的width值来适应你的页面宽度。同时因为不同移动设备分辨率不同，在设置时，应当使用device-width和device-height变量。另外，为了使viewport正常工作，在页面内容样式布局设计上也要做相应调整，如避免绝对定位等。关于viewport的更多介绍，可以参见SafariWebContentGuide的介绍5图片[强制]禁止img的src取值为空。延迟加载的图片也要增加默认的src。解释：src取值为空，会导致部分浏览器重新加载一次当前页面，参考：[建议]避免为img添加不必要的title属性。解释：多余的title影响看图体验，并且增加了页面尺寸。[建议]为重要图片添加alt属性。解释：可以提高图片加载失败时的用户体验。[建议]添加width和height属性，以避免页面抖动。[建议]有下载需求的图片采用img标签实现，无下载需求的图片采用CSS背景图实现。解释：1.产品