HTML5新特性


1. 新的语义化标签

<header>标签:包含引导和导航等,通常包含h1~h6、搜索框、logo等。
<footer>标签:一般配合address标签(显示地址),包含作者信息、相关链接等。
<nav>标签:一般包含多个a标签,构建导航组件。
<aside>标签:主要装载广告、侧边栏。
<article>标签:包含文章,一般内嵌header、footer、h1、p标签。
<section>标签:可以用在以上任一一个标签中划分组件。
总体来说,这些标签就是div标签的语义化转化,过去我们曾用div来包裹某个块或者说组件,现在h5使用这些标签实现语义化,有利于代码可读性和SEO。

2.本地存储

h5提供了sessionStorage、localStorage和indexedDB加强本地存储。

localStorage和sessionStorage的区别:sessionStorage基于会话,关闭浏览器之后存储消失。localStorage在各浏览器中上限不同,最低的是2.6MB, 所以开发上限为2.6MB, 当然这比cookie强太多,如果还是不够的话只能借助indexedDB, indexedDB上限是250MB。

共同点:sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。

localStorage和cookie区别
1)cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递,localStorage不会自动把数据发给服务器,仅在本地保存
2)cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下,存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。localStorage不会自动把数据发给服务器
3)localStorage支持事件通知机制,可以将数据更新的通知发送给监听者。 api 接口使用更方便。而cookie的原生接口不友好,需要程序员自己封装 4)cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据。localStorage没有过期时间,不过这个可以在localStorage中加一个时间字段轻松解决这个问题。存取localStorage可能遇到的坑是跨域问题,因为localStorage是域内安全,也就是同一个域才能对localStorage进行存储,可以通过postMessage来解决。
var userData = {
        name : 'Lucy',
        age: 18
    }
    localStorage.setItem('userDate', JSON.stringify(userData));
    var newUserData = JSON.parse(localStorage.getItem('userData')); 

3. placeholder属性

4.autofocus属性,页面只能有一个

<input type="text" autofocus />

5.地理定位

提供Geolocation API访问地理位置,通过window.navigator.geolocation对象来实现访问。三个方法:getCurrentPosition()、watchPosition()、 clearWatch();

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

6.多媒体, 用于媒介回放的 video 和 audio 标签

7. canvas绘图

8. svg绘图(Scalable Vector Graphic,可缩放向量图)

9. 拖放API

10.WebWorker

11.WebSocket

优质内容筛选与推荐>>
1、switch case
2、变量和属性 函数和方法
3、glTF格式初步了解
4、Android架构(一)MVP架构在Android中的实践
5、【Centos配置2】远程管理必备工具配置:ssh/vnc/webadmin


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号