文档介绍：1前言HTML作为描述网页结构的超文本标记语言,在百度一直有着广泛的应用。本文档的目标是使HTML代码风格保持一致,容易被理解和被维护。[强制]使用4个空格做为一个缩进层级,不允许使用2个空格或tab字符。示例:<ul><li>first</li><li>second</li></ul>[建议]每行不得超过120个字符。解释:过长的代码不容易阅读与维护。但是考虑到HTML的特殊性,不做硬性要求。[强制]class必须单词全字母小写,单词间以-分隔。[强制]class必须代表相应模块或部件的内容或功能,不得以样式信息进行命名。示例:<!--good--><divclass="sidebar"></div><!--bad--><divclass="left"></div>[强制]元素id必须保证页面唯一。解释:同一个页面中,不同的元素包含相同的id,不符合id的属性含义。。[建议]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属性,。所以在对元素的id与name属性的命名需要非常小心。一个比较好的实践是,为id和name使用不同的命名法。示例:<inputname="foo"><divid="foo"></div><script>//IE6将显示INPUTalert(('foo').tagName);</script>[强制]标签名必须使用小写字母。示例:<!--good--><p>HelloStyleGuide!</p><!--bad--><P>HelloStyleGuide!</P>[强制]对于无需自闭合的标签,不允许自闭合。解释:常见无需自闭合标签有input、br、img、hr等。示例:<!--good--><inputtype="text"name="title"><!--bad--><inputtype="text"name="title"/>[强制]对HTML5中规定允许省略的闭合标签,不允许省略闭合标签。解释:对代码体积要求非常严苛的场景,可以例外。比如:第三方页面使用的投放系统。示例:<!--good--><ul><li>first</li><li>second</li></ul><!--bad--><ul><li>first<li>second</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--><p>Esprimaservesasanimportant<strong>buildingblock</strong>forsomeJavaScriptlanguagetools.</p><!--bad--><div>Esprimaservesasanimportant<spanclass="strong">buildingblock</span>forsomeJavaScriptlanguagetools.</div>[建议]在CSS可以实现相同需求的情况下不得使用表格进行布局。解释:在兼容性允许的情况下应尽量保持