HTML规范文档
来源：互联网 发布：图形图像设计软件 编辑：程序博客网 时间：2024/06/05 04:48
1. HTML规范
/**********************等级说明***********************//* 1.阻断：执行发生严重错误导致中断，阻碍后续程序的执行 *//* 2.严重：语法错误导致执行出错 *//* 3.主要：影响到性能等 *//* 4.次要：可能影响到性能等 *//* 5.建议：优化效率性能等 *//* 6.图片表示支持sonar检测 *//**********************等级说明***********************/1.1 HTML页头及兼容性设置规范
1.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>
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]-->
viewport(主要)规范明细
必须为文档设置视窗
viewport，加上viewport可以让我们开发出来的页面在不同大小的设备上都能统一友好显示。正确示例
<meta name="viewport" content="width=device-width">
content="IE=Edge"(主要)规范明细
为兼容IE设置它支持的最新的模式：
content="IE=Edge"，IE 支持通过特定的<meta>标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则设置为edge mode，从而通知 IE 采用其所支持的最新的模式。正确示例
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
utf–8(主要)规范明细
字符编码必须声明为
utf–8。所有标记都应设置为utf–8，它应该同时指定在HTTP报头和文档头部，避免编码不一致出现乱码情况。正确示例
<meta charset="utf-8">
keywords和description，便于被搜索引擎找到 (主要)规范明细
为文档设置文档描述，必须使用
keywords和description，便于被搜索引擎找到正确示例
<meta name="description" content=""><meta name="keywords" content="">
规范明细
必须给每个页面加上有意义的标题，帮助用户更直接了解页面内容，同时便于项目管理
正确示例
<title>HTML5 standardization</title>
规范明细
必须给每个页面加上网页图标
正确示例
<head> <title>...<title> <!-- 使用以下方式设置网页图标 --> <link rel="shortcut icon" href="http://example.com/myicon.ico" /></head>错误示例
<head> <title>...<title> <!-- 未设置网页图标 --></head>
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省略，除非你不是用的
css或javascript，在html5，该值默认是text/css和text/javascript(次要)规范明细
将样式表和脚本中的type省略，除非你不是用的
css或javascript，在html5，该值默认是text/css和text/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>
规范明细
必须将css文件引入并置于head中
规范明细
必须将js文件引入并置于body底部
1.3 HTML代码格式化规范
1.3.01 将结构(markup)、表现样式(style)和行为动作(script)分开处理,尽量使三者之间的关联度降到最小,这样有利于维护 (主要)
规范明细
将结构(markup)、表现样式(style)和行为动作(script)分开处理,尽量使三者之间的关联度降到最小,这样有利于维护
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>
规范明细
控制每行HTML的代码数量在120个字符以内，方便阅读浏览
规范明细
合理分离展现内容，不要使用内联样式
正确示例
<div class="class">错误示例
<div style="border: 1px">
1.3.07 待定项用
TODO标记出来(主要)规范明细
待定项用
TODO标记出来正确示例
<!-- TODO(Jason) : add more items -->
规范明细
每个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;}
规范明细
所有的id、class(除data-自定义属性外)，若名称较长，为便于理解，都要通过中杠线来命名；
正确示例
<div class="test-class" id="test-id"></div>错误示例
<div class="testClass" id="testId"></div>
1.5 HTML元素及元素属性使用规范
规范明细
块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素
//块级元素: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>
<p>里面(主要)规范明细
块级元素不能放在
<p>里面；正确示例
<div><h2></h2><p></p></div>错误示例
<p><ol><li></li></ol></p>
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>
规范明细
非自闭合标签必须以闭合标签结束
正确示例
<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>
width和height属性(主要)规范明细
图片元素必须使用
width和height属性，提升页面加载速度正确示例
<img src="pic.jpg" alt="这是一张图片" height="100" width="100" />
alt属性(主要)规范明细
图片元素必须使用
alt属性，图片未加载完成或者加载失败，可以提示用户相关的信息，避免用户体验不好正确示例
<img src="pic.jpg" alt="这是一张图片" height="100" width="100" />
gif文件(主要)规范明细
图片元素不能使用
gif文件，提升页面加载速度正确示例
<img src="pic.jpg" alt="这是一张图片" height="100" width="100" />错误示例
<img src="pic.gif" alt="这是一张图片" height="100" width="100" />
1.5.11 为无内嵌内容元素使用自闭合标签，常见的有
br,hr,img,input,link,meta(主要)规范明细
无内嵌内容元素要使用自闭合标签，且在
>前无空格，常见的有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 />来对内容换行
<em>和<strong>(主要)规范明细
不要使用
<em>和<strong>,用css来控制
<i>和<b>(主要)规范明细
不要使用
<i>和<b>，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中指定元素移除的属性
属性 所属的元素 aligncaption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead and tralinkbodylinkbodyvlinkbodytextbodybackgroundbodybgcolortable, tr, td, th and bodybordertable and objectcellpaddingtablecellspacingtablecharcol, colgroup, tbody, td, tfoot, th, thead and trcharoffcol, colgroup, tbody, td, tfoot, th, thead and trclearbrcompactdl, menu, ol and ulframetablecompactdl, menu, ol and ulframetableframeborderiframehspaceimg and objectvspaceimg and objectmarginheightiframemarginwidthiframenoshadehrnowraptd and thrulestablescrollingiframesizehrtypeli, ol and ulvaligncol, colgroup, tbody, td, tfoot, th, thead and trwidthhr, table, td, th, col, colgroup and pre
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>
link的href值不要直接使用图片的链接。(主要)规范明细
link的href值不要直接使用图片的链接。正确示例
<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 -->
规范明细
注释的内容不应该包含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字符实体：
字符 名称 实体名 实体数 "双引号""'撇号'(IE不支持)'&和号&&>右尖括号（大于号）>><左尖括号（小于号）<<空格  中文全角空格　
1.7.02 常用HTML特殊字符使用字符表示，不使用字符实体表示(主要)
常用特殊字符实体（不建议使用实体）：
¥¥ 断竖线¦©版权©©®注册商标R®®™商标TM™™•间隔符··«左双尖括号««»右双尖括号»»°度°°×乘××÷除÷÷‰千分比‰‰ 0 0
- HTML规范文档
- HTML规范文档
- Html文档与基本语法和规范
- 文档规范
- 文档规范
- 文档规范
- html规范
- HTML规范
- html 规范
- html <!-- --> 规范
- HTML规范
- HTML 规范
- HTML规范
- html规范
- HTML 规范
- html规范
- 开发规范：HTML规范
- W3C提供免费的验证Html/XHtml文档的语法规范
- 用一张图片适应所有机型的方法，但会出现失真的情况
- HDU 4118 Time travel （高斯消元+概率dp）
- 3-File I\O
- Hash Table
- POJ 3461
- HTML规范文档
- swiper的基础使用（二十八）
- SVN如何进行版本的还原
- 二叉树线索化以及线索化的先序、中序、后序遍历
- 字符串基本操作
- grep 命令文本搜索总结
- 关于android 图片加载优化
- caffe学习之博主收录
- 在只需要一个指定正确的参数的情况下如何防止传入其他干扰的参数
