web前端基本开发手册
---------------------------------
一．概况
1.1 WEB 标准
二．实现WEB标准
2.1 XHTML、CSS介绍
2.2 XHTML书写规范
2.2.1 XHTML结构
2.2.2 标签规范
2.3 XHTML常用标签介绍
2.4 CSS书写规范
2.4.1 表命名参考
2.4.2 类/ID命名规范
2.4.3 样式调用
2.4.4 样式简写
2.5 CSS常用属性介绍
2.6 图片规范
2.7 注释规范
2.8 浏览器兼容
一．概况
1.1 WEB 标准
WEB 标准不是一个标准，而是一系列标准的集合。网页主要由三部分组成：结构、表现和行为。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括 CSS，行为标准主要包括对象模型（如 W3C DOM）、ECMAScript 等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的 ECMAScript 标准。
二、实现WEB标准
2.1 XHTML、CSS介绍
可扩展超文本置标语言（eXtensible HyperText Markup Language，XHTML），是一种置标语言，表现方式与超文本置标语言（HTML）类似，不过语法上更加严格。从继承关系上讲，HTML是一种基于标准通用置标语言（SGML）的应用，是一种非常灵活的置标语言，而XHTML则基于可扩展置标语言（XML），XML是SGML的一个子集。XHTML 1.0在2000年1月26日成为W3C的推荐标准。
级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。
2.2 XHTML书写规范
2.2.1 XHTML结构
文档分为head 和body两个部分。
html文档中在head关标签后面一定会跟着body的开标签。html的开标签下面一定跟着head的开标签，body的关标签下面一定是html的关标签，这中间都是不能插入任何东西的。head和body在一个html中有且仅有一个。
在head里面放置的内容是不会再页面里显示的。在页面中显示的内容放在body里。
如下：
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
样式地址、JS地址、样式等
</head>
<body>
浏览器能看到的内容部分
</body>
</html>
2.2.2 标签规范
标签可以分为成对标签，或者是单标签。
成对标签比如 div span ol ul li select option table tr th td dl dt dd em var span等等，而单标签就比较少了 比如 input img br iframe 等。
完整的成对标签如下：<div>这是一个快标签</div> 或者
<ol>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
</ol>；
可以看到每一个标签都有开标前和关标签组成，内容放在开和关标签之间。
而单标签的标签应该这么写：
<br/>
<img src="images/1.gif" alt="图片描述"/>
<input type="button" value="按钮"/> ;
像这样的单标签，是不可能再嵌套任何内容的。而我们把斜线(/）放在标签的后尖括号前面，表示标签结束。这点跟成对标签有很大区别。
所有标签必须合理嵌套
正确的嵌套
<div>
<span>
<var>1111</var>
</span>
</div>
就像一个一个大盒子套了一个小盒子 又套了一个小盒子，当然还可以继续嵌套，看起来十分对称。
不正确的嵌套
<div>
<span>
<var>1111</var>
</div>
</span>
这里的标签是不对称的。你没法一层一层的拆开盒子，这就是错误的。
2.3 XHTML常用标签介绍
1、div标签：块元素。可以将文档分为不同的部分。可以使用class和id属性进一步控制页面表现。div是css布局中使用最多的元素。
2、p标签：块元素，表示一个文本段落，一般用于换行。
3、标题标签：块元素，用来定义文本中的各种标题。从h1至h6有着严格的层级关系。并且每个XHTML上h1元素有且只能使用一次。其中包括一系列的元素：h1，h2，h3，h4 ，h5，h6,其中每个元素都对应有默认的字体样式其代码如下：
<h1>text</h1>
<h2>text</h2>
<h3>text</h3>
<h4>text</h4>
<h5>text</h5>
<h6>text</h6>
4、ul和li标签：块元素，无序列表，详见：http://www.w3school.com.cn/tags/tag_ul.asp
5、ol和li标签：块元素，有序列表，详见：http://www.w3school.com.cn/tags/tag_ol.asp
6、dl、dt、dd标签：块元素，常用于生成类表格别表，dt、dd位于dl内部。
详见：http://bbs.blueidea.com/thread-3023757-1-1.html
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.4 CSS书写规范
2.4.1 表命名参考
驼峰命名法 例：myName
全局样式：global.css
框架布局：layout.css
字体样式：font.css
链接样式：link.css
打印样式：print.css
2.4.2 类/ID命名规范
Container div #container 容器
Layout #layout 布局
Header or banner div #head, #header 页头部分
Footer div #foot, #footer 页脚部分
Navigation list #nav 主导航
Sub-navigation list #subNav 二级导航
Menu #menu 菜单
Sub Menu #submenu 子菜单
Left or right side columns #sidebar_a, #sidebar_b 左边栏或右边栏
Main div #main 页面主体
Tag #tag 标签
Message #msg #message 提示信息
Tips #tips 小技巧
Vote #vote 投票
Friend Link #friendlink 友情连接
Title #title 标题
Summary #summary 摘要
Search input #searchInput 搜索输入框
Search output #search_output 搜索输出和搜索结果相似
Search #search 搜索
Search bar #searchBar 搜索条
Search results #search_results 搜索结果
Copyright information #copyright 版权信息
brand #branding 商标
branding-logo #logo LOGO
Site information #siteinfo 网站信息
Copyright information etc. #siteinfoLegal 法律声明
Designer or other credits #siteinfoCredits 信誉
Join us #joinus 加入我们
Partnership opportunities #partner 合作伙伴
Services #service 服务
Regsiter #regsiter 注册
Arrow arr/arrow 箭头
Little #little 标题
Website map #sitemap 网站地图
List #list 列表
Home page #homepage 首页
Sub page subpage 二级页面子页面
Toolbar #tool, #toolbar 工具条
Next pulls #drop 下拉
Next pulls menu #dorpmenu 下拉菜单
Status #status 状态
常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn”
2.4.3 样式调用
页面内嵌法：就是将样式表直接写在页面代码的head区。
<style type=”text/css”>
body{background:white; color:black;}
</style>
外部样式表调用：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。
<link rel="stylesheet" type="text/css" href="css/style.css" />
在符合web标准的设计中，推荐使用外部调用法，可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。
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-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:10px;
padding-right:8px;
padding-bottom:12px;
padding-left:8px;
}
则可缩写为：
.btn {
Margin:10px 8px 12px 5px;
Padding:10px 8px 12px 5px;
}
而如果当上边与下边、左边与右边的边框属性值相同时，则属性值可以直接缩写为两个，如：
.btn {
margin-top:10px;
margin-right:5px;
margin-bottom:10px;
margin-left:5px;
}
缩写为：
.btn {margin:10px 5px;}
而当上下左右四个边框的属性值都相同时，则可以直接缩写成一个，如：
.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: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;(无)
常用字体： (font-family)一般用Tahoma(英文和数字更好看)、宋体、微软雅黑
背景属性： (background)
色彩
图片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: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表现为：
<img src="images/12090.gif" width="120" height="90" alt=”人物头像” />
宽度、高度和alt属性必须给出。
当插入图片有超级链接时，会默认有蓝色边框，所以我们在页面最开始就应该格式化图片
img{border:0;}
这样就不会有蓝色边框了。
图片背景：
背景图片在CSS表现为：
background:url(../images/dot.gif) left center no-repeat;
2.7 注释规范
XHTML注释：
在实际工作中，有时会出现分不清注释应该在标签之上还是标签之下，为了避免这种情况，注释信息统一写在区域标签开始之前和结束之后，并以“S”或“E”开始，表示区域注释的开始或结束。例：
<!-- =注释内容 start -->
<div>
...
</div>
<!-- =注释内容 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之间的兼容写法：
IE6 IE7特有hack：
写法一：
IE6能识别_， IE7能识别*
根据上述表达，同一类/ID下的CSS hack可写为：
.searchInput {
/* 正常属性 */
* /* 仅IE7 */
_ /* 仅IE6 */
}
一般三者的书写顺序为：正常属性、IE7、IE6.
写法二：
*+html 与 *html 是IE特有的标签, Firefox 暂不支持。
.searchInput {}
*html .searchInput {background-color:#666;}/*仅IE6*/
*+html .searchInput {}/*仅IE7*/
IE6常见bug解决：
双外边距： 某个类有属性 margin-left：10px的时候，IE6下会可能会解析成20px的边距。
这个时候，就要给这个类加属性 _display：inline；
PNG透明：JS解决
标签高度自适应：height:auto; overflow:hidden; zoom:1;
鼠标滑动事件：JS解决
更多IE6 BUG及解决方案
