基本内容：

html超文本标记语言。

页面组成：

html>//版本声明

//万国码——gb1312解决中文乱码

</b><b>标题//标题内容，不可以和万国码调换顺序

//关键字，

//描述，搜索时出现在搜索页面的详情

一．行标签和块标签

html标签分为块和行标签

块标签（独占一行）（7个）

1iv：没有语意，主要用来布局，可以放入行标签或者块标签

2.h1—h6：一级标签，字体最大，六级字最小，在其中嵌套div不推荐使用

3.ul：无序列表，ol：有序列表。其中要嵌套li。只能出现li，不能写div。在li中都可以嵌入。ul和ol的第一级子元素只能是li

4.]dl：解释说明

标题

解释标题

dl中的第一级子元素只能是dt和dd。dt中不能包含块标签，dd中可以包含任意嵌套

5.p：定义段落，不能嵌套div等其他，除br外

6.table

7.br：换行

style里写属性，用“”框起来。

行标签（在一行显示）在行内显示，不能设置宽高，img、input和textarea除外。（9）行标签可以嵌套行标签，不能嵌套块标签。

特殊的：p、h1-h6、dt不能嵌套块标签。必要时可以用a来嵌套div实现点击块的跳转

1.[span：无实意，随便写内容，类似div。span中可以嵌套span。

2.a：超链接，写网址或者本地的页面。../跳出当前文件夹找，nn/进去某个文件夹找（nn文件夹的名字）

target=“blank”，新建一个页面加载链接。self是在原来页面上加载链接。

a的锚点设置：链接到页面的某个部位。在下面内容的id中写入，在a中的href要写成#id，要和上面的id一致。

3.img：插入图片。不在同一文件夹下，需要按照a中的寻找规则在图片名字前加上名字或者../也可以用网上的图片。找到网络上的所需图片的路径，粘贴。alt：在图片不能正常显示时，所显示的备用内容。title：在鼠标放在图片上的时候显示的文字。

4.var/em

:斜体效果。var标记变量，em标记重点，起强调作用，但是偏重于顺序阅读。

5.strong：加粗效果，起强调作用，但偏重于无顺序。

6.textarea：多行文本框，cols属性因为存在浏览器的兼容问题，直接使用width属性。

7.[select：下拉列表。中间要写option，只能写option。

在选择前的默认值：在select中加上selected：“selected”用于选中默认的选项。

8.input：text：明文输入

password：密码

value：默认值，会显示在页面上

button：普通按钮，

submit：提交数据，

checkbox：多选，正常使用时，name也要保持一致。在选择前默认选中某一个：在后面加上checked：“checked”。

radio：单选，其中的name属性必须一致radio。

label：点文字也可以勾选

file：上传文件。

reset：重置，把已经写入的内容清空。

hidden：隐藏，有默认值，提交时会发送给后台。在页面上看不到效果。

img：可以以图片来替代

在input中输入时，可以用outline来取消点击时的外边框。

美国for要和id一致，label嵌套在input外

特殊符号

空格： 大于：>小于：<引号："版权号：©

补充：

selected针对select用于选中默认的选项

checked针对check用于选中默认的选项

label：点文字也可以勾选

for要和id一致，label嵌套在input外

二．表单 表格 书写规范

1.表单form（特殊块标签）textarea，select，input

method：发送方式

action：提交地址

表单中的提交按钮必须用submit

2.iframe：引用网页。在页面中直接在框里运行输入的网址。frameborder的值只有1/0两种。可以链接本地或者外部网址。

3.table：tr-行th-表头（加粗）td-列caption-表头标题

边框属性border=“n”

cellspacing：消除单元格之间的缝隙

cellpadding：单元格内容与单元格边框的内边距

style=“border-collapse：collapse”：合并边框

简写方式：tr*n>td*m按Tab键。

colspan：跨列，后面的数字跨几列写几。

rowspan：跨行，后面的数字跨几列写几。还需要删除多余的列或行

table的优化thead，tbody，tfoot。写的时候先th，tf，tb

注意书写规范！！！注意换行，标签缩进，减少字符，属性不为空，常加注释，英文书写，合理嵌套,不留多余空白。

SEO搜索引擎优化

合理利用搜索引擎重视的标签

（title，strong，h1-h3，a，em，img&alt）

三．css入门

css增加属性：

cursor：pointer。手的形状/ move。可以移动的十字箭头

web的标准构成：HTML（结构）.CSS（样式）.JS（行为）

1.css引入方法（层叠样式表）

外部，头部，标签内引入

外部引入：link，在href中写文件名。@import：导入样式，兼容性不好。不推荐使用。

特点：一个css可以控制多个页面。便于改版。减少代码量，使其简洁规范。有效利用缓存机制。缺点：相对于单页有垃圾代码。外部引入的会给服务器造成请求压力。常用于访问大量的页面。

头部引入：在head中加style，在其中写要控制的内容。

特点：速度快，没有服务器请求压力。相对于外部引入单页代码量少。 缺点：不易于改版。代码较乱，不易于前后台沟通。常用于访问量大的网页百度新浪网易等。

标签内引入：在标签后直接写style：“ ”在引号中写所需的属性。

特点：优先级最高。缺点：冗余代码多，代码量大，不利于维护。常用于个别属性。

2.基础语法：选择器{属性：值；属性：值；}

3.基本css样式：

color：red；颜色

font-size：1px；字体大小

background-color：red；背景颜色

margin:盒模型的外边距

border：red；边框

width height：15px；长宽

4.css特点：

页面内容与表现形式分离，可以很好地控制页面布局，提高网页加载速度，符合现在w3c的标准，易于维护和改版。

5.css选择器（ID，类，标签名，群组，后代选择器）

ID选择器：优先级最高，页面中不能有相同id出现。不能以数字开头。在所要设置的标签中加入属性id=“n”。引入时#n{样式}

类选择器：优先级仅次于id选择器。在一个页面中可以有多个相同的类名。不能以数字开头。

在所要设置的标签中加入class=“n”。引入时.n{样式}

标签名选择器：同时控制同一标签 使用时：标签名{样式}

群组选择器：把几个id，class名相同的取出来，写在一起。引入时id还用#n，类还是用.n，标签就用标签，中间用，隔开（英文状态下的逗号）。为了节省代码这么用。

后代选择器：使用多个选择器的组合来找到具体

从最外层的父级一直写到需要控制的那一个停止。

优先级：标签内样式>id>class>标签名

权重值：标签：1，类：10，id：100，可以在无法判断是计算。

无论多少个标签选择器都比不过一个类选择器

无论多少个类选择器都比不过一个id选择器

无论多少个id选择器都比不过一个标签内引入

不能拿群组和其他的比较

四．文字和背景设置

文字设置（5）

1.文字设置基本命令：font-family：设置字体。后面可以接多种字体，以防之前的字体没有时显示加载后面的字体。建议中文页面以宋体为主，英文页面以Arail/Tahoma。中英混合时主用英文字体。特殊字体用图片。

2.文字大小：font-size：px/百分数/em。浏览器默认16px大小，em：16px=1em。谷歌浏览器中默认字体最小为12px。em的数字是依据父级的大小来变化。

3.字体风格：font-style；normal：常规字体，oblique：斜体，文本原本状态上倾斜。itailc：斜体，将字母的写法改变一些。

4.字体粗细：font-weight；normal/bold/bolder/lighter/number（0-1000之间的整数）。bold和bolder基本没有区别，lighter和原始现实的基本没区别，加数字时写整数。

5.color：字体颜色。单词|RGB。可以简写：减少f和0.

6.字体属性的合写：顺序-font：font-style|font-weight|font-size|font-family.

文本设置（9）

7.文本修饰属性设置：text-decoration：underline(下划线)/none(取消原有的)/line-through(字体上的划线)/overline(上划线)

8.设置行高line-height。可以让单行的文字居中。

9.文本缩进：text-indent。设置时不要固定写多少px，写成不固定的em。单位rem根据根元素(html中的设置)设置的字号，缩进长度。

em和rem的区别。em找父级，rem找html

10.文本水平对齐设置：text-align：left/right/center/justify(两端对齐)。center可以用于标签居中。不可大面积滥用。只对于大部分的行标签有用。

11.文本垂直居中设置：vertical-align:top/bottom/middle；针对于table比较有用。table对该属性的支持性较好，div不支持。

12词间隔和字母间隔：word-spacing：字词之间的间距。用于英文状态。letter-spacing：字字之间的间距，单独的字符。中文状态。

13.字符转换：text-tranform：none/uppercase(全大写)/lowercase(全小写)/capitalize(首字母大写)。用的比较少。

14.处理空白符：white-space:normal/pre(按照编译器中所写入的格式)/nowrap(不让其自动换行)/pre-wrap(留下格式并且自动换行)/pre-line(换行)

15.处理列表ul/ol：list-style-type:属性很多，也可以加自定义的图片—list-style-img-url（图片的路径）。

背景设置（5）

16景颜色：background-color：英文/十六进制。transparent有透明的意思，多用于设置input的框内颜色。

7.背景图片：background-image：none/url（图片路径）

18.背景图重复设置：background-repeat:no-repeat(不重复)/repeat-x(x轴平铺)/repeat-y(y轴平铺)

19.背景图片定位：y轴的正方向是从浏览器的左上角向下的方向，x轴正方向为向右的方向。left right center(相对正中心的位置) top bottom。也可写成百分比background-position_ _两个数字表示横纵坐标，数字可正可负，来显示图片的局部。也可以用百分比来定位，

20.背景图滚动设置：background-attachment：scroll(跟着下拉图片跟着动)/fixed(跟着下拉图片跟着不动)。

21.background的合写形式：color url()position_ _repeat；

注：多张背景图合成时，例如左中右的三张图，要先写左右再写中间。IE9以下的浏览器不支持多张背景图。

五．盒模型

css布局当中html中的元素在浏览器中的解析都可以被看成一个盒子，拥有盒子一样的外形和平面空间。padding：内边距。border：边框。margin：外边距。

可以强制取消浏览器默认加的边框：加载css中—*{margin:0;padding:0;}，其中*是一个通配符，可以选中页面内的所有标签。

1.margin:（外边距）px，%，-x。

分为上下左右:top bottom left right。在竖向时若两个都有，取大的那个值。横向加法计算。对于行标签，margin只对水平方向有作用，竖直方向无用。合写形式顺序：4个—上 右 下左。3个—上 左右 下，在其中将左右的数据改为auto，让浏览器自动生成，对于块标签一定要设置宽度，才可以居中。2个—上下 左右。常用{margin：0pxauto;}。1个—上下左右。

上下方向取值，若上下都设置了，取数值大的那个

左右方向取值：数值可以叠加

IE6下的bug（横向双倍margin）：元素必须浮动，元素必须具有横向，元素必须是块标签，必须是ie6。

问题：塌陷（条件，外有父级，内有子标签）解决方案：加边框，是父级隔离。 超出隐藏（overfloat hidden） 。float。给父级设内边距padding

2.padding（内边距）设置内与外的位置用padding，设置内与内的位置用margin。对行标签只有水平有效，竖直无效。

分为left right top bottom，其他的写法与margin一致。

border边框（可以用border来画图形，三角形）

分为left right top bottom。可以设置单独的边框线，

width：宽度

style：none无边框，solid实线，dashed虚线，dotted点线。

color：颜色

border简写属性：width style color。

边框和背景的关系：边框中添加背景图片，图片会在边框下显示，实线时会被覆盖。

3.display

display：block(可以使行标签改为块标签，并继承所有属性) /inline（是块标签以行标签显示，并且继承所有的属性）/none (写在哪隐藏哪的内容)。若要使其既有行属性也有块属性：行内块属性。inline-block。（ie7不兼容这个属性）

4.盒模型标准模式和怪异模式

标准模式的计算方法：站的空间的宽度等于内容的宽度+左右内边距的宽度+左右边框的宽度+左右外边距。

怪异模式：所占空间总宽度=内容+外边距。只看初始宽高和margin。

计算：div的宽度

div{

width：200px;

height:50px;

padding:20px;

margin:30px;

border:5px solid red;

}

怪异260px标准310px。

六．页面布局

css布局：float（常用）position弹性布局（css3）

1.float-left/right/none;可以让块标签可以在同一行显示，能解决标签之间有间隙的问题，图片间的间隙也可以用这个取消（方法1：在每一个图片里加上float方法2：将图片写在一行，不换行。）对于其他的标签方法一样。

bug，父级中的元素设置浮动后，不占有父级的空间，父级设置的高度不会显示。设置的前后顺序决定浮动的顺序。要增加空的div。

浮动特性：设置浮动后

对行内标签：使其具有行和块的属性，可以设置宽高，可以写margin

padding的竖直方向上的设置

对块标签：使其具有行和块的属性，内容撑开宽高。和设置了diaplay：inline-block的效果一样

overflow：visible（超出的内容不剪切也隐藏）/hidden（超出的内容自动隐藏），/auto（超出的添加滚动条，哪边长哪边加滚动条）/scroll（不论什么情况添加滚动条，改写时可以使其只在一个方向上显示滚动轴）

visibility：visible（元素可见）/hidden（元素不可见），属性不会变。

浮动的原本用意是为了解决文字浮动的效果。

清除浮动：一般情况下用了浮动就要清除浮动。

可以加入clear：both

可以给父级直接设置高度来清除浮动

还可以用overflow：hidden清除浮动，父级中的所有元素必须全部浮动才可以清除

after伪元素：给父级元素加after，写入clear：both；display：block。

布局页面：

宽度设置100%，不给整个页面设置高度。

先搭框架，再填充内容

基本内容一致位于整个页面的居中位置，用margin：0px auto；

有分割线都用border设置单条边框

七．背景三层嵌套 定位布局 透明设置

三层嵌套：三个div嵌套，最外层的平铺，做圆角或者其他的特殊形状框时不能切透明的图片。优点：div高度相同，宽度外层平铺，显示了延展性。整个页面的圆角相同，可以在整个页面上使用，加快速度。

中间平铺图片

左边图片

右边图片

在css中写样式：

.outer{height:xxxpx;background:url()0 0 repeat;}

.inner-left{ height:xxxpx;background:url()left 0px no-repeat;}

.inner-right{ height:xxxpx;background:url()right 0px no-repeat;}

背景图合并（css sprite）

可以减少服务器的请求次数，减少缓存的空间。

引入方法：现在ps中合并成一张图片，只能合成上下的结构。

写代码时在背景图片的坐标上运用x y轴找到某一个部分的位置，分别定位，依然用三层嵌套的方法。

定位布局：（就近原则，要设置的东西距离哪边近就用哪个）

position：static不定位/relative相对定位，参照自身原来本身位置定位。原本占得空间依然存在有上下左右四个方位/absolute绝对定位，参照时如果父级没有设置定位，就参照body，父级若设置了定位，则根据父级的位置来定位。脱离文档流，/fixed相对于浏览器窗口定位。和attachment的效果相似。

父级没有设置定位，子级会自动参照浏览器的边框（body）来定位。若父级设定了定位，子级会参照父级定位的位置来定位。

定位叠加：叠加顺序—最后定位的在最上面

z-index;可以让叠加在一起的底部图片显示出来，不能让子级与父级有重叠关系。

无论之前使用的什么标签，定位之后都具有行内块属性。

透明度：opacity：number（0-1）0是完全透明，1是完全不透明。设置透明之后，块内的所有元素都会半透明。

IE自己的半透明镜：ie8一下不支持透明。需要加入filter:alpha(opacity=number)number值0-100。

rgba（0,0,0,0）四个数字：前三个是三个基本色，最大不可超过255,。第四个是透明度。只兼容到IE9以上。

透明度的兼容性要写上普通的和兼容到ie6-8的。div{opacity：number（0-1）；filter:alpha(opacity=number）}

八．伪元素，伪类

1.reset重置。清除浏览器的默认样式。一般使用reset.css文件。textarea的一个属性-resize，使其不能自由的调节框的大小。在css文件中出现了中文，需要写@chartset”utf-8”;来对中文进行声明。

2.a标签的四个伪类

(1)link。当herf中有内容，可以改变a文字的样式。a:link{}

(2)visited。当a标签已经被点击过之后，可以改变样式。a:visited{}

(3)hover。当鼠标移动到a标签范围时，可以改变样式。a:hover{}

(4)active。当鼠标左键在a标签点击时，可以改变样式。a:active{}

顺序不能乱。l v h a—love hate爱恨法则。visited和hover使用较多。

hover的属性可以对其他标签使用。只能对父子级有用，兄弟级没用。

display与visibility都有隐藏作用，但是none是在页面中不占有空间，直接消失隐藏，但是visibility在页面中占有空间内容隐藏，使用较多的是display属性。

4.before和after伪元素（必须和content属性连用，content用来写需要添加的内容。）

::before在元素内容前加入内容。

::after在元素内容后加入内容。也可以用来写背景的三层嵌套

在ie8中写法改变为一组冒号。:before/:after.ie7不支持这个属性。

可以用after来清除浮动。claer:both;

九．兼容性问题

1.怪异模式：没有书写时会触发怪异解析现象。

2.不同浏览器中很多标签的默认样式不同。一般用reset.css文件将浏览器重置。

3.横向双倍外边距：产生的四个条件 浮动 块属性标签 有横向的margin值 在ie6下。解决方法：给标签加入display:inline，使其成为行标签。

4.[默认行高：产生的条件ie6设置的文字高度超出盒模型内容区域 设置高度时会改变布局。解决办法：加入overfloat：hidden;

5.ie6不支持透明的png图。解决办法：用jpg gif代替或者后期用js解决

6认高度：块元素，没有写固定高度时。解决：设置固定高/height：0；overflow：hidden；

7.img外部的border。解决方法：border：none/0.

8.图片间的默认边距。解决方法：所有图片都浮动 写代码时不换行

9.***经典3像素：条件 浮动块元素与未浮动元素处于同一行。解决：设置非浮动元素浮动。

10.hover在ie6中只能给a标签用。

11.ie678不支持透明opacity的属性。用独特的代码代替opacity:0.6;filter:alpha(opacity=60).不支持rgba的设置。

12.不支持最大最小宽高：标签的最低高度宽度设置。解决方法：为单独设置hack。

hack：.color{

background-color: #CC00FF;/*所有浏览器都会显示为紫色*/

background-color: #FF0000\9;/*IE6、IE7、IE8会显示红色*/

*background-color: #0066FF;/*IE6、IE7会变为蓝色*/

_background-color: #009933;/*IE6会变为绿色*/

}

*-xxxxxx/IE7

13.子选择器在ie6中不能使用。div>p这是子选择器。可以用来选择父级下的某个子级。

bug总结：常见的bug都出现在版本低的ie中。有可能bug产生于标签的不合理使用或者css样式使用不当。