HTML&CSS基础（九）

1.表格：用来表示一些格式化的数据的，在网页中也可以创建不同的表格。
在HTML中，使用table标签来创建一个表格。table是块元素。

<table></table>

• <tr></tr>：在table标签中使用tr来表示表格中的一行，有几行就有几个tr。
• <td></td>：在tr中需要使用td来创建一个单元格，有几个单元格就有几个td。
• <th></th>：th标签表示表头中的内容，用法和td一致。效果：加粗和居中。
• colspan：横向合并单元格
  rowspan：纵向合并单元格
  例如：<td colspan="2">A1</td>
  2.table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离。
  border-collapse可以用来设置表格的边框合并。
  如果设置了边框合并，border-spacing自动失效。
  3.长表格：分为三个部分，表头、表格的主体、表格底部
• 在HTML中为我们提供了三个标签：
  thead，表头。
  tbody，表格的主体
  tfoot，表格底部
• 这三个标签的作用，用来区分表格的不同的部分，都是table的子标签，都需要直接写到table中。tr需要写在这些标签中。
• 如果表格中没有写tbody，浏览器会自动在表格中添加tdoby，并且将所有的tr都放在tbody中，所以tr并不是table的子元素，而是tbody的子元素。
  通过table>tr无法选中行，需要通过tbody>tr。
  4.表格的布局
  表格的列数由td最多的那行决定。
  表格是可以嵌套的，可以在td中再放置一个表格。
  5.完善clearfix
• 使用空的table标签可以隔离父子元素的外边距,阻止外边距的重叠。
• 经过修改后的clearfix是一个多功能的，既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠。

.clearfix：before，
	.clearfix：after{
			content:"";
			display:table;
			clear:both;
		}
	.clearfix{
			zoom:1;
		}

6.表单：表单的作用就是将用户信息提交给服务器的。
使用form标签创建一个表单。<form></form>

• form标签中必须指定一个action属性，该属性指向的是一个服务器的地址，当我们提交表单时将会提交到action属性对应的地址。

• 使用form创建的仅仅是一个空白的菜单，还需要向form中添加不同的表单项。

• 使用input来创建一个文本框，他的type属性是text。text只是单行文本框input是自结束标签。==
  如果希望表单项中的数据会提交到服务器中，还必须给表单项指定一个name属性。
  name表示提交内容的名字。
  用户填写的信息会附加在url地址的后边以查询字符串的形式发送给服务器。
  url地址？查询字符串 (查询字符串的格式：属性名=属性值)

• 提交按钮可以将表单中的信息提交给服务器，使用input创建一个提交按钮，他的type属性值是submit。

• 在提交按钮中可以通过value属性来指定按钮上的文字。
  在文本框中也可以指定value属性值，该值将会作为文本框的默认值显示。

• 使用input创建一个密码框，他的type属性值是password。

7.单选按钮：使用input来创建单选按钮，它的type属性是radio。
单选按钮通过name属性进行分组，name属性相同是一组按钮。
像这种需要用户选择但是不需要用户直接填写内容的表单项，还必须指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器。
8.多选框
使用input来创建单选按钮，它的type属性是checkbox。
9.下拉列表 <select></select>使用select来创建一个下拉列表。

• 在下拉列表中使用option标签来创建一个列表项。

• 下拉列表的name属性需要指定给select，而value属性需要指定给option。

• 当为select添加一个"multiple=“multiple”"，则下拉列表变为一个多选的下拉列表。

• 在select属性中可以使用optgroup对选项进行分组，同一个optgroup中的选项是一组。可以通过label属性来指定分组的名字。
  10.默认选项

• 如果希望在单选列表或者是多选列表中指定默认选中的选项，则可以在希望选中的选项里添加"checked="checked""属性。

• 如果希望在下拉列表中设置默认选项，则可以通过在option属性在那个添加"selected="selected""来将选项设置为默认选中。
  11.文本域：使用textarea可以创建一个文本域。
  12.

• <input type="reset" />可以创建一个重置按钮，点击重置按钮以后表单中的所有内容将会恢复为默认值。

• 使用<input type="button" />可以用来创建一个单纯的按钮，没有任何功能，只能被点击。
  13.除了使用input之外，button标签也可以用来创建按钮。<button></button>
  比使用input更加灵活。
  14在HTML中还为我们提供了一个标签，专门用来选中表单中的提示文字的label标签。
  该标签可以指定一个for属性，该属性的值需要指定一个表单项的id值。
  15. 在表单中可以使用fieldset来为表单项进行分组，将表单项中的同一组放在一个fieldset中。
  在fieldset中可以使用legend子标签，来指定组名。
  16框架集：和内联框架作用类似，都是为了在一个页面中引入其他的外部页面。
  不同之处：框架集可以同时引入多个页面，而内联框架只能引入一个。

• 使用frameset来创建一个框架集，注意：frameset不能和body出现在同一个页面中。

• 属性：
  rows，指定框架集中的所有的框架，一行一行的排列。
  cols，指定框架集中的所有的页面，一列一列的排列。
  这两个属性，frameset必须选择一个，并且需要在属性中指定每一部分所占的大小。

• 在frameset中使用frame子标签来指定要引入的页面。引入几个页面就写几个frame

• frameset中也可以再嵌套frameset。

• frameset和iframe一样，骂里面的内容不会被搜索引擎所检索，所以如果搜索引擎检索中的页面是一个框架页的话，不能判断里面的内容。

• 使用框架集则意味着页面中不能有自己的内容，只能引入其他的页面。
  如果非要使用，则建议使用frameset而不使用ifram。
  17.IE6.png的修复
  在IE6中对图片格式png24支持度不高，若图片格式为png24，则会导致透明效果无法正常显示。

• 解决方法：
  ①可以使用png8来代替png24.但代替之后，图片的清晰度会有所下降。
  ②使用JavaScript来解决该问题，需要向页面中引入一个外部的JavaScript文件，然后再写一下简单的JS代码，就可以处理问题。

18.CSS-Hack (尽量不要使用)
—指的是一个特殊的代码，这段代码只能在某些浏览器中可以识别，其他浏览器则不能识别，通过这种方式，来为某些浏览器设置特殊的代码。

• 条件Hack <!--[if IE]> <![endif]-->
  条件Hack只对IE浏览器有效，其他浏览器都会将他识别为注释。IE10以上也不要支持
  <!--[if lt IE9]> <![endif]-->：标签会在IE9以下的浏览器中显示。
  lt，小于；lte，小于或等于；gt，大于；gte，大于或等于；！，非；
• 属性Hack
  ❶"_"：在样式前添加下划线，则该样式只有IE6及以下的浏览器才能识别。
  ❷"*"：在样式前添加星号，则该样式只有IE7及以下的浏览器才能识别。
  ❸"\0"：在样式后添加\0，则该样式只有IE8及以上的浏览器才能识别。