html5详细笔记,Html5笔记--新内容-CSDN博客

语义化

【推出的理由及其目标】

浏览器兼容性很低

文档结构不够明确

web应用程序的功能收到了限制

【语法的改变】

doctype类型---- 简化了

指定字符编码的改变-----

可以省略标记的元素

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

【formmethod属性和formenctype属性】

formenctype指定不同的编码方式

【formtarget属性和autofocus属性】

每个submit对应打开方式

_blank,_self,_parent,_top,framename

autofocus自动获取焦点

labels块

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

标签内部放置一个表单元素，可以通过该标签的control属性来反问该表单元素

var labels=$("#label");

var textBox=labels.control;

textBox.value="123123123";

placeholder属性，默认显示值，模糊显示值，光标获取焦点消失

【list属性和AutoComplete】

1111

2222

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

1111

2222

【pattern属性和SelectionDirection】

pattern满足正则表达式，校验功能，

SelectionDirection(crome不支持)，获取用户正向反向选取表单的值

【indeterminate属性】

复选框不明确的选中状态

【image】

【改良的input元素种类】

【url,email,date,time,datetime.datetime-local,month,week,number,range,search,Tel,color】

type="xxx"

function sum(){

var n1=document.getElementById("num1").valueAsNumber;

var n2=document.getElementById("num2").valueAsNumber;

document.getElementById("result").valueAsNumber=n1+n2;

}

取数字要用 valueAsNumber

range指定范围

search搜索

color颜色选取器

output元素的追加(配合range使用)

function value_change(){

var number=document.getElementById("range").value;

document.getElementById("output").value=number;

}

【表单验证】

function check(){

var eamil=document.getElementById("email");

if(email.value==""){

alert("请输入邮箱地址")

}else if(!email.checkValidity()){

alert("请输入正确的邮箱地址")

}

【HTML5增强的页面元素】

新增的figure元素和figcaption元素

figure-里面放视频图片，音频视频插件，统计表格，代码示例

figure内部只能放置一个figcaption元素，用来描述

新增的details元素和summary元素

details表示内容可以展开，true为展开false为合并

summary从属于details用来点击展开details元素，如果没有summary元素会指定默认文字用来单机展开

啊啊啊啊啊啊啊啊啊啊啊啊啊

function detailclick(detail){

var p=$("#p");

if(detail.open){

p.style.visibility="hidden";

}else{

p.style.visibility="visible";

}

新增的mark元素

mark高亮的效果

新增的progress元素

代表任务完成进度

完成百分比0%

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

进度，百分比等等

改良的ol列表

改良的dl列表

多个名字的列表项，每一项都带有名字的dt用来表示术语，dt后面紧跟一个或者多个dd,不允许有相同名字的dt元素不允许有相同名字的术语

hello

你好

aaa

aaaa

加以严格限制的cite元素和重新定义的small元素

cite标题

我最喜欢的电影是啦啦啦

small小字引述体，版权信息等等

【range对象】

表示页面上一段连续区域，通过range对象可以获取或者修改网页上任何区域

火狐能够选取多段

function rangetest(){

var html;

showrangediv=$("#showrange");

selection=document.getSelection();

if(selection.rangeCount>0){

html="您选取了"+selection.rangeCount+"内容
" ;

for(var i=0;i

var range=selection.getRangeAt(i);

html=html+"第"+(i+1)+"段内容，内容为："+range+"
";

}

showrangediv.innerHTML=html;

}

selectNode,selectNodeContents,deleteContents

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

selectNodeContents-----选取的内容

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

元素汇总的内容元素汇总的内容元素汇总的内容

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规定多媒体资源可以是多个

var a=$("#audio");

function c(a.p){

if(a.paused){

a.paly();

}else{

a.pause();

}

编解码工具

视频播放

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

未完待续