浙江爱信诺前端规范

HTML规范 - 代码格式

说明文案的注释方法

采用类似标签闭合的写法,与HTML统一格式;注释文案两头空格,与CSS注释统一格式。

  • 开始注释:<!-- 注释文案 -->(文案两头空格)。
  • 结束注释:<!-- /注释文案 -->(文案前加“/”符号,类似标签的闭合)。
01.<!-- 头部 -->
02.<div class="g-header">
03.    <!-- LOGO -->
04.    <h1 class="m-logo"><a href="#">LOGO</a></h1>
05.    <!-- /LOGO -->
06.    <!-- 导航 -->
07.    <ul class="m-nav">
08.        <li><a href="#">NAV1</a></li>
09.        <li><a href="#">NAV2</a></li>
10.    </ul>
11.    <!-- /导航 -->
12.</div>
13.<!-- /头部 -->
代码本身的注释方法

单行代码的注释也保持同行,两端空格;多行代码的注释起始和结尾都另起一行并左缩进对齐。

1.<!-- <h1 class="m-logo"><a href="#">LOGO</a></h1> -->
2.<!--
3.<ul class="m-nav">
4.    <li><a href="#">NAV1</a></li>
5.    <li><a href="#">NAV2</a></li>
6.</ul>
7.-->
HTML注释在IE6中的BUG
  • 如果两个浮动元素之间存在注释,那么可能导致布局错位或文字的BUG。
  • 所以,这种情况下,我们通常将注释去掉。
严格的嵌套
  • 尽可能以最严格的xhtml strict标准来嵌套,比如内联元素不能包含块级元素等等。
  • 正确闭合标签且必须闭合。
严格的属性
  • 属性和值全部小写,每个属性都必须有一个值,每个值必须加双引号。
  • 没有值的属性必须使用自己的名称做为值(checked、disabled、readonly、selected等等)。
  • 可以省略style标签和script标签的type属性。
  • 单标签页必须要有闭合斜杠,并且闭合前面要加一个空格
常用的标签
常见标签表
标签语义嵌套常见错误常用属性(加粗的为不可缺少的或建议的)
<a></a>超链接/锚a不可嵌套ahref,name,title,rel,target
<br />换行  
<button></button>按钮不可嵌套表单元素type,disabled
<dd></dd>定义列表中的定义(描述内容)只能以dl为父容器,对应一个dt 
<del></del>文本删除  
<div></div>块级容器  
<dl></dl>定义列表只能嵌套dt和dd 
<dt></dt>定义列表中的定义术语只能以dl为父容器,对应多个dd 
<em></em>强调文本  
<form></form>表单 action,target,method,name
<h1></h1>标题从h1到h6,不可嵌套块级元素 
<iframe></iframe>内嵌一个网页 frameborder,width,height,src,scrolling,name
<img />图像 alt,src,width,height
<input />各种表单控件 type,name,value,checked,disabled,maxlength,readonly,accesskey
<label></label>标签为input元素定义标注 for
<li></li>列表项只能以ul或ol为父容器 
<link />引用样式或icon不可嵌套任何元素type,rel,href
<meta />文档信息只用于headcontent,http-equiv,name
<ol></ol>有序列表只能嵌套li 
<option></option>select中的一个选项仅用于selectvalue,selected,disabled
<p></p>段落不能嵌套块级元素 
<script></script>引用脚本不可嵌套任何元素type,src
<select></select>列表框或下拉框只能嵌套option或optgroupname,disabled,multiple
<span></span>内联容器  
<strong></strong>强调文本  
<style></style>引用样式不可嵌套任何元素type,media
<sub></sub>下标  
<sup></sup>上标  
<table></table>表格只可嵌套表格元素width,align,background,cellpadding,cellspacing,summary,border
<tbody></tbody>表格主体只用于table 
<td></td>表格中的单元格只用于trcolspan,rowspan
<textarea></textarea>多行文本输入控件 name,accesskey,disabled,readonly,rows,cols
<tfoot></tfoot>表格表尾只用于table 
<th></th>表格中的标题单元格只用于trcolspan,rowspan
<thead></thead>表格表头只用于table 
<title></title>文档标题只用于head 
<tr></tr>表格行嵌套于table或thead、tbody、tfoot 
<ul></ul>无序列表只能嵌套li