H5新特性总结

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的兼容可以使用

    document.createElement('header');
    document.createElement('nav');

来解决,但是这样js创建的新元素没有样式,需要在css中定义,或者直接通过插件http://www.bootcdn.cn/html5shiv/来解决。

2.本地存储

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

   if(window.sessionStorage){
       //浏览器支持sessionStorage
   }
   if(window.localStorage){
       //浏览器支持localStorage
   }

localStorage和sessionStorage的区别在于sessionStorage基于会话,关闭浏览器之后存储消失。localStorage在各浏览器中上限不同,最低的是2.6MB, 所以开发上限为2.6MB, 当然这比cookie强太多,如果还是不够的话只能借助indexedDB, indexedDB上限是250MB。
localStorage和cookie另一个区别是没有过期时间,不过这个可以在localStorage中加一个时间字段轻松解决这个问题。
存取localStorage可能遇到的坑是跨域问题,因为localStorage是域内安全,也就是同一个域才能对localStorage进行存储,可以通过postMessage来解决。以下是它的常用应用场景

    var userData = {
        name : 'sysuzhyupeng',
        age: 24
    }
    localStorage.setItem('userDate', JSON.stringify(userData));
    var newUserData = JSON.parse(localStorage.getItem('userData')); 

另外,浏览器提供了storage事件来监听存储

  window.addEventListener('storage', showStorageEvent, true)

3.离线web应用

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

    if(window.applicationCache){
        //支持离线应用
    }

manifest文件是核心,记录着哪些资源文件需要离线应用缓存,要使用manifest,只需要在html标签中添加属性

    <html manifest="cache.manifest">

cache.manifest的文件格式如下

    CACHE MANIFEST
    #缓存的文件
    index.html
    test.js
    #不做缓存
    NETWORK
    /images/
    FALLBACK
    offline.html index.html

缓存的文件下面是当网络不可用时,文件直接从本地缓存读取,#NETWORK下面的文件无论是否已经缓存,都要从网络中下载。FALLBACK后面,当无法获取到offline.html,则转到index.html。

4.表单新增功能

以往input中的name和value要随着form表单一起提交,form表单必须包裹input , 而现在可以通过input的form属性綁定

<form id="testform">
    <input type="text" />  
</form> 
<input form=testform />

placeholder屬性

 <input type="text" placeholder="请输入密码" />

autofocus属性,页面只能有一个

 <input type="text" autofocus />

还有type为email、number等,但是实际项目中一般使用自定义,所以这里不提。
5. CSS3
CSS3提供了更多的选择器,before、after、first-child、nth-child。提供的效果包括box-shadow、text-shadow、background-size,以background-size为例, 在具体语法不同浏览器有所区别,所以要使用以下写法

  background-size: 10px 5px
  -webkit-background-size: 10px 5px

还可以使用media-query实现响应式布局

  @media (max-width: 1190px) {
      ...
  }

6.地理定位

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

    getCurrentPosition()
    watchPosition()
    clearWatch

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,468评论 5 473
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,620评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,427评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,160评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,197评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,334评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,775评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,444评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,628评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,459评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,508评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,210评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,767评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,850评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,076评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,627评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,196评论 2 341

推荐阅读更多精彩内容