书签分享收藏举报版权申诉 / 20

立即下载加入VIP,免费下载

当前位置：首页 > PPT模板 > 可爱清新 > HTMLCSS代码开发规范文档.docx

HTMLCSS代码开发规范文档.docx

文档编号：27192351
上传时间：2023-06-28
格式：DOCX
页数：20
大小：24.01KB

《HTMLCSS代码开发规范文档.docx》由会员分享，可在线阅读，更多相关《HTMLCSS代码开发规范文档.docx（20页珍藏版）》请在冰豆网上搜索。

HTMLCSS代码开发规范文档.docx

HTMLCSS代码开发规范文档

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-1CSS编码要求8

5-2CSS样式表规范8

5-3CSS命名规范9

5-4样式文件命名10

5-5样式文件布局11

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

6-1文件调用方法:

11

6-2CSS结构化书写11

6.2.1派生选择器：

11

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

12

6.2.3结构与样式分离：

12

6.2.4文档的结构化书写12

6-3HACKCSS书写规范13

6.3.1IE6、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文件头基本标记

①

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"

"http:

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

②

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

③

④

⑤

⑥

⑦

⑧

页面标题名

说明:

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

③我们的中文环境中用utf-8编码,一般通常是用GB2312编码的，项目中用utf-8是为了防止编码错误显示和浏览时乱码的现像。

新建文件时文件通常是ANSI或其它格式的,所以编码时也按照该格式的编码,容易导致浏览乱码。

这点要注意检查，可以用记事本将文件另存时,选定utf-8格式保存文件.

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

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

该项为可选的。

⑦CSS样式引用格式

⑧JS引用格式

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

2.1input标记的属性值规范

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

eg:

或者

eg:

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

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

2.3重点说明一下img图片标签，该标签必须加载alt="图片描述文字"。

以便在没有显示图片时，显示文字说明。

eg:

2-3HTML标记的缩进规范

HTML标记的缩进三点规范：

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

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

再下一级则以此类推。

③同一级标记的首字符上下应对齐。

承接来自不同货主的运单。

eg:

下面是两表格嵌套实例

………

……

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

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

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

CSS样式示代码

开头：

中间：

CSS样式示代码

结尾：

eg:

示例如下

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

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

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

在线系统—标题

.csstest{

width:

180px;

hight:

20px;

color:

#ff0;

}

正文部分

CSS

3-2引入Javascript代码规范

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

—

javascript代码

//-->

开头：

中间：

—

javascript样式示代码

//-->

结尾：

eg:

示例如下

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

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

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

在线系统—标题

--

vara=’1234567’;

alert（a）;

//-->

正文部分

4、HTML注释标签

--和-->

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

HTML中使用

—和-->来做注释。

eg：

--描述内容，不会被执行-->

5、CSS编码规范

5-1CSS编码要求

所有的代码小写

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

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

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

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

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

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

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

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

5-2CSS样式表规范

id和class命名采用该版块的英文单词或组合命名，每个单词都是小写，用下划线连接起来，如:

content_main（主要内容区域）

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

使用英文命名原则

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

5-3CSS命名规范

DIV

CSS名称

说明

网站公用相关

Containerdiv

#wrapper

容器

Headerorbannerdiv

#header

页头部分

Mainorglobalnavigationdiv

#main_nav

主导航

Menu

#menu

菜单

SubMenu

#sub_menu

子菜单

Leftorrightsidecolumns

#sidebar

左边栏或右边栏

Maindiv

#main

页面主体

Contentdiv

#content

内容部分

Themaincontentarea

#content_main

主要内容区域

Blockdiv

#block

一块区域

Footerdiv

#footer

页脚部分

Tag

#tag

标签

Message

#msg#message

提示信息

Tips

#tips

小技巧

Vote

#vote

投票

FriendLink

#friendlink

友情连接

Title

#title

标题

Summary

#summary

摘要

Sub-navigationlist

#sub_nav

二级导航

Searchinput

#search_input

搜索输入框

Searchoutput

#search_output

搜索输出和搜索结果相似

Search

#search

搜索

Searchresults

#search_results

搜索结果

Copyrightinformation

#copyright

版权信息

brand

#branding

商标

branding-logo

#logo

LOGO

Siteinformation

#siteinfo

网站信息

Copyrightinformationetc.

#siteinfo_legal

法律声明

Designerorothercredits

#siteinfo_credits

信誉

Joinus

#joinus

加入我们

Partnershipopportunities

#partner

合作伙伴

Services

#service

服务

Regsiter

#regsiter

注册

Status

#status

状态

电子贸易相关

Products

.products

产品

Productsprices

.products_prices

产品价格

Productsdescription

.products_description

产品描述

Productsreview

.products_review

产品评论

Editor'sreview

.editor_review

编辑评论

Newrelease

.news_release

最新产品

Publisher

.publisher

生产商

Screenshot

.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;}–>

外部调用:

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

如下：

6-2CSS结构化书写

6.2.1派生选择器：

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

如：

mainMenuulli{background:

url（images/bg.gif;）}

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

这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰间隔、提醒的图片。

将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动。

如：

#logo{background:

url（images/logo.jpg）#FEFEFEno-repeatrightbottom;}

6.2.3结构与样式分离：

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

6.2.4文档的结构化书写

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

如：

首页

介绍

服务

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

#mainMenu{

　　width:

100%;

　　height:

30px;

　　background:

url（images/mainMenu_bg.jpg）repeat-x;

}

#mainMenuulli{

　　float:

left;

　　line-height:

30px;

　　margin-right:

1px;

　　cursor:

pointer;

　　}

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

6-3HACKCSS书写规范

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

6.3.1IE6、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可识别：

–[ifIE]>OnlyIE

[endif]–>

　　只有IE5.0可以识别:

–[ifIE5.0]>OnlyIE5.0

[endif]–>

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

–[ifgtIE5.0]>OnlyIE5.0+

[endif]–>

　　仅IE6可识别:

–[ifltIE6]>OnlyIE6-

[endif]–>

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

–[ifgteIE6]>OnlyIE6/+

[endif]–>

　　仅IE7可识别:

–[iflteIE7]>OnlyIE7/-

[endif]–>

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:

1pxsolid#333;

　　width:

100%;

　　height:

30px;

　　overflow:

hidden;

　　}

　　#subMenu{

　　background:

url（‘../images/bg.gif’）;

　　border:

1pxsolid#333;

　　width:

100%;

　　height:

20px;

　　overflow:

hidden;

　　}

两个不同类的属性值有

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：: 如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
特殊限制：: 部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
关键词：: HTMLCSS 代码开发规范文档

冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。

关于本文

本文标题：HTMLCSS代码开发规范文档.docx
链接地址：https://www.bdocx.com/doc/27192351.html

HTMLCSS代码开发规范文档.docx

…

热门标签