HTML规范文档

1. HTML规范

/**********************等级说明***********************/
/*  1.阻断:执行发生严重错误导致中断,阻碍后续程序的执行  */
/*  2.严重:语法错误导致执行出错                       */
/*  3.主要:影响到性能等                              */
/*  4.次要:可能影响到性能等                          */
/*  5.建议:优化效率性能等                            */
/*  6.图片表示支持sonar检测                          */
/**********************等级说明***********************/

1.1 HTML页头及兼容性设置规范

Alt text1.1.01 !DOCTYPE文档类型申明必须放在<html>起始标签之前(主要)

规范明细

!DOCTYPE文档类型申明必须放在<html>起始标签之前,因为文档类型的申明会决定浏览器使用哪种规则解析html文档

正确示例
<!DOCTYPE html>
<html>

1.1.02 对于移动WEB开发和非兼容低版本IE浏览器的WEB开发即使用HTML5技术开发的,文档申明必须使用<!DOCTYPE html>方式(主要)

规范明细

对于移动WEB开发和非兼容低版本IE浏览器的WEB开发即使用HTML5技术开发的,文档申明必须使用<!DOCTYPE html>方式。因为HTML5技术已经简化文档类型申明的语句

正确示例
<!DOCTYPE html>

Alt text1.1.03 要为文档设置lang语言类型(主要)

规范明细

要为文档设置语言类型,指定lang属性这将有助于语音合成工具确定其所应该采用的发音,有助于翻译工具确定其翻译时所应遵守的规则

正确示例
<html lang="zh">

1.1.04 若需要兼容IE低版本的浏览器,需要为文档设置IE兼容规则(主要)

规范明细

若需要兼容IE低版本的浏览器,需要为文档设置IE兼容规则。添加兼容多浏览器的声明,并使用class作为全局条件,有助于区分低版本的IE浏览器并进行调整,这显然要优于使用CSS Hack,也可以避免IE6条件注释引起的高版本IE文件阻塞问题,原文的解决方法是在前面加一个空白的条件注释,但是这里显然将原本无用空白的条件注释变得有意义了。

正确示例
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="zh"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="zh"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="zh"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="zh"> <!--<![endif]-->

Alt text1.1.05 必须为文档设置视窗viewport(主要)

规范明细

必须为文档设置视窗viewport,加上viewport可以让我们开发出来的页面在不同大小的设备上都能统一友好显示。

正确示例
<meta name="viewport" content="width=device-width">

Alt text1.1.06 为文档设置IE兼容content="IE=Edge"(主要)

规范明细

为兼容IE设置它支持的最新的模式:content="IE=Edge",IE 支持通过特定的<meta>标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求,否则设置为edge mode,从而通知 IE 采用其所支持的最新的模式。

正确示例
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

Alt text1.1.07 字符编码必须声明为utf–8(主要)

规范明细

字符编码必须声明为utf–8。所有标记都应设置为utf–8,它应该同时指定在HTTP报头和文档头部,避免编码不一致出现乱码情况。

正确示例
<meta charset="utf-8">

Alt text1.1.08 为文档设置文档描述,必须使用keywordsdescription,便于被搜索引擎找到 (主要)

规范明细

为文档设置文档描述,必须使用keywordsdescription,便于被搜索引擎找到

正确示例
<meta name="description" content="">
<meta name="keywords" content="">

Alt text1.1.09 必须给每个页面加上有意义的标题(主要)

规范明细

必须给每个页面加上有意义的标题,帮助用户更直接了解页面内容,同时便于项目管理

正确示例
<title>HTML5 standardization</title>

Alt text1.1.10 必须给每个页面加上网页图标(主要)

规范明细

必须给每个页面加上网页图标

正确示例
<head> 
    <title>...<title>
    <!-- 使用以下方式设置网页图标 -->
    <link rel="shortcut icon" href="http://example.com/myicon.ico" />
</head>
错误示例
<head> 
    <title>...<title>
    <!-- 未设置网页图标 -->
</head>

Alt text1.1.11 不要让meta标签用来刷新或者重定向网页(主要)

规范明细

不要让meta标签用来刷新或者重定向网页

正确示例
<head>
    <meta name="description" content="...">
</head>
错误示例
<head>
    <meta http-equiv="refresh" content="5"> <!-- 不符合要求 -->
    <meta name="description" content="...">
</head>

1.2 HTML文件引用规范

1.2.01 将样式表和脚本中的type省略,除非你不是用的cssjavascript,在html5,该值默认是text/csstext/javascript(次要)

规范明细

将样式表和脚本中的type省略,除非你不是用的cssjavascript,在html5,该值默认是text/csstext/javascript

正确示例
<!-- 省略type -->
<script src="js/demo.js"></script>
错误示例
<!-- 未省略type -->
<script src="js/demo.js" type="text/javascript"></script> 

1.2.02 在指向图片或其他媒体文件、样式表和脚本的URL地址中省略http: https:协议部分,除非已知相应文件不能同时兼容2个协议(次要)

规范明细

在指向图片或其他媒体文件、样式表和脚本的URL地址中省略http: https:协议部分,除非已知相应文件不能同时兼容2个协议;

正确示例
<!-- 省略协议 -->
<script src="//www.hengtiansoft.com/js/demo.js"></script>
错误示例
<!-- 未省略协议 -->
<script src="http://www.hengtiansoft.com/js/demo.js"></script> 

Alt text1.2.03 必须将css文件引入并置于head中(主要)

规范明细

必须将css文件引入并置于head中


Alt text1.2.04 必须将js文件引入并置于body底部 (主要)

规范明细

必须将js文件引入并置于body底部

1.3 HTML代码格式化规范


1.3.01 将结构(markup)、表现样式(style)和行为动作(script)分开处理,尽量使三者之间的关联度降到最小,这样有利于维护 (主要)

规范明细

将结构(markup)、表现样式(style)和行为动作(script)分开处理,尽量使三者之间的关联度降到最小,这样有利于维护


Alt text1.3.02 使用4个空格的格式缩进,不要使用Tab(主要)

规范明细

每次缩进使用4个空格不要使用Tab

正确示例
<!-- 使用缩进 -->
.example {
    color: blue;
}
<ul>
    <li>Fantastic</li>
    <li>Great</li>
</ul>

1.3.03 按照树形结构排列代码(主要)

规范明细

按照树形结构排列代码, 针对每一个块级元素都另起一行,并在每个子元素前缩进,可提升可读性

正确示例
<table>
    <thead>
        <tr>
            <th scope="col">header 1</th>
            <th scope="col">header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>line 1</td>
            <td>line 2</td>
        </tr>
    </tbody>
</table>

1.3.04 嵌套代码避免无意义的多层嵌套(主要)

规范明细

减少嵌套:可能减少嵌套,减少不必要的标签,如果结构可以满足上下文要求,就不需要有冗余的结构

正确示例
<div>test</div>
错误示例
<div><div>test</div></div>

Alt text1.3.05 控制每行HTML的代码数量在120个字符以内(主要)

规范明细

控制每行HTML的代码数量在120个字符以内,方便阅读浏览


Alt text1.3.06 合理分离展现内容,不要使用内联样式(主要)

规范明细

合理分离展现内容,不要使用内联样式

正确示例
<div class="class">
错误示例
<div style="border: 1px">

1.3.07 待定项用TODO标记出来(主要)

规范明细

待定项用TODO标记出来

正确示例
<!-- TODO(Jason) : add more items -->

Alt text1.3.08 每个html页面最大行数为500(主要)

规范明细

每个html页面最大行数为500


1.4 HTML代码命名规范

1.4.01 只使用小写字母编写代码,所有的代码都应是小写的,包括元素名称、属性,属性值(除非text或CDATA的内容)、选择器、css属性、属性值(字符串除外)(主要)

规范明细

所有的代码都应是小写的,包括元素名称、属性,属性值(除非text或CDATA的内容)、选择器、css属性、属性值(字符串除外);

正确示例
<!-- 使用小写 -->
<img src="hengtian.png" alt="hengtian">
*{color: #e5e5e5;}
错误示例
<!-- 未使用小写 -->
<A HREF="/">home</A>
*{color: #E5E5E5;}

Alt text1.4.02 所有的id、class(除data-自定义属性外)要使用中杠线来命名(主要)

规范明细

所有的id、class(除data-自定义属性外),若名称较长,为便于理解,都要通过中杠线来命名;

正确示例
<div class="test-class" id="test-id"></div>
错误示例
<div class="testClass" id="testId"></div>

1.5 HTML元素及元素属性使用规范

Alt text1.5.01 块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素(主要)

规范明细

块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素

//块级元素:
address、blockquote、center、dir、div、dl、dt、dd、
fieldset、form、h1~h6、hr、isindex、menu、noframes、
noscript、ol、p、pre、table、ul

//内嵌元素:
a、abbr、acronym、b、bdo、big、br、cite、code、 
dfn、em、font、i、img、input、kbd、label、q、s、samp、
select、small、span、strike、 strong、sub、sup、textarea、tt、u、var
正确示例
<div><h1></h1><p></p></div>
<a href=”#”><span></span></a>
错误示例
<span><div></div></span>

Alt text1.5.02 块级元素不能放在<p>里面(主要)

规范明细

块级元素不能放在<p>里面;

正确示例
<div><h2></h2><p></p></div>
错误示例
<p><ol><li></li></ol></p>

Alt text1.5.03 有几个特殊的块级元素h1、h2、h3、h4、h5、h6、p、dt只能包含内嵌元素,不能再包含块级元素(主要)

规范明细

有几个特殊的块级元素h1、h2、h3、h4、h5、h6、p、dt只能包含内嵌元素,不能再包含块级元素

正确示例
<div><h2><span></span></h2></div>
错误示例
<div><h2><div></div></h2></div>

1.5.04 块级元素与块级元素并列、内嵌元素与内嵌元素并列(主要)

规范明细

块级元素与块级元素并列、内嵌元素与内嵌元素并列

正确示例
<div><a href=”#”></a><span></span></div>
错误示例
<div><h2></h2><span></span></div>

Alt text1.5.05 非自闭合标签必须以闭合标签结束(严重)

规范明细

非自闭合标签必须以闭合标签结束

正确示例
<div>This is a demo.</div>
错误示例
<div>This is  a demo.

1.5.06 使用语义化标签(次要)

规范明细

使用语义化标签,根据标签的语义来合理使用它。使用语义性标签对代码的执行效率和可读性都非常重要

正确示例
<section>
    <h1>Journey</h1>
    <p>One day you finally knew what you had to do, and began.</p>
</section>
错误示例
<div>
    <h1>Journey</h1>
    <p>One day you finally knew what you had to do, and began.</p>
</div>

1.5.07 使用data-* 方式自定义属性(主要)

规范明细

添加元素非自由属性(自定义属性)的时候需要加上前缀data--后为一个属性的名称。这种方式定义自定义属性符合w3c标准,且便于使用管理

正确示例
<div id="J-test" data-age="24">
    Click Here
</div>
错误示例
<div id="J-test" abc-age="24" abc="3">
    Click Here
</div>

Alt text1.5.08 图片元素必须使用widthheight属性(主要)

规范明细

图片元素必须使用widthheight属性,提升页面加载速度

正确示例
<img src="pic.jpg" alt="这是一张图片" height="100" width="100" />

Alt text1.5.09 图片元素必须使用alt属性(主要)

规范明细

图片元素必须使用alt属性,图片未加载完成或者加载失败,可以提示用户相关的信息,避免用户体验不好

正确示例
<img src="pic.jpg" alt="这是一张图片" height="100" width="100" />

Alt text1.5.10 图片元素不能使用gif文件(主要)

规范明细

图片元素不能使用gif文件,提升页面加载速度

正确示例
<img src="pic.jpg" alt="这是一张图片" height="100" width="100" />
错误示例
<img src="pic.gif" alt="这是一张图片" height="100" width="100" />

规范明细

无内嵌内容元素要使用自闭合标签,且在>前无空格,常见的有br,hr,img,input,link,meta

正确示例
<br />
<img ... />
<link ... />
错误示例
<br></br>
<img ... ></img>
<link ... ></link>

1.5.12 布尔属性在声明时必须为其赋值(主要)

规范明细

布尔属性在声明时必须为其赋值

正确示例
<input type="text" disabled="diabled"/>
<select>
    <option value="1" selected="slected">1</option>
</select>
错误示例
<input type="text" disabled/>
<select>
    <option value="1" selected>1</option>
</select>

1.5.13 文章段落之间用<p>来代替<br />来对内容换行(主要)

规范明细

文章段落之间用<p>来代替<br />来对内容换行


Alt text1.5.14不要使用<em><strong>(主要)

规范明细

不要使用<em><strong>,用css来控制


Alt text1.5.15 不要使用<i><b>(主要)

规范明细

不要使用<i><b>,HTML5不赞成使用


Alt text1.5.16 不使用html5弃用的元素和指定元素已移除的属性(主要)

规范明细

不使用html5弃用的元素和指定元素已移除的属性

HTML5中移除的元素
元素 解决方法
<acronym> 使用<abbr>标签替代
<applet> 使用<object>标签替代
<basefont> 使用CSS来设置大小
<big> 使用CSS中font size来实现
<dir> 使用<ul>标签代替
<font> 使用CSS来实现
<frame> 糟糕的可用性和访问性
<frameset> 糟糕的可用性和访问性
<isindex> 使用HTML5表单控件来替代
<noframes> 糟糕的可用性和访问性
<s> 使用CSS来实现
<strike> 使用CSS来实现
<tt> 使用CSS来实现
<u> 使用CSS来实现
HTML5中指定元素移除的属性
属性 所属的元素
align caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead and tr
alink body
link body
vlink body
text body
background body
bgcolor table, tr, td, th and body
border table and object
cellpadding table
cellspacing table
char col, colgroup, tbody, td, tfoot, th, thead and tr
charoff col, colgroup, tbody, td, tfoot, th, thead and tr
clear br
compact dl, menu, ol and ul
frame table
compact dl, menu, ol and ul
frame table
frameborder iframe
hspace img and object
vspace img and object
marginheight iframe
marginwidth iframe
noshade hr
nowrap td and th
rules table
scrolling iframe
size hr
type li, ol and ul
valign col, colgroup, tbody, td, tfoot, th, thead and tr
width hr, table, td, th, col, colgroup and pre

Alt text1.5.17 li 或者 dt 标签必须被包含在ul, ol 或者 dl 这些容器内(主要)

规范明细

li 或者 dt 标签必须被包含在ul, ol 或者 dl 这些容器内,因为单独使用这些标签无任何意义

正确示例
<ul>
    <li>Apple</li>        
    <li>Strawberry</li>   
</ul>
<ol>
    <li>Apple</li>        
    <li>Strawberry</li>   
</ol>
<dl>
    <dt>Apple</dt>        
    <dt>Strawberry</dt>   
</dl>       
错误示例
<li>Apple</li>      
<li>Strawberry</li>   
<dt>Apple</dt>       

1.5.18 不要使用flash插件播放视频或者音频文件,要使用HTML的video 和 audio元素实现。(次要)

规范明细

不要使用flash插件播放视频或者音频文件,要使用HTML的video 和 audio元素实现。因为flash已不被大多数最新版本的浏览器支持,其次是因为flash会占用大量的资源

正确示例
<video src="someaudio.wav" controls="controls">
    您的浏览器不支持 audio 标签。
</video>
<audio src="someaudio.wav">
    您的浏览器不支持 audio 标签。
</audio>
错误示例
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100" height="100">
    <param name="movie" value="movie_name.swf" />
    <embed src="movie_name.swf" width="550" height="400"
        type="application/x-shockwave-flash"
        pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>      

规范明细

linkhref值不要直接使用图片的链接。

正确示例
<a href="page.html">...</a>
错误示例
<a href="image.png">...</a>   

1.6 HTML注释规范

1.6.01 单行注释,需在<!--后空一格,在-->前空一格(主要)

规范明细

单行注释,需在<!--后空一格,在-->前空一格;

正确示例
<!-- This is a one line comment -->

1.6.02 多行注释,注释起始和结尾都另起一行,注释内容缩进4个空格,不要使用Tab(主要)

规范明细

多行注释,注释起始和结尾都另起一行,注释内容缩进4个空格,不要使用Tab

正确示例
<!--
    This comment is require more than one line, 
    so we should use block-style indented text      
-->

Alt text1.6.03 注释的内容不应该包含html代码(主要)

规范明细

注释的内容不应该包含html代码

正确示例
<!--
    This comment is require more than one line, 
    so we should use block-style indented text      
-->
错误示例
<!--
    b>Hello</b>,
    <i>world</i>!     
-->

1.7 HTML字符及字符实体使用规范

1.7.01 常用HTML字符使用字符实体表示(主要)

常用HTML字符实体:

字符 名称 实体名 实体数
" 双引号 &quot; &#34;
' 撇号 &apos;(IE不支持) &#39;
& 和号 &amp; &#38;
> 右尖括号(大于号) &gt; &#62;
< 左尖括号(小于号) &lt; &#60;
  空格 &nbsp; &#160;
  中文全角空格   &#12288;

1.7.02 常用HTML特殊字符使用字符表示,不使用字符实体表示(主要)

常用特殊字符实体(不建议使用实体):

字符 名称 实体名 实体数
&yen; &#165;
    断竖线 &brvbar;
© 版权 &copy; &#169;
® 注册商标R &reg; &#174;
商标TM &trade; &#8482;
间隔符 &middot; &#183;
« 左双尖括号 &laquo; &#171;
» 右双尖括号 &raquo; &#187;
° &deg; &#176;
× &times; &#215;
÷ &divide; &#247;
千分比 &permil; &#8240;

没有更多推荐了,返回首页