H5初探-新特性

2018-08-14  本文已影响0人  锋清杨

1.H5新增语义化标签,具体标签如下:

header标签包含引导和导航等,通常包含h1~h6、搜索框、logo等。 

footer标签一般配合address标签(显示地址),包含作者信息、相关链接等。 

nav标签一般包含多个a标签,构建导航组件。 

aside标签主要装载广告、侧边栏。 

article标签包含文章,一般内嵌header、footer、h1、p标签。 

section标签可以用在以上任一一个标签中划分组件。 

hgroup顾名思义是h1~h6的集合。 

总结:

这些标签就是div标签的语义化转化,过去我们曾用div来包裹某个块或者说组件,现在h5使用这些标签实现语义化,有利于代码可读性和SEO。语义元素在IE6-8的兼容可以使用。对js创建新元素也有一定的帮助。如:

1.document.createElement('header');   

 2.document.createElement('nav');


2.本地存储 

h5提供了sessionStorage、localStorage和indexedDB加强本地存储。使用之前应该先判断支持情况。如:

if(window.sessionStorage){

    //浏览器支持sessionStorage  }

  if(window.localStorage){

   //浏览器支持localStorage  }


3.离线web应用

页面缓存指的还是有网络状态下,而离线web应用指的是在没有网络状态可以运行应用

if(window.applicationCache)

{//支持离线应用}


4.表单新增功能

Type=“email” 限制用户必须输入email类型

Type=“url” 限制用户必须输入url类型

Type=“range” 产生一个滑动条表单

Type=“search” 产生一个搜索意义的表单

Type=“color” 生成一个颜色选择的表单

Type=“time” 限制用户必须输入时间类型

Type=“month” 限制用户必须输入月类型

Type=“week” 限制用户必须输入周类型

Type=“datetime-local” 选取本地时间


6.地理定位 

h5提供了Geolocation API访问地理位置,即通过window.navigator.geolocation来实现访问。这个对象有三个方法:

    getCurrentPosition()

    watchPosition()

    clearWatch

页面第一次使用这个api需要获得用户许可, watchPosition可以对位置变化事件进行监听。

上一篇 下一篇

猜你喜欢

热点阅读