- HTML5初识
- HTML5是继htnlhtml4.01后下一代，设计目的是为了在移动设备上支持多媒体，简单易学。
- 优点
- 提高可用性和改进用户的友好体验。
- 有几个新的标签，这将有助于开发人员定义重要的内容。
- 可以给站点带来更多的多媒体元素(视频和音频)。
- 可以很好的替代FLASH和Silverlight。
- 将被大量应用于移动应用程序和游戏。
- 可移植性好。
- HTML5中移出的标签
- <acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<strike>、<tt>
- HTML中的语义标签
- <header> 定义了文档的头部区域
- <nav> 定义导航链接的部分
- <article> 定义页面独立的内容区域
- <aside> 定义页面的侧边栏内容
- <footer> 定义 section 或 document 的页脚
- <progress>定义任何类型的任务的进度
- <section>定义文档中的节（section、区段）
- <command>定义命令按钮，比如单选按钮、复选框或按钮
- <details>用于描述文档或文档某个部分的细节
- <dialog>定义对话框，比如提示框
- <summary>标签包含 details 元素的标题
- HTML5 新的表单元素
- <datalist> 元素规定输入域的选项列表，<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：使用 <input> 元素的列表属性与 <datalist> 元素绑定。
1 <!-- html5中的下拉菜单 --> 2 <input type="text" list="inp"> 3 <datalist id="inp"> 4 <option value="01">我会飞</option> 5 <option value="01">我会跑</option> 6 <option value="01">我会跳</option> 7 </datalist>
- <output> 定义不同类型的输出，比如脚本的输出
1 <!--oninput 用户输入内容时触发，可用于移动端输入字数统计 --> 2 <!-- output 输出 name:你要操作的表单元素的变量 for:定义一个或者多个元素的输出域的元素 多个用空格隔开--> 3 <form oninput="x.value = parseInt(inp1.value) + parseInt(inp2.value)"> 4 <input type="number" id="inp1" value="1"> + 5 <input type="nUmber" id="inp2" value="1"> = 6 <output name="x" for="inp1 inp2">2</output> 7 </form>
- HTML5 新的表单属性
1 <form action=""> 2 <!-- search 搜索框--> 3 search Google:<input type="search" name="googlesearch"> 4 5 <input type="submit"> 6 7 <!-- 获取焦点 autofocus --> 8 <input type="text" autofocus placeholder="在这里">autofocus 9 10 <!-- autocomplete 自动完成表单的验证，记录上次的结果 --> 11 <input type="text" placeholder="autocomplete"> 12 13 <!-- required 属性为必填项
novalidate给表单from添加后，表单验证失效--> 14 <!-- email 输入email格式 匹配@邮箱,只匹配@ --> 15 <input type="email" required placeholder="请输入邮箱"> 16 17 <!-- color 拾色器，通过value进行取值--> 18 <input type="color" value="red">color 19 20 <!-- number 只能输入数字--> 21 <input type="number" placeholder="只能输入数字"> 22 23 <!-- date 日期 不是绝对的 允许你从一个日期选择器选择一个日期--> 24 <input type="date">date 25 26 <!-- time 允许你选择一个时间 --> 27 <input type="time">time 28 29 <!-- month 允许你选择一个月份 --> 30 <input type="month">month 31 32 <!-- week 允许你选择周和年--> 33 <input type="week">week 34 35 <!-- url 只能输入网址 https://www.baidu.com --> 36 <input type="url" name="" id="">url 37 38 <!-- maxlength 最大长度 minlength 最小长度 --> 39 <input type="text" maxlength="7" minlength="3">maxlength minlength 40 41 <!-- 匹配正则 pattern --> 42 <input type="text" pattern="^[0-9]{9}$">pattern 43 44 <!-- range： 范围，可以进行拖动，通过value进行取值 --> 45 <input type="range" value="1" min="1" max="20" step="1" id="inp1"> 46 </form>
- HTML5表单新增的事件
- oninput 用户输入内容时触发，可用于移动端输入字数统计
- document.getElementById("name").oninput=function(){console.log(this.value);}
- HTML5多媒体
- Audio(音频)
- controls 如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）
- loop 如果出现该属性，则当媒介文件完成播放后再次开始播放
- muted 如果出现该属性，则音频输出为静音
1 <body>
2 <!-- 支持 mp3、amr、ogg、wav、wma -->
3 <audio loop controls id="audio1">
4 <source src="audio/llh.amr">
5 <source src="audio/llh.ogg">
6 <source src="audio/llh.wav">
7 <source src="audio/llh.wma">
8 <source src="audio/llh.mp3">
9 </audio>
10 <button id="btn1">make play</button>
11 </body>
12 <script>
13 var v = document.getElementById('audio1');
14 var btn1 = document.getElementById('btn1');
15 btn1.onclick = function () {
16 if (v.paused) {
17 v.play()
18 } else {
19 v.pause()
20 }
21 }
- Video(视频)
- controls 如果出现该属性，则向用户显示控件，比如播放按钮
- loop 如果出现该属性，则当媒介文件完成播放后再次开始播放
- muted 如果出现该属性，视频的音频输出为静音
- height 设置视频播放器的高度
- width 设置视频播放器的宽度
- paused 属性，暂停(音视同用)
- play() 开始播放方法(音视同用)
- pause() 暂停播放方法(音视同用)
1 <body>
2 <!-- controls 视频控制按钮 -->
3 <!-- HTML5 视频支持mp4、Ogg、webm -->
4 <video src="video/captian .mp4" id="video1" controls>
5 <!-- source 添加更多
6 <source src='./video/captian.mp4'>
7 <source>-->
8 </video>
9 <button id="btn1">make bigger</button>
10 <button id="btn2">make smaller</button>
11 <button id="btn3">make normal</button>
12 <button id="btn4">make play</button>
13 </body>
14 <script>
15 var v = document.getElementById('video1');
16 var btn1 = document.getElementById('btn1');
17 var btn2 = document.getElementById('btn2');
18 var btn3 = document.getElementById('btn3');
19 var plbtn4ay = document.getElementById('btn4');
20 btn1.onclick = function () {
21 v.width = '1000'
22 }
23
24
25 btn2.onclick = function () {
26 v.width = '100'
27 }
28
29
30 btn3.onclick = function () {
31 v.width = '350'
32 }//没有开始播放属性只有方法 play()
33 // paused 属性，暂停
34 //play() 开始播放方法
35 //pause() 暂停播放方法
36 btn4.onclick = function () {
37 if (v.paused) {
38 v.play()
39 } else {
40 v.pause()
41 }
42 }
43 </script>
- 处理兼容性问题 主要是ie9以下不兼容
1 <!--[if lt IE 9]> 2 <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script> 3 <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> 4 <![endif]-->