html5 上海,【上海校区】HTML5新特性

(1)新的语义标签和属性

新的语义化标签：header、footer、nav、section、article、aside、details、time、rudy、mark等

新的属性：表单新属性、链接新属性、其他(ol新增reversed、meta新增charset、menu新增type和label、style新增scoped、script新增async、html新增manifest、iframe新增sandbox、seamless、srcdoc)

(2)表单的新特性

新的input type：email、 url、 number、 tel、 search、 range、 color、 date、 month、 week

新的表单元素：datalist、progress、meter、output

表单元素的新属性：autocomplete、autofocus、placeholder、multiple、form

required、maxlength、minlength、min、max、step、pattern

(3)视频和音频

HTML5提供一个新的标签标签，用于播放视频，该标签默认是一个300*150的inline-block，使用方法

HTML5提供一个新的标签标签，用于播放音频，该标签若没有controls属性，则默认display:none;反之则是一个300*30的inline-block，使用方法

(4)Canvas绘图

https://mp.csdn.net/mdeditor/84587619#

(5)SVG

使用SVG绘制矩形：

注意：SVG图形的样式可以用HTML属性赋值，也可以使用CSS形式，但不接受普通的CSS属性！只能用SVG元素专有的属性

SVG图形的属性不属于HTML DOM标准，只能使用核心DOM方法操作其属性：rect.setAttribute(‘’,’’)

使用JS动态创建SVG元素

用svg.innerHTML=’’

用document.createElementNS(‘’,’’),不能使用document.createElement

使用SVG绘制圆形：

使用SVG绘制椭圆：

使用SVG绘制直线：

可以使用来表示公共属性

注意：所有的SVG图形默认只有填充色，没有描边色

使用SVG绘制折线：

使用SVG绘制多边形：          

使用SVG绘制文本

提示：传统的标签不能置于SVG内部！同理，SVG的标签也不能放在其他元素内部

哈哈哈哈哈

使用SVG绘制图像 ：

提示：在SVG中绘制图像使用image元素，引入位图后，此SVG图片放大后会失真

(6)地图定位

HTML5新增了获得浏览器所在地的对象

window.navigator.geolocation{

getCurrentPosition:fn,//用于获取当前定位信息

watchPosition:fn,//不停的监视定位信息的改变

clearWatch:fn//清除监视

}

navigator.geolocation.getCurrentPosition(

function(pos){

console.log('定位成功');

},function(err){

console.log('定位失败');

}

)

(7)拖放API

拖放API——七个事件

源对象可以触发的事件：dragstart:拖动开始 drag:拖动中 dragend:拖动结束

目标对象可以触发的事件：dragenter:拖动着进入 dragover 拖动着在目标对象上方 dragleave：拖动着离开 drop：释放

(8)WebWoker

(9)WebStorage

(10)WebSocket

---------------------

作者：qq_41805715

来源：CSDN

原文：https://blog.csdn.net/qq_41805715/article/details/84726626

版权声明：本文为博主原创文章，转载请附上博文链接！