文字样式：

         文字颜色：color

         文字大小：font-size:

         文字粗细：font-weight:

         文字斜体：font-style:

         文字字体：font-family:

         文字修饰：text-decoration

         行高：line-height:

         首行缩进：text-indent:

         字符间距：letter-spacing:

         单词间距：word-spacing:

         文字垂直对齐：vertical-align:

盒子模型初步：

         观念：几乎所有标签都可以看过是一个盒子——具有如下特性的矩形区域

         margin：外边距（边界）

         border：边框

         padding：内边距（补白）

         内容部分：可以设置width，height

两种盒子：

         块盒子：可以设置盒子的任何方面的特性（属性），基本表现（特征）是“独占一行”

         行内盒子：除了上下margin，上下padding，宽高之外，其他也可以设置。基本表现是“行内显示直到末尾再自动换行”——类似文字的表现——行内盒子的内容一般就是文字或图片（实际上图片本身就是行内盒子）。

布局初步：

         将网页以逐步细化的方式分割成横向或纵向的几个独立区域。对于纵向区块，则可以使用div盒子自然而成。对于横向区块，则需要使用浮动才能实现。但浮动或导致父盒子失去“正确的高度”（自然高度）——因此又要考虑父盒子高度的修正：

1，   设置固定高度，保证可以包住子盒子

2，   对父盒子设置overflow:hidden样式，可以获得“自然高度”。

3，   在父盒子内部添加一个清除浮动的空div:  <div style=”clear:both;”></div>

浮动作用与特性：

         float:left,  float:right

         作用：使一个块盒子可以跟其他块盒子“并列”放置。

         特性：使其“浮”在别的标签之上，别的标签视它不存在而正常排列出来。

网页布局步骤细化

1、   在“当前版面”分出几个相对独立的区块（区块只分两种情况：纵向与横向）；

2、   如果分出的是纵向区块，则每一个区块写出一个div就可以了（因为div本身就是自占一行的，则自然每个div就是一个纵向的区块了）；

3、   如果分成的是横向区块，则：

a)         同样每个区块首先写出一个div，且每个div都进行浮动（通常是一左一右，或两左一右，或一边倒）；

b)         设置各个div需要的宽度及相关区域（padding，border，margin），但总和不超过当前父盒子的宽度；

c)          有必要也设置各自高度，以及颜色背景或边框，以出现明显的视觉效果，这样有助于排错；

d)         使用如下3个方法之一来保证父盒子可以正确包住其所有子盒子：

1.                          i.              在父盒子内部最后位置添加一个用于清除浮动的空div（<div style=”clear:both”></div>），
2.                         ii.              对父盒子使用overflow:hidden;
3.                       iii.              对父盒子设置一个固定的高度——适用于内部盒子高度固定的情况。

4、   在上述每个分出的区块中，又当做“当前版面”做同样的分析与设计（重复1-3步）

html样式清除（css初始化）

html元素表现的差异性：虽然html被称为一种标准，但其并非是“强制标准”。——则各个浏览器公司做出来的浏览器产品或多或少总有一些差异。

最终，通常的做法是：我们将所有各个浏览器中的html的初始标签全部“清除”——即实现类似没有“表形”功能的html。

比如很多标签有初始的margin，或padding，或字的大小或粗细，斜体等等效果，则我们使用一些css设置将这些初始表现全部“清空”，比如：

         *{

                   font-size:12px;

                   margin:0;

                   padding:0;

                   font-weight:normal;

                   font-style:normal；

                   list-style-type:none;

}

这样之后，所有的每个标签所需要的表现，都需要我们自己来使用css设置。

实际应用中，我们一般都是使用一个通用的css文件来完成此工作。

样式分类

1，   行内样式：

a)         <标签名 其他标签属性…….  style=”css属性1：值1；css属性2：值2； ……  ” >内容部分</标签名>

b)         只对当前标签有效：通常不推荐使用，或偶尔临时使用。

2，   页内样式：

a)         <style>
    选择器1{ ….. }
    选择器2{ ….. }
     。。。。。。。。
</style>

b)         只对当前网页有效：常见。

3，   外部样式：

a)         css文件中：
    选择器1{ ….. }
    选择器2{ ….. }
     。。。。。。。。

b)         网页文件中：
<link rel="stylesheet" type="text/css" href="css文件路径url" />

c)          对所有引入该css的网页有效：常见。

盒子深入

盒子的尺寸构成：

一个盒子的宽度构成：

         左外边距 + 左边框宽 + 左内边距 + width值 + 右内边距 +  右边框宽 + 右外边距

一个盒子的高度构成：

         上外边距 + 上边框宽 + 上内边距 + height值 + 下内边距 +  下边框宽 + 下外边距

margin外边距细化：

         margin还可以细分为4个方向，每个方向都可以单独控制，如下：

         margin-top:        上外边距

         margin-right:     右。。。

         margin-bottom:下。。。。

         margin-left:        左。。。

         margin其实是表示上述4个属性的一个“综合属性”：其实它代表的就是指“一下子设置了4个方向的margin”，其详细使用形式和含义如下：

         margin: 一个值；                ——设置上，右，下，左4个方向均为该值；

         margin：值1  值2；         ——设置上下margin为值1，左右margin为值2；

                   margin:5px  10px;      表示上下margin是5px，左右margin是10px

                   margin:0 auto;             表示上下margin是0，左右margin是auto——auto对标准浏览器就解析为两边相等

         margin：值1  值2  值3；——设置上margin为值1，左右margin为值2， 下margin为值3；

         margin：值1  值2  值3  值4；——分别设置上，右，下，左4个方向的值；

padding内边距细化：

         同上。

border边框细化：

         边框指的是边框线。

线有3个方面的特性：线型，线宽，线色，每个特性都可以单独控制。

         边框也有4个方向，每个方向都可以单独控制。

         于是：

         我们立即就有了12个对边框线的控制属性：

         border-top-style: 顶部边框的线型。常见线型：solid ,  dashed,  dotted

         border-top-width: 顶部边框的线宽；

         border-top-color: 顶部边框的线色；

         border-right-style,  border-right-width, border-right-color:  。。。。。

         。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

         以上就是12个：

         除此之外，我们还有3个设置线的某方面特性的综合属性：

         border-style: 可以使用1-4个值，用来设置4个方向的线的线型，其规则同margin值的设置。

                   比如：border-style:solid dashed;  表示上下边框为实线，左右边框为虚线；

         border-width: 同理，可以设置1-4个值，表示4个方向的线宽。

         border-color：同理。

         还有：4个设置每个方向边框的所有特性的综合属性：

         border-top: 线型  线宽  线颜色；

         border-right: 线型  线宽  线颜色；  

border-bottom: 线型  线宽  线颜色；

border-left: 线型  线宽  线颜色；

最后，一个最大的综合属性：一次性设置4个方向的3个特性：

border: 线型  线宽  线颜色；

盒子还有背景属性。

盒子背景：

背景分两种：

         背景颜色：只能是纯色，全平铺——css3里面已经可以设置过度色。

                   mso-line-height-rule:exactly">         背景图片：需要设置图片路径，还可以设置是否重复（平铺），怎么重复，怎么定位。

                   background-image:url(图片路径);

                   background-repeat: repeat  //   no-repeat  //  repeat-x  //  repeat-y;

                                                        重复 //      不重复                // 仅x方向重复//仅y方向重复

                   background-position: 水平定位方式  垂直定位方式；

                            水平定位方式有： left  //  center  //  right  // 离左边的像素值；

                            垂直定位方式有： top  //  center  //  bottom // 离顶部的像素值；

         背景综合属性：可以一次性设置有关背景的多个数据值：

background：背景色值  背景图值  背景图重复性值  背景图定位值；

         以上4个值，几乎可以任意省略（也就是任意使用其中某些）。

块盒子和行内盒子的真相

其实块盒子和行内盒子的所谓初始表现，并不是什么决定的东西，而只是一个属性的初始值问题：

         对块盒子，其display属性的值默认是block

         对行内盒子，其display属性的值默认是inline；

实际上，我们完全可以将html盒子的初始表现使用该属性来设置其其它值——即块盒子和行内盒子可以相互转换。

         div{ display: inline;}               ——此时div就跟span一样。

         span{ display: block;}   ——此时span就跟div一样。

         display: inline // block  // none: 显示为：行内盒子//块盒子//不显示

布局简述：

         布局就是将“当前区域”进行一定合理划分：

1，   上下结构：直接使用几个独立的盒子，自然而成

2，   左右结构：使用几个独立盒子，浮动使之实现横向排列，并仔细考虑他们的宽度和高度。此时必须再严重考虑他们的父盒子的高度，办法有3：

a)         设定父盒子为固定高度（此时需保证父盒子的高度足够保住子盒子）

b)         设置父盒子的样式为：overflow:hidden;

c)          在父盒子的内部末尾加上一个清除浮动的空div: <div style=”clear:both” ></div>

css初始化：

         <link  ……  href=”css初始化文件” />

样式分类：

         行内样式：<标签  style=”css属性名:值； ……  ” > ….

         内部样式：<style> 选择器{ … }  。。。。。。。 </style>

         外部样式：网页文件中：<link  ……  href=”css文件” />     css文件中：直接写各种选择器。

盒子细化：

         margin-top：5px；

         margin-right：10px；

         margin-bottom:

         margin-left:

         è margin: 可以使用1-4个值。

         padding-top：5px；

         padding-right：10px；

         padding-bottom:

padding-left:

         èpadding: 可以使用1-4个值。
        

         border-top-style； border-top-width；  border-top-color；

         border-right-style； border- right -width；  border- right -color；

border-bottom-style； border- bottom -width；  border- bottom -color；

border-left-style； border- left -width；  border- left -color；

è border-style；  可以设置4个方向的边框的线型，可以使用1-4个值，用法同margin

è border-width:         可以设置4个方向的边框的宽度，同上

è border-color:          可以设置4个方向的边框的颜色，同上

è border-top: 3个值，分别表示顶边框的线型，线宽，线色，这3个值没有顺序问题（随便写）

è border-right,  border-bottom, border-left: 同border-top

è border: …..

背景：

         mso-line-height-rule:exactly">         background-image: url(背景图的路径);

         background-repeat: 设置背景图的重复特性，有：repeat(默认值），no-repeat，repeat-x,  repeat-y

         background-position: 需要两个值：水平位置  垂直位置。

         è background:综合属性可以设置背景的所有特性，包括上述所有。

         一个常见错误：

                   background-image: url( images/abc.gif )  no-repeat  center center;

                   ——background-image是独立属性，只能设置背景图，不能设置其他值了。

块元素和行内元素的转换：

         display: inline;     ——元素就“变”为行内元素了

         display:block;      ——元素就“变”为块元素了

列表样式

         列表样式可以设置其列表符号，列表图片（代替列表符号），列表符号的位置。

         list-style-type: 设置列表符号，可以是我们之前学的无序列表符或有序列表符。

         list-style-image:设置列表的图片（此时list-style-type自动就无效了，被代替了）

         list-style-position: 指将列表符放在li的里面还是外面：outside(外面，默认值），inside(里面)

         è list-style: 这是综合属性，可以设置上述几个。

定位属性：

定位就是指把元素（标签）放在哪个位置。

实际上，每个元素都有个定位属性：position。其有4个值：

1，   position:static                ——静态定位；——所有元素的初始定位方式就是静态（没有额外使用position或浮动的时候）

2，   position:relative;  ——相对定位：其实就是指一个元素在其父盒子中本来该放的位置（静态位置）的一个相对值（错位值）。必须使用left和top配合来设置该值。

a)         举例：position:relative; left:10px; top:15px;

3，   position:absolute;          ——绝对定位；指该元素相对于其上级具有非静态定位的元素的一个绝对位置。如果上级没有非静态定位设置，则会相对网页主体（html标签）。常常绝对定位就是用于在整个网页上进行“绝对位置设定”——就是相对网页主体来说。

4，   position:fixed;                ——固定定位；有点类似绝对定位，但其是相对于整个“可视窗口”来设置的定位，（绝对定位是相当于网页的版面的绝对值）。固定定位的盒子是以“窗口”为参照系，而绝对定位和相对定位的盒子是以网页为参照系。

标准流与非标准流：

         流：水流的流——所有“水”（物体）往一个方向“流过去”——挤压。

         标准流：就是原始的html标签在网页中的原始表现——在遵循块元素和行内元素的基础上，全都往“右上角”挤靠过去。

         非标准流：使用position的非静态定位方式影响的元素位置，或者使用浮动而影响的元素的位置。

css优先级：

基本优先级：

         !important 〉  行内样式  > id选择器  > 类选择器|伪类选择器  > 标签选择器  >  通用选择器  > 继承属性

综合优先级（只讨论选择器）：

         则下列选择器的优先级如何呢？

         .a1 div{}

         .a1 .a2{}

         .a1 div .a2 span{}

         #d1 div {}

         #d1 .a1 {}

         则他们比较优先级的原则是：

1，   比较最高的优先级选择器的多少，多者胜；

2，   最高的数量相等的时候，比较次高，多者胜；

3，   依次类推

各种居中总结：

前提：　父盒子固定大小（宽高），其里面的“内容”在水平和垂直方向的居中对齐的常见做法：

内部居中：

       水平居中：

       A：“内容”为一行文字或文字性行内元素（span，a，b，u）：在父盒子上设置text-align:center;

       B：“内容”为具有一定形状的行内元素（如img，input，textarea）：同文字（Ａ）

       C：“内容”为块元素： margin:0 auto;

       垂直居中：

       A：“内容”为一行文字或文字性行内元素（span，a，b，u）：在父盒子上设置line-height为父盒子的高度；

       B：“内容”为具有一定形状的行内元素（如img，input，textarea）：同块元素（Ｃ）

       C：“内容”为块元素： 在块元素上设置：position:relative;top为父盒子高度一半;margin-top为该块元素高度一半的负值

外部居中：

       img与textarea与其紧挨着的文字垂直居中对齐：设置其vertical-align:middle;

       input与紧挨着的文字自然垂直居中

列表样式：

         list-style-type: 列表项目符

         list-style-image:列表项目图片（相当于自定义列表项目符）

         list-style-position:设定列表项目符的位置（放在li里面还是外面，默认是外面）

         list-stype:综合属性

定位方式：

         position: static; 静态定位，是默认值。

         position: relative; 相对定位；需要设定left/top值。

         position: absolute; 绝对定位；需要设定left/top值。

         position: fixed; 固定定位；需要设定left/top值。

css优先级：

         !important 〉 行内样式  > id选择器 〉类（伪类）选择器〉标签选择器〉通用选择器〉继承样式。

         对于层级选择器（复合选择器），则他们的优先级由最大的那项的数量决定。如果最大优先级的选择器的数量相同，则再比较下一级的数量，依次类推。

         #id1  .c1  .cc1  div{}

js介绍与基本语法

netscape浏览器发展之初，为了解决一些使用体验的问题，在其中又内嵌了一个脚本语言——livescript

傍上了java这个独领风骚，改名为javascript——ecmascript（其实是一个标准）——jscript（微软的产品）——actionscript（adobe公司，flash中应用）

注释：

         //单行注释

         /*多行注释*/

一条语句使用一个分号结束；

严格区分大小写；

firebug的使用

变量：

         现实世界有各种各样的数据——人名，年龄，学历，学生数，php的学费，北京的人口，。。。。

         软件就是用来描述现实世界的。

         在软件中，我们使用编程语言来实现“现实世界的模拟运行”

         在程序中，我们使用一种称为“变量”的符号来表示现实世界的“数据”

         这些符号我们基本上都是自己去定义其名字——这就是变量名——简称为变量。

         ａ＝１；   ／／用ａ这个“符号”来代表现实世界的数学领域的一个数字“１”。

         变量在计算机中，也可以看做是一个临时存放数据的“内存空间”——

         变量是一个符号，我们用此符号来在内存的“小格子”中“存取数据”。

定义变量的标准形式为：

         var 变量名;        //这表示让计算机给你一块“空间”来供你使用，这块空间的名字是你自己取。

         //var就是定义变量的关键字

往变量（或其所代表的空间）中存入数据的形式为：

         变量名 = 数据值；   //此数据值可以是直接数据，也可以是计算结果的数据，比如1+2

实际常见的情形是：定义变量的时候同时赋值，则其语法是：

         var  变量名 = 数据值；    //此时其实可以省略var这个关键字

         //后面在使用该变量的时候就不要再写var了。举例：

         var i = 10;   　//将10这个数据装到i这个变量所代表的空间中去，此时i中数据就是10

         var k = 20;

         var s = i + k;

         i = i + i;       //特别注意：这里的等号不是数学上的等号，而是叫做“赋值”：将等号右边的“数据值”放到等号左边的变量中去。此时相当于将（１０＋１０）的结果值（２０）装入ｉ这个变量所代表的空间（格子，抽屉，箱子）中去，则此时ｉ中原来的值（１０）就没有了——重要观念一个变量只能装（存储）一个数据！

数据类型：

         var  a = 10;                 //数字数据值

         var  b = “abc”;   //字符串数据值
         var  c = “123”;   //字符串数据值

         甲：某乙，你吃早饭了吗？

         乙：吃了//是//确定//         —— 也可能表示否定的回答：没有吃//没有//

                   ——表示“真假”数据

         甲：你吃什么了？

         已：包子

                   ——表示“字符”数据

         甲：吃了几个？

         乙：12个

                   ——表示“数字”数据

         甲：。。。。

         已：你有完没完？。。。

         描述现实世界，就这3种基本数据类型：

         boolean类型：          布尔类型，此类型表示一个“真假”状态，其数据只有两个：true，false

                   举例：      var v1 = true;

                                     var v2 = false;

         string类型：               字符（串），此类型表示一个“连续的字符”，形式是使用单引号或双引号引起来

                   举例：       var  v3 = “abcde”;

                                     var  v4 = “12345”;

                                     var  v5 = ‘北京’;

                                     var  v6 = ‘北京是个充满梦想的城市’;

                                     var  v7 = “a”;

                                     var  v8 = “”;

                            其数据无穷无尽。。。。。

         number类型：  数字类型，表示一个数学意义上的数字，可以是整数或小数

                   举例：       var s1 = 1;

                                     var s2 = 22.2;

                                     var s3 = 33.3e3;  //这是科学计数法，含义是33.3乘以10的3次方

                            其数据无穷无尽。。。。。

但在计算机世界中，还有其他表示数据的形式上或含义上的类型，有如下：

         特殊数据类型：

                   null类型： 空类型，表示一个变量中的数据是“空”的，即没有任何有效数据，它跟空字符串是不一样。这只是计算机中为了表示“空值”这种状态而“生造”的一个类型，该类型只有一个数据：null

                   undefined类型：未定义类型，表示一个变量的数据还没有“定义”，即没有给值。该类型也只有一个值：undefined.

                   以上两种数据类型不常用，也不推荐“主动使用”，他们只是软件（语言）中表示某个特殊情形的含义上的类型——他们通常在我们程序出错的时候会主动找我们

         复合类型：

                   数组类型：将多个数据放在一起以有序的方式排列成一个整体，此整体就被称为数组类型

                            var a1 = [1,  2.2,  “abc”,  true,  “中国” ];            //a1就是一个变量名（这里也是数组名）

                   对象类型：将多个数据放在一起组成一个整体，此整体就被称为对象类型

                            var  obj = { a:1,  b: 2.2,  cc: “abc”,  vvm: true,  s:”中国” };

                            //obj也是一个变量名，这里也可以说是一个对象名，其中大括号中的a，b，cc等等是这个对象中的各个数据（1，2.2, “abc”）的名字。

基本命名规则

         声明：此命名规则基本上适用以下各种情形（但不限于这些情形）：

js中的：变量名，函数名，

php中：变量名，函数名，类名

html中： name名，id名，  class名

         规则如下：

1，   只能使用字母，数字，下划线这几种字符

2，   只能使用字母或下划线开头

3，   第一个字符之后可以跟0个以上的其他字符。

4，   不能使用系统中的关键字，比如alert，document, window,  if,  else ….

运算符与优先级

数学上，也有运算符，也他们的优先级问题，比如：

         3 + 4x5 - 6/10

算术运算符：

         加： +

         减： -

         乘： *

         除： /                注意：这个除号基本上跟我们数学上的除法一样，而跟c语言中的“/”号不同。

                   var  v1 = 6 / 2;   //3；

                   var  v2 = 6 / 8；         //0.75;       //c语言中是0。这里不是。

                   var  v3 = 9 / 2;   //4.5;         //c语言中是4

         取余（取模）：  %:  只用于整数数据，表示一个数除以另一数之后的余数，举例：

                   var v1 = 12 % 5;  //结构是2

                   var v2 = 12 % 6;  //0

                   var v3 = 12 % 7;  //5

         还有两个： 自增运算(++)， 自减运算(--)：

         ++运算符是对“自身”变量进行一个自加操作，可以写在变量的前面，也可以写在变量后面。如果自加运算（＋＋）出现在赋值运算（＝）的右边中，那么此时相当于需要做两个运算：自加和赋值，则自加符号的位置就会对赋值的结果又影响：

         ＋＋在变量后：　先赋值，后自加。

         ＋＋在变量前：         先自加，后赋值。

         自减运算（――）是对变量自身减一，其规则同自加运算符。

比较运算符：

         ＞               ：大于

         ＜　 ：小于

         ＞＝ ：大于等于

         ＜＝ ：小于等于

         ＝＝ ：等于

         ！＝ ：不等于
         ===             ：严格等于：只有数据和内容都完全一样的时候才成立（相等）

         !==             ：不严格等于：只要数据和内容有一点点不一样，都算“不严格相等”

比较运算符其实就是比较两个数据（通常是数字，也可以是其他，比如字符串）的大小关系，如果关系成立，则这些运算符的运算结果就是“true”这个布尔变量，否则就是“false”这个布尔变量。

         var a =5;

         var b = 10;

         var c = a > b;       //结果c是 false ，是布尔类型值

         var d = a < b;       //结果d是true；

         var e = a >= 5;     //true

         var f = a <= 5;      //true

         var g = a == 5;     //true, 要理解为：“a等于5”的比较结果是true，然后把true赋值给g

         var h = 5>a;         //false;

但，通常，大多数时候，其实比较运算符并不是在这种场合使用，而是在判断语句中使用，比如：

         if( a > b){…..}

         if ( a >= 5 ) {…..}

         一种特殊情况的比较：

         var  v1 = 1;

         var  v2 = “1”;

         if(v1 == v2 ){…}   //此时是成立的——结果是true，也就是if后面的语句可以执行

         if(v1 === v2){….} //此时是不成立的——结果是false，也就是if后面的语句不会执行

         两种“相等”的辨析：

         ==:  通常被称为是“模糊相等”（数据内容相等），只要两个数据“看起来”相等，就会成立

         ===:  通常被称为“严格相等”，只有两个数据的数据内容和数据类型都一样的时候才成立。

字符串运算符

         字符出只有一种运算： 连接运算，就是将两个字符串“串联在一起”，成为一个“更长的字符串”，其运算符是： +

         那么此时，怎么去区分一个加号（+）到底是算术运算的“加法”还是字符串运算“连接”呢？

         ——区分放很简单： + 两边只要有一个是字符串，就么就必然使用字符串连接运算。如果另一边不是字符串，也会自动将其转换为字符串之后再连接运算。

         var v1 = 1 + 2;                        //3;

         var v2 = “ab” + “cd”;     //”abcd”;

         var v2a = “ab” + “cd” + “efg”;                  //”abcdefg”

         var v3 = “ab” + 2;                   //”ab2”

         var v4 = 2 + “ab”;                   //”2ab”;

         var v5 = 1 + “2”;           //”12”

         var v6 = “1” + “2” + “3”;        //”123”

         var v7 = 1 + 2 + “3”;               //”33”;

         var v8 = 1 + “2” + 3;               //”123”

         document.write(v8);    //输出”123”

         document.write(1 + “2” + 3);         //输出”123”       //这里要理解为：先将括号中的运算做完，在输出此结果

逻辑运算符

首先，要先建立一个观念：逻辑运算符只对两个数据进行运算：true，false，只有3个运算符（&&,  ||  !）。

第一个：逻辑与运算：

         符号：  &&

         含义：  表示两个条件进行“并列”判断，如果两个条件都成立，则表示运算结果是成立的。

                   条件1：穿白衣服的举手：

                   条件2：穿白鞋子的举手：

                   找出：既穿白衣服又穿白鞋子的同学,举手。

         细化：算来算去，其实只有4个可能情况：

                   true  &&  true è true

                   true  &&  false         è false

                   false  &&  true         è false

                   false  &&  false        è false

         总结一句话： 逻辑与运算，只有两个 运算数据 都是true的时候，结果才是true

         则可以做出以下“真值表”——类似99乘法表：

var A = true / false;

var B = true / false;