十二、HTML5标记 现代HTML
html5新增的元素：header nav footer aside section article time 这些新增元素使页面结构更清晰，取代<div id="header">这些。
还有，mark:突出显示文本。audio:插入音频。progress:显示进度条。
htime元素：<time datetime="2017-07-28">7/28/2017</time>，datetime的值是官方格式只有几种，标签内容可以随便写，是显示在页面上读者看到的。
在li中设置属性，display:inline; 元素从默认的block改成inline，会像内联元素一样在一行，且项目标号样式消失。
1、video元素
通过video元素引用视频，逐渐取代flash.
该元素的基本设定都是通过在html中增加属性来完成，除样式外。
基本设定：<video controls autoplay poster="images/poster.png" width="512" height="288" src="video/tweetsip.mp4 "id="video"></video>
controls:是否提供播放控件。
autoplay:是否加载后自动播放。
poster:不设定的话，自动将视频第一帧作为海报。
width, height:视频显示区，尽量设定为视频原始尺寸，否则视频会按原比例显示，两边填充黑边。
loop:是否循环播放。
2、视频格式
主流的有三种视频容器对应三种视频格式。
分别是（容器/格式）：mp4/.mp4 webm/.webm ogg/.ogv，每种浏览器支持的格式不同，所以为了保证适应性，最好多放几个不同格式的源，在video里增加几个source元素。
<video controls autoplay width="512" height="288">
<source src="video/tweetsip.mp4" type='video/mp4'> 其中，type属性指定容器。
<source src="video/tweetsip.webm" type='video/webm'>
<source src="video/tweetsip.ogv" type='video/ogg'>
可以将<object></object>元素放最后，作为退路播放flash视频
</video>
十三、表格与更多列表 建立表格
用html中的元素建立表格数据。在html中<table>开始整个表格，<tr>标记一个表行，<th> <td>都在<tr>里面，其中<th>是表头，<td>是其他单元格内容。可以在css中针对各表格元素设定样式。还可以在<table>的最上面添加<caption>元素，作为表格标题。
1、表格的css样式
单元格数据对齐方式：text-align vertical-align
在table中为整个表格设定单元格边框间距：border-spacing
边框间距折叠，将两个紧挨着的边框合并为一个边框：border-collapse: collapse;
利用伪类:nth-child可设定奇偶行/列不同格式，是这个元素相对于它的兄弟元素的数字顺序。tr:nth-child(odd){ background-color: red; }奇数行红色。
单元格跨多行：在html中为td增加属性，<td rowspan="2">同时被占的相应单元格空出一个空行（也没有空的<td></td>）。
在行和列上都可以跨多个单元格，只是在相应位置上空行就行，跨多列用的是colspan="2"。
十四、html表单 实现交互
表单开始是form元素：
<form action="http://wickedlysmart.com/contest.php" method="post">
<form>其中，action属性指定处理表单文件的服务器脚本文件，method属性指定表单提交方式，标签里面是表单内容。
1、常用的表单元素
每一个表单元素都要有name属性。对于输入性内容，浏览器会打包name+输入内容到服务器，对于选择性内容，浏览器会打包name+value属性值到服务器。用户在页面上看到的都是标签。
输入类：
input 元素中的value属性会在页面上显示为框内默认文本。
单行文本输入 <input type="text" name="fullname">（input是void元素）
数字输入 <input type="number" min="0" max="20">除了限制输入类型为数字，还可以限制大小范围
范围输入<input type="range" name="range" min="0" max="20" step="5">显示是一个滑动条
颜色输入<input type="color" name="color">弹出一个颜色选择器
日期输入<input type="date" name="date">
email输入<input type="email" name="email">
tel输入<input type="tel" name="tel">
url输入<input type="url" name="url">
提交按钮<input type="submit" value="submit now">其中value值就是按钮上显示的
多行文本输入<textarea name="comments" rows="10" cols="48"></textarea>
选择类：
单选钮输入<input type="radio" name="hotornot" value="hot">标签1
<input type="radio" name="hotornot" value="not">标签2 name是一样的，提交的是hotornot+hot，用户在界面看到的就是标签值。可以为某个选项增加一个checked 属性，显示时会默认选中。
复选框输入<input type="checkbox" name="spice" value="salt">标签1
<input type="checkbox" name="spice" value="pepper">标签2
<input type="checkbox" name="spice" value="garlic">标签3 name是一样的，提交的是spice+salt&pepper，用户在界面看到标签值 。
下拉菜单<select name="characters">
<option value="buckaroo">bucharoo banzai</option>
<option value="tommy">perfect tommy</option>
<option value="penny">penny priddy</option>
<option value="john">john parker</option>
</select>用户在下拉框看到的是标签内容，向服务器提交的是name+value值。
2、两种提交方式
form中method属性的两种值，post和get。
post:打包表单数据发给服务器，不追加到url。当表单数据很多，或很私有时用post。
get:打包表单数据发给服务器，并将数据追加到url。可以加书签的请求，例如搜索结果。
3、用label元素来添加标签
与直接加文本标签表现形式一样，但可访问性好。但要为元素增加一个id
<input type="radio" name="hotornot" value="hot" id="hot">
<label for="hot"(id)>hot</label>
<input type="radio" name="hotornot" value="not" id="not">
<label for="not">not</label>
4、其他
文件提交，<input type="file" name="doc">
多选下拉菜单，为select元素增加布尔属性mutiple
输入提示，为input元素增加属性placeholder="ceshi"，比正常内容浅些，不影响输入。
必须填写，为元素增加布尔属性required
【全书完，棒棒哒(^o^)/~】