图片
src：显示外部图片内容路径，图片路径：相对路径
alt：用来设置在图片不能正常显示时对图片的描述
搜索引擎可以通过alt属性来识别不同的图片
如果不写alt属性则搜索引擎不会对凶的图片进行收录
width：修改宽度，单位px像素
height：高度
宽度和高度两个属性如果只设定一个，另一个也会同事等比例调整大小，同时设定指定的值则指定的大小来设置。
一般开发除了自适应的页面，不建议设置width和height的大小。
图片格式问题：
JPEG(JPG)
支持的颜色比较多，图片可以压缩，但是不支持透明
一般使用来保存图片等颜色丰富的图片
GIF
支持的颜色少，只支持简单的透明，支持动态图
图片颜色单一或者动态图时可以使用GIF
PNG
PNG支持的颜色多，并且支持复杂的透明
可以用来显示颜色复杂的的透明的图片

    图片使用规则
        效果相同的看大小，效果不停就选效果好的
    webp
        google专门为网页设计的图片格式，支持颜色，支持透明，支持动图，兼容性不同
    base64编码图片（特殊情况使用）

<img src = "" alt = ""/>

<meta/>
1.可以用来指定网页的描述
<meta name = "keywords" content = "HTML5,JavaScrip,前端，Java"/>
2.可以用来指定网页的描述 搜索引擎在检索界面时同事会检索页面中的关键词和描述，但是两个值不会影响页面在搜索引擎中的排名
<meta name = "description" content="发布h5.js等前端相关"信息/>
3.使用meta可以用来做请求的重定向5秒后重定向到百度的界面
<meta http-equiv="refresh" content = "5;url=htto://www.baidu.com"/>

xhtml语法规范
1.HTML不区分大小写，但是一般都写小写
2.HTML中注释不嫩嵌套
3.HTML中必须结构完整，浏览器会尽最大的能力为你自动修正，但有时候会出错，所以必须谨慎。
4.HTML可以嵌套但是不能够交叉前嵌套。
5.HTML标签中的属性必须有值，且值必须加引导

内联框架

内联框架可以引入一个外部的页面
使用iframe来创建一个内联框架
属性：
src：相对路径
width：
height：
在显示开发中不建议使用内联框架，因为内联框架中的内容不会被搜索引擎所检索
<iframe src=“” name = ""></iframe>

超链接
href跳转的地址
target:用于指定打开链接的位置
可选值：
_self:当前窗口显示
_blank:在一个新的窗口中打开文件
name属性可以通过这个用来在当前界面内
<a href="" target = ""></a>

超链接如果暂时没有确定就先href="#"用于占位#自动跳转到当前页面的顶部，id属性可以将超链接连接到相应的位置。

发送邮件的超链接
href：href="邮件地址"当点击这个超链接会打开默认的电子邮件客户端，没有就不会打开具体看浏览器的处理方式。

CSS
css语法：1.注释是/**/，和html注释不同
2.选择器 生命块

stype属性
将样式直接编写到stype属性中，这种样式我们称之为内联样式，内联样式只对当前的元素中的内容起作用。不建议使用。
<p stype="color:red;font-size:40px"></p>

写到head中，内部样式
<stype type="text/css">
样式写在这里边：选择器
p{样式}

</stype>

外部文件，创建css文件，然后通过引入，浏览器的缓存，加快访问速度
p{
样式
}
引入的代码
<link rel = "stylesheet" type="text/css" href="stype.css" /link>

块元素和内联

块元素：就是独占一行的元素。块元素无论内容有多少都会独占一行。
div，p，h1,h2,
div元素没有任何语义，就是一个纯粹的块元素，并且不会为它里边的元素设置任何的默认样式，div元素主要用来为页面进行布局的。
内联元素
span是一个内联元素（行内元素）只占自身的大小。
a，img,iframe,span
没有任何语义，专门用来选中文字，为文字进行设置样式

块元素：主要用来布局
内联元素：主要用来进行选中元素进行样式。
一般只用到块元素包含内联元素，不使用内联元素包含块元素。
a元素可以包含任何元素，除了他自己本身。
p元素不可以包含其他的任何块元素。

元素选择器
语法：标签名{}
id选择器
语法：#id属性值{}
类class选择器
可以重复，但是id是唯一的，可以为同一个元素设置多个class属性值，多个值之间通过空格分开。
语法：.class{}

选择器分组（并集选择器）
通过选择器分组可以同时选中多个选择器对应的元素
语法：选择器1，选择器2，选择器N{}

统配选择器
选中页面中的所有元素
语法：*{}
复合选择器（交集选择器）
可以同时满足多个选择器的元素
语法：选择器1选择器2选择器N{}
紧紧挨着没有符号没有空格。对于id选择器不建议使用复合选择器。

后代元素选择器
选中指定元素的指定后代元素
语法：祖先元素 后代元素{}

子元素选择器
选中指定父元素的指定子元素
语法：父元素 > 子元素
IE6及以下的浏览器不支持子元素选择器

伪类选择器
用来表示元素的一种状态
比如超链接没访问，访问过之后等
超链接的状态(浏览器通过访问历史来判断的)
a：link表示普通的连接（没有访问过的连接）
a:visited表示访问过的超链接，只能设置文字的颜色，不能设置背景颜色
a:hover鼠标移入时候
：hover ：active也可以为其他元素设置
IE6中，不支持对超链接以外的元素设置
：focus获取焦点
：before指定元素前
：after指定元素后
：：selection选中的元素（为p标签中选中的内容使用样式）
注意在火狐中需要用p：：-moz-selection（-moz是火狐的专用表示）
伪元素选择器
给段落定义样式
首字母 ：first-letter（p:first-letter{}）
首行 ：first-line
属性选择器
可以根据元素中的属性或属性值来选取属性
语法： 【属性名】 选取含有指定属性的元素p【title】{}
【属性名=“属性值”】 选取指定属性值=“”的元素p【title=“”】{}
【属性名^=“属性值”】选取属性值以属性值开头的元素
【属性名$=“属性值”】选取指定结尾的元素
【属性名*=“属性值”】选取包含的元素
title属性，这个属性可以给任何标签指定，就是当鼠标移入到该元素上时，元素中的title属性的值会作为提示文字显示
子元素选择器
：first-child选择第一个子标签
：last-child选择最后一个子标签
：nth-child选择指定位置的子元素，p:nth-child(){}（）里边是数字几就是第几个元素；特殊的even表示偶数个元素；odd表示第奇数位置的元素
：first-of-type
：last-of-type
：nth-of-type选定指定类型的子元素
注意-区别；child是所有元素的第一个；type是当前元素的第一个元素
body>p：first-child{}
p:nth-child(数字){}表示第数字个位置的
兄弟元素选择器
选择兄弟紧挨着的元素
语法：前一个+后一个

选择后边的所有兄弟元素
语法：前一个~后边所有

否定伪类
可以从已选中中剔除某些元素
语法： not（选择器）
选中所有p，除了class=hello的元素p：not（.hello）

继承问题
在css中，祖先元素上的样式，也会被他的后代元素所继承，利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式。
但是并不是所有的样式都会被子元素所继承，比如：背景相关的样式都样式都不会被继承，边框相关的，定位相关的都不会被继承。

优先级的规则
内联样式>id选择器>类和伪类>元素选择器>统配选择器 继承样式没有优先级
当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后在比较，但是注意，选择器优先级计算不会超过他最大的数量级，如果选择器的优先级一样则使用靠后的样式。
并集选择器的优先级是单独计算的div，p，#p1，.hello{}
可以在样式的最后，添加一个important，则此时该样式将会获得一个最高的优先级。但是在开发中最好不要使用important。
伪类中：link ：visited ：hover ：active hover和active顺序不可以颠倒

em和strong都表示强调,有语义
<em></em>通常显示斜体
<strong></strong>加粗比em更强
i和b没有语义
<i></i>表示斜体
<b></b>表示加粗
h5规范中，对于不需要着重的内容而是单纯的加粗或者斜体，就可以使用b和i
small
标签的内容比他的父元素中文字要小一些
在h5中使用small标签来表示一些细则一类的内容
比如：合同中小字，网站的版权声明都可以放到small<small></small>
cite
网页中多有的如书名的内容都可以使用cite标签，可以参考的内容。比如：书名 歌名 话剧名 电影名等
q
标签标示一个短引用（行内引用），q标签引用的内容，浏览器会默认加上引号
blockquote
标签标示一个长引用（块级引用）
sup
sup设置上标显示，<p>赵薇^{<a href="#">[1]</a>}</p>
sub
sub标签是下标显示
ins
表示插入内容，int内容添加下划线
del
标示标签删除的内容删除线
pre
表示一个预格式标签，怎么写的就怎么显示，不会忽略多余的空格
code
专门用来表示代码的标签
一般pre和code同时表示一块代码。

列表
网页中一共三种列表
1.无序列表
使用ul标签来创建一个无需列表
使用li在ul中创建一个一个列表项，一个列表就是一个列表项
通过type属性可以修改无序列表的项目符号
disc，默认值，实心的圆点
square，实心的方块
circle，空心的圆圈
在实际的开发中，不使用以上的属性，因为各个浏览器中表现是不同的，所以利用css来进行改正。如果真的需要我们可以直接利用图片进行设计。
ul{
list-stype：none；
}
ul和li都是块元素
2.有序列表
使用ol标签创建一个有序列表
type属性可以指定序号的类型
可选值：1，默认值，使用阿拉伯数字，a/A，i/I
ol也是块元素
3.定义列表
有序列表和无序列表是可以嵌套的
定义列表用来对一些或内容进行定义
使用dl来创建一个定义列表
dl中的两个子标签
dt：被定义的内容
dd：对定义内容的描述

css知识点

单位
px
百分比
em em和百分比相似，他是相对于当前元素的字体大小来计算的
1em = 1font-size
使用em时，当字体大小发生变化时，em也会随之改变
当设置字体相关的样式时，经常使用em

在css可以直接使用颜色的单词便是不同的颜色
红色：red
蓝色：blue
绿色：green
也可以使用RGB值指的是通过不同的颜色
颜色的浓度是0-255，或者百分比
也可以使用十六进制表示rgb值来表示颜色

文字font-size设置的大小并不是文字本身的大小，在页面中每个文字都有一个看见的框，一般情况下文字都要比这个格要小一些，也有时会比格大，
font-family设置文字的字体，支持使用该格式，如果不支持就默认，该样式可以同时制定多个字体，用，分开，
在开发中，奇怪字体尽量不用。
字体的颜色：color
字体的大小：font-size（并不是字体大小是框的大小，一般默认的大小16px)

字体分类
serif（衬线字体）
sans-serif（非衬线字体）
monospace（等宽字体）
cursive（草书字体）
fantasy（虚拟字体）
可以将字体设置成大的分类浏览器可以自己进行识别
一般大类字体应该放到font-family最后一个。
字体斜体之类设置
font-stype
normal：默认正常显示
italic：斜体
oblique：倾斜
但部分浏览器都不会对斜体与倾斜做区分
font-stype：italic；
font-weight
normal正常粗细
bold设置文本的加粗效果
该样式也可以设置100-900之间9个值，由于用户计算机旺旺没有那么多的级别字体
font-variant
可以设置小型大型字母
small-caps文本以小型大写字母显示
小型大写字母：
将所有的字母都以大写形式显示，但是小写字母的大写要比大写字母的大小小一些

在css中还未我们提供了一个样式font使用该样式可以同时设置字体的所有样式不同的样式值之间通过空格隔开，使用font样式时，斜体粗体大小字母没有顺序要求，可写可不写，但是字体和大小必须写，否则没有效果，而且字体必须是最后位置，大小是倒数第二个。实际简写属性性能会比较好。
font：italic small-caps bold 60px “微软染黑”
行间距
在css中并没有设置行间距，只能通过行高设置行间距，使用line-height设置，行高类似于单线本，单线本是一行一行的线与线之间的间距中，网页也是单线本中，文字默认在行高中垂直居中。行间距=行高-字体大小。通过设置line-height设置行高，可以直接接数字也可以接百分比，百分比是相对于字体的大小的百分比，可以直接写数字，表示是字体的几倍。对于单行文本可以设置成父元素相同高度，这样子 可以在父元素中垂直居中。
在font中可以在大小后加/后边表示行高，在单独设置行高时候，需要先加font最后在加后变。
font：30px/50px “微软雅黑”
大写化
text-transfrom可以设置文本大小
none不做处理
capitalize：单词的首字母大小写，通过空格识别单词
uppercase所有字母都大写
lowcase所有字母都小写
文本修饰text-decoration
none正常显示
underline下划线
overline上划线
line-through中间删除线
超链接默认是下划线，如果需要去除下划线可以用text-decoration

字符间距letter-spacing
letter-spacing设置字符间距
单词之间距离word-spacing
设置词与词之间空格大小，英文比较好
文本对齐
text-align文本的对齐方式
left默认自靠左对齐
right文本靠右对齐
center居中对齐
justify两端对齐，通过调整文本之间的空格来保证的
首行缩进
text-indent用来设置首行缩进，单位不要用px用2em直接
当设置一个正直，会自动向右
当设置一个负值，会自动向左
通过这种方式可以将一些不想显示的文字进行隐藏

盒子模型，框模型
内容区：content
内边距：padding
边框： border
外边框：margin

width：内容区的宽度
height：设置内容区的高度
知识内容大小不是盒子的大小，盒子大小是内容区+边框+内边距

为元素设置边框三要素缺一不可
border-width：边框的宽度，可以分别制定四个边框的宽度
顺时针的方向，四个值，上右下左的顺序赋值
三个值三个值设置上 左右 下
两个值 上下 左右
一个值上下左右都是一个值
border-top-width，border-bottom-width，border-right-width，border-left-width
border-color：边框的颜色
设置的方向同边框宽度。同width相同也提供四个方向分别设置颜色
border-stype：边框的样式
none：没有边框
solid：实线
dotted：点状
dashed：虚线
double：双线边框
也可以分别制定样式，规则同边框宽度和颜色
border本身也具有之前的规则。
内边距padding
padding-top
padding-right
padding-bottom
padding-left
padding影响可见盒子的大小
padding-color
外边距：盒子与盒子之间的距离，影响盒子的位置，四个方向的位置
margin-top
margin-right
margin-bottom
margin-left
外边距正直是向右移动，负值元素向左移动。
margin还可以设置成auto，auto一般只会设置水平方向margin将边距设置成最大
垂直方向外边距设置成为auto，则外边距默认就是0
如果将left和right同时设置成auto子元素在父元素中居中只适用于外边距
可以简写margin四个方向，原则他那个之前说的一样
外边距的相加原则
垂直外边距的重叠
在网页中垂直方向的相邻外边距会发生外边距的重叠，所谓的外边距重叠指兄弟元素之间的相邻的外边距会取最大值而不是取和
如果父子元素的垂直外边距相邻了，则父元素的外边距会设置给父元素
方法一：利用其它的条件破坏
方法二：垂直内边距
还有更加好的方法
默认样式
浏览器为了在页面中没有样式，所以默认的显示效果
在设置样式时需要我们自己讲margin和padding统统去掉
*{
margin：0；
padding：0；
}
还有其它的方法更加方便。

内联元素不能设置width和height
内联元素可以设置水平方向的内边距。垂直方向的内边距但是不会影响页面的布局。
为元素设置边框可以设置边框垂直的不会影响布局
外边距水平方向的外边距不会重叠。内联元素不支持垂直方向的外边距。
内联元素不支持长宽高
    display利用display可以改变元素的
        none：此元素不会显示，并且元素不会再页面中继续占用页面的位置
        block：将一个元素设置成块元素
        inline：将一个元素设置成内联元素
        inline-block：将一个元素转换成行内块元素，可以使一个元素即有行内元素的她点又有块元素的特点，既可以设置宽高，又不会独占一行。
    visdisplay可以用来设置元素的隐藏和显示
        visible 默认值，元素默认会在页面显示
        hidden 元素会隐藏不显示
    使用visibility：hidden；隐藏的元素虽然不会再页面中显示，但是他的位置会保留在页面上
        

overflow
子元素默认是在父元素的内容区中，如果子元素超过父元素的内容区，我们称之为溢出元素。父元素默认是溢出的内容没在父元素的外边显示，通过overflow可以设置父元素如何处理溢出内容。
    visible：默认不会做任何处理，溢出内容还显示
    hidden：溢出的内容会修改，不会被显示
    scroll：滚动以显示更多内容，会为父元素添加滚动条，该属性不论是否溢出都会添加水平和垂直滚动条
    auto：自动，需要会添加滚动条，不需要不会添加滚动条
文档流
    文档就是指网页，文档流处在文档中的最底层马塔表示是一个网页中的位置，我们所创建的元素默认都处在文档流中
    元素在文档流中的特点
        块元素：
        （当元素的宽度的值为auto时，此时指定内边距不会影响可见矿的大小而是会自动修改宽度，以适应内边距）
            1.块元素在文档流中会独占一行，块元素会自上向下排列
            2.块元素在文档流中默认是100%
            3.块元素在文档流中默认高度被内容撑开
        内联元素
            1.内联元素在文档流中只占有自身的大小，默认自左向右排列，如果一行中容纳不了，就回自动换到下一行。
            2.内联元素的宽度和高度默认都被内容撑开
浮动
三个div横着排列；display：inline-block；问题在于必须是在一行中写div，否则中间会有空格，故不建议使用。
如果希望块元素在页面中水平排列，可以使块元素脱离文档流，使用float来使元素浮动，从而脱离文档流。
    可选值
    none:默认值，元素默认在文档流中排列
    left：向左浮动
    right：向右侧浮动
    当一个元素设置浮动以后即float属性是一个非none值
    元素会立即脱离文档流，元素脱离文档流以后，他下边的元素会立即向上移动。，元素浮动后会尽力向左上或者右上浮动，直到遇到父元素的边框或者其他的元素，浮动是有限制的。
    如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
    如果一行容不下元素们的宽度，则会换行。浮动元素不会超过兄弟元素。
    浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围。
    块元素脱离文档流，宽度和高度会自适应内容
    内联元素脱离文档流后会变成块元素。   

高度塌陷的问题
在文档流中父元素的高度默认是被子元素撑开的，但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致布局混乱。
开发中一定要避免他写问题的出现，解决办法，可以将父元素的高度写死，但是一旦写死，则父元素的高度将不能自适应子元素的高度。所以这种方案是不推荐使用的。
解决高度塌陷问题
原理：根据w3c的标准，在页面中都有一个隐含的属性叫做Block Format Context简称BFC，该属性可以设置打开或者关闭，默认是关闭的。
当开启BFC以后，元素将会具有如下的特性：
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.父元素可以包含浮动的子元素。
如何开启
1.设置元素浮动
虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题
2.设置元素的绝对定位

    3.设置元素为inline-block
        可以解决问题，但是会导致宽度丢失。不推荐使用这种方式。
    4.将元素的overflow设置为一个非visible的值

    推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。但是在IE6及以下的浏览器中并不支持BFC。在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout来解决该问题。开启方式很多，直接副作用做小，将zoom设置为1即可。同时在IE6中指定宽度也可以打开haslayout
    zoom：1；
    zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍。zoom：1表示不放大元素，三十通过该样式可以开启hasLayout。zoom只在IE中支持，其他浏览器否不支持。
    兼容性问题直接写两个
    zoom：1；
    overflower：hidden；
解决高度塌陷方案二
    可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的，然后在对其进行消除浮动，这样可以通过这个空白的div来撑开父元素的高度。基本没有副作用。
    使用这种方式虽然可以解决问题但是他会造成多余的结构。
    原理相同的一种处理方式：可以通过after的伪类选中box1的后边然后添加一个空白的元素然后对我清除浮动，可以达到相同的效果，但是注意IE6不支持after伪类，所以还需要添加
    .clearfix:after{
        content:"";
        display:block;
        clear:both;
    }
    .clearfix{
        zoom:1;
    }

导航条：
在导航条中利用的是无序列表
消除浮动影响
clear
none不清除
left左侧
right右侧
both清除两侧浮动元素对当前元素的影响，清除对他影响最大的浮动
清除box1浮动对box2产生的影响，清除浮动以后，元素会回到元素之前的位置
ps的基本使用
Ctrl 1 100%
Ctrl 0 适应屏幕的大小
F8 可以调出图片的一些信息，WH可以确定大小
Ctrl H 隐藏辅助线

定位：
通过position属性来设置元素的定位
当元素开启了元素的定位，（position属性值是一个非static的值）时，可以通过left，right，top，bottom，就是相对定位位置的偏移量。通常只需要对元素使用两个偏移量就可以进行定位。一般使用一个水平一个垂直进行定位。
可以选值
static：默认值 元素没有开启定位
relative：开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的固定定位（也是绝对定位的一种）

当position：relative；
    1.当元素设置成相对定位以后，而不设置偏移量，元素不会发生任何变化。
    2.相对定位是相相对于元素在文档中原来的位置。
    3.相对定位的元素不会脱离文档流
    4.相对定位会使元素提升一个层级
    5.相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素。span是内联元素，对内联元素设置宽高没有作用。
绝对定位position：absolute；
    1.开启绝对定位会使元素脱离文档流
    2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
    3.相对于元素最近的开启定位的父元素进行定位，如果所有的父元素都没有开启定位，则相对于浏览器定位。一般开启了子元素的绝对定位，父元素一般会开启相对定位。
    4.绝对定位会使元素提升一个层级。
    5.结对定位会改变元素的性质，内联元素会变成块元素，块元素的宽高默认被撑开。
固定定位position：fixed 当元素的固定定位也是一个绝对定位，大部分特点都和绝对定位一样
    不同点是
        1.固定定位永远相对于浏览器窗口进行定位。
        2.固定定位不会碎窗口滚动条滚动。
        3.ie6不支持固定定位。
如果层级是一样的那么下边元素会盖住上边元素
    用z-index来设置元素的层级，可以给z-index设置一个正直，值越大，层级越高，越先显示。对于没有开启定位的元素不能设置z-index的值。父元素层级再高也不会盖住子元素。

设置元素的透明背景
opacity可以用来设置元素的背景的透明
他需要一个0-1之间的值
0表示完全透明
1表示完全不透明
0.5表示半透明
opacity在IE8一下不支持，在IE8及一下的浏览器需要使用如下属性代替alpha（opacity=透明度）
0-100
0表示完全透明
100表示完全不透明
50半透明
这种方式支持IE6，但是这种效果在IE Tester中无法测试

背景：
背景颜色：background-color
背景图片：background-image：url（路径）；
如果背景图片大于背景元素，则默认设置左上角
如果背景图片与背景相同则会全部显示
如果背景图片小于元素大小，则会默认将背景图片以充满元素
可以同时为背景设置背景颜色和背景图片背景颜色会以背景图片的底色显示
背景图片的设置background-repeat
repeat：默认值，背景图片会双方向重复（平铺）
no-repeat：背景图片不会重复，有多大就会显示多大
repeat-x：背景图片沿水平方向重复
repeat-y：背景图片沿垂直方向重复
背景图片默认是贴着元素的左上角显示background-position可以调整背景图片在元素中的位置
该属性可以使用top right left bottom
center中的两个人值来指定一个背景图片的位置
top left左上角，如果只写一个值默认是center
也可以直接设置两个偏移量，一个水平，一个垂直方向
正直向右移动 向下移动
负值向左移动 向上移动
背景是否随着滚动background-attachment可以设置是否
scroll：默认值表示跟着滑轮滑动
fixed：会固定在某一位置，不随页面滚动
当背景图片的background-attachment设置为fixed时，背景图片的定位永远相对于浏览器的窗口。
不随窗口移动的图片，我们一般都是设置给body，而不设置给其他元素。

    做图片切换会有闪烁产生原因：背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部元素就需要单独的发送一次请求但是外部资源并不是同时发送，浏览器只在资源被使用时才加载。
    为了解决这个问题可以将三张图片整合到一张图片，然后通过background-position来切换图片位置，这种技术叫做图片整合技术，教唆（CSS-Sprite）
    优点：1.浏览器只需要发一次请求就可以加载全部的增加了用户的体验
    2.将多张图片整合成一张图片，减少图片的总大小，提高请求的速度，增加了用户体验
背景简写background没有顺序和数量要求

表格table
在table中使用tr来表示表格中的行数，有几行就有几个tr
有几列就有几个td<td></td>
th表示表头内容，跟td不同之处是含有默认的效果。
colspan横向合并
rowspan纵向合并
border-spacing：none；边框默认是分离的，可以利用border-spacing来设置边框距离
border-collapser：collapse；//将边框合并，如果设定了边框合并，则border-spacing就会自动失效
table也是一个块元素
设置单行颜色可以使用nth-child（even）这个实现。

table{
    width：300px；
    margin：0 auto；
    border：1px solid black；
    border-spacing：0px；
    border-collapser：collapse；//将边框合并
}
tr：nth-child（even）{}//IE6.8不支持
tr：hover{}

长表格
    thead表头，永远在头部
    tbody表格主体，永远在中间
    tfoot表格底部，永远在底部
    如果不写这些标签浏览器会自动蛇者成tbody，所以tr并不是table的子元素，而是tbody的子元素，通过table>tr无法选中行,tbody>tr可以选中。
    都是table的子标签，都需要写在table中，tr需要写在这些标签中。    

以前表格是用来对网页进行布局的，但是已经被css所淘汰
表格的列数由td最多的决定。表格可以嵌套。避免用表格布局难维护。

子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素，使用空的table标签可以隔离父子元素的外边距阻止外边距的重叠。在之前使用空的div不能进行阻止。可以利用下边的方法进行设计
/*解决父元素和子元素外边距重叠的问题*/
.box1:before{
    content:"";
    display:table;
}
/*解决父元素高度塌陷问题*/
.clearfix:after{
    content:"";
    display:block;
    clear:both;
}
/*两个问题同时解决的写法*/
.clearfix:before,.clearfix:after{
    content:"";
    display:table;
    clear:both;
}

表单
添加信息提交给服务器
使用form创建一个表单，form标签中必须制定一个action属性，该属性指向的是一个服务器的地址，当我们提交表单时将会提交action的属性对应的地址。
使用form创建的仅仅是一个空白的表单，我们还需要向form中添加不同的表单项
使用input来创建一个文本框，他的type的属性是text,如果希望表单中的数据会提交到服务器中，还必须给表单项指定一个name属性，name表示提交内容的名字。在文本框中也可以设置value值，这个value值就是默认的值。
用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器，url地址？查询字符串
格式
属性名=属性值
提交按钮可以将信息进行提交到服务器，他的type是submit，在提交announce中可以通过value属性来指定按钮上的文字。
密码框,type是password。
要提交到服务器必须用name属性的值，没有name没有办法提交到服务器。
单选按钮：radio
使用input来创建一个单选按钮，他的type属性使用radio
radio单选按钮通过name属性进行分组，name属性值相同时一组按钮
像这种需要用户选择但是不需要用户直接填写内容的表单项，需要添加value来添加这个属性值给服务器
多选框：CheckBox
使用input创建一个多选框，它的type属性使用CheckBox
下拉列表
使用select来创建下拉按钮
在下拉列表中使用option标签来创建一个一个列表项
下拉列表将name给select
将value将给option
多行文本域textarea，也需要name的属性

重置：reset属性值
按钮
    使用input type=button可以用来创建一个单纯的按钮，这个按钮没有任何作用只能被点击。除了input'也可以用button设置按钮。<button></button>推荐使用button比较灵活
input中文字标签
    在html中还未我们提供了一个标签，专门来选中表单中的提示文字的label标签，label可以设置文字的样式。
    改标签可以指定一个for属性，该属性需要指定表单项的id的值
在表单中可以使用fieldset用来表单项进行分组。
    <fieldset></fieldset>
    在fieldset中可以使用legend子标签，来制定组名。
    <legend></legend>

如果希望在单选按钮或者多选按钮中指定默认选中的选项，则可以在希望选中的相中添加checked=“check”属性。
可以通过select=“select”来将选中的option设置成默认选中。
select有特有的属性值，multiple=“multiple”可以设置成下拉列表可以选择多个属性。可以使用optgroup对选项进行分组。同一个optgroup中的一个选项是一组。<optgroup label=""></optgroup>下拉列表会有相应的变化

<form action="target.html">
    <label for=“um”>用户名</label>
    <input id=“um” type ="text" name=""/>
    <input type="submit" value=“注册”/>
    <input type="password"/>
    性别<input type="radio" name=“gender” value=“male”/>男
        <input type="radio" name=“gender” value=“female”/>女
    爱好<input type="checkbox" name=“hobby” value=""/>足球
        <input type="checkbox" name=“hobby” value =""/>蓝球
        <input type="checkbox" name=“hobby” value=""/>羽毛球

    你喜欢的明星
    <select name=“star” multiple=“multiple”>
        <optgroup label=“”>
            <option value=“”>范冰冰</option>
        </optgroup>
        <optgroup label=“”>
            <option value=“”>范冰冰</option>
             <option value=“”>林心如</option>
            <option value=“” selected=“selected”>赵薇</option>
        </optgroup>
        
    </select>
</form>

框架集
框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面，框架集可以同时映入多个页面，而内联框架集只能引入一个。在h5中推荐使用框架集不使用内联框架。

使用frameset来创建一个框架集，注意frameset不能和body出现在在一个页面中所以使用框架集，页面中就不可以使用body标签。

frameset
    rows属性值，指定框架集中的所有元素一行一行的排列
    cols：一列一列
    注意：必须选择上边的一种方式，并且需要在属性中指定每一部分所占的大小。可以用*表示剩下所占的大小。
    frameset中可以再次嵌套frameset。
    不推荐使用理解就可以。
frameset和iframe一样它里边的内容都不会被搜索引擎所检索，所以如果搜索引擎检索到的页面是一个框架也的话，他是不能去判断里边内容的，使用框架集则意味着页面中不能有自己的内容只能引入其他的页面。而我们没单独加载一个界面浏览器都需要重新发送一次请求，引入几个页面就需要发送几次请求，用户体验不好，如果必须用用frameset不使用iframe。
<frameset rows=“50% 50%”>
    <frame src="其他html的路径"/>
</frameset>

图片
IE6中对图片格式png24支持度不高，如果使用的图片格式是png24，则会导致透明效果无法正常显示。
解决方法：
1.可以使用png8代替png24但是使用那个png8代替png24清晰度会比较差。
2.利用JavaScript来解决问题，需要想页面中引入外部js文件
<scrip type="text/javascrip" src="路径"></scrip>
<scrip type="text/javascrip" >
对象.fix(“选择器” );
</scrip>

IE6
在一些情况中，有一些特殊的代码我们只需要在某些特殊的浏览器中执行，而在其他的浏览器中不需要执行，这时就是可以使用CSS Hack来解决问题
CSS Hack
实际上指的是特殊的代码，这段代码只在某些浏览器中可以识别，而在其他浏览器中不能识别，通过这种方式，来为一些浏览器设置特殊的代码。
条件Hack，
条件Hack只对IE浏览器有效，其他的浏览器都会讲他识别为注释IE10及以上的浏览器已经不支持这种写法了。
<! --[if IE 6]>只在6中起作用。
<! --[if lt IE 6]>lt小于，lte小于等于，gt大于，gte大于等于
<! --[if IE]><![endif]-->
属性级Hack
在样式前边添加下划线_background：yellow；只在IE6中有效果。
只有在IE7及一下才显示。background：yellow；
在样式最后添加一个\0则只能在IE8及以上的浏览器能够使用。background：yellow\0；
选择级符Hack
在选择器前添加* html则只有IE6可以识别。

CSS Hack万不得已不能够使用，比较难维护。

hbulid软件快捷键的东西：
div.box$*3

元素之间的关系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素

实例：

div中的span做

d1 span{

}

选中id为id1中的div中的p元素中的span元素

d1 p span{

}
为div种子元素span设置一个背景颜色