web前端，最全笔记

选择了程序员，我们就要不断的学习，不断的吸取知识。

w3c标准

结构 = html || 表现 = css || 行为 = JavaScript

../ 查找图片到上一级 ./查找图片到下一级

meta标签 content是内容

设置编码 charset

关键词 keywords

描述 description

重定向 http-equiv =refresh 时间+地址

XHTML语法：

1.HTML中不区分大小写，但是我们一般都使用小写

2.HTML的注释不能嵌套

3.HTML标签必须结构完整，要么成对出现，要么自结束标签

4.HTML可以嵌套，但是不能交叉嵌套

5.HTML标签中的属性必须有值，且值必须加引号 英式引号

内联框架 ——可以连接其他的HTML标签内嵌

iframe 开发中不推荐 不会被搜索引擎所检索 可以设置一个name值

超链接 a标签 target表示打开链接的位置

_self当前窗口默认值 _blank在新的窗口打开

链接不确定就用#进行占位 #id可以跳转指定区域 mailto:邮件名

center 中的内容会默认进行居中

css

引入

head可内置，不过不可控制其他

导入 link rel="stylesheet" type="text/css" href="css路径"

注释

css的注释，作用和HTML类似，只不过必须编写在style标签中，或者是css文件中

语法

选择器 ——选中页面中指定的元素/标签，并且将声明块的样式应用到选择器对应的元素上

声明块 ——紧跟着选择器的后面，使用一对{}括起来，

声明块实际就是一组的明值对结构，这一组的明值对我们称为声明，可以写多声明，；链接

块元素

div 、 p 、h1、h2、h3....

p元素里面不能放任何块元素

div就是块级元素，无论内容多少，都是独占一行 || 没有任何语义 就是一个纯粹的块元素

div元素主要是对页面进行布局的，并且不会为它里面的元素设置任何默认的样式

行内元素/内联元素

span img a iframe

span是一个内联元素，行内元素；指的是占着自身大小的元素，不会占用一行

span没有任何语义，专门用来选中文字进行设置样式

A元素可以包含任意元素，除了它本身。

块元素主要是用来做页面中的布局，内联元素主要用来选中文本设置样式，一般情况下只使用块 元素去包含内联元素，而不会使用内联元素去包含一个块元素。

选择器：

元素选择器：通过元素选择器可以选中页面所有的元素；语法 ：标签名

ID选择器：通过元素的id属性值选中唯一的元素；语法：#id属性值{}

class选择器：类选择器，通过元素的class属性值选中一组元素；语法：.class属性值{}

选择器分组：通过选择器分组可以同时选中多个选择器对应的元素；语法：选择器，

通配选择器：选择中页面的所有元素 ： 语法：*{}

交集选择器：作用可以选中同时满足多个选择器的元素；语法：选择器1选择器2选择器n

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

子元素选择器：选中指定父元素的指定子元素；语法：父元素>子元素

伪类：伪类专门用来表示元素的一种特殊的状态，比如超链接，获取焦点的文本框，当我们需要

为处在这些特殊状态的元素设置样式的时候，就可以使用伪类

a:link：正常链接；a:visited：访问过的链接 ps：只能设置字体颜色；

a:hover：表示鼠标移入的状态 ； a:active：表示被点击的状态

input:focus：获取焦点的状态 ； :: selection ：表示选中的状态 -火狐浏览器需要加上-moz

hover和active可以和其他元素进行绑定 也可以进行使用的

伪元素：使用伪元素来表示元素中的一些特殊的位置

:first-letter：设置首字母的样式 ； :first-line：设置第一行的样式；

:before：设置元素最前面的部分，一般before需要结合content这个样式一起使用 添加内容

:after：设置元素最后面的部分，一般after需要结合content这个样式一起使用 添加内容

属性选择器：可以根据元素中的属性或属性值来选定指定元素；

语法1 ：元素[属性名]{} 选取含有指定属性值的元素 ；

语法2 元素[属性名="属性值"] 选取含有指定属性值的元素

语法3：元素[属性名^="属性值"] 选取属性值以指定内容开头的元素；

语法4：元素[属性名$="属性值"] 选取属性值以指定内容结尾的元素

语法5：元素[属性名*="属性值"] 选取属性值以包含指定内容的元素

子元素的伪类：

:first-child：可以选中第一个子元素

:last-child：可以选中最后一个元素

:nth-child：可以选中任意位置的元素，选择器后面可以指定参数，

指定选中的参数 even偶数 ； odd奇数

兄弟元素选择器：可以选中一个元素紧挨着的指定的兄弟元素； 语法：前一个+后一个

css继承：

就像儿子可以继承遗产那样，在css中，祖先元素上的样式，也会被后代元素所继承

利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会继承样式

但是并不是所有的样式都会被子元素所继承，比如背景，边框，定位这些相关的样式

选择器的优先级：

当使用不同的选择器，选中同一个元素时并且设置相同的样式时，这时样式之间产生了冲突

最终到底采用哪个选择器定义的样式，由选择器的优先级(权重)决定，优先级高的优先显示

当选择器中含有多种选择器的时候，需要将多种选择器的优先级进行相加，然后再比较

但是注意：选择器优先级计算不会超过他的最大的数量级，如果选择器的优先级一样，用后

优先级的规则：

内联样式：优先级1000；id选择器：优先级100；!important添加最高的优先级

类和伪类：优先级10；元素选择器：优先级1；通配符*：优先级0

a的伪类选择器：link||visited||hover||active 这四个选择器的优先级是一样的

文本标签：

em：主要表示语气上的强调，em在浏览器中默认使用斜体显示

strong：表示强调的内容，比em更强烈，默认使用粗体显示

h5规范中规定，对于不需要着重的内容加粗或者是斜体就可以使用b和i标签

i：标签中的内容会以斜体显示，b：标签中的内容会加粗显示，

small标签中的内容会比它的父元素中的文字要小一些，在h5使用来表示一些细则内容 合同

cite：网页中所有加书名号的内容都可以使用，表示参考的内容，比如书名，歌名，电影

q：表示一个短的引用(行内引用)；q标签引用的内容，浏览器默认会加上引号

blockquote：表示一个长的引用（块级引用） || code：专门用来表示代码 pre+code

sup：设置上标||sub：设置下标||del：标签中的内容，会自动添加删除线

ins：会自动添加下划线；pre：是一个预格式标签，会将代码的格式保存，不会忽略空格

列表：就相当于超市购物时的那个购物清单，在HTML也可以创建列表，有三种列表

列表之间都是可以相互嵌套，可以在无序列表中放个有序元素，也可以在有序列表放无序

1.无序列表，使用ul标签来创建一个无序列表；使用li在ul中创建一个的列表项，一个li是项

list-style: none; 去掉无序列表的符号

通过type属性可以修改无序列表的项目符号，默认一般是不适用的

可选值：disc默认值 ； square：实心方块 ； circle：空心的圆

2.有序列表 和无序列表类似 只不过它使用ol来代替ul || 有序列表使用的是有序的数字

通过type属性可以修改有序列表的项目符号，默认一般是不适用的

3.定义列表 用来对一些词汇或内容进行定义

使用dl来创建一个定义列表；dt：被定义的标题 ； dd：被定义的内容；

同样dl和ul和ol之间都可以互相嵌套

长度：单位:px;像素是我们在网页中使用最多的一个单位，一个像素就相当于一个点。

不同显示器一个像素的大小也不相同，显示效果越清晰，像素越小，反之像素越大

百分比%：也可以把单位设置为一个百分比的形式，这样浏览器就会根据父元素样式计算

使用百分比的好处是，当父元素的属性值发生变化的时候，子元素也会按照比例发生改变

在我们创建一个自适应页面时，经常使用百分比作为单位

em和百分比类似，它是相当于当前元素的字体大小来计算的 1em = 1 font-size

使用em时，当字体大小发生改变时，em也随之改变，设置字体相关样式，使用

颜色：在css可以直接使用颜色的单词；也可以使用RGB值，red，green，blue三色的浓度

颜色的浓度需要0-255之间的值，255最大0表示没有，也可以使用%设置 100是255

也可以使用十六进制的rgb值来表示颜色，原理和上面一样，

只不过是十六进制代替；使用三组两位的十六进制数组来表示一个颜色

每组表示一个颜色，第一组是红色的浓度，范围：00-ff

第二组是绿色的浓度，范围：00-ff

第三组是蓝色的浓度，范围：00-ff

语法：#红色绿色蓝色 ； 十六进制：0 1 2 3 4 5 6 7 8 9 a b c d e f 00-ff

00表示没有，相当于rgb中的0；ff表示最大，相当于rgb中的255

字体：color：设置颜色；font-size：字体大小 默认16px，设置的是格的高度，不是字，字小格

font-family：可以指定文本的字体，浏览器支持使用就使用，不支持就使用默认的

可以同时使用多个字体，字体间用，分开，采用多个浏览器会优先使用前面，没有就用后

 

颜色：在css中可以直接使用颜色的单词来表示不同的颜色，也可以使用rgb来表达不同的颜色

所谓的rgb值就是red，green，blue这三个颜色的不同浓度，来表示不同的颜色

例如：rgb(红色的浓度，绿色的浓度，蓝色的浓度) 颜色的浓度是0-255之间的值，255最大

也可以使用百分比的形式，rgb(100%,0%,0%)

字体的分类：

serif：衬线字体；sans-serif：非衬线字体；monospace：等宽字体；

cursive：草书字体；fantasy：虚幻字体；可以给字体设置这些大的分类；浏览器会自动

一般为字体的大分类，指定为font-family中最后的一个字体

文字样式

font-style: normal;常规显示；italic：斜体效果；oblique：倾斜效果；一般斜体是italic

文字加粗

font-weight：normal默认值；bold加粗显示；其他数字一般不适用

字母大小写

font-variant：normal，默认值，文本正常显示；small-caps：文本以小型大写字母显示

css中还为我们提供了一个样式叫font，该样式可以设置字体相关的所有样式；

font对字体样式：斜体；加粗；大小字母没有顺序要求，字体必须是后一个，大小倒数第二

简写会有一个好的性能，省代码 在里面可以设置行高 个体高/行高

行间距：css没有提供设置行间距的方式，我们只能设置行高，来设置行间距，行高越大间距越大

使用"line-height"来设置行高；可传入一个数值，则行高会设置字体大小相应的倍数

文本其他样式：text-transform：设置字母大小写；none是默认；

capitalize：首字母大写，通过空格进行识别；uppercase：所有字母都大写

lowercase：所有字母都小写

text-decoration：可以设置文本的修饰，可选值：none，不添加任何修饰：

underline：添加下划线；overline：上划线；line-through：添加删除线 类似del

去掉A标签的超链接，默认自带值underline；需要把值设置为none，下划线就消失了

设置字符间距：letter-spacing；设置单词间距：word-spacing；

text-align：设置文本的对齐方式，可选值：left默认值：文本靠左对齐

right：靠右对齐；center：居中对齐； justify：两端对齐，通过调整文本空格大小

text-indent：设置首行缩进；em等于字体大小；当给它设置一个正值的时候，会自动向右 侧缩进指定的像素，如果为负值，则会向左移动指定的像素，一般使用em作为单位。

 

盒子模型：

网页布局都是盒子套着盒子，每个盒子都有一个边框，border

最里面的是内容区，内容区和边框有个距离，内边距；content；padding

边框和边框的距离是外边距，margin；width：宽度；height：高度

border-width：边框宽度；border-color：颜色；border-style：solid(实线) 边框样式

宽度和高度都只是设置盒子的内容区的大小，而不是盒子的整个大小，盒子的可见框的大小 由内容区，内边距和外边距共同决定

如果盒子边框设置四个值，顺序：上右下左 按照顺时针的方向进行设置

如果盒子边框设置三个值：顺序：1.上,2.下,3. 右左

如果盒子边框设置两个值：顺序：1.上下,2.左右

如果盒子边框设置一个值：顺序：1.上下左右

专门指定的边的宽度：top上；right右；bottom下；left左

边框的样式：solid：实线；dotted：点状；dashed：虚线 ； double：双线

边框样式，长度，颜色也是同上 边框的样式：none 没有默认值

大部分浏览器边框的宽度和颜色都是有默认值的，而边框的样式是none

简写代码：border: 大小 颜色 样式；顺序无所谓 去掉边框：border-一边：none

可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效

内边距：指的是盒子的内容区与盒子边框之间的距离，一共四个方向的内边距，可以通过

padding-top；padding-right；padding-bottom；padding-left，来设置四个方向的间距

内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距

盒子的可见宽度 = 左边框的宽度 + 左内边距的宽度 + 宽度 + 右内边距的宽度 + 右边框的宽度

盒子的可见高度= 上边框的宽度 + 上内边距的宽度 + 高度 + 下内边距的宽度 + 下边框的宽度

使用padding同时设置四个属性和 边框一样的

外边距：指的是盒子与其他盒子之间的距离，它不会影响可见框的距离，而是影响盒子的位置

盒子有四个方向的外边距，margin-top、right、bottom、left

由于页面中的元素都是靠左靠上摆放的，所以注意我们设置的时候上和外边距的时候，会导 致盒子自身的位置发生改变，当设置右和下外边距会改变其他盒子的位置

如果外边距设置的负数，则元素会向反方向移动 margin还可以设置auto值,auto设水平方向

如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素

自动在父元素中居中，所以我们经常讲左右外边距设置为auto，以使子元素在父元素居中

重点：垂直外边距的重叠，在网页中垂直方向的相邻外边距会发生外边距的重叠；所谓的外 边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和

外边距同样可以设置简写属性 margin，可以同时设置四个方向的外边距

浏览器在页面中没有样式时，也可以让页面有一个比较好的显示效果，所以很多的元素标签

都设置了默认的样式，margin；padding；正常情况下，是不需要使用的，所以我们往往

在编写样式之前需要将浏览器默认的margin和padding去掉；

把内联元素转换成块级元素：通过display属性修改元素的类型

display可选值：inline 可以把一个元素作为内联元素进行设置

block 可以把一个内联元素设置成块级元素

none： 不显示元素，并且元素不会在页面中继续占有位置

inline-block 可以把一个元素设置成行内块元素 具有行内元素特点 也有块级元素特点

visibility：可以用来设置元素的隐藏和显示的状态：

可选值：visible：显示元素

hidden：隐藏元素 位置依旧保存 依旧占有位置

子元素默认是存在父元素的内容区中，理论上讲子元素的最大可以等于父元素的内容区大小；

如果子元素的大小超过父元素的内容区，则超过的大小会在父元素以外的地方显示，成为溢出

通过overflow可以设置父元素如何处理这个溢出的内容；

可选值：visible，默认值，不会对溢出的内容做处理，元素会在父元素以外的位置显示

hidden：溢出的内容不会被显示

scroll： 会为父元素添加滚动条，通过拖动滚动条来查看完整的内容，该属性

无论内容是否溢出，都会添加水平和垂直双方向的滚动条

auto：会根据需求自动添加滚动条，需要水平或垂直就出现，不需要就没有

文档流：文档流处在网页的最底层，它表示的是一个页面的位置，我们所创建的元素默认都处在 文档流中，元素在文档流中的特点：

块元素：块元素在文档流中会独占一行，块元素会自上向下排列

块元素在文档流中默认的宽度是父元素的100%

块元素在文档流中默认的高度

内联元素： 内联元素在文档流中只占有自身的大小，会默认从左向右

如果一行中不足以容纳所有的内联元素，则换到下一行继续自左向右

在文档流中，内联元素的宽度和高度默认被内容撑开

浮动：块元素在文档流中默认垂直排列，所以这三个块级元素自上向下依次排开，如果希望块元 素在页面水平排列，可以使块元素脱离文档流，使用float来使元素浮动，从而脱离文档流

float浮动的可选值：

none：默认值，元素默认在文档流中排列

left：元素会立即脱离文档流，向页面的左侧浮动

right：元素会立即脱离文档流，向页面的右侧浮动

当一个元素设置浮动以后 (float属性是一个非none的值)元素会立即脱离文档流，元素脱离

文档流以后，它下面的元素会立即向上移动；元素浮动以后，会尽量向页面的左上或者是右上漂浮

直到遇到父元素的边框或者其他的浮动元素，如果浮动元素上边是一个没有浮动的元素，则浮动元素

不会超过块元素；浮动的元素不会超过他上边的兄弟元素，最多最多一边齐

浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文 字环绕图片的效果；在文档流中，子元素的宽度默认占父元素的全部，当元素设置浮动的时候， 会完全脱离文档流

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高，但是为 子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素高度塌陷，由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱了。所以在开发中一定要避免出现高度塌陷的问题

可以把父元素的高度写死；以避免塌陷的问题，但是一旦写死，父元素的高度将不能自动，适应子元素的高度，这种方案是不推荐实用的。可以使用；高度会固定!

根据W3C的标准，在页面中元素都有个隐含的属性叫做 简称：BFC 可以设置打开或者关闭；默认关闭

当开启元素的BFC以后，元素将会具有以下的特性；

1.父元素的垂直外边距不会和子元素重叠

2.开启BFC的元素不会被浮动元素所覆盖

3.开启BFC的元素可以包含浮动的元素

开启BFC：

1.设置元素的浮动

使用这种方法开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失

而且使用这种方法也会导致下面的元素上移，不能解决问题

2.设置元素的绝对定位

副作用同上

3.设置元素为inline-block

可以解决问题，但是会导致宽度丢失，不推荐使用这种方式

4.将元素的overflow设置成一个非visible的值

推荐方式设置为：hidden是副作用最小的开启BFC的方式，在ie6以下的浏览器不支持

i6之前的都不支持；因为微软和w3c那个时候没有对付；把元素的zoom设置为1就可以了

zoom表示放大的意思，后边跟着一个数值，写几元素就放大几倍；解决ie6以下塌陷

方案2：可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动， 所以他是可以撑开父元素的高度的，然后对其进行清除浮动，这样可以通过这个空白的div来撑 开父元素的高度，基本没有副作用；添加多余的结构。

方案3：通过after创建一个伪类向元素的最后添加一个空白元素，然后对其清除浮动，不用添 加结构，而且不用添加一个新的div，可以达到上面的那个效果；最推荐使用的方式，没副作用

清除浮动：clear 可以用来清除其他浮动元素对当前元素的影响

默认值：none 不清除浮动；left：清除左侧；right：清除右侧；both：清除两侧；影响最大

清除浮动以后，元素会回到元素浮动之前的位置

子元素继承父元素的宽度，设置padding会自动调整盒子的宽度，然后来适应父元素的宽度

$是1,2,3进行变

定位：就是将指定的元素摆放到页面的任意位置，通过定位可以设置任意的摆放元素；用position

属性来设置元素的定位：可选值：static默认值，不开启定位；relative：开启元素的相对

定位；absolute：开启元素的绝对定位；fixed：开启元素的固定定位(也是绝对定位的一种)

当开启元素的定位position属性值是一个非static时，可以通过上下左右来进行移动，修改位置

left：元素相对于其定位位置元素的左侧偏移量：right；top；bottom同上；方向改变

通常偏移量只需要使用两个就可以对一个元素进行定位，一般选择水平方向或垂直方向偏移量

相对定位：当元素将position设置为relative时，元素开启了相对定位；

1、当开启了元素的相对定位以后，而不设置偏移量，元素不会发生任何变化

2、相对定位是相对于元素在文档流中原来的位置进行定位

3、相对定位的元素不会脱离文档流

4、相对定位的元素会使元素提升一个等级

5、相对定位不会改变元素的性质，块还是块，内联还是内联

绝对定位：当元素将position设置为absolute时，则开启了元素的绝对定位

1、开启绝对定位，会使元素脱离文档流

2、开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化

3、绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的(一般情况，开启了 子元素的绝对定位，都会同时开启父元素的相对定位)，如果所有的祖先元素

都没有开启定位，则相当于浏览器窗口进行定位

绝对定位是需要父元素是相对定位就可以使用了！！！

4、绝对定位会使元素提升一个层级

5、绝对定位会改变元素的性质，内联变成块元素；块元素的宽度和高度默认都被内容撑开

固定定位：当元素将position设置为fixed时，则开启了元素的固定定位

固定定位也是一种绝对定位，它的大部分都和绝对定位一样，

不同的是：固定定位永远都是相当于浏览器窗口进行定位；固定定位

会固定在浏览器窗口的某个位置，不会随滚动条滚动

ie6不支持固定定位：暂时不用管

元素的层级：如果元素的层级是一样，则下边的元素会盖住上面的，通过z-index属性可以用设置层级

可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高，越优先显示，对于没有开启定位的元素不能使用z-index；开启定位就就就可以使用啦！！！！父元素盖不住子元素

设置元素透明背景：opacity可以用来设置元素背景的透明；它需要0-1的值，0表示完全透明

背景图片元素：background-image：设置背景图片；如果背景图片大于元素，默认会显示图片的左上角

相对路径写在哪就相当于哪个文件夹

如果背景图片和元素一样大，则会将背景图片全部显示；语法：url(相对路径||link)

如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素；可以同时为元素指定背景颜色和背景图片；这样背景颜色将会作为背景图片的底色；一般情况下设置背景图片时都会指定一个背景颜色

设置重复：background-repeat：默认值：repeat；默认图片会双方向重复（平铺）

no-repeat：设置图片不重复；repeat-x：设置x轴水平方向重复；repeat-y：设置y轴垂直方向重复

背景图片默认是贴着元素的左上角显示；通过background-position可以调整背景图片在元素中的位置

可选值：top；right；left；bottom；center中的两个值，来指定一个背景图片的位置；进行组合；

如果只出一个值，第二个默认的值是center；也可以指定两个偏移量：图片定位

第一个是水平偏移量；如果指定的是一个正值，则图片会向右移动指定的像素

如果指定的是一个负值，则图片会向左移动指定的像素

第二个是垂直偏移量：如果指定的是一个正值，则图片会向下移动指定的像素；

如果指定的是一个负值，则图片会向上移动指定的像素

背景滚动：background-attachment 可选值：scroll 默认值；fixed：背景图片会固定在某一位置，不随页面滚动

当那个值为fixed的时候，背景的定位永远相对于浏览器窗口；一般是设置给body，不设置给其他的元素

backround通过该属性可以同时设置所有背景相关的样式；也没有顺序的要求，谁在前谁在后都行；

没有数量要求；如果没有填写属性，就会使用默认值 css雪碧图

表格：在日常生活中使用的非常多：表格就是用来表示一些格式化的数据：比如：课程表、银行对账单

在网页中也可以来创建出不同的表格；table标签用来创建一个表格；tr用来表示表格中的一行，几行几tr

td表示：在tr中需要使用td来创建一个单元格，有几个单元格就有几个td；

colspan：用来设置合并横向单元格；rowspan：用来设置合并纵向单元格；

table和td边框默认有一个距离，border-spacing设置td与table的距离；border-collapse：设置表格合并

如果设置了表格边框合并，则border-spacing会自动失效；th标签来用来表头的内容，加粗和默认效果

长表格：有一些情况下表格是非常长的，这时就需要把表格分为三个部分，表头，表格的主体，表格底部

thead表头；tbody表格的内容；tfoot表格底部；这三个标签的作用就来区分表格的不同部分，table的子标签

都需要直接写到table中，tr需要写在这些标签当中；

thead中的内容，会永远显示在表格的头部；tbody的内容，永远会显示在表格的底部；tbody的内容永远中间

如果表格中没有写tbody，浏览器会自动在表格中添加tbody，并且将所有tr放进去，注意：tr并不是table的

元素，而是tbody的子元素，通过table>tr 无法选中行 需要通过tbody > tr

 

子元素和父元素相邻的垂直边距会发生重叠，子元素的外边距会传递给父元素；使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠；display：table可以将一个元素设置为表格显示；设置父元素，子元素可动

表单：表单的作用就是用来将用户的信息提交给远程服务器的；比如某度的登录，搜索，注册

使用form标签创建一个表单：action这个属性指向的是一个服务器的地址；提交表单会提交对应的地址；

使用form创建的仅仅是表单，我们需要对表单创建各种不同的表单项；使用input来创建一个文本框；

它的type是类型，text是文本；使用input来创建一个提交按钮，它的type属性是submit：提交按钮

如果希望表单项中的数据提交到服务器中，还必须给表单项指定一个name属性：表示内容提交的名字

我们用户填写的信息会附在url地址的后面以查询字符串的形式发送给服务器：格式：属性名=属性值

在提交按钮中可以通过value属性来指定按钮上的文字；设置默认值

在文本框和文本域中可以通过placeholder来指定提示文字

单选按钮：type属性是radio；单选按钮通过内置 name是分组

属性进行分组，name属性相同是一组按钮；像这种需要用户选择但是不需要直接填写的内容的表单项

还必须指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器，name、value

多选按钮：type属性值是checkbox 同样要记得给name分组 value设置属性值

重置按钮：type属性值是reset，可以创建一个重置按钮，点击之后表单内容全部清空，恢复默认值

单纯按钮：type属性值是button，可以创建一个单纯的按钮，没有任何功能只能被点击，结合js使用

除了使用submit外，还可以使用button按钮进行使用；这样会更灵活一点

如果希望在单选按钮或者是多选按钮中指定默认选中的选项，则可以在希望选中的选项增加checked=本身

除了使用input创建按钮外，还可以使用button标签来创建按钮，这种和input类似，不过是成对出现

在HTML中有个专门输入文字的标签，用于表单：label 用来作表单提示文字的标签，该属性需要指定

一个for属性，该属性的值需要指定一个表单项的id值，属性一样，点提示文字会跳input

下拉列表：使用select来创建一个下拉列表；在下拉列表使用option标签来创建一个一个列表；

下拉列表的name属性需要指定给select；value的属性需要指定给option；selected="selected"设置默认值

当为select设置multiple="multiple"，则下拉列表变为一个多选的下拉列表，可以同时选中多个

在select中可以使用optgroup对选项进行分组；然后可以通过label属性来指定属性的名字

文本框：使用textarea创建一个多行文本域；

表单分组：fieldset可以给长表单的内容进行分组；类似于下拉框那样的分组，增加一个边框；

legend可以指定分组的名字

常用：文本，密码，单选，多选，提交，归零。

框架集：框架集和内联框架的作用类似，都是用于一个页面中引入其他的外部的页面，在框架集可以同时引入多个 页面，而内联框架只能引入一个。在h5标准中，推荐使用框架集而不使用内联框架，使用frameset来创建一个 框架集，注意frameset和body不能出现在同一个页面中，所以要使用框架集，页面就不需要body标签了；在 frameset中使用frame子标签来指定要引入的页面，需要引入几个就写几个标签

在frameset中也可以再继续嵌套frameset，循环继续的嵌套，类似于表格嵌表格

属性：rows，指定框架集的所有框架，一行一行的排列；cols：指定框架集中的所有页面，一列一列的排列

这两个属性frameset必须选择一个，并且需要在属性中指定每一部分的所占的大小；*可以指定剩下的空间

frameset和frame一样，它里面的内容都不好被搜索引擎所检索，所以如果搜索引擎检索到的页面是一个框架集 的话，它是不能判读里边的内容的，使用框架集则意味着页面中不能有自己的内容，自己引入其他的页面。

而我们每单独加载一个页面，浏览器都需要重新发送一次请求；访问速度是很慢的，体验比较差。

如果非得用的话，建议使用frameset而不使用iframe；可以用，但是不建议。

在ie6中对图片格式png24支持度不高，如果使用的图片格式是png24，则会导致透明效果无法正常显示

1、把图片变成png8就可以使用了，图片的清晰度会有所下降

2、使用JavaScript来解决该问题，需要向页面引入一个外部的JavaScript文件；然后写一下简单的js代码，来 处理该问题

css hack：有一些情况下，有一些特殊的代码我们只需要在某些特殊的浏览器中执行，而在其他浏览器中不需要执行，这时就可以使用css hack来解决该问题，css hack实际上指的是一个特殊的代码，，这段代码只在某些浏览器中可以识别，而其他浏览器不能识别，通过这种方式，来为一些浏览器设置特殊的代码

条件hack只对IE浏览器有效，其他浏览器无效，都会识别为注释，这种只适用于i10以下的，[if lte IE 6]>

lte表示小于IE几版本；gt是大于IE几版本

在样式前添加一个下划线，则样式只有IE6以下浏览器才可以识别

在样式前添加一个*号的样式，只有IE7及以下的浏览器才可以识别 这两个都是不推荐使用的

css hack不到万不得已的情况，尽量不要使用

cursor可以用来设置鼠标指针的样式，auto默认值；crosshair为十字线；pointer鼠标指针a链接效果