语义化

【推出的理由及其目标】

浏览器兼容性很低

文档结构不够明确

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元素】

块中标题

【footer和hgroup】

页面中footer，article中的footer，使用类似header

hgroup将标题和子标题进行分组

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

autofocus自动获取焦点

<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>

autocomplete属性，帮助输入所用的自动完成功能

<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元素和figcaption元素

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

selectNode----选取的是当前选取内容对应的标签

selectNodeContents-----选取的内容

deleteContents----删除内容或者删除标签

<div>元素汇总的内容元素汇总的内容元素汇总的内容</div>

var div=$("#div");
var rangeObj=document.createrange();
rangeObj.selectNodeContents(div);
rangeObj.selectNode(div);
rangeObj.deleteContents();

setStartsetEnd setStart setEnd setStartBefore setStartAfter setEndBefore setEndAfter

【音频视频】

音频播放

Audio提供播放音频文件标准

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 是万维网联盟的标准

未完待续

Html5笔记--新内容

【推出的理由及其目标】

【语法的改变】

【新增的元素】

【article元素】

【section元素】

【nav元素】

【aside元素】

【time和pubdate】

【header元素】

【footer和hgroup】

【address】

【文档结构】

【fom属性和formaction属性】

【formmethod属性和formenctype属性】

【formtarget属性和autofocus属性】

【required 属性和labels属性】

【标签的control属性和placeholder属性】

【list属性和AutoComplete】

【pattern属性和SelectionDirection】

【indeterminate属性】

【image】

【改良的input元素种类】

【表单验证】

【HTML5增强的页面元素】

【range对象】

【音频视频】

【HTML5拖放】

相关推荐

Html5笔记--新内容

【推出的理由及其目标】

【语法的改变】

【新增的元素】

【article元素】

【section元素】

【nav元素】

【aside元素】

【time和pubdate】

【header元素】

【footer和hgroup】

【address】

【文档结构】

【fom属性和formaction属性】

【formmethod属性和formenctype属性】

【formtarget属性和autofocus属性】

【required属性和labels属性】

【标签的control属性和placeholder属性】

【list属性和AutoComplete】

【pattern属性和SelectionDirection】

【indeterminate属性】

【image】

【改良的input元素种类】

【表单验证】

【HTML5增强的页面元素】

【range对象】

【音频视频】

【HTML5拖放】

相关推荐

【required 属性和labels属性】