基本内容：
html超文本标记语言。
页面组成：
html>//版本声明
//万国码——gb1312解决中文乱码
标题//标题内容，不可以和万国码调换顺序
//关键字，
//描述，搜索时出现在搜索页面的详情
一．行标签和块标签
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样式使用不当。