语义化
【推出的理由及其目标】
浏览器兼容性很低
文档结构不够明确
web应用程序的功能收到了限制
【语法的改变】
doctype类型----<!DOCTYPE html> 简化了
指定字符编码的改变-----<Meta chartset="UTF-8">
可以省略标记的元素
具有boolean值的属性----不指定值为true,空为true,省略为true,不写为false【checked,checked="checked",checked=""】为true,不写为false
省略引号---checked=checked
【新增的元素】
【article元素】
强调内容,强调独立性,相对独立完整
【section元素】
不要设置样式的容器,如果article,nav,aside更符合请不要使用section,不要对没有标题的内容区域块使用section
【nav元素】
nav-ul-li
【aside元素】
【time和pubdate】
***************【新增加非主体结构元素】***************
【header元素】
块中标题
<header><h1><nav><ul><li>
【footer和hgroup】
页面中footer,article中的footer,使用类似header
hgroup-h1-h2 h2是h1的子标题的时候二者用hgroup包裹起来
【address】
呈现文档中呈现联系信息,包括文档作者文档维护者的名字,他们的网站链接,电子邮箱,地址,电话等等
【文档结构】
大纲编排规则,h1-h6,块用section
***************【新增表单元素与属性】***************
【fom属性和formaction属性】
form="formid"
formaction 单击不同的按钮提交到不同的action
<input type='submit' formction='xxx.action'> <input type='submit' formction='yyy.action'>
【formmethod属性和formenctype属性】
<input type='submit' formction='xxx.action' formmethod='post'> <input type='submit' formction='yyy.action' formmethod='get'>
formenctype指定不同的编码方式
<input type='submit' formction='xxx.action' formmethod='post' formenctype='test/plain'> <input type='submit' formction='yyy.action' formmethod='get' formenctype='mulitpart/form-data'> <input type='submit' formction='yyy.action' formmethod='get' formenctype='application/x-www-form-urlencoded'>
【formtarget属性和autofocus属性】
每个submit对应打开方式
_blank,_self,_parent,_top,framename
<input type="text" autofocus>
【required属性和labels属性】
<input type="text" required>
labels块
【标签的control属性和placeholder属性】
标签内部放置一个表单元素,可以通过该标签的control属性来反问该表单元素
var labels=$("#label");
var textBox=labels.control;
textBox.value="123123123";
placeholder属性,默认显示值,模糊显示值,光标获取焦点消失
【list属性和AutoComplete】
<input name="xxxx" list="greeting"> <datalist id="greeting"> <option value="1111">1111</option> <option value="2222">2222</option> </datalist>
<input name="xxxx" list="greeting" autocomplete="on/off"> <datalist id="greeting"> <option value="1111">1111</option> <option value="2222">2222</option> </datalist>
【pattern属性和SelectionDirection】
pattern满足正则表达式,校验功能,
SelectionDirection(crome不支持),获取用户正向反向选取表单的值
【indeterminate属性】
复选框不明确的选中状态
<input type="checkBox" indeterminate id="idc">
【image】
<input type="image" src="xx.png" width="50" height="50">
【改良的input元素种类】
【url,email,date,time,datetime.datetime-local,month,week,number,range,search,Tel,color】
type="xxx"
<input type="number" id="num1" min="10" max="100" step="10">
<input type="number" id="num1"> + <input type="number" id="num2"> = <input type="number" id="result" readonly> <input type="button" id="计算" onclick="sum()">
function sum(){ var n1=document.getElementById("num1").valueAsNumber; var n2=document.getElementById("num2").valueAsNumber; document.getElementById("result").valueAsNumber=n1+n2; }
取数字要用 valueAsNumber
range指定范围
<input name="range" type="range" value="25" min="0" max="100" step="5">
search搜索
color颜色选取器
<input type="color" onchange="document.body.style.backgroundColor=document.getElementById('currentColor').textContent=this.value"> <span id="currentColor"></span>
output元素的追加(配合range使用)
<input id="range" type="range" min="0" max="100" step="5" value="10" onchange="value_change()"> <ountput id="output">10</output>
function value_change(){ var number=document.getElementById("range").value; document.getElementById("output").value=number; }
【表单验证】
<form id="testform" onsubmit="" novalidate="true"> <label for="">Email</label> <input nme="email" type="email" id="email"><br/> <input type="submit"> </form>
function check(){ var eamil=document.getElementById("email"); if(email.value==""){ alert("请输入邮箱地址") }else if(!email.checkValidity()){ alert("请输入正确的邮箱地址") } }
【HTML5增强的页面元素】
figure-里面放视频图片,音频视频插件,统计表格,代码示例
figure内部只能放置一个figcaption元素,用来描述
<figure> <img> <img> <img> <figcaption> </figure>
新增的details元素和summary元素
details表示内容可以展开,true为展开false为合并
summary从属于details用来点击展开details元素,如果没有summary元素会指定默认文字用来单机展开
<details> <summary id="detail" onclick="detailclick(this)"> <p id="p" style="visibility:hidden">啊啊啊啊啊啊啊啊啊啊啊啊啊</p> </details>
function detailclick(detail){ var p=$("#p"); if(detail.open){ p.style.visibility="hidden"; }else{ p.style.visibility="visible"; } }
新增的mark元素
mark高亮的效果
新增的progress元素
代表任务完成进度
<section> <h2> <p>完成百分比<progress id="p" style="background0color:@269abc" max=100><span>0</span>%</progress></p> <input type="button" onclick="" value="单击"> </h2> </section>
function btn(){ // for(var i=0;i<=100;i++){ // setTimeout(function(){ // updateprogress(i); // },2000) // } //for循环里有延时的话是先走完for循环,再一步一步走延时 var i=0 ; function threadone(){ if(i<=100){ i++; updateprogress(i); } } setInterval(threadon,100); } function updateprogress(newValue){ var progressBar=$("#p"); progressBar.value=newValue; progressBar.getElementByTagName("span")[0].testContent=newValue; }
新增的meter元素
进度,百分比等等
<meter value="40" min="0" max="100" low="10" height="90" optimum="80"></meter>
改良的ol列表
<ol start="5" reversed> <li></li> </ol>
改良的dl列表
多个名字的列表项,每一项都带有名字的dt用来表示术语,dt后面紧跟一个或者多个dd,不允许有相同名字的dt元素不允许有相同名字的术语
<dl> <dt>hello</dt> <dd>你好</dd> <dt>aaa</dt> <dd>aaaa</dd> </dl>
加以严格限制的cite元素和重新定义的small元素
cite标题
<p>我最喜欢的电影是<cite>啦啦啦</cite></p>
small小字引述体,版权信息等等
【range对象】
表示页面上一段连续区域,通过range对象可以获取或者修改网页上任何区域
火狐能够选取多段
<inpt type="button" value="点击我" onclick="rangetest() "> <div id="showrange"><div>
function rangetest(){ var html; showrangediv=$("#showrange"); selection=document.getSelection(); if(selection.rangeCount>0){ html="您选取了"+selection.rangeCount+"内容<br/>" ; for(var i=0;i<selection.rangeCount;i++){ var range=selection.getRangeAt(i); html=html+"第"+(i+1)+"段内容,内容为:"+range+"<br/>"; } showrangediv.innerHTML=html; } }
selectNode,selectNodeContents,deleteContents
selectNodeContents-----选取的内容
<div>元素汇总的内容元素汇总的内容元素汇总的内容</div>
var div=$("#div"); var rangeObj=document.createrange(); rangeObj.selectNodeContents(div); rangeObj.selectNode(div); rangeObj.deleteContents();
setStartsetEnd setStart setEnd setStartBefore setStartAfter setEndBefore setEndAfter
【音频视频】
音频播放
control添加播放暂停音量控制
audio定义声音
source规定多媒体资源可以是多个
<audio id="audio"> var a=$("#audio"); function c(a.p){ if(a.paused){ a.paly(); }else{ a.pause(); } }
编解码工具
视频播放
<video id="video" controls="controls"> <source src="xx.mp4"> </video> var a=$("#video"); //播放暂停 function c(a.p){ if(a.paused){ a.paly(); }else{ a.pause(); } }
【HTML5拖放】
ondrag
ondrop
【canvas标签】
【canvas使用路径】
【渐变图形与变形图形】
【canvas图形绘制处理】
【canvas应用】
【SVG】
-
SVG 指可伸缩矢量图形 (scalable Vector Graphics)
-
SVG 用于定义用于网络的基于矢量的图形
-
SVG 使用 XML 格式定义图形
-
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
-
SVG 是万维网联盟的标准
未完待续