-
HTML5初识
-
HTML5是继htnl\html4.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="datalist1"> 3 <datalist id="datalist1"> 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 } 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]-->