Web前端开发参考手册.docx

《Web前端开发参考手册.docx》由会员分享，可在线阅读，更多相关《Web前端开发参考手册.docx（17页珍藏版）》请在冰豆网上搜索。

Web前端开发参考手册

Web前端开发参考手册

WEB前端开发参考手册

概况

一（

1.1WEB标准

实现WEB标准二（

2.1XHTML、CSS介绍2.2XHTML书写规范

2.2.1XHTML结构

2.2.2标签规范

2.3XHTML常用标签介绍2.4CSS书写规范

2.4.1表命名参考

2.4.2类/ID命名规范

2.4.3样式调用

2.4.4样式简写

2.5CSS常用属性介绍

2.6图片规范

2.7注释规范

2.8浏览器兼容

一（概况

1.1WEB标准

WEB标准不是一个标准，而是一系列标准的集合。

网页主要由三部分组成:

结构、表现和行为。

对应的标准也分三方面:

结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3CDOM）、ECMAScript等。

这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（EuropeanComputerManufacturers

Association）的ECMAScript标准。

二、实现WEB标准

2.1XHTML、CSS介绍

可扩展超文本置标语言（eXtensibleHyperTextMarkupLanguage，XHTML），是一种置标语言，表现方式与超文本置标语言（HTML）类似，不过语法上更加严格。

从继承关系上讲，HTML是一种基于标准通用置标语言（SGML）的应用，是一种非常灵活的置标语言，而XHTML则基于可扩展置标语言（XML），XML是SGML的一个子集。

XHTML1.0在2000年1月26日成为W3C的推荐标准。

级联样式表（CascadingStyleSheet）简称“CSS”，通常又称为“风格样式表（StyleSheet）”，它是用来进行网页风格设计的。

比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。

通过设立样式表，可以统一地控制HTML中各标志的显示属性。

级联样式表可以使人更能有效地控制网页外观。

使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。

2.2XHTML书写规范

2.2.1XHTML结构

文档分为head和body两个部分。

html文档中在head关标签后面一定会跟着body的开标签。

html的开标签下面一定跟着head的开标签，body的关标签下面一定是html的关标签，这中间都是不能插入任何东西的。

head和body在一个html中有且仅有一个。

在head里面放置的内容是不会再页面里显示的。

在页面中显示的内容放在body里。

如下:

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

";>

样式地址、JS地址、样式等

浏览器能看到的内容部分

2.2.2标签规范

标签可以分为成对标签，或者是单标签。

成对标签比如divspanolulliselectoptiontabletrthtddldtddemvarspan

等等，而单标签就比较少了比如inputimgbriframe等。

完整的成对标签如下:

1. 列表项一
2. 列表项二
3. 列表项三

可以看到每一个标签都有开标前和关标签组成，内容放在开和关标签之间。

而单标签的标签应该这么写:

;

像这样的单标签，是不可能再嵌套任何内容的。

而我们把斜线（/）放在标签的后尖括号前面，表示标签结束。

这点跟成对标签有很大区别。

所有标签必须合理嵌套

正确的嵌套

就像一个一个大盒子套了一个小盒子又套了一个小盒子，当然还可以继续嵌套，看起来十分对称。

不正确的嵌套

这里的标签是不对称的。

你没法一层一层的拆开盒子，这就是错误的。

2.3XHTML常用标签介绍

1、div标签:

块元素。

可以将文档分为不同的部分。

可以使用class和id属性进一步控制页面表现。

div是css布局中使用最多的元素。

2、p标签:

块元素，表示一个文本段落，一般用于换行。

3、标题标签:

块元素，用来定义文本中的各种标题。

从h1至h6有着严格的层级关系。

并且每个XHTML上h1元素有且只能使用一次。

其中包括一系列的元素:

h1，h2，h3，h4，h5，h6,其中每个元素都对应有默认的字体样式其代码如下:

text

text

text

text

text

text

4、ul和li标签:

块元素，无序列表，详见:

5、ol和li标签:

块元素，有序列表，详见:

6、dl、dt、dd标签:

块元素，常用于生成类表格别表，dt、dd位于dl内部。

详见:

7、strong标签:

内联元素，使文本以粗体显示。

8、a标签:

内联元素，用于超链接（herf属性）和设置内部文档书签（ID或Name属性）。

9、em标签:

内联元素，显示效果为文本斜体。

10、span标签:

内联元素，用来区分文本中的一个部分。

11、br标签:

使文本换行。

12、img标签:

内联元素，用来插入图像文件，当使用img元素时候，其alt属性必须加上，属性内容将在图片不能加载的时候显示。

13、label标签:

触发鼠标事件，当鼠标事件作用于该元素时，也作用于相对应的input标签。

14、input标签:

根据不同的type属性值，可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

用于获取提交的数据。

当input标签为单选按钮和复选框时，浏览器的兼容性比较差，需要细心调整。

15、select和option标签:

下拉列表，option位于select内部。

16、textarea标签:

文本区域，用于输入多行文本文字。

17、table，tr，th，td标签:

表格，不推荐使用。

2.4CSS书写规范

2.4.1表命名参考

驼峰命名法例:

myName

全局样式:

global.css

框架布局:

layout.css

字体样式:

font.css

链接样式:

link.css

打印样式:

print.css

2.4.2类/ID命名规范

Containerdiv#container容器Layout#layout布局

Headerorbannerdiv#head,#header页头部分Footerdiv#foot,#footer页脚部分Navigationlist#nav主导航

Sub-navigationlist#subNav二级导航Menu#menu菜单

SubMenu#submenu子菜单Leftorrightsidecolumns#sidebar_a,#sidebar_b左边栏或右边栏

Maindiv#main页面主体

Tag#tag标签

Message#msg#message提示信息Tips#tips小技巧

Vote#vote投票

FriendLink#friendlink友情连接Title#title标题

Summary#summary摘要

Searchinput#searchInput搜索输入框Searchoutput#search_output搜索输出和搜索结果相似

Search#search搜索

Searchbar#searchBar搜索条Searchresults#search_results搜索结果Copyrightinformation#copyright版权信息brand#branding商标

branding-logo#logoLOGO

Siteinformation#siteinfo网站信息

Copyrightinformationetc.#siteinfoLegal法律声明

Designerorothercredits#siteinfoCredits信誉

Joinus#joinus加入我们

Partnershipopportunities#partner合作伙伴

Services#service服务

Regsiter#regsiter注册

Arrowarr/arrow箭头

Little#little标题

Websitemap#sitemap网站地图

List#list列表

Homepage#homepage首页

Subpagesubpage二级页面子页面

Toolbar#tool,#toolbar工具条

Nextpulls#drop下拉

Nextpullsmenu#dorpmenu下拉菜单

Status#status状态

常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。

对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写:

诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn”

2.4.3样式调用

页面内嵌法:

就是将样式表直接写在页面代码的head区。

body{background:

white;color:

black;}

外部样式表调用:

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

标准的设计中，推荐使用外部调用法，可以不修改页面只修改.css文件而改变在符合web

页面的样式。

如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。

2.4.4样式简写

公共样式的缩写:

当两个或多个类有想通的属性值时，可以对属性值进行缩写。

如:

.search{

padding-left:

30px;

height:

35px;

color:

#fff;

}

.foot{

padding-left:

30px;

height:

15px;

color:

#fff;

}

缩写为:

.search,.foot{

padding-left:

30px;color:

fff;

}

.search{height:

35px;}.foot{height:

15px;}同一属性根据它的属性值也可以进行简写，如:

.search{

background-color:

#333;background-image:

url（../images/icon.gif）;

background-repeat:

no-repeat;

background-position:

left;}

缩写为:

.search{

background:

#333url（../images/icon.gif）no-repeatleft

}

颜色值的缩写:

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

如:

.menu{color:

#ff3333;}可缩写为:

.menu{color:

#f33;}在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:

10px8px12px5px;Padding:

10px8px12px5px;}

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

如:

.btn{

margin-top:

10px;

margin-right:

5px;

margin-bottom:

10px;margin-left:

5px;

}

缩写为:

.btn{margin:

10px5px;}

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

.btn{

margin-top:

10px;

margin-right:

10px;margin-bottom:

10px;margin-left:

10px;

}

缩写为:

.btn{margin:

10px;}一段完整的Css属性编写的顺序为:

浮动、宽度、高度（行高）、内边距、外边距、字体、

背景色、背景图、其他属性。

如:

.head{

float:

left;

width:

136px;

height:

16px;

padding:

10px;

margin:

10px;

font:

normal18px/24px"微软雅黑";background:

#333url（../images/icon.gif）no-repeatleft

display:

block;

}

2.5CSS常用属性介绍

字体属性:

（font）

大小font-size:

只要用数值就可以，单位:

PX样式font-style:

normal;（正常）

行高line-height:

单位:

PX

粗细font-weight:

bold;（粗体）normal;（正常）大小写text-transform:

capitalize;（首字母大写）uppercase;（大写）none;（无）

修饰text-decoration:

underline;（下划线）none;（无）常用字体:

（font-family）一般用Tahoma（英文和数字更好看）、宋体、微软雅黑

背景属性:

（background）

色彩background-color:

#FFFFFF;

图片background-image:

url（图片地址）;

重复background-repeat:

no-repeat;

滚动background-attachment:

fixed;（固定）scroll;（滚动）很少用位置background-position:

left（水平）top（垂直）;简写方法background:

#000url（..）repeatfixedlefttop;区块属性:

（Block）

字间距letter-spacing:

normal;数值

对齐text-align:

left;（左对齐）right;（右对齐）center;（居中）缩进text-indent:

数值em;一般一段话前面缩进为2em,表现形式为缩进两个汉字

垂直对齐vertical-align:

baseline;（基线）sub;（下标）super;（下标）top;text-top;

middle;bottom;text-bottom;

显示display:

block;（块）inline;（内嵌）当两个属性同时用着的时候可以用display:

inline-block解决。

方框属性:

（Box）

浮动float:

left左浮right右浮none清除浮动宽度width:

数值

高度height:

数值

内边距:

padding上右下左

外边据:

margin上右下左

边框属性:

（Border）

border-style:

dotted;（点线）dashed;（虚线）solid（实线）;border-width:

;边框宽度

border-color:

#;

简写方法border:

widthstylecolor;

列表属性:

（List-style）

类型list-style用值none格式化li

定位属性:

（Position）

Position:

absolute;relative;

overflow用其hidden属性与height:

数值可以防止溢出;用其hidden属性与height:

auto、

zoom:

1（兼容IE6必须要用这个属性）设置自适应高度

2.6图片规范

图片的命名规范:

名称分为头尾两两部分，用下划线隔开。

头部分表示此图片的大类性质。

例如:

放置在页面顶部的广告、装饰图案等长方形的图片我们取名:

banner;标志性的图片我们取名为:

logo;在页面上位置不固定并且带有链接的小图片我们取名为button;在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名:

menu;装饰用的照片我们取名:

pic;不带链接表示标题的图片我们取名:

title依照此原则类推。

尾部分用来表示图片的具体含义，用英文字母表示。

例如:

banner_sohu.gif

有onmouse或hover效果的图片，两张分别在原有文件名后加"_on"和"_off"命名。

如:

banner_sohu_on.gif

图片质量:

图片质量与图片格式有很大的关系，尽量用gif图，并且在制作效果图时就应少用阴影、半透明效果图，这样可以减少图片数量。

PNG图片尽量不要用，IE6下对PNG的支持非常不好，兼容性调整的时候又要分背景PNG和插入图片PNG，很麻烦。

图片尺寸:

不同页面，相同栏目的图片尺寸应按相同比例设计，尺寸不同，比例相同的同一张图片在浏览器里不会变形和失真太严重。

插入图片:

插入图片在XHTML表现为:

宽度、高度和alt属性必须给出。

当插入图片有超级链接时，会默认有蓝色边框，所以我们在页面最开始就应该格式化图片

img{border:

0;}

这样就不会有蓝色边框了。

图片背景:

背景图片在CSS表现为:

background:

url（../images/dot.gif）leftcenterno-repeat;

2.7注释规范

XHTML注释:

在实际工作中，有时会出现分不清注释应该在标签之上还是标签之下，为了避免这种情况，注释信息统一写在区域标签开始之前和结束之后，并以“S”或“E”开始，表示区域注释的开始或结束。

例:

--=注释内容start-->

--=注释内容end-->

在模块制作中，可能会出现区域中还有区域的情况，为了更好的区分区域之间的层级，引入了注释层级的概念。

区域注释前面的等号表示了当前注释的层级例:

--=注释内容start-->

...

--==注释内容start-->

...

--===注释内容start-->

...

--===注释内容end-->

...

--==注释内容end-->

...

--=注释内容end-->

提示:

不建议XHTML里写注释，两个浮动的标签之间添加注释的时候，可能会引起IE6字符复制掉行的BUG，很难处理，只有两者间的删除注释。

如果不添加注释，页面标签的排列必须层次清楚，排列对称。

再辅助火狐插件FireBug的使用，就能清晰明了的查看网页的布局和层次结构，完全可以不添加注释。

CSS注释:

在实际工作中，有时会出现分不清注释应该在标签之上还是标签之下，为了避免这种情况，注释信息统一写在区域标签开始之前和结束之后，并以“S”或“E”开始，表示区域注释的开始或结束。

例:

/*=注释内容start*/

.class{

...

}

.class{

...

}

/*=注释内容end*/

在模块制作中，可能会出现区域中还有区域的情况，为了更好的区分区域之间的层级，引入了

注释层级的概念。

区域注释前面的等号表示了当前注释的层级例:

/*=注释内容start*/

...

/*==注释内容start*/

...

/*===注释内容start*/

...

/*===注释内容end*/

...

/*==注释内容end*/

...

/*=注释内容end*/

不管是CSS注释，还是XHTML最好都用英文。

CSS中文注释可能产生CSS失效的BUG。

2.8浏览器兼容

当下常用浏览器有:

IE6、IE7、IE8、IE9、火狐、谷歌、Safari苹果这几种。

其中兼容性问题最大的是IE6，其次是IE7。

火狐、谷歌、苹果的兼容性已经非常的好，更多

的是考虑IE6和IE7。

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

IE6IE7特有hack:

写法一:

IE6能识别_，IE7能识别*

根据上述表达，同一类/ID下的CSShack可写为:

.searchInput{

background-color:

#333;/*正常属性*/

*background-color:

#666;/*仅IE7*/

_background-color:

#999;/*仅IE6*/

}

一般三者的书写顺序为:

正常属性、IE7、IE6.

写法二:

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

.searchInput{background-color:

#333;}

*html.searchInput{background-color:

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

#555;}/*仅IE7*/

IE6常见bug解决:

双外边距:

某个类有属性margin-left:

10px的时候，IE6下会可能会解析成20px的边距。

这个时候，就