HTML5新特性

最新推荐文章于 2022-06-21 21:33:20 发布

weixin_30410999

最新推荐文章于 2022-06-21 21:33:20 发布

阅读量67

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Amy-world/p/9704159.html

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属性，页面只能有一个