十五分钟了解HTML5新特性-职坐标

十五分钟了解HTML5新特性

沉沙 2018-05-11 来源：阅读 939 评论 0

摘要：本文详细讲述了HTML5的新特性，诸如新的文档类型、脚本和链接无需type等，希望学习本文后可以让您对HTML5的掌握更加熟练。

1.新的文档类型

HTML5简化了文档类型的声明方式。

<!DOCTYPE html>

之前的文档类型的声明方式非常复杂

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">

2.脚本和链接无需type

在网页中添加css或者JavaScript
HTML5中，不需要指定type属性：

< link rel="stylesheet" href="stylesheet.css" />< script src="script.js"></script>

在XHTML或者HTML4中：

< link rel="stylesheet" href="stylesheet.css" type="text/css" />< script type="text/javascript" src="script.js"></script>

3.新增语义化标签

<article>、<section>、<aside>、<hgroup>、 <header>,<footer>、<nav>、<time>、<mark>等。

4.占位符（Placeholder）

placeholder解决了之前需要通过js来给文本添加占位符（input的placeholder属性）

5.Audio和Video支持

新增了<audio><video>音频、视频元素：解决了之前需要第三方插件渲染音频的问题。

6.canvas

新增canvas,实际是一个画布，可使用js来绘制图形。例如：画图、合成照片、甚至是视频的渲染处理。

7.离线和存储

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

if(window.sessionStorage){

//浏览器支持sessionStorage

}

if(window.localStorage){

//浏览器支持localStorage

}

localStorage：在各个浏览器中存储上限不同，(>=2.6MB)
sessionStorage：基于会话，关闭浏览器之后存储消失。
indexedDB:上限是250MB，是一个为了能够在客户端存储可观数量的结构化数据，并且在这些数据上使用索引进行高性能检索的 API
localStorage和sessionStorage没有过期时间，可以在其上添加过期时间。
localStorage和sessionStorage的坑是跨域问题，因为它们是域内安全，也就是同一个域才能对其进行存储数据，通过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)

8.离线web应用

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

if(window.applicationCache){

//支持离线应用

}