HTML/CSS代码开发规范文档_html开发文档-CSDN博客

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

2-1HTML标记的关闭规范

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

<html >

</html>

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

eg: <p><font>内容</p></font>

正确编码应为：<p><font>内容</font></p>

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

eg:

 <u>和</u>

 <i>和</i>

 各种标题标记，如<h1>…</h1>等

 <a>和</a>

2-2HTML文件头基本标记

①<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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

②<html xmlns="http://www.w3.org/1999/xhtml">

③<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript">　

④<meta name="Robots" content="all">

⑤<meta name="keywords" content="关键词（逗号分隔）">

⑥<meta name="description" content="描述词（逗号分隔）">

<head>

⑦<link href="样式文件名.css" rel="stylesheet" type="text/css" />

⑧<script language="javascript" type="text/javascript" src="JS文件名.js"></script>

<title>页面标题名</title>
　　 </head>

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

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

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

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

⑦CSS样式引用格式

⑧JS引用格式

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

2.1 input标记的属性值规范

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

eg: <input type="text" value="你的值" length="20" >

或者

eg: <input type=’text’ value=’你的值’ length=’20’ >

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

比较常用的标签有 <img src= ’ ’>,<a href=’ ’>链接</a>,<table border =’ ’>等等。

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

eg: <img src=’logo.jpg’ width="50" height="14" alt="驿虎logo图片" />

2-3HTML标记的缩进规范

HTML标记的缩进三点规范：

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

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

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

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

<p>

<table>

<tr>

</tr>

<tr>

<td>

<table>

<tr>

<tr>

</table>

</td>

</tr>

</table>

</p>

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

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

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

CSS样式示代码

</style>

开头：<style type="text/css">

中间： CSS样式示代码

结尾：</style>

eg:示例如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

.csstest{

width:180px;

hight:20px;

color:#ff0;

}

</style>

</head>

<body>

正文部分

</body>

</html>

3-2引入Javascript代码规范

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

<!—

javascript代码

//-->

</script>

开头：<script type="text/javascript">

中间： <!—

javascript样式示代码

//-->

结尾：</script>

eg:示例如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<!--

var a=’1234567’;

alert(a);

//-->

</script>

</head>

<body>

正文部分

</body>

</html>

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文件调用方法分为页面内嵌法和外部调用

页面内嵌法调用：

<!– body { background : white ; color : black ; } –>

</style>

外部调用: 将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。如下： <link rel=”stylesheet” rev=”stylesheet” href=”文件名.css” type=”text/css” media=”all” />

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文档都应采用结构化的书写方式，逻辑清晰易于阅读。

如：

　 <ul>

　　 </ul>

</div>

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

#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可识别：

　<!–[if IE]> Only IE <![end if]–>

　　只有IE5.0可以识别:

　　<!–[if IE 5.0]> Only IE 5.0 <![end if]–>

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

　　<!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>

　　仅IE6可识别:

　　<!–[if lt IE 6]> Only IE 6- <![end if]–>

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

　　<!–[if gte IE 6]> Only IE 6/+ <![end if]–>

　　仅IE7可识别:

　　<!–[if lte IE 7]> Only IE 7/- <![end if]–>

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%;
　　}