新增 html5标签
- 新增的语义化标签,如:article,header,nav,main,footer,aside,section,figure
- 新增input类型:color、url、email、date、week、time、number、range、search、tel
- 新增表单控件元素 placeholder 设置文本框默认提示文字 autofocus 自动获取焦点 autocomplete 关键字联想
- 存储:提供了sessionStorage、localStorage和本地离线存储(使用manifest配置文件)
- 多媒体:音频元素audio、视频元素vedio
video的属性:
controls
提供添加播放、暂停和音量控件。autoplay
自动播放loop
循环播放,<video>Your browser does not support the video tag.</video>
video标签内是提供的若是你的浏览器不支持所显示的内容
可以用dom读取video标签的 paused属性,来调用video.play()进行播发,video.pause()进行暂停
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
下面是视频和音频的三种格式 audio标签的属性同video一样
- drag ,为了使元素可拖动,把属性
draggable="true"
设置上 - 地理定位、canvas画布、多线程编程的webworker、websocket协议 由于canvas 本身没有绘画能力,所有的绘制需要在js中完成
<canvas id= "myCanvas" />
<script>
const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d') //创建context对象
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();//绘制
</script>
地理位置API通过 navigator.geolocation
,通过navigator.geoloaction.getCurrentPosition()
获取当前的定位,通过watchPosition()
来监测位置变化,watchPosition会返回一个id,通过调用 navigator.geoloaction.clearWatch(id)
来停止监测
navigator.geolocation.getCurrentPosition(function(position) {
do_something(position.coords.latitude, position.coords.longitude);
});
响应式布局
<meta name="viewport" content="device-content initial-scale= 1 maxium-scale =1 minimum-scale =1 user-scalable = true ">
或者用@meta(min-width:500px){}