web前端开发：第一阶段html+css基础知识
web前端开发:第一阶段html+css基础知识
1 HTML入门
1.1 安装工具
Sublime Text 1)编辑器 ——
安装插件:
按Ctrl+`(Esc下方的按钮)调出console ;复制:import urllib2,os;pf=?Package
Control.sublime-package‘;ipp=sublime.installed_packages_path();os.makedirs(ipp) if
notos.path.exists(ipp) else
None;open(os.path.join(ipp,pf),‘wb‘).write(urllib2.urlopen(?;+pf.repla
ce(? ?,‘%20‘)).read())到代码底部命令行中 ;按回车键执行;重启Sublime Text;浏览器 —— Chrome、Safari 、Firefox 、360浏览器、遨游等。
2) 图形工具 —— PhotoShop
3) 版本管理工具 —— TortoiseSVN
SVN是什么,意义何在,
SVN是版本管理工具。当大家都在共同开发一个项目的时候，可以有效避免协作开发中的代码冲突问
题
快递公司问题件快递公司问题件货款处理关于圆的周长面积重点题型关于解方程组的题及答案关于南海问题
;历史版本的保存也使得项目变得有据可查，当项目需要回滚到之前版本的时候，可以轻松的找到代码。此外一些开源项目也在使用SVN，这是一个使协同开发和版本维护变得方便的工具。
4) 环境集成工具 —— WAMP
1.2 创建项目文件夹(名字自起)
(1) 创建html文件 (常起名 index.html，一个项目有多个html文件) 创建项目文件夹
(2)创建css文件夹(用来放css层叠样式文件)
(3)创建images文件夹(用来放网页中需要的图片)
ML介绍 1.3 HT
HTML是用来制作网页的标记语言
HTML是Hypertext Markup Language的英文缩写,即超文本标记语言。
HTML语言是一种标记语言,不需要编译,直接由浏览器执行。
HTML文件是一个文
HTML文件必须使用html或htm为文件名后缀。
HTML是大小写不敏感的,HTML与html是一样的。
HTML是由W3C的维护的。
1.4 前端介绍
前端页面=结构html+样式css+行为js
2 HTML结构
2.1 HTML结构
头部head+身体body
(1)head
<head> 标签用于定义文档的头部，它是所有头部元素的容器。
<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。 文档的头部描述了文档的各种属性和信息，包括文档的标题、 编码格式等;绝大多数文档
头部包含的数据都不会真正作为—— 声明文档编码格式 为 UTF-8
<title> 文档标题 </title> ——— 网页名称
<link rel="stylesheet" href=" 外链样式表地址 "> —— 链接样式表 <style type="text/css"> css样式 </style> —— css样式 <script type="text/javascript"> 定义客户端脚本 </script>
<base href="全站默认地址"/>
<meta> 元素可提供有关页面的元信息(meta-information)，比如针对搜索引擎和更新频度的描述和关键词。
(2)body
<body> 元素定义文档的主体。
<body> 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。) 网页需展示的内容需嵌套在<body>标签中。
2.2 HTML标签
HTML标签是HTML语言中最基本的单位，也是最重要的一部分。浏览器以某种方式显示相应的标签样式。
(1)HTML标签特点
由尖括号包围的关键词，比如 <html>。
通常是成对出现的，比如 <div> 和 </div>。
标签对中的第一个标签是开始标签，第二个标签是结束标签。
开始和结束标签也被称为开放标签和闭合标签。
也有单独呈现的标签，如:<img src="images/1.jpg" />等。
一般成对出现的标签，其 <br/> :换行，空标签
<div> : 无实际意义(通常用作装其他标签的盒子)
<dl>:定义列表(结合dt和dd使用)
<dt>:定义列表中的项目
<dd>:描述列表中的项目
<ol>:有序列表(结合li使用)
<li>:定义列表项。有序列表可以是数字或字母顺序。
<ul> : 无序列表 (结合li使用)
<li>:定义列表项
<table> : 表格(结合tr、th、td使用)
<tr>:定义表格行
<th>:定义表头
<td>:定义表格单元
(3)行属性标签
<span>:无实际意义
<a href="链接地址" title="当前标签中的内容">: 超文本链接
<img src="图片链接" alt="图片说明"> : 为被引用的图像创建占位符
<b>:粗体文本。
<em>:强调文本
<i>:斜体的文本
<strong>: 重要的文本。
<var> :定义变量
<cite> :引用。如引用的书籍或杂志的标题。
<form>: 用于创建供用户输入的 HTML 表单
form 元素包含一个或多个表单元素，比如:button、input、select、textarea等。
<button> : 按钮
<textarea> : 多行的文本输入区域
<input> : 规定用户可输入数据的输入字段。(俗称类型)根据不同的 type 属性，输入字段有多种形态。button 按钮、checkbox复选框、file文件、hidden(隐藏的input)、password密码输入框、radio单选框、reset重置按钮、submit提交按钮、text单行文本输入框。input标签显示的原始标签嵌套原则
a) p不可以嵌套div。
b) a不可以嵌套a。
c) 行属性尽量不要嵌套块属性标签。
(6)块属性标签与行属性标签区别
块属性标签独占一行、支持设置宽高、默认宽度自动充满整行、margin定义四个方向属性值。
行属性标签不独占一行、不支持设置宽高、CSS选择器及优先级
CSS选择器分为标签tag选择器，ID选择器，类选择器，后代(派生)选择器，群组选择器，伪类(a标签\nth-child(n))选择器，通配(*)选择器，子选择器(A>B)，临近选择器(a+b)，CSS属性选择器(input[type=‖button‖])。
ID>class>tag(标签)
混合使用时优先级比较:a，b，c，d(标签，类，ID，style类型选择器)四种等级取值分别为1，10，100,1000。数值越大优先级越高。
注意:
(1)当指向同一个目标选择器的优先级相同时，后面的优先级大于前面的与优先级。
(2)当同一个标签定义多个class名称时，各个类选择器之间的优先级与HTML的排列无
关，而是与CSS文件中各个类选择器的排列有关。
3.3 CSS属性
3.3.1 字体设置
(1)字体系font-family:宋体，黑体，隶书，Arial，sans-serif,Tabhoma。
font-family : 字体1，字体2，字体3，„
中文页面以宋体为首选，其他次之。英文页面以Arial，Tabhoma等字体。中英文结合的最好用英文字体。特殊字体一律用图片。
(2)字体大小
font-size:N px/em/百分数
值可以为绝对的或者相对的。绝对的是将文本设置为指定大小，不允许用户在所有浏览器中改变字体大小。绝对大小确定了输出的物理尺寸。相对大小相对于周围的元素来设置大小，允许用书在浏览器改变文本大小，使用香水来设置字体大小，通过通过像素设置文本大小，可以对文本大小进行完全控制。 网页中最小字体为12px，默认也是12px。
W3C推荐使用em作为尺寸单位。默认情况下1em=16px。
Em的值会相对于父元素的字体大小改变。Em:px/16=em。如:父元素字体大小为20px时，子元素font-size为px/20=em。如果父级字体大小为16px时，子元素font-size为100%，其实际大小为16px。 (3)font-style字体风格
font-style: normal | italic | oblique
Normal:常规字体。Italic:斜体。简单的字体风格，对每个字母的结构有一些小改动。
Oblique:倾斜。正常数值文本的一个倾斜。
(4)font-weight字体粗细设置
font-weight: normal正常 | bold 加粗| bolder 更粗| lighter更细 | number
(5)文本颜色color
color : 颜色值;
颜色可以是一个名称标示的关键字，如 color : red;也可以是一个RGB数字，如color : #ffffff;如果每个参数各自在两位上的数字都相同，那么本单位也可缩写为#RGB的方式，如:#FF8800 可以缩写为 #F80。
color: rgba(1,1,11,0.9);最后一位是透明度设置(取值0-1)，数值越大，透明度越低～
(6)复合字体属性font
使用font作为属性名称，后接各个属性值即可，各个属性值之间用空格分开。通常不采用简写的模式。可以直接加行高。 font: font-style | font-weight | font-size(/line-height)|
font-family ; 行高
(7)文本修饰属性设置text-decoration
text-decoration: none无文本修饰(浏览器默认初始值) | underline 下划线| overline 上划线| line-though 贯穿线/删除线
(8)文本行距属性设置line-height
line-height: normal正常行距 | length;
length : 由浮点数字和单位标识符组成的长度值，允许为负值。设置数值越大，文本段落中间的行距越大。
(9)文本缩进属性设置text-indent
text-indent: length px/em;
em指文字的倍数，允许指定负值。一个em为一个字符。
一个空标签<i>里边的内容</i>text-indent:-999em;页面不显示文本内容。
(10)文本水平对齐设置text-align
text-align: left左对齐| center中间对齐(左右居中) | right右对齐| justify两端对齐文本;
(11)文本垂直对齐设置vertical-align
vertical-align: top (顶部)| bottom(底部) | middle(上下居中对齐); 此属性除了table支持的比较完善其他标签支持的并不是太好，不建议使用此属性，只做了解。
(12)字词间隔属性设置word - spacing:改变字(单词)之间的
标准
excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载
间隔。 word-spacing:
normal(默认) | length;
length : 接受一个正长度值或负长度值。如果提供一个正长度值，那么字词之间的间隔就会增加。设置一个负值，会把它拉近。
(13)字符间隔属性设置letter - spacing:改变字符之间的标准间隔
letter-spacing: normal | length;
length : 接受一个正长度值或负长度值。如果提供一个正长度值，那么字符之间的间隔就会增加。设置一个负值，会把它拉近。
(14)背景颜色属性设置background - color
background-color: red | #ffffff;
(15)背景图片属性设置background-image
background-image: none | url ( url );
None:是无背景图。Url(图片路径)。背景图默认平铺。
(16)背景图重复设置background - repeat
background-repeat: repeat (默认重复)| no-repeat(不重复) | repeat-x(横向重复) | repeat-y(纵向重复);
(17)背景图定位设置background - position
background-position: x轴坐标值 y轴坐标值;
像素值。background-position:10px 30px。
具体的方位。left | right | center | top | bottom 。
百分比。background-position:30% 50%。
(18)背景图滚动设置background - attachment
background-attachment : scroll( 随着页面的滚动轴背景图片将移动，默认值，只针对IE6/7)| fixed(随着页面的滚动轴背景图片不会移动);
(19)背景图简写设置
background : color url( ) position repeat;
改样式为背景设置的简写，其属性值有多个值组成，值与值之间用空格隔开。
3.1.2 伪类 CSS伪类可以用于向某些选择器添加特殊的效果，伪类必须知道某些选择器才能使用，而伪类中最经典的就是a标签的伪类。
<a href=‖#‖ ></a>
关于伪类，大家最熟悉的还是a标签的4个伪类:
:link 有链接属性时。
:visited 链接地址已被访问过。
:hover 鼠标悬停时的样式表属性 :active 被用户激活(在鼠标点击未释放时发生
的事件)
排列顺序LVHA。
4 盒模型
盒模型=.main{margin:10px 20px;}这两个值分别设定类名为main的模块的上下、左右的外边距
3) .main{margin:10px 20px 10px;}第一个值设定上外边距，第二个值设定左右外边距，第三个值设定下外边距
4) .main{margin:10px;}如果就一个值的话，就设定了四个方向的外边距都10px
5) .main{ margin:20px auto;}这样设值的意思是上下两个方位的外边距为20px，左右两个方位的外边距自动适应居中
4.2.2 margin属性的bug
(1)竖向margin的叠加
margin横向上是加法，但在竖向上却会产生叠加现象,并会取上下间距的其大者生效。
(2)IE6下的横向双倍margin bug
IE6会在特定的条件下，将设置的横向margin值变成双倍。条件:
a)元素必须浮动(float);
b)元素必须具有横向margin，margin-left、margin-right
c)元素必须块元素
d)浏览器必须是ie6
4.2 padding
相对于外边距而言，元素也应该具有内边距。 padding-top|left|bottom|right:length;
padding属性定义元素边框与元素内容之间的空白区域。 4.3 border
元素的边框是围绕元素内容和内边距的一条线或多条线 border-top|right|bottom|left:border-width|border-style|border-color; border简写属性，用于把边框的所有属性设置到一个声明中，顺序没有要求。 Solid，dashed，hidden，double„„
4.4 Display
规定元素应该声称的框的类型
display:block|none|inline|table
block:该元素以块属性显示
inline:以行内属性显示
table:以表格的表现显示,经常对应table-cell使用
4.5 怪异模式
4.5.1 怪异模式和标准模式
Width=content+padding+border 总宽度=width+margin
怪异模式是指在IE6及更早的IE版本下盒模型的计算
方法
快递客服问题件处理详细方法山木方法pdf计算方法pdf华与华方法下载八字理论方法下载
:所占空间总宽度等于内容，外边距。
解决办法就是使用hasLayout ，使用Doctype声明。
4.5.2 标准和怪异模式的异同点
相同点:都是由margin ,border,padding,content组成
不同点:计算宽/高度方法的不同，
标准模式下盒子的总宽度是由margin,padding,border,content的相加得来; 怪异模式下:总宽度是由content减去padding、border得来的。
4.5 .3标准模式
占的空间的宽度=内容的宽度content，左右内边距的宽度padding，左右边框的宽度border
，左右外边距的宽度margin
5 CSS布局
Css布局分为float(浮动布局)、position(定位布局)、弹性布局(CSS3)。
5.1 浮动原理:float 先浮后动(水槽原理)
(1)所有的元素都可以浮动
(2)具有float属性的元素在父标签中是不占空间的
(3)float能解决标签之间有间隙的问题
5.1.1 浮动的特性
float 对行内属性标签的影响:float之后能设置width和height属性，并支持margin和padding属性。
float 对块属性标签的影响:在没有设置宽高的情况下浮动后，可视
visitility:visible可视 | hidden 不可视| inherit继承父元素的可视性;
5.1.6 总结:
(1)三个div在一行排列，如何让中间的div的宽度自适应,,,
三个div统一左浮动，给div1设置定宽，高度auto;给div2设置宽auto，高度auto;给div3设置定宽，高度auto;
(2)清除浮动方法
? 空标签清楚浮动法
? 伪类清楚浮动法-兼容IE6/7 .clearfloat:after{ display:block; clear:both;
content:""; visibility:hidden; height:0 } .clearfloat{ zoom:1 }
? 父级定义height法
? 父级定义overflow:hidden
? 父级定义overflow:auto
? 父级也浮动，已浮动制浮动
? 父级定义display:table
? 结尾结尾处加 br标签 clear:both
5.2 定位position
position: absolute 绝对定位 | relative 相对自身定位 | static默认值 | fixed 可定位相对于浏览器窗口的指定坐标 | inherit继承父级定位。
注意: absolute 和relative配合使用， 父标签为相对属性relative 的话，name absolute 则以父标签左上角作为起始位置进行定位。如果父标签没有定义relative，则子标签会以body左上角作为起始位置进行定位。
Fixed定位于相对于浏览器窗口的指定坐标，此元素可以通过四个方向属性来规定，不管窗口是否滚动，元素都会留在那个位置。
Position:absolute
(1)只设置了绝对定位而没有设置定位属性的四个方向值，那么该绝对定位的元素依然遵循其在文本刘中的正常位置，仍然受父级元素位置影响，按照正常的文档流进行布局。只不过现在是从文档流中抽出，其后面的同级元素会忽视其存在，而自动补上去。因为绝对定位的元素是不占文档流的布局空间。
(2)绝对定位会自动把一个元素转换为具有部分块属性的元素。
(3)绝对定位元素会依据其定位基点进行绝对定位时会忽视其定位基点的padding的空间距离。
(4)当一个元素设置为绝对定位后该元素可扩展，便于后期维护，当遇到排版变化时，比较容易维护。
b) 宽度自适应本身就减少了页面的工作量，背景图合并可以和宽度自适应结合在一
块，大大减少了页面数量和图片大小，提升页面的loading速度。
(2)背景图合并原理
把本站用的多张背景图都合并到一张背景图上，利用css中的background-position属性去进行图片的定位。已减少网站http请求次数，好加快浏览器的显示速度。 6 CSS进阶
6.1列表list
CSS列表属性允许设置改变列表项标志，或者通过图像作为列表项标志。
(1)属性设置列表项标记的类型:List-style-type:value;
属性值包括none:无标记;disc:默认，标记为实心圆;square标记是实心方块;decimal
是数字;decimal-leading-zero 0开通的数字标记(01,02„„);low-latin:小写拉丁字母(如:
a、b)。
(2)list-style-image:url();使用一幅图像来替换列表项标记。
(3)list-style-position:value;
Inside列表项目标记放置在文本以table
(1)table:
tr:表格的行
th:表头单元格
td:单元格
2cellpadding:设置单元格边框与单元格里的内容之间的距离
cellspacing:设置单元格间的距离
<table cellpadding=‖0‖ cellspacing=‖0‖></table>
3table合并单元格:对td添加属性。
colspan:跨列
rowspan:跨行
4table-css属性
? 折叠边框 :设置表格的边框是否被合并为一个单一的边框
border-collapse : separate (默认)| collapse(合并间距) ? 单元格间距 :设置分隔单
元格边框的距离
border-spacing : length(x轴) length(y轴)
? 文本上下居中
vertical-align:top | middle | bottom
Border-collapse:可以消除边框间隙，同时合并属性进行样式重置，去掉默认间距。 Table{
Border-collapse:collapse;border-spacing:0; }
Th，td{padding:0;}
6.3 form表单
6.3.1基本代码如下:
<form action=‖‖ method=‖get/post‖ id=‖‖>
单行文本框:<input type=‖text‖ name=‖‖ id=‖‖>
密码框:<input type=‖password‖ name=‖‖ id=‖‖>
上传文件:<input type=‖file‖ name=‖‖ id=‖‖>
单选按钮name值相同时选择是互斥的只能选择一个:
<input type=‖radio‖ value=‖男‖ name=‖name值相同‖>男:
<input type=‖radio‖ value=‖女‖ name=‖name值相同‖>女:
多选框name值相同时可以多选:<input type=‖checkbox‖ name=‖aaa‖ id=‖apple‖>苹果
<input type=‖text‖ name=‖aaa‖ id=‖banana‖>香蕉
<input type=‖text‖ name=‖aaa‖ id=‖watermelon‖>西瓜
按钮:<input type=―button‖ name=‖btn‖ id=‖watermelon‖ value=―按钮‖>
提交按钮:<input type=‖submit‖ id=‖‖ value=―提交‖>
重置按钮:<input type=‖reset‖ id=‖‖ value=―重置‖>
隐藏域:<input type=―hidden‖ id=‖‖ value=―按钮‖>
文本域:<textarea></textarea>
下拉菜单:<select id=‖‖>
<option value=‖1‖>1</option>
<option value=‖2‖>2</option>
<option value=‖3‖>3</option> </select>
按钮:<button></button> </form>
6.3.2 <input>CSS样式
文本输入框:在css中加入body，input{margin:0;padding:0;},各个浏览器的显示效果兼容统一。
多选框:input一个属性checked 即是默认选中的属性。在浏览器兼容的角度上，我们不能设置checkbox的大小和边框，在不考虑欧朋浏览器情况下，通过设置height高度来条件checkbox上下方向的位置。默认情况下，我们更多使用margin，padding。
单选按钮:在name相同的radio中，只能选中一个。
Button使用a标签通过css控制样式来做更漂亮的按钮。
所有类型的input都支持disabled属性，即不可修改。
7 浏览器介绍
7.1 主流浏览器
(1)IE
IE版本众多，现常用的是IE6\IE7\IE8\IE9\IE10.
: -ms-
兼容性 : IE9+ 开始支持css3 和 h5
(2)火狐(firefox)
内核:Gecko
前缀 : -moz-
对css3 和 h5 支持很好
(3)opera
内核:Presto (前)，webkit (现)
(4)前缀 : -o- (前)
- webkit- (现)
(5)谷歌(chrome)
内核:webkit (前)，Blink (未来)
前缀 : -webkit-
(6)遨游
(7)safari(苹果)
内核:webkit
前缀 : -webkit-
7.2 浏览器兼容性问题
不同浏览器对同一段代码的解析效果不同，称为兼容问题。
(1)不同浏览器的标签默认的margin和padding不同,
解决方案:通过群组选择器去掉默认的内外间距。 body,div{margin:0;padding:0;}
(2)块属性标签float后，又有横行的margin情况下，在IE6.0显示margin比设置的大(加倍),
IE6.0bug产生情况是IE6.0下，块属性，float，有横向margin。
问题症状:常见症状是IE6中后面的一块被顶到下一行
解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性，使产生bug的四个条件不能同时具备。
(3)设置较小高度标签(一般小于10px)，在IE6，IE7，遨游中高度超出自己设置高度,
解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
(4)行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
问题症状: IE6里的间距比超过设置的间距
解决方案:在display:block;后面加display:inline;display:table;
(5)图片默认有间距,
解决方案:使用float属性为img布局
(6)a嵌套img时，在不同浏览器会出现不同颜色的边框。
关键是a里面的图片多了border的设置。
解决方案:a下面的img加上border:none;这一属性解决。
(7)标签最低高度设置min-height不兼容
解决方案:如果我们要设置一个标签的最小高度200px，需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}
(8)各种特殊样式的兼容，比如透明度、圆角、阴影等。
(9) 透明度的兼容CSS设置:IE中(0-100)，其他的opcitiy(0-1)
(10)IE6 不支持png-24格式的图片。
解决方法 : 单独图片处理
(11)一个父级标签与几个子级标签嵌套，float父标签不浮动。
父标签是靠子标签撑开高度。
解决方法:
? 在子标签最后清除浮动。
<div class=‖clear‖> </div> .clear(height:0;clear:both;)
? 对父级标签加一个overflow:hidden;具有清除浮动效果。
? 对父标签设置高度。
(12)ul li ,ol li 中的li如果在不浮动的情况下，父级标签又没有设置高度，在IE6.0和7.0中会出现多几个像素的问题。
解决方案:li不设置宽和高。Li里面的标签不能有浮动。
7.3 HACK技术
Hack是对程序或者系统进行非官方的修改，或者非官方的HACK被称为hack。这里说的是css黑客技术，就是指CSS在不同的浏览器下的表现形式的技巧和方法
8 photoshop红绿蓝
8.1 常用快捷键:
文件_存储 ctrl+s
文件+存储为Shift+Ctrl+S
文件_存储为Web和设备所用格式Alt+Shift+Ctrl+S
取消选区:Ctrl+D
撤销命令:Ctrl+Z
撤销多次命令:Alt+Ctrl+Z
调用标尺:Ctrl+R
填充:Alt+Del背景色填充
Ctrl+Del前景色填充
小手工具:当图片大小超过页面可显示区域时，可以用小手进行拖动
快捷键:按住空格
放大缩小工具
放大:Crtl+‖+‖
缩小:Ctrl+―-‖
8.2 PhotoShop面板介绍:导航器面板和图层面板。
(1) 图层面板图层的基本操作和图层的分组
(2) 调整图层的不透明度
(3) 图层的色彩混合模式
(4) 图层的样式
(5) 图层蒙版
9 前端
规范
编程规范下载gsp规范下载钢格栅规范下载警徽规范下载建设厅规范下载
:
9.1 文件相关规范
1、文件名必须由小写字母、数字、下划线_组成
2、文件必须用utf-8编码
3、文件引入可通过外联或内联方式引入:
3.1 外联方式:<link rel=‖stylesheet‖ href=‖„‖ />(类型声明type=‖text/css‖可以忽略)
3.2 内联方式:<style>„</style> (类型声明type=‖text/css‖可以忽略)
4、原则上，不允许在html上直接写样式
5、link和style标签都应该放入head中
9.2 注视规范
1、文件顶部注释(推荐使用)
/*
* @description: xxxxx中文说明
* @author: zhifu.wang
* @update: zhifu.wang (2012-10-17 18:32)
*/
2、模块注释(推荐使用)
/* module: module1 by zhifu.wang */
„
/* module: module2 by zhifu.wang */
模块注释必须单独写在一行
3、简单注释
3.1 单行注释
/* this is a short comment */
单行注释可以写在单独一行，也可以写在行尾
3.2 多行注释
/*
* this is comment line 1.
* this is comment line 2.
*/
多行注释必须写在单独行内
4、特殊注释(推荐使用)
/* TODO: xxxx by zhifu.wang 2012-10-18 18:32 */
/* BUGFIX: xxxx by zhifu.wang 2012-10-18 18:32 */
用于标注修改、待办等信息
5、长度要求:注释中的每一行长度不超过40个汉字，或者80个英文字符
9.3 排版规范
1、一个tab设置为四个空格宽度。
2、规则可以写成单行，或者多行，但是整个文件内的规则排版必须统一。如果是在html中写内联的css，则必须写成单行。
9.4 规则书写规范
(1)规则命名中，一律采用小写加下划线的方式，不允许使用大写字母或 -命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合
(2)不允许通过1、2、3等序号进行命名
(3)避免class与id重名
(4)id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id
(5)class用于标识某一个类型的对象，命名必须言简意赅。
(6)尽可能提高代码模块的复用，样式尽量用组合的方式。
(7)规则名称中不应该包含颜色(red/blue)、定位(left/right)等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名。例如:.red { color: red }(错误).important-news { color : red }(正确)
(8)除了重置浏览器默认样式外，禁止直接为html tag添加css样式设置，例如: div { width:
200px; font-size: 16px;}
9.5 性能优化规范
(1)合并margin、padding、border的-left/-top/-right/-bottom的设置，尽量使用短名称。
(2)选择器应该在满足功能的基础上尽量简短，减少选择器嵌套，查询消耗。但是一定要避
免覆盖全局样式设置。
(3)注意选择器的性能，不要使用低性能的选择器，例如:
a)div > * {}
b)ul > li > a {}
c)body.profile ul.tabs.nav li a {}
(4)禁止在css中使用*选择符
(5)除非必须，否则，一般有class或id的，不需要再写上元素对应的tag，例如:
(6)div#test { width: 100px; }
(7)0后面不需要单位，比如0px可以省略成0，0.8px可以省略成.8px
(8)如果是16进制表示颜色，则颜色取值应该大写。如果可以，颜色尽量用三位字符表示。
例如#AABBCC写成#ABC
(9)如果没有边框时，不要写成border:0，应该写成border:none
(10)尽量避免使用AlphaImageLoader
(11)在保持代码解耦的前提下，尽量合并重复的样式，例如
h1 { color: black; }
p { color: black; }
–>
h1,
p { color: black; }
(12)background、font等可以缩写的属性，尽量使用缩写形式
background: color image repeat attachment position;
(13)font: style weight size/lineHeight family;
9.6 hack使用规范
hack种类:
IE6_ html selector { „ }
IE6/IE7*html selector { „ }
非IE6html>body selector { „ }
非IE6、7、8 !important
hack使用原则:重要原则:尽量少用hack，能不hack坚决不hack，不允许滥用hack。
常用的 CSS 命名
背景图片请合理使用csssprites，按照模块、业务、页面来划分均可
css背景图片的文件类型，请按照以下原则来保存:
如果背景图片有动画，则保存成gif
如果没有动画，也没有半透明效果，则保存成png-8
如果有半透明效果，则保存成png-24
不要在html中加入标签来清理浮动，通过在浮动元素的父元素上添加.clearfix
来清除浮动
为了SEO和页面可用性，请使用text-indent来隐藏文本制作csssprites时，尽量把颜
色相近的图标放在一起，存储为png8格式，存储完
以后还能用一些压缩工具进行无损压缩。
避免过小的背景图片平铺。
10 SEO搜索引擎
1搜索引擎排名:付费排名自然排名
竞价排名花钱越高，排名越靠前，必须基本匹配，付款方式 ，点一下给一次钱。 2搜索
引擎意义:信息搜索者与信息提供者之间的桥梁。
google开创的，两个大学生研究生毕业
论文
政研论文下载论文大学下载论文大学下载关于长拳的论文浙大论文封面下载
。这个桥梁之前用的是黄页。
3搜索引擎优化:
通过总结搜索引擎的排名规律，对网站进行合理优化，使你的网站在百度和Google的排
名提高，让搜索引擎给你带来客户。主要针对自然排名。
4搜索引擎原理:
搜索的时候是按什么排名,
按权重(PR值)
PR 1-10 网页等级
PR 越高，爬虫来的频率越高。
5权重影响
title
discription
h1-h3
a标签锚文本
em
strong
img alt
关键词密度 (7%)
外链、PR值越高访问频率越高(外链方式)
喂爬虫
优化我们的代码、清晰的页面结构
关键词密度(7%)
注意网页跟新频率
7图片搜索
搜索引擎不认识图片，对图片有另一套算法。
靠的主要是alt属性，及图片所在页面的关键词。
根据用户的点击频度。
8 白帽
合法优化:
优化的关键词确实跟你网站实际内容相匹配。
9黑帽
根据以上优化手段推广的关键词与实际网站的词不相匹配，已争取更大的访问量。
浙公网安备 33021202002483