目录
表格
简介
在HTML中，使用table标签来创建一个表格。table是个块元素。
在table标签中使用tr来表示表格中的一行，有几行就有几个tr。
在tr中需要使用td来创建一个单元格，有几个单元格就有几个td。
表格的列数由td最多的那行决定。
colspan横向合并单元格，rowspan纵向合并单元格。
表格的样式
table和td边框默认有一个距离，通过border-spacing属性可以设置这个距离。但会使边框重合。
border-spacing:0px;
border-collapse可以用来设置表格的边框合并。如果设置了边框合并，则border-spacing自动失效。所以一般就写border-collapse给table，给td设置个边框就可以。
border-collapse:collapse;
可以使用th标签来表示表头的内容，它的用法和td一样，不同的是它会有一些默认效果。
隔行变色：
tr:nth-child(even){
background-color:#bfa;
}
鼠标移入到tr后变色：
tr:hover{
background-color:#ff0;
}长表格
有一些情况下表格是非常长的。这时需要将表格分为三个部分：表头、表格主体、表格底部。
在HTML中为我们提供了三个标签：
thead，表头
tbody，表格主体
tfoot，表格底部
这三个标签的作用，就来区分表格的不同的部分。他们都是table的子标签，都需要直接写到table中，tr需要写在这些标签当中。
thead中的内容永远会显示在表格的头部，tfoot中的内容永远会显示在表格的底部，tbody中的内容永远会显示在表格的中间。
如果表格中没有写tbody，浏览器会自动添加tbody，并且将所有的tr放到tbody中。所以注意tr并不是table的子元素，而是tbody的子元素。通过 table > tr 无法选中行，需要通过 tbody > tr来设置。
表格布局
在过去表格更多的情况实际上是用来对页面进行布局的，但这种方式早已被CSS所淘汰了。
表格是可以嵌套的，可以在td中再放置一个表格。
完善clearfix
使用空的table标签可以隔离父子元素的外边距，阻止外边距的隔离。
display:table可以将一个元素设置为表格显示
.box:before{
content:"";
display:table;
}通过这个也可以解决父元素高度塌陷
.clearfix:before,.clearfix:after{
content:"";
display:table;
clear:both;
}经过修改后的clearfix是一个多功能的。既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠。
表单
表单的作用就是用来将用户信息提交给服务器的，比如：百度的搜索框、注册、登录这些操作都需要填写表单。
使用form标签创建一个表单。form标签中必须指定一个action属性，该属性指向的是一个服务器地址，当我们提交表单时将会提价到action属性对应的地址。
使用form创建的仅仅是一个空白的表单，我们还需要向form中添加不同的表单项。
<form action="xxx"> </form>文本框
使用input来创建一个文本框，它的type属性是text。
在文本框中指定value属性值，该值将会作为文本框的默认值显示。
<input type="text" />提交按钮
提交按钮可以将表单中的信息提交给服务器
使用input创建一个提交按钮，它的type属性值是submit。
使用br来使按钮换行
在提交按钮中可以通过value属性来指定按钮上的文字
<input type="submit" value="xxx" /> </br>name属性
如果希望表单项中的数据会提交到服务器中，还必须给表单指定一个name属性。name表示提交内容的名字。如果不写name属性，则该表单项不会被提交。
<input type="text" name="username" />用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器。
url地址?查询字符串
查询字符串格式：属性名=属性值
密码框
使用input创建一个密码框，他的type属性值是password
<input type="password" />表单项一
单选按钮
使用input来创建一个单选按钮，它的type属性使用radio。
<input type="radio" />单选按钮通过name属性分组，name属性相同的是一组按钮。
像这种需要用户选择但不需要用户直接填写的表单项，还必须指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器。
<input type="radio" name="gender" value="male" />男
<input type="radio" name="gender" value="female" />女
多选框
使用input创建一个多选框，它的type属性使用checkbox。
<input type="checkbox" />也要使用name属性分组，使用value属性提交服务器。
下拉列表
使用select来创建一个下拉列表，在下拉列表中使用option标签来创建列表项。
<select>
<option> </option>
</select>下拉列表的name需要指定给select，而value属性需要指定给option，以此来提交到服务器。
<select name="xxx">
<option value="xxx"> </option>
</select>其他
默认值
如果希望在单选按钮或者是多选框中指定默认选中的选项，则可以在希望选中的项中添加checked="checked"属性。
如果在下拉列表中，则要在option中添加selected="selected"来将选项设置为默认选中。
下拉列表多选
当为下拉列表添加一个multiple="multiple"，则下拉列表变为一个多选的下拉列表。
下拉列表分组
在select中可以使用optgroup对选项进行分组，同一个optgroup中的选项是一组。同时要在optgroup添加label属性来指定分组的名字。
表单选项二
文本域
使用textarea创建一个文本域，同时也是使用name属性来提交到服务器。
<textarea name="xxx"> </textarea>重置按钮
在input的type属性中使用reset来创建一个重置按钮。点击重置按钮后表单中的内容将会恢复为默认值。
<input type="reset" />单纯按钮
在input的type属性中使用button来创建一个单纯的按钮。通过value属性来添加文字。通过js来扩展功能。
<input type="button" />button
除了使用input，也可以使用button标签来创建按钮。同样也是使用type标签来指定功能，但它不是自结束标签，并在中间指定文字，使用更加灵活。
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>label
在html中还提供了label标签，专门用来选中表单中的提示文字。
该标签可以指定一个for属性，该属性的值需要指定一个表单项的id值
<label for="um">用户名</label>
<input id="um" type="text" name="username" />当鼠标选中label内的提示文字时，便可选中文本框。
fieldset
在表单中可以使用fieldset来为表单项进行分组，可以将表单项中的同一组放到一个fieldset中。
在fieldset可以使用legend子标签，来指定组名。
<fieldset>
<legend>xxx</legend>
</fieldset>框架集
框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部页面。框架集可以同时引入多个页面，二内联框架只能引入一个。
在H5标准中，推荐使用框架集，而不使用内联框架。
通过frameset来创建框架集，注意frameset不能和body出现在通过一个页面中。所以要使用框架集，页面中就不可以使用body标签。
属性：
rows，指定框架集中所有的页面，一行一行的排列
cols，指定框架集中所有的页面，一列一列的排列
这两个属性frameset必须选择一个，并且需要在属性中指定每一部分所占的大小，有几个页面写几个大小。
<frameset rows="50%,50%"> </frameset>在frameset中使用frame子标签来指定要引入的页面，frame标签是一个自结束标签。引入几个页面就写几个frame。
<frameset>
<frame src="xxx" />
</frameset>frameset中可以嵌套frameset。frameset和iframe一样，它里边的内容不会被搜索引擎所检索。
使用框架集意味着页面中不能有自己的内容，只能引用其他的页面。而我们每单独加载一个页面，浏览器都需要重新发送一次请求。
IE6中png修复
在IE6中对图片格式png24的支持度不高。如果使用的图片格式是png24，则会导致透明效果无法正常显示。
解决方法：
可以使用png8来代替png24，但是图片的清晰度会有所下降
使用js来解决问题，需要向页面中引入一个外部的js文件，然后在写一些简单的js代码
要引入js文件，要在body标签最后引入js文件。通过script标签来引入js。
<script src="xxx"> </script>然后再创建一个新的script标签，并且编写js代码。
条件hack
在某些情况，有一些特殊的代码我们只需要在某些特殊的浏览器中执行，而在其他浏览器中不需要执行，这时就可以使用CSS Hack来解决问题。
CSS Hack实际上指的是一个特殊的代码，这段代码只在某些浏览器中可以识别，而其他浏览器不能识别，通过这种方式来为一些浏览器设置特殊的代码。
条件hack只对IE浏览器有效，其他浏览器只会将它识别为注释。IE10以上的浏览器已经不支持这种方式。
<!--以下内容只会出现在IE6中-->
<!-- [if IE 6]>
xxxxxxxxxx
<![endif]-->格式：<!-- [if <keywords>? IE <version>?]>
HTML代码
<![endif]-->
属性hack
在样式前面添加_，则该样式只有IE6及以下的浏览器才可以识别。
在样式前面添加*，则只有IE7及以下的浏览器才可以识别。
在样式最后添加\0，则只有IE8及以上的浏览器才可以识别。
在选择器前添加* html，则该选择器只有IE6可以识别。
尽可能减少对CSS Hack的使用，Hack有风险，使用需谨慎。
3590
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
