HTML5新增的属性（八）
希望你所拼命的争取的，最后都能如你所愿
1、datalist标签
<datalist> 标签规定了 <input> 元素可能的选项列表。
<datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。用能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。请使用 <input> 元素的 list 属性来绑定 <datalist> 元素。
<form action="demo-form.php" method="get"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form> <p><strong>注意:</strong> Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。</p>
2、表单新增属性
| 名称 | 标签 |
| 邮箱 | <input type="email"/> |
| 网址 | <input type="url"/> |
| 搜索 | <input type="search"/> |
| 数字 | <input type="number"/> |
| 范围 | <input type="range"/> |
| 颜色 | <input type="color"/> |
| 电话 | <input type="tel"/> |
| 日期 | <input type="date"/> |
| 周 | <input type="week"/> |
| 月 | <input type="month"/> |
3、表单新增属性
<header>头部</header> <nav>导航</nav> <footer>页脚</footer> <aside>侧边栏</aside> <article>文章、帖子、独立的一块</article> <section>章节</section> palceholder 默认提示 autofocus 自动获取焦点 required 必填项 multiple 可以输入多个，用逗号隔开，配合邮箱和网址使用 min和max 最小值和最大值，配合数字和范围使用 minlength和maxlength 最小长度和最大长度，汉子，数字，字母都算一个长度 step 步长，可以取任意值，配合数字和范围使用 例如： <form action=""> <p> 用户名：<input type="text" placeholder="用户名/密码/邮箱" autofocus required minlength="2" maxlength="5"> </p> <p> 密码：<input type="password" placeholder="请输入密码"> </p> <p> 邮箱：<input type="email" multiple/> </p> <p> <input type="submit"> </p> </form>
4、音频和视频
HTML 在出来之前，在线的音频和视频都是借助Flash或者第三方工具来实现的，现在HTML5也支持了这方面的内容，在一个支持HTML5的浏览器中，不需要安装任何插件就可以播放任何食品和音频，原生的支持音频和视频， 为HTML5注入了巨大的发展潜力。
1）视频： 定义视频，比如电影或者其他的视频流 。
支持格式：mp4,ogg,WebM
标签：
<viedo> 您的浏览器不支持视频 </viedo> 属性： src 路径 width 宽度 height 高度 autoplay 自动播放 loop 循环播放 controls 显示控制面板 muted 静音 poster 视频播放前显示一张图片
2）音频
支持格式：MP3、ogg、wav
标签：
<audio>您的浏览器不支持音频</audio> 属性： src 路径 autoplay 自动播放 loop 循环播放 controls 显示控制面板 muted 静音
3） 资源：source 给浏览器提供多种视频或者音频格式的选择
例子：
<video controls width="300"> <source src="images/1.mp4"> <source src="images/1.ogg"> <source src="images/1.webM"> 您的浏览器不支持视频 </video>
5、沙场练兵
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单练习题</title> </head> <body> <form action="form1"> <table border="3" bordercolor="black" width="600" height="400" cellspacing="0" align="center"> <tr> <td align="right"> 用户名： </td> <td> <input type="text" placeholder="请输入用户名"> </td> </tr> <tr> <td align="right"> 密码： </td> <td> <input type="password" placeholder="请输入密码"> </td> </tr> <tr> <td align="right">确认密码：</td> <td> <input type="password" placeholder="请再次输入密码"> </td> </tr> <tr> <td align="right"> 验证码： </td> <td> <input type="text" placeholder="请输入验证码"> </td> </tr> <tr> <td align="right"> 性别： </td> <td> <input type="radio" name="sex" id="man"><label for="man" checked>男</label> <input type="radio" name="sex" id="woman"><label for="woman">女</label> </td> </tr> <tr> <td align="right">年龄：</td> <td> <input type="text" placeholder="请输入年龄"> </td> </tr> <tr> <td align="right"> 爱好： </td> <td> <select name="shopping" id="shopping"> <option value="0">购物</option> <option value="0">购物</option> <option value="0">购物</option> </select> </td> </tr> <tr> <td align="right"> 你喜欢的游戏： </td> <td> <input type="checkbox" name="game" id="games"><label for="games">穿越火线</label> <input type="checkbox" name="game" id="hero"><label for="hero">英雄联盟</label> <input type="checkbox" name="game" id="honor"><label for="honor">王者荣耀</label> <input type="checkbox" name="game" id="happy"><label for="happy">开心消消乐</label> </td> </tr> <tr> <td align="right"> 邮箱： </td> <td> <input type="email" placeholder="请输入邮箱"> </td> </tr> <tr> <td align="right"> 邮箱密码： </td> <td> <input type="password" placeholder="请输入邮箱密码"> </td> </tr> <tr> <td align="right"> <input type="submit"> </td> <td> <input type="reset"> </td> </tr> </table> </form> </body> </html>
