新语义化标签
H5中新增了很多新的语义化标签，让我们大致来看一下
<header>标签包含引导和导航等，通常包含h1~h6、搜索框、logo等。<footer>标签一般配合address标签(显示地址)，包含作者信息、相关链接等。<nav>导航 在H4中导航栏一般用ul-li标签，H5中可以直接用<hgroup>页面上得一个标题组合（一个标题和一个子标题）<section>用来划分页面上的不同区域<article>用来表示页面上一套结构完整且独立的内容部分<aside>和主题相关的附属信息<figure>和<figcaption>：<figure>为父元素，用于图片的外层，其子元素<figcaption>用来对内容进行说明。<time>标签，专门用来表示时间<datalist>标签，定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值。 datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。 请使用 input 元素的 list 属性来绑定 datalist。<details>标签，用于描述文档或文档某个部分的细节。 与<summary>标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。<address>标签，定义文档或文章的作者/拥有者的联系信息。<address>元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。<mark>标签，定义带有记号的文本。在需要突出显示文本时使用 该 标签，默认加黄色背景。<keygen>标签，规定用于表单的密钥对生成器字段。（用于给表单添加公钥）当提交表单时，私钥存储在本地，公钥发送到服务器。<process>标签，定义进度条
表单新增功能
以往input中的name和value要随着form表单一起提交，form表单必须包裹input , 而现在可以通过input的form属性綁定
<form id="testform">
<input type="text" />
</form>
<input form=testform />
placeholder屬性
通常作为提示语句
<input type="text" placeholder="请输入密码" />
autofocus属性，页面只能有一个。
autofocus 属性规定当页面加载时 input 元素应该自动获得焦点。
如果使用该属性，则 input 元素会获得焦点。
<input type="text" autofocus />
还有一些新增的type，如number，email，但是这些通常我们会使用自定义的。
地理定位
h5提供了Geolocation API访问地理位置，即通过window.navigator.geolocation来实现访问。这个对象有三个方法：
getCurrentPosition()
watchPosition()
clearWatch
页面第一次使用这个api需要获得用户许可, watchPosition可以对位置变化事件进行监听。
本地存储
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)
离线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。
扫一扫
26万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
