htmlcss规范.docx

资源描述

htmlcss规范.docx

《htmlcss规范.docx》由会员分享，可在线阅读，更多相关《htmlcss规范.docx（14页珍藏版）》请在冰豆网上搜索。

htmlcss规范.docx

htmlcss规范

1.概述…………………………………………………………………………….3

2.规范化………………………………………………………………………….3

2.1规范化简述…………………………………………………………………….3

2.2规范化的面向对象…………………………………………………………..3

3.html代码规范…………………………………………………………………3

3.1htm通用模板……………………………………………………………3

3.2met标签说明……………………………………………………………5

3.3页面内嵌式样式表和内嵌式javascript说明………………………….6

3.4xhtml代码规范………………………………………………………………7

4.css代码规范………………………………………………………………….8

4.1共享css模板………………………………………………………………8

4.2css代码书写规范…………………………………………………………11

5.网站文件规范…………………………………………………………14

5.1html文件规范………………………………………………………14

5.2css文件规范……………………………………………18

5.3html文件命名规范………………………………………………20

5.4css文件命名规范…………………………………………….21

5.5图片及动画命名规范…………………………………………..21

1.概述

本规范是一个开发规范，本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通。

但是，请大家千万不要随意更改规范。

2．规范化

2.1规范化简述

强调制作的规范是必要的，因为大型网站项目需要多人的配合协同工作，个性化的东西无法产生良好的聚合效果。

规范化不是特殊的个人风格，它可以提高编码工作效率，使代码保持统一的风格，以便于后期的维护。

2.2规范化的面向对象

网页制作人员及编辑人员、技术开发人员。

3.html代码规范

3.1html通用模板

DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”“http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

//www.w3.org/1999/xhtml”>

Portal

……

说明：

DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”“http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>为DOCTYPE声明，DOCTYPE是documenttype（文档类型）的简写，用来说明你用的XHTML或者HTML是什么版本。

//www.w3.org/1999/xhtml”>为名字空间声明。

3.为定义语言编码。

为调用外部样式表。

为调用外部的javascript文件。

3.2meta标签说明

为了能够更好的为搜索引擎准备内容，meta标签采用如下的定义方式，请在页面中据需要，自行添加。

∙允许搜索机器人搜索站内所有链接。

∙设置站点作者信息

∙设置站点版权信息

∙站点的简要介绍（推荐）

∙站点的关键词（推荐）

3.3页面内嵌样式表和页面内嵌javascript说明

请在html中的之间自行添加。

∙内嵌css代码

……

∙内嵌javacript代码

……

备注：

如无特殊需要，请尽量避免在html内部添加css和javascript，应统一采用外部链接的方式进行调用。

3.4xhtml代码规范

1.起始标签必须对应相应的结束标签

xhtml要求严谨的结构，所有标签必须关闭，如果是单独不成对的标签，在标签最后添加”/”来关闭。

例如：

1.成对标签,

2.不成对标签
,

2.所有标签的元素和属性名必须采用小写

与html不同，xhtml对大小写区分敏感，xhtml要求标签的元素和属性名必须小写,避免大写及大小写夹杂。

例如：

必须写成,“onMouseOver”必须写成“onmouseover”

3.所有属性必须添加引号

例如：

必须写成

除特殊情况外，不要在img标签中添加width和height属性，如有需要，请在css中定义。

3除特殊情况外，css代码必须采用简写形式（这样可以节约代码）:

字体、字号、字体样式、字体粗细、字体变体、线高度、字体大小调整、字体拉伸

4定义字体大小时，如果值是0的时候，可以省略单位（px,em,%等），其余情况必须添加相应的单位。

8颜色代码值必须采用大写的形式，如果两个相邻的字母和数字两两相同，则采用所示形式

∙网站采用xhtml+css布局的方式，抛弃传统的表格布局，这样做的目的是为了确保html代码的整洁性，这样更利于弄清代码的结构，使其语义化。

（不是不用表格，表格不是用来布局，而是用在相应的数据表格位置）

∙为了确保网页的可读性，使字体能够根据不同的需要放大缩小，字体统一采用em做单位，下面前给出字体的px值和em值的对应关系：

∙根据设计的图片，把html代码相应的模块化，也就是说，根据设计中不同的功能模块，把html代码进行细分，在每一块功能区域的最外层用一个div进行嵌套，

∙排版中我们经常会遇到需要进行首行缩进的处理，不要使用；或者全角空格来达到效果，规范的做法是在样式表中定义p{text-indent:

∙为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用
来人工干预分段，请使用

∙不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。

∙请不要在网页中连续出现多于一个的；也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用text-indent,padding,margin,来实现。

∙中英文混排时，我们尽可能的将英文和数字定义为verdana和arial两种字体。

∙行距建议用百分比来定义，常用的两个行距的值是line-height:

∙在编写代码时，请注意使用缩进和添加适当的注释，在每个功能块的上下添加必要的注释，如

∙如遇到数据表格的时候，请使用table,但table的使用必须遵循语义的标准，