htmlcss规范.docx

1、htmlcss规范目录1. 概述. 32. 规范化. 32.1规范化简述. 32.2规范化的面向对象. 33. html代码规范33.1htm通用模板33.2met标签说明53.3页面内嵌式样式表和内嵌式javascript说明.63.4xhtml代码规范74. css代码规范.84.1 共享css模板84.2 css代码书写规范115. 网站文件规范145.1html文件规范145.2 css文件规范185.3 html文件命名规范205.4css文件命名规范.215.5 图片及动画命名规范.211. 概述本规范是一个开发规范，本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运

2、用，做一定的变通。但是，请大家千万不要随意更改规范。2规范化2.1 规范化简述强调制作的规范是必要的，因为大型网站项目需要多人的配合协同工作，个性化的东西无法产生良好的聚合效果。规范化不是特殊的个人风格，它可以提高编码工作效率，使代码保持统一的风格，以便于后期的维护。2.2规范化的面向对象网页制作人员及编辑人员、技术开发人员。3. html代码规范3.1 html通用模板Portal说明：1.为DOCTYPE声明，DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。2.为名字空间声明。3.为定义语言编码。4. 为调用外部样式表。5. 为

3、调用外部的javascript文件。3.2 meta标签说明为了能够更好的为搜索引擎准备内容，meta标签采用如下的定义方式，请在页面中据需要，自行添加。 允许搜索机器人搜索站内所有链接。 设置站点作者信息 设置站点版权信息 站点的简要介绍(推荐) 站点的关键词(推荐)3.3页面内嵌样式表和页面内嵌javascript说明请在html中的之间自行添加。 内嵌css代码 内嵌javacript代码备注：如无特殊需要，请尽量避免在html内部添加css和javascript，应统一采用外部链接的方式进行调用。3.4 xhtml代码规范1. 起始标签必须对应相应的结束标签xhtml要求严谨的结构，所

4、有标签必须关闭，如果是单独不成对的标签，在标签最后添加” / ”来关闭。例如：1.成对标签 ,2.不成对标签 , ,2.所有标签的元素和属性名必须采用小写与html不同，xhtml对大小写区分敏感，xhtml要求标签的元素和属性名必须小写,避免大写及大小写夹杂。例如：必须写成, “onMouseOver”必须写成 “onmouseover”3.所有属性必须添加引号例如： 必须写成 4.所有标签必须采用合理嵌套例如： 必须改为 备注：禁止inline级标签嵌套block级标签,如5.所有属性必须赋一个值例如：必须改为6把所有等特殊符号用编码表示 任何小于号（），不是标签的一部分，都必须被编码为&

5、 g t ; 任何与号（&），不是实体的一部分的，都必须被编码为& a m p; 7.img 标签中必须加alt属性例如：备注：除特殊情况外，不要在img标签中添加width和height属性，如有需要，请在css中定义。8.注释例如：4.css代码规范4.1 共享css模板所有html页面都必须调用此共享css文件comon.css文件代码如下：BODYmargin:0;padding:0;color:#000;font-size:0.75em;font-family:arial,verdana,sans-serif;text-align:center;line-height:1.2;bac

6、kground:#ECECEC;TDfont-size:12px;*margin:0;padding:0;DL,DD,DT,OL,UL,LIlist-style-type:none;list-style-image:url();IMGborder:0;.fLfloat:left;.fRfloat:right;.clrclear:both;font-size:0;.dpBdisplay:block;.dpIdisplay:inline;.dpNdisplay:none;.taLtext-align:left;.taRtext-align:right;.taCtext-align:center;4

7、.2 css代码书写规范1 所有css属性和值必须采用小写的形式如：FONT-SIZE:12PX;必须改为font-size:12px;2 所有css值的后面必须加分号结束如：background:#FFF 必须写成 background:#FFF;3除特殊情况外，css代码必须采用简写形式（这样可以节约代码）:如：1.margin-top:5px;margin-left:0;margin-right:5px;margin-bottom:10px;改写为：margin:5px 5px 0 10px;2.padding-top:5px;padding-left:5px;padding-right

8、:5px;padding-bottom:5px改写为：padding:5px;3.background-color:#787878;background-image:url(./images/*.gif);background-repeat ：no-repeat;background-position:left top;改写为background:#787878 url(./images/*.gif) no-repeat left top;备注：常规的简写顺序（必须遵守）Background（背景）：背景颜色、背景图像、背景位置、背景重复 Border（边框）：边框宽度、边框风格、边框颜色bo

9、rder-bottom（底部边框）：底部边框宽度、底部边框样式、底部边框颜色border-left（左侧边框）：左侧边框宽度、左侧边框样式、左侧边框颜色border-right（右侧边框）：右侧边框宽度、右侧边框样式、右侧边框颜色border-top（顶部边框）：顶部边框宽度、顶部边框样式、顶部边框颜色font（字体）：字体、字号、字体样式、字体粗细、字体变体、线高度、字体大小调整、字体拉伸list-style（列表样式）：列表样式图像、列表样式位置、列表样式类型margin（空白）：顶部空白、右侧空白、底部空白、左侧空白padding（间隙）：顶部间隙、右侧间隙、底部间隙、左侧间隙 4定义字

10、体大小时，如果值是0的时候，可以省略单位（px,em,%等），其余情况必须添加相应的单位。5 代码书写格式#mainboxmargin:0;padding:0;width:100px;统一写成#mainboxmargin:0;padding:0;width:100px;6 background-position的值要统一单位如：background-position:left top;background-position:3px 5px;background-position:50% 50%;禁止写成文字和数字同时出现。7 如果css中出现html标签，则html标签必须采用大写的形式如：#

11、main ul li 必须写成 #main UL LI8 颜色代码值必须采用大写的形式，如果两个相邻的字母和数字两两相同，则采用所示形式如：#cdfebc 改写为 #CDFEBC , #FF0000 改写为 #F009 注意A标签在css中的书写顺序A：linkA：visitedA : hoverA : actived5. 网站文件规范5.1 html文件规范 网站采用xhtml + css布局的方式，抛弃传统的表格布局，这样做的目的是为了确保html代码的整洁性，这样更利于弄清代码的结构，使其语义化。（不是不用表格，表格不是用来布局，而是用在相应的数据表格位置） 为了确保网页的可读性，使字体

12、能够根据不同的需要放大缩小，字体统一采用em做单位，下面前给出字体的px值和em值的对应关系：11px- 0.7em12px- 0.75em13px- 0.8em14px- 0.875em15px- 0.95em16px- 1em17px- 1.05em18px 1.125em19px 1.2em20px 1.25em 根据设计的图片，把html代码相应的模块化，也就是说，根据设计中不同的功能模块，把html代码进行细分，在每一块功能区域的最外层用一个div进行嵌套，相应id的值对应独立的css文件，即css文件名为id的值。 排版中我们经常会遇到需要进行首行缩进的处理，不要使用 ； 或者全角

13、空格来达到效果，规范的做法是在样式表中定义 p text-indent: 2em; 然后给每一段加上 标记，注意，请不要省略 结束标记 。 为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用 来人工干预分段，请使用来控制分段（特殊情况除外） 。 不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。 所有的字号都应该用样式表来实现，禁止在页面中出现 标记。 请不要在网页中连续出现多于一个的 ；也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-ind

14、ent, padding, margin,来实现。 中英文混排时，我们尽可能的将英文和数字定义为verdana 和arial 两种字体。 行距建议用百分比来定义，常用的两个行距的值是line-height:1.2/1.5。（特疏情况除外） 。 在编写代码时，请注意使用缩进和添加适当的注释，在每个功能块的上下添加必要的注释，如!nav begin!nav end。代码缩进的时候请使用Tab，避免使用空格进行代码缩进。 除特殊情况外，不要在标签中使用样式，如,应该把样式写在相应的外部样式表中。 如遇到数据表格的时候，请使用table,但table的使用必须遵循语义的标准，表格头部请使用,表格的主题

15、内容请使用表格的尾部请使用,表格的抬头请使用,如为table添加摘要信息，请在table标签内添加summary属性，如.备注：标准的html表格代码如下：使用标准浏览器访问 http:/www. DOMAIN.com/ 的用户逐月上升 浏览器 / 月 2005 / 11 2006 / 04 2006 / 05 总计1,646 ( 98.45% )6,978 ( 99.48% ) 5,366 ( 99.56% ) Internet Explorer1,535 (91.81%)5,905 (86.41%)4,550 (84.42%) 制作页面的导航时，请使用,来进行定义。 如果遇到标题时，请使用

16、h1h6进行定义，避免出现的情况。 在网页上应尽量少使用Java和ActiveX。因为并不是每一种浏览器都需要使用它，只有那些Netscape和Explorer的早期版本的使用者才需要它。另外Mac在处理Java时也存在问题，过分地使用Java，会使Mac崩溃。 如果在页面设计时能够不使用框架就尽可能不使用框架，在使用框架时会产生许多的问题。更重要的是，搜索引擎常常被框架混淆，从而不能收录网站内容，不利网站的推广。 如果可以使用图片或者其他方式替代Flash动画，尽可能不使用Flash动画，因为动画图标比较耗费系统资源，对于使用比较慢的计算机的访问者使网站的操作变得很困难。 图像链接尽量不要设

17、置成Image Map热点链接。 网页的体积是一个很重要的设计因素。在不影响网页整体质量的前提下尽可能把网页做到体积最小，保证用户的快速下载。一个标准的网页应不大于60K，通过56K调制解调器加载不应超过30秒的时间。另外采用页面分块也有利于页面的快速显示。5.2 css文件规范 定义id，class时，请用英文，单词之间避免用空格，连字符，下划线，单词超过2个以上，第二个单词首字母大写，如#leftTitle，.footerNav。 对于每个独立的css文件中，子级元素的定义必须采用子类的定义方式，如#mainNav .btn01,#mainNav DL DT，这样可以避免样式定义的冲突。

18、对于id，class的命名参见如下方式：页头：headerArea登录条：loginbarArea标志：logoArea侧栏：sidebarArea广告：bannerArea导航：navArea子导航：subNavArea菜单：menuArea子菜单：subMenuArea搜索：searchArea滚动：scrollArea页面主体：mainArea内容：contentArea标签页：tabArea文章列表：listArea提示信息：msgArea小技巧：tipsArea加入：joinusArea指南：guideArea服务：serviceArea热点：hotArea新闻：newsArea下载

19、：downloadArea注册：regsiterArea状态：statusArea按钮：btnArea投票：voteArea合作伙伴：partnerArea友情链接：friendLinkArea底部导航：footerArea版权：copyRightArea5.3 html文件命名规范1. 文件名称统一用小写的英文字母、数字和下划线的组合,文件统一以.html为后缀名。2. 文件名称必须全部使用与内容相关的英文单词命名（尽量避免使用汉语拼音），对于一个单词难以表达的，可以考虑用多个单词加下划线（-）连接（不能超过四个单词）命名。所有的名称起始和结尾不能使用下划线（-）。3.如果出现三个或者三个以

20、上的单词来命名时，最关键的单词排在最前面。如：交易市场中产品添加的帮助文件 命名为 help_product_add.html。4. 命名中可以使用公认的单词缩写形式。如：用户注册文件 为 user_reg.html 而不必写成 user_register.html。5. 出现两个或者两个以上文件内容相关或者相似时使用数字进行标注。6. 命名不准出现纯数字纯英文字母，不规则英文缩写，多个单词不用下划线连接等错误。严禁使用汉字对文件命名。以下形式为非法 ：3.html；tt.html；productlist.htmlupdate_pd.html(修改用户密码文件update-pwd.htm 为合

21、法 因为 pwd 是password的缩写)下面以“新闻”（包含“国内新闻”和“国际新闻”）这个栏目来说明 html 文件的命名原则 所有属于“国内新闻”的新闻依次取名为： china_1.html, china_2.html, 所有属于“国际新闻”的新闻依次取名为：internation_1.html, internation_2.html, 如果文件的数量是两位数，请将前九个文件命名为： china_01.html, china_02.html 以保证所有的文件能够在文件夹中正确排序。5.4 css文件命名规范css文件以英文命名，避免使用汉语拼音，因为每个css文件对应html文件中的单独模块，所以css文件以html中id的值作为文件名，这样便于查找，css文件命名时，如果名字由两个或两个以上单词组成，那么从第二个单词开始，首字母大写。样例参见5.2 css文件规范。5.5 图片及动画命名规范1. 名称分为头尾两部分，用小写的英文字母、数字和中横线组合。 头部分表示此图片的大类性质，例如广告、标志、菜单、按钮、图标等等，如无特殊需要，图片应保存为.gif格式 。 一般来说 : a) 放置在页面顶部或尾部的导航、装饰图案等长方形的图片我们取名： bannerb) 放置在页面顶部、