HTML5页面编码规范.docx

1 前言HTML作为描述网页结构的超文本标记语言，在百度一直有着广泛的应用。本文档的目标是使HTML代码风格保持一致，容易被理解和被维护。2 代码风格2.1 缩进与换行[强制] 使用4个空格做为一个缩进层级，不允许使用2个空格或tab字符。示例：ul lifirst/li lisecond/li/ul[建议] 每行不得超过120个字符。解释：过长的代码不容易阅读与维护。但是考虑到 HTML 的特殊性，不做硬性要求。2.2 命名[强制] class必须单词全字母小写，单词间以-分隔。[强制] class必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。示例：!-- good --div class=sidebar/div!-- bad --div class=left/div[强制] 元素id必须保证页面唯一。解释：同一个页面中，不同的元素包含相同的 id，不符合 id 的属性含义。并且使用 document.getElementById 时可能导致难以追查的问题。[建议] id建议单词全字母小写，单词间以-分隔。同项目必须保持风格一致。[建议] id、class命名，在避免冲突并描述清楚的前提下尽可能短。示例：!-- good --div id=nav/div!-- bad --div id=navigation/div!-- good --p class=comment/p!-- bad --p class=com/p!-- good --span class=author/span!-- bad --span class=red/span[强制] 禁止为了hook 脚本，创建无样式信息的class。解释：不允许 class 只用于让 JavaScript 选择某些元素，class 应该具有明确的语义和样式。否则容易导致 css class 泛滥。使用 id、属性选择作为 hook 是更好的方式。[强制] 同一页面，应避免使用相同的name与id。解释：IE 浏览器会混淆元素的 id 和 name 属性， document.getElementById 可能获得不期望的元素。所以在对元素的 id 与 name 属性的命名需要非常小心。一个比较好的实践是，为 id 和 name 使用不同的命名法。示例：input name=foodiv id=foo/divscript// IE6 将显示 INPUTalert(document.getElementById(foo).tagName);/script2.3 标签[强制] 标签名必须使用小写字母。示例：!-- good --pHello StyleGuide!/p!-- bad --PHello StyleGuide!/P[强制] 对于无需自闭合的标签，不允许自闭合。解释：常见无需自闭合标签有input、br、img、hr等。示例：!-- good --input type=text name=title!-- bad --input type=text name=title /[强制] 对HTML5中规定允许省略的闭合标签，不允许省略闭合标签。解释：对代码体积要求非常严苛的场景，可以例外。比如：第三方页面使用的投放系统。示例：!-- good --ul lifirst/li lisecond/li/ul!-- bad --ul lifirst lisecond/ul[强制] 标签使用必须符合标签嵌套规则。解释：比如 div 不得置于 p 中，tbody 必须置于 table 中。详细的标签嵌套规则参见HTML DTD中的Elements定义部分。[建议] HTML标签的使用应该遵循标签的语义。解释：下面是常见标签语义p - 段落h1,h2,h3,h4,h5,h6 - 层级标题strong,em - 强调ins - 插入del - 删除abbr - 缩写code - 代码标识cite - 引述来源作品的标题q - 引用blockquote - 一段或长篇引用ul - 无序列表ol - 有序列表dl,dt,dd - 定义列表示例：!-- good --pEsprima serves as an important strongbuilding block/strong for some JavaScript language tools./p!-- bad --divEsprima serves as an important span class=strongbuilding block/span for some JavaScript language tools./div[建议] 在CSS可以实现相同需求的情况下不得使用表格进行