完整笔记指路：
前端 HTML&CSS 学习笔记1（基于尚硅谷教学视频）
前端 HTML&CSS 学习笔记2（基于尚硅谷教学视频）
前端 HTML&CSS 学习笔记3（基于尚硅谷教学视频）
前端 HTML&CSS 学习笔记4（基于尚硅谷教学视频）
前端 HTML&CSS 学习笔记5（基于尚硅谷教学视频）
前端 HTML&CSS 学习笔记6（基于尚硅谷教学视频）
前端 HTML&CSS 学习笔记7（基于尚硅谷教学视频）
前端 HTML&CSS 学习笔记8（基于尚硅谷教学视频）
前端 HTML&CSS 学习笔记9（基于尚硅谷教学视频）
八十一集（表格样式）
1.设置表格边框
border:1px solid black;
2.table 和 td 边框之间默认有一个距离，可以通过border-spacing属性设置
例如：
border-spacing:50px;
3.可以使用border-collapse设置表格边框合并，设置后border-spacing自动失效
4.使用<th></th>标签设置表头（默认加粗居中）
5.设置隔行变色，例如：
tr:nth-child(even){
background-color: #bfa;
}
//在IE8及以下不支持
6.设置鼠标移入，改变当前行颜色，例如：
tr:hover{
background-color: #ff0;
}
//在IE8及以下不支持对<a></a>以外的标签设置hover
八十二集（长表格）
1.有时候表格很长，则需要使用长表格，这时需要将表格分为表头，主体，及底部
利用以下三个标签<thead></thead> <tbody></tbody> <tfoot></tfoot>
他们都是<table></table>的子标签，<tr></tr>需要写在这些标签中
2.<thead></thead> 永远显示在表格头部
<tbody></tbody> 永远显示在表格中部
<tfoot></tfoot> 永远显示在表格底部
3.如果结构中没写<tbody></tbody>，浏览器会自动加上，并将所有<tr></tr>放入其中，
所以以下写法是无效的，tr 并不是table的子元素：
table > tr:nth-child(even){
background-color: #bfa;
}
八十三集（使用表格布局）
1.现在一般不用表格布局了，以前作用有点像现在的div
2.表格的列数由 td 最多的那行决定
3.表格可以嵌套
八十四集（完善clearfix）
1.子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素
解决方案：
.clearfix:before{
content:""; //添加一个空内容
display:table; //转换为块元素
}
2.联想到之前解决高度塌陷问题的方案如下：
.clearfix:after{
content:""; //添加一个空内容
display:block; //转换为块元素
clear:both; //清除两侧浮动影响
}
3.综上：可以完善clearfix,使其同时解决父子元素垂直外边距重叠问题，以及高度塌陷问题，如下：
.clearfix:before,
.clearfix:after{
content:""; //添加一个空内容
display:table; //转换为块元素
clear:both; //清除两侧浮动影响
}
*若要兼容IE6，再加上
.clearfix{
zoom:1;
}
八十五集（表单简介）
1.表单的作用就是将用户信息提交给服务器，例如百度的搜索框等
2.使用form标签创建表单
*必须为其指定一个action属性，该属性指向的是一个服务器的地址，
当我们提交表单时将会提交到action属性对应的地址
3.<form></form>创建的仅仅是一个空表单，需要为其添加不同的表单项
<form action="target.html">
<input type="text" name="username" value=""/>
<!--
文本框
要想表单中的数据提交到服务器中，必须添加name属性
用户填写的信息会附在url地址的后表面，以查询字符串的形式发送给服务器
url地址?查询字符串
查询字符串的格式为 属性名=属性值&属性名=属性值，例如 name=lallallal&pass=123123
-->
<input type="password" name="pass" /> <!-- 密码文本框-->
<input type="submit" value="百度一下"/> <!-- 提交框-->
</form>
八十六集（表单项一）
1.单选按钮，也是通过input来创建，如下：
<input type="radio" name="gender" value="male" checked="checked" />男生
<input type="radio" name="gender" value="female" /> 女生
*通过name属性分组，相同为同一组
*可以添加checked="checked"，将选项设置为默认选中
*像这种不需要用户填写内容，只需要用户选择的表单项，必须指定一个value值，最终将name和value值提交给服务器
2.多选框，也是通过input来创建，如下：
<input type="checkbox" name="hobby" value="basketball" />篮球
<input type="checkbox" name="hobby" value="football" />足球
<input type="checkbox" name="hobby" value="Table tennis" />乒乓球
*要求同上
3.下拉列表，过select来创建，如下：
<select name="star" multiple="multiple">
<option value="hx" selected="selected">黄轩</option>
<option value="cxk">蔡徐坤</option>
<option value="zr">赵让</option>
</select>
*name指定给select，value指定给option
*可以在option中添加selected="selected"，将选项设置为默认选中
*在select 中添加 multiple="multiple" 时，可以将其设置为多选列表
4.可以在select中添加<optgroup></optgroup>对选项进行分组，label设置组名，例如
<select name="star">
<optgroup label="女明星">
<option value="fbb">11</option>
<option value="lxr">22</option>
<option value="zw">33</option>
</optgroup>
<optgroup label="男明星">
<option value="zbs" selected="selected">44</option>
<option value="ldh" >55</option>
<option value="pcj">66</option>
</optgroup>
</select>
八十七集（表单项二）
1.使用 <textarea ></textarea>，创建文本域，例如：
<textarea name="info"></textarea>自我介绍
2.使用<input type="reset"/>，创建重置按钮，例如：
<input type="reset"/>重置
3.也可以使用 <button></button> 创建按钮，效果与<input />相同，且更灵活
<button type="button">按钮</button>
<button type="reset">重置</button>
<button type="submit">提交</button>
4.使用<lable></lable>标签选中提示文字，则对应的按钮会自动被选中，或光标会自动对应到文本框，例如：
<input type="radio" name="gender" value="female" id="female"/><lable for="female">女生</lable>
效果为：点中女生两个字的时候，也能选中按钮
*lable中for 属性的值必须与前面id 属性的值相同
5.可以使用<fieldset> </fieldset>来为表单分组，使用<legend></legend>指定组名，例如：
<fieldset id="">
<legend>用户爱好</legend>
<input type="checkbox" name="hobby" value="basketball" />篮球
<input type="checkbox" name="hobby" value="football" />足球
<input type="checkbox" name="hobby" value="Table tennis" />乒乓球
</fieldset>
八十八集（框架集）
1.使用类似内联框架，可以在一个页面中同时引入多个外部页面
*但<frameset></frameset>不能和<body></body>同时存在于一个页面中，即只能拿来引入外部页面
*rows：表示按行排列，cols：表示按列排列，两者必须选一个
*<frameset></frameset>中可以嵌套<frameset></frameset>
*不推荐使用：
内容不会被浏览器检索
因为是引入外部页面，引入几个页面浏览器就得发送几次请求
<frameset rows="30%,*,30%">
<frame src="1.html"></frame>
<frameset rows="30%,*,30%">
<frame src="1.html"></frame>
<frame src="1.html"></frame>
<frame src="1.html"></frame>
</frameset>
<frame src="1.html"></frame>
</frameset>
八十九集（IE6png的修复）
1.IE6对png24支持度不高，透明效果无法显示
解决方案：
*将图片改成 png8 格式
*或者使用JavaScript解决，写在body的最后
<script type="text/javascript" src="要引入一个外部文件的路径">
</script>
<script type="text/javascript">
DD_belatedPNG.fix("div");
</script>
九十集（条件hack）
1.css-hack 是指一段特殊的代码，部分浏览器能识别，其他浏览器不能和识别
2.条件hack只对IE10以下的浏览器有效，其他浏览器会将其当做注释
*在IE浏览器中显示以下文字
<!--[if IE]>
<p>珍爱生命,远离IE6</p>
<![endif]-->
*只在IE6中显示以下文字
<!--[if IE 6]>
<p>珍爱生命,远离IE6</p>
<![endif]-->
*在IE8以下显示以下文字
<!--[if lt IE 8]>
<p>请升级浏览器</p>
<![endif]-->
*在IE9及以下显示以下文字
<!--[if lte IE 9]>
<p>请升级浏览器</p>
<![endif]-->
*可以通过条件hack为某个IE浏览器设置单独的样式表，将引入样式表的代码放入条件hack中即可