表格
列分组
<!-- 列分组 --> <colgroup> <col span="2" style="background:red;"> <col span="2" style="background:yellow;"> </colgroup>
表格头部斜线
<!--斜线分类加给子元素--> <th colspan="2"> <div class="line"> <em>日期</em> <span>详情</span> </div> </th>
CSS代码：原理其实是用利用border-top和border-left的交接线。把两条边的宽度设得很大，用边代替格子。
table{ /* 隐藏空单元 */ empty-cells: hide; /* 单元格之间只有单线，加了就合并相邻的线了 */ border-collapse: collapse; } table .line{ border-top: 50px solid red; border-left: 150px solid blue; position: relative; color: white; } table .line em{ 就是为了调整一下里面文字的位置 position: absolute; left: -60px;top: -45px; font-style: normal; } table .line span{ 调整位置 position: absolute; left: -120px;top: -30px; }
表单
下拉菜单分组 optgroup：用 <optgroup label="group-name"></optgroup> 表示分组的组名
表单内元素分组 fieldset：得到一个大框框，左上角写着登录二字
<fieldset> <legend>登录</legend> <p> 用户名:<input type="text"> </p> <p> 密码:<input type="password"> </p> </fieldset>
新的表单属性
autofocus自动聚焦、required必填、autocomplete=‘off’ 自动补齐“否”；pattern=‘’ 括号里写的是正则表达式，填入的内容必须满足正则表达式，例如[a-z]{3}意思是只能写3个字母；
新的表单控件，类型
type新增了：email, url, number, range滑动条(min,max,value都用数字表示), date, month, week, search, color, tel, time...
改变控件的样式：
方法一：在input外面包一层div，在input下加一个同级的div用于存放背景图片，把input的透明度变为0避免干扰。
方法二：在input外面包一层 label，在input下加一个同级的div用于存放背景图片，让 input 的display:none。
特殊情况，如果是checkbox类型，就在勾上的时候写 input:checked 的时候，它紧邻的div的变化。这里的做法是用精灵图。改一下图片坐标就可以了。加号就是临近的意思，下一个同级的意思。
label input:checked+div{ background: url(./img/checkbox.png) 0 0; }