Web前端开发参考手册

admin 管理员组

文章数量: 887021

〈li>列表项一

〈li> 列表项二

1. 列表项三

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

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

;

像这样的单标签，是不可能再嵌套任何内容的。而我们把斜线(/)放在标签的 后尖括号前面，表示标签结束。这点跟成对标签有很大区别。

所有标签必须合理嵌套

正确的嵌套

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

不正确的嵌套

这里的标签是不对称的。你没法一层一层的拆开盒子，这就是错误的。

2.3 XHTML常用标签介绍

1、 div标签:块元素。可以将文档分为不同的部分。可以使用class和id属性 进一步控制页面表现。div是css布局中使用最多的元素。

2、 p标签:块元素，表示一个文本段落，一般用于换行。

3、 标题标签:块元素，用来定义文本中的各种标题。从hl至h6有着严格的层 级关系。并且每个XHTML上hl元素有且只能使用一次。其中包括一系列的元

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

text

text

text

text

text

text

4、 ul和li标签:块元素，无序列表，详见：

5、 和li标签:块元素，有序列表，详见：

6、 dl、dt、dd标签:块元素，常用于生成类表格别表，dt、dd位于dl内部。 详见：

7、 strong标签：内联元素，使文本以粗体显示。

8、 &标签：内联元素，用于超链接（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. 4 CSS书耳规范

2. 4. 1表命名参考

驼峰命名法 例:myName

全局样式:global, css

框架布局：layout, css

字体样式:font, css

链接样式：link, css

扌丁印样式:print, css

2. 4.

2类/ID命名规范

Container div ttcontainer 容器 Layout #layout 布局

Header or banner div #head, ttheader 页头部分 Footer div #foot, iifooter

页脚部分 Navigation list #nav 主导航

Sub-navigation list ftsubNav 一.级导航 Menu #menu 菜单

Sub Menu tisubmenu 子菜单 Left or right side columns #sidebar_a,

#sidebar_b左边栏或右边栏

Main div #main页面主体

Tag #tag 标签

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

Vote #vote 投票

Friend Link itfriendlink 友情连接 Title tttitle 标题

Summary #summary 摘要

Search input ttsearchlnput 搜索输入框 Search output #search_output 搜

索输出和搜索结果相似

Search ttsearch 搜索

Search bar tisearchBar 搜索条 Search results #search_results

Copyright information #copyright 版权信息 brand #branding 商标

branding-logo #1ogo LOGO

Site information #siteinfo 网站信息

Copyright information etc・ #siteinfoLegal 法律声明

Designer or other credits #siteinfoCredits 信誉

Join us tijoinus 加入我们

Partnership opportunities ^partner 合作伙伴

Services #service 服务

Regsiter #regsiter 注册

Arrow arr/arrow 箭头

Little itlittle 标题

Website map #sitemap 网站地图

List ttlist 列表

Home page #homepage 首页

Sub page subpage二级页面子页面

Toolbar #tool, #toolbar 匸具条

搜索结果

Next pulls if drop 下拉

Next pulls menu #dorpmenu 下拉菜单

Status ^status 状态

常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加 以注释。对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大 写：诸如“搜索框”则应命名为“searchinputM、“搜索图标”命名这

''searchicon"、"搜索按钮”命名为"searchBtn"

2. 4. 3样式调用

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

外部样式表调用：将样式表写在一个独立的.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:#333 url(・・/images/icon. gif) no-repeat left

}

颜色值的缩写：

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

.menu { color:#ff3333;}可缩写为：

・

menu {color:#f33;}在CSS中关于内外侧边框的距离是按照上、右、下、左

的顺序来排列的，当这四个属性值

不同时也可直接缩写，如：.btn {

margin-top:10px; margin-right:8px; margin-bottom:12px; margin

left :5px;

padding-top:lOpx; padding-right:8px;

padding-bottom:12px; padding-left:8px;

}

则可缩写为：

・

btn {

Margin:lOpx 8px 12px opx; Padding:lOpx 8px 12px opx; }

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

如：

・

btn {

margin-top：lOpx;

margin-right:5px;

margin-bottom:lOpx; margin-left:5px;

}

缩写为：

・btn {margin:lOpx 5px;}

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

・

btn {

margin-top：lOpx;

margin-right:lOpx; margin-bottom:lOpx; margin-left：lOpx;

}

缩写为：

.btn{margin: 10px;） 一段完整的Css属性编写的顺序为:浮动、宽度、高度

（行高）、内边距、外边距、字体、

背景色、背景图、其他属性。如：.head{

float：left;

width：136px;

height：16px;

padding：lOpx;

margin：lOpx;

font：normal 18px/24px "微软雅黑"；background：#333

url （.. /images/icon, gif） no-repeat left

display：block;

}

2.5 CSS常用属性介绍

字体属性:（font）

大小font-size：只要用数值就可以,单位:PX样式font-style： normal;（正 常）

行高 line-height：单位:PX

粗细 font-weight ： bold;（粗体）normal;（正常）大小写 text-transform：

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

修饰 text-decoration： underline;（下划线）none;（无）常用字体:（fontfamily）—般用Tahoma（英文和数字更好看）、宋体、微软雅黑

背景属性：（background）

色彩 background-color: #FFFFFF;

图片 background-image: url （图片地址）；

重复 background-repeat: no-repeat;

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

background-position: left（水平）top（垂直）；简写方法 background:#000 url

（..） repeat fixed left top;区块属性:（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：width style color;

列表属性：(List-style)

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

定位属性：(Position)

Position： absolute; relative;

overflow用其hidden属性与height：数值 可以防止溢出；用其hidden属性 与

height：autos

zoom： 1(兼容IE6必须要用这个属性)设置自适应高度

2.6图片规范

图片的命名规范：

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

头部分表示此图片的大类性质。例如：放置在页面顶部的广告、装饰图案等长 方形的图片我们取名:banner ;标志性的图片我们取名为：logo ;在页面上位置不固 定并且带有链接的小图片我们取名为button ;在页面上某一个位置连续出现，性 质相同的链接栏口的图片我们取名:menu ;装饰用的照片我们取名：pic ;不带链接 表示标题的图片我们取名:title依照此原则类推。

尾部分用来表示图片的具体含义，用英文字母表示。例如:banner_sohu. gif

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

banner_sohu_on. gif

图片质量：

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

对PG的支持非常不好，兼容性调整的时候乂要分背景PG和插入图片PG,很麻 烦。

图片尺寸：

不同页面，相同栏LI的图片尺寸应按相同比例设计，尺寸不同，比例相同的同

一张图片在浏览器里不会变形和失真太严重。

插入图片：

插入图片在XHTML表现为：

/>

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

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

img{border：0;}

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

图片背景：

背景图片在CSS表现为：

background:url(.. /images/dot. gif) left center no-repeat;

2. 7注释规范

XHTML注释：

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

n

在模块制作中，可能会出现区域中还有区域的情况，为了更好的区分区域之间 的层级，引入了注释层级的概念。区域注释前面的等号表示了当前注释的层级例：

• • •

• • •

• • •

• • •

提示:不建议XHTML里写注释，两个浮动的标签之间添加注释的时候，可能会 引起IE6字符复制掉行的BUG,很难处理，只有两者间的删除注释。如果不添加注 释，页面标签的排列必须层次清楚，排列对称。再辅助火狐插件FireBug的使用， 就能清晰明了的查看网页的布局和层次结构，完全可以不添加注释。

CSS注释：

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

/*二注释内容start */

・ class{

}

・

class{

• • •

}

/*二注释内容end */

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

注释层级的概念。区域注释前面的等号表示了当前注释的层级例：/*二注释内 容

start */

/* =注释内容start */

• • •

/* =二注释内容start */

• • •

/*二=注释内容end */

• • •

/* =注释内容end */

• • •

/*二注释内容end */

不管是CSS注释，还是XHTML最好都用英文。CSS中文注释可能产生CSS失效 的

BUGo

2.8浏览器兼容

当下常用浏览器有：IE6、IE7、IE8、IE9、火狐、谷歌、Safari苹果这儿种。

其中兼容性问题最大的是IE6,其次是IE7。火狐、谷歌、苹果的兼容性已经 非常的好，更多

的是考虑IE6和IE7o

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

IE6 IE7 特有 hack:

写法一：

IE6能识别IE7能识别*

根据上述表达,同一类/ID下的CSS hack可写为:.searchinput {

background-color:#333: /* 正常属性 */

*background-co 1 or :#666; /* 仅 IE7 */

—background-color：#999; /♦仅 IE6 */

}

一般三者的书写顺序为:正常属性、IE7、IE6.

写法二：

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

{background-co1or:#333;}

*html . searchinput {background-color:#666;}/*R IE6*/

♦+html . searchinput {background-co1or:#555;}/*R IE7*/

IE6常见bug解决：

双外边距：某个类有属性margin-left： 10px的时候，IE6下会可能会解析成

20px的边距。

这个时候，就要给这个类加属性.display： inline;

PNG透明:JS解决

标签高度自适应:height:auto; overflow:hidden;

鼠标滑动事件:JS解决

更多IE6 BUG及解决方案

zoom：