HTML5 总结

172 阅读1分钟

新增 html5标签

  1. 新增的语义化标签,如:article,header,nav,main,footer,aside,section,figure
  2. 新增input类型:color、url、email、date、week、time、number、range、search、tel
  3. 新增表单控件元素 placeholder 设置文本框默认提示文字 autofocus 自动获取焦点 autocomplete 关键字联想
  4. 存储:提供了sessionStorage、localStorage和本地离线存储(使用manifest配置文件)
  5. 多媒体:音频元素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一样

  1. drag ,为了使元素可拖动,把属性draggable="true"设置上
  2. 地理定位、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){}