HTML/CSS代码开发规范文档

HTML/CSS代码开发规范文档

目  录

1、前言... 4

2、HTML编码规范... 4

2-1HTML标记的关闭规范    4

2-2HTML文件头基本标记    4

2-2HTML正文代码标记元素    5

2-3HTML标记的缩进规范    6

3、HTML文件引入CSS样式代码和Javascript代码规范... 6

3-1引入css样式代码规范    6

3-2引入Javascript代码规范    7

4、HTML注释标签. 8

5、CSS编码规范... 8

5-1 CSS编码要求    8

5-2 CSS样式表规范    8

5-3 CSS命名规范    9

5-4样式文件命名    10

5-5样式文件布局    11

6、CSS常规书写规范及方法... 11

6-1文件调用方法: 11

6-2 CSS结构化书写    11

6.2.1派生选择器：... 11

6.2.2辅助图片用背影图处理：... 12

6.2.3结构与样式分离：... 12

6.2.4文档的结构化书写... 12

6-3 HACK CSS书写规范    13

6.3.1 IE6、IE7、Firefox之间的兼容写法... 13

6.3.2屏蔽IE浏览器... 14

6.3.3清除浮动... 14

6.3.4鼠标手势... 15

7、CSS性代码缩写... 15

7.1不同类有相同属性及属性值的缩写... 15

7.2同一属性的缩写... 16

7.3内外侧边框的缩写... 16

7.4颜色值的缩写... 18

8、CSS注释书规范... 18

8.1行间注释... 18

8.2整段注释... 18

1、前言

本编程规范适用于需要编写HTML/CSS代码的网页程序开发人员。本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通。

2、HTML编码规范

HTML是一种标记语言, HTML没有任何真正的编程语言中的循环或是流程控制语句。然而，HTML代码的格式和风格是非常重要的，因为要经常对HTML代码进行维护和修改，因此HTML代码必须有很清晰的逻辑结构和布局,增强可读性，而使其易懂和易于维护。HTML代码本身是不区分大小写的，但是为了更好的统一代码布局，项目中HTML文件标记都以小写为主。

2-1HTML标记的关闭规范

HTML文档的正文都应在标记中间，而标记则应包含在和标记之间。如：

正文

 

不同类的标记不能交叉编码：

eg:

内容

正确编码应为：

内容

开始和关闭标记放在一行的标记有:

    eg:

      和

    和

    和

   各种标题标记，如

…

等

    和

2-2HTML文件头基本标记 

①

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

②

③
　

④

⑤

⑥

⑦

⑧

　　   

说明: ①和② 是html网页基本的标准协义,包含文件中顶部可以不用此标签。

      ③我们的中文环境中用utf-8编码,一般通常是用GB2312编码的，项目中用utf-8是为了防止编码错误显示和浏览时乱码的现像。新建文件时文件通常是ANSI或其它格式的,所以编码时也按照该格式的编码,容易导致浏览乱码。这点要注意检查，可以用记事本将文件另存时,选定utf-8格式保存文件.

      ④是否允许网页被其它服务器搜索到内容，all为允许, none为不允许.该项为可选的，不是非必要的。

⑤和⑥是方便爬虫搜索时获取关键词,取决于④状态值是all的情况下。该项为可选的。

⑦CSS样式引用格式

⑧JS引用格式

2-2HTML正文代码标记元素

2.1 input标记的属性值规范

对于标记中的属性值，必须使用双引号或单引号包围，这样的话不易出错。

   eg:

   或者

eg:

2.2 其它标签的引用,凡是属性值一律加双引号或单引号包围。

  比较常用的标签有 ,链接,

等等。

2.3重点说明一下img图片标签，该标签必须加载alt="图片描述文字"。以便在没有显示图片时，显示文字说明。

  eg:

2-3HTML标记的缩进规范

HTML标记的缩进三点规范：

① 最高一级的父标记采用左对齐顶格方式书写。

② 下一级标记采用左对齐后，缩进2个空格的方式书写。再下一级则以此类推。

③ 同一级标记的首字符上下应对齐。承接来自不同货主的运单。

eg: 下面是两表格嵌套实例

   

       

       

   

   

       

       

   

… … …	… … …
……	… …

3、HTML文件引入CSS样式代码和Javascript代码规范     

3-1引入css样式代码规范

在HTML文件中引入css代码，应该遵循的格式如下：

开头：

eg:示例如下

   

    

      正文部分

     

CSS

3-2引入Javascript代码规范

在HTML文件中引入javascript代码，应该遵循的格式如下：

开头：

eg:示例如下

 

    

      正文部分

4、HTML注释标签 

在任何代码中都应该有做注释的好习惯，在一个复杂的HTML代码中，友好的注释是非常有用的，特别是在有很多嵌套的表格中。HTML中使用来做注释。

eg：

5、CSS编码规范

5-1 CSS编码要求

   所有的代码小写

    属性的值一定要用双引号("")括起来，且一定要有值

    每个标签都要有开始和结束，且要有正确的层次

    空元素要有结束的tag或于开始的tag后加上"/"

表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor等    

    给每一个表格和表单加上一个唯一的、结构标记id

    给重要的区块加上注释用"/*  描述内容   */"

    所有的标签必须进行合理的嵌套

    根元素前必须有元素，宣告使用那一种DTD

5-2 CSS样式表规范

 id和class命名采用该版块的英文单词或组合命名，每个单词都是小写，用下划线连接起来，如:content_main（主要内容区域)

  CSS样式表各区块用注释说明

  使用英文命名原则

  尽量不缩写，除非一看就明白的单词

5-3 CSS命名规范

DIV	CSS名称	说明
网站公用相关
Container div	#wrapper	容器
Header or banner div	#header	页头部分
Main or global navigation div	#main_nav	主导航
Menu	#menu	菜单
Sub Menu	#sub_menu	子菜单
Left or right side columns	#sidebar	左边栏或右边栏
Main div	#main	页面主体
Content div	#content	内容部分
The main content area	#content_main	主要内容区域
Block div	#block	一块区域
Footer div	#footer	页脚部分
Tag	#tag	标签
Message	#msg #message	提示信息
Tips	#tips	小技巧
Vote	#vote	投票
Friend Link	#friendlink	友情连接
Title	#title	标题
Summary	#summary	摘要
Sub-navigation list	#sub_nav	二级导航
Search input	#search_input	搜索输入框
Search output	#search_output	搜索输出和搜索结果相似
Search	#search	搜索
Search results	#search_results	搜索结果
Copyright information	#copyright	版权信息
brand	#branding	商标
branding-logo	#logo	LOGO
Site information	#siteinfo	网站信息
Copyright information etc.	#siteinfo_legal	法律声明
Designer or other credits	#siteinfo_credits	信誉
Join us	#joinus	加入我们
Partnership opportunities	#partner	合作伙伴
Services	#service	服务
Regsiter	#regsiter	注册
Status	#status	状态
电子贸易相关
Products	.products	产品
Products prices	.products_prices	产品价格
Products description	.products_description	产品描述
Products review	.products_review	产品评论
Editor's review	.editor_review	编辑评论
New release	.news_release	最新产品
Publisher	.publisher	生产商
Screen shot	.screenshot	缩略图
FAQ	.faqs	常见问题
Keyword	.keyword	关键词
Blog	.blog	博客
Forum	.forum	论坛

5-4样式文件命名

主要的        master.css
布局，版面    layout.css
专栏          columns.css
文字          font.css
打印样式      print.css
主题          themes.css
提交          submit.css
文本框          textbox.css
统计            count.css

5-5样式文件布局 

div：主要用于布局，分割页面的结构

ul/ol：用于无序/有序列表

span：没有特殊的意义，可以用作排版的辅助，然后在css中定义span

h1-h6：标题

h1-h6： 根据重要性依次递减

h1：最重要的标题

label：为了使你的表单更有亲和力而且还能辅助表单排版的好东西

fieldset & legend：fildset套在表单外，legend用于描述表单内容。

dl,dt,dd：当页面中出现第一行为类似标题/简述，然后下面为详细描述的内容时应该使用该标签

6、CSS常规书写规范及方法

6-1文件调用方法:

Css文件调用方法分为页面内嵌法和外部调用

页面内嵌法调用：

外部调用: 将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。如下：

6-2 CSS结构化书写

6.2.1派生选择器：

可以使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时也使结构更加的清晰化。          

如：mainMenu ul li {background:url(images/bg.gif;)}

6.2.2辅助图片用背影图处理：

这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰间隔、提醒的图片。将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动。

如：#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}

6.2.3结构与样式分离：

在页面里只写入文档的结构，而将样式写于css文件中，通过外部调用CSS样式表来实现结构与样式的分离。

6.2.4文档的结构化书写

页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。

如：

　  

　　      

• 首页

　　      

• 介绍

　　      

• 服务

　　

/*=====主导航=====*/

#mainMenu {

　　width:100%;

　　height:30px;

　　background:url(images/mainMenu_bg.jpg) repeat-x;

}

#mainMenu ul li {

　　float:left;

　　line-height:30px;

　　margin-right:1px;

　　cursor:pointer;

　　}

　　/*=====主导航结束=====*/

6-3 HACK CSS书写规范

      因为不同浏览器对W3C标准的支持不一样，各个浏览器对于页面的解释呈视也不尽相同，比如IE在很多情况下就与FF存在3px的差距，对于这些差异性，就需要利用css 的hack来进行调整，当然在没有必要的情况下，最好不要写hack来进行调整，避免因为hack而导致页面出现问题。

6.3.1 IE6、IE7、Firefox之间的兼容写法

　　写法一：

　　IE都能识别*;标准浏览器(如FF)不能识别*；

　　IE6能识别*，但不能识别 !important,

　　IE7能识别*，也能识别!important;

　　FF不能识别*，但能识别!important;

　　根据上述表达，同一类/ID下的CSS 　hack可写为：

　　.searchInput {

　　background-color:#333;/*三者皆可*/

　　*background-color:#666　!important; /*仅IE7*/

　　*background-color:#999; /*仅IE6及IE6以下*/

　　}

　　一般三者的书写顺序为：FF、IE7、IE6.

写法二：

IE6可识别“_”，而IE7及FF皆不能识别，所以当只针对IE6与IE7及FF之间的区别时，可这样书写：

　　.searchInput {

　　background-color:#333;/*通用*/

　　_background-color:#666;/*仅IE6可识别*/

　　}

写法三：

　　*+html 与 *html 是IE特有的标签, Firefox 暂不支持。

　　.searchInput {background-color:#333;}

　　*html .searchInput {background-color:#666;}/*仅IE6*/

　　*+html .searchInput {background-color:#555;}/*仅IE7*/

6.3.2屏蔽IE浏览器

select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。

*:lang(zh) select {font:12px !important;} /*FF的专用*/

select:empty {font:12px !important;} /*safari可见*/

IE6可识别：这里主要是通过CSS注释分开一个属性与值，注释在冒号前。

select { display /*IE6不识别*/:none;}

IE的if条件hack写法：

所有的IE可识别：

　 Only IE

　　只有IE5.0可以识别:

　　 Only IE 5.0

　　IE5.0包换IE5.5都可以识别:

　　 Only IE 5.0+

　　仅IE6可识别:

　　 Only IE 6-

　　IE6以及IE6以下的IE5.x都可识别:

　　 Only IE 6/+

　　仅IE7可识别:

　　 Only IE 7/-

6.3.3清除浮动

在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。

select:after {

　　content:”.”;

　　display:block;

　　height:0;

　　clear:both;

　　visibility:hidden;

}

6.3.4鼠标手势

　　在XHTML标准中，hand只被IE识别，当需要将鼠标手势转换为“手形”时，则将“hand”换为“pointer”，即“cursor:pointer;”。

7、CSS性代码缩写

7.1不同类有相同属性及属性值的缩写

对于两个不同的类，但是其中有部分相同甚至是全部相同的属性及属性值时，应对其加以合并缩写，特别是当有多个不同的类而有相同的属性及属性值时，合并缩写可以减少代码量并易于控制。

如：

#mainMenu {
　　background:url(‘../images/bg.gif’);
　　border:1px solid #333;
　　width:100%;
　　height:30px;
　　overflow:hidden;
　　}
　　#subMenu {
　　background:url(‘../images/bg.gif’);
　　border:1px solid #333;
　　width:100%;
　　height:20px;
　　overflow:hidden;
　　}

两个不同类的属性值有重复之处，刚可以缩写为：

#mainMenu,#subMenu {
　　background:url(‘../images/bg.gif’);
　　border:1px solid #333;
　　width:100%;
　　overflow:hidden;
　　}
　　#mainMenu {height:30px;}
　　#subMenu {height:20px;}

7.2同一属性的缩写

同一属性根据它的属性值也可以进行简写。

如：

　.search {
　　background-color:#333;
　　background-image:url(‘../images/icon.gif’);
　　background-repeat: no-repeat;
　　background-position:50% 50%;
　　}
　　.search {
　　background:#333 url(‘../images/icon.gif’) no-repeat 50% 50%;
　　}

7.3内外侧边框的缩写

在CSS中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的，当这四个属性值不同时也可直接缩写。如：

.btn {
　　     margin-top:10px;

　　  margin-right:8px;

　　  margin-bottom:12px;

　   margin-left:5px;　

　   padding-top:10px;　　

padding-right:8px;　

　padding-bottom:12px;　

　padding-left:8px;

　　}

则可缩写为：

.btn {

     Margin:10px 8px 12px 5px;　

　    Padding:10px 8px 12px 5px;　

　}

而如果当上边与下边、左边与右边的边框属性值相同时，则属性值可以直接缩写为两个。

如：

.btn {
　　    margin-top:10px;
　　    margin-right:5px;
　　    margin-bottom:10px;
　      margin-left:5px;
　　}

缩写为：

.btn {margin:10px 5px;}

而当上下左右四个边框的属性值都相同时，则可以直接缩写成一个，如：

.btn {
　          　margin-top:10px;
　　          margin-right:10px;
　　          margin-bottom:10px;
　　          margin-left:10px;
　    　}

缩写为：　.btn{margin:10px;}

7.4颜色值的缩写

当RGB三个颜色值数值相同时，可缩写颜色值代码。如：

　.menu { color:#ff3333;}

　可缩写为:

　.menu {color:#f33;}

8、CSS注释书规范

8.1行间注释

直接写于属性值后面，如：

.search{

　           　    border:1px solid #fff;/*定义搜索输入框边框*/

　　              background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/

　　       }

8.2整段注释

　　分别在开始及结束地方加入注释，如：

/*=====搜索条=====*/

　　.search {

　　           border:1px solid #fff;

　　           background:url(../images/icon.gif) no-repeat #333;

　　}

　　/*=====搜索条结束=====*/