HTML5新特性

发表于 | 分类于

概述

在做移动端Web页面时，常常使用到一些HTML5的新特特性。而HTML5的设计目的是为了在移动设备上支持多媒体。经常有些同学问到相关的问题，这里做些详细全面的总结，不定期的更新。

新特性

  • 用于绘画的canvas元素
  • 用于媒介回放的 video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素，比如article、footer、header、nav、section
  • 新的表单控件，比如calendar、date、time、email、url、search

简洁的DOCTYPE

HTML5 只有一个简单的文档类型：<!DOCTYPE html>。它不使用版本，因此该文档类型适用所有版本的HTML。

简单易记的语言标签

你并不需要在<html>中使用xmlns 或xml:lang标记。<html lang=”en”>将对HTML5 有效。

简单易记的编码类型

你现在可以在meta 标签中使用’charset’：<meta charset=”utf-8″ />

具有boolean值的属性

1
2
3
4
5
6
7
8
<!-- 只写属性不写属性值代表属性为true -->
<input type="checkbox" checked>
<!-- 不写属性代表属性为false -->
<input type="checkbox">
<!-- 属性值=属性名,代表属性为true -->
<input type="checkbox" checked="checked">
<!-- 属性值=空字符串，代表属性为true -->
<input type="checkbox" checked="">

HTML5的基本布局

1
2
3
4
5
6
7
<article>
    <header></header>
    <section></section>
    <section></section>
    <aside></aside>
    <footer></footer>
</article>
  • <article> 元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容，与上下文不相关的独立内容
  • <section> 表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分
  • 不要为没有标题的内容区块使用section元素
  • <nav> 表示页面中导航链接的部分，例如：传统导航条，侧边栏导航，页内导航，翻页等
  • <aside> 表示article元素的内容之外的、与article元素的内容相关的辅助信息，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分
  • <header> 表示页面中一个内容区块或整个页面的标题
  • <hgroup> 将标题及其子标题进行分组的元素。hgroup元素通常会将h1-h6元素进行分组，譬如一个内容区块的标题及其子标题算一组。 
    1
    2
    3
    4
    <hgroup>
    	<h1>文章主标题</h1>
    	<h2>文章子标题</h2>
    </hgroup>

一个普通的Html5页面结构会如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
    <title>标题</title>
    <body>
        <header></header>
        <nav>导航</nav>
        <article>
            <section>区块</section>
        </article>
        <aside>侧边栏</aside>
        <footer>页脚</footer>
    </body>
</html>

HTML5对表单的增强

Html5新增了多个控件类型，如输入网址的url类型，输入电子邮箱地址的email类型，用于输入日期的date类型，更有用于输入颜色的color类型等等。更为神奇的是这些类型还内建表单验证，如required属性就说明该表项不能为空，max属性提供了该表项输入允许的最大值，当然在Html4中这些功能也可以通过javascript来实现，但是的内建在Html5中的表单验证优越性不言而喻。需要注意的是，现在Html5的输入类型还没有被所有浏览器所支持。

感兴趣的同学可以测试下面的代码：

1
2
3
4
5
6
7
<form>
    Email:<input type="email" required /></br>
    Number:<input type="number" max="10" /></br>
    Date :<input type="date"></br>
    File:<input type="file" accept="image/png" /></br>
    <input type="submit">
</form>

input标签新增的TYPE:

1
2
3
4
5
6
7
8
9
10
11
12
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）
range－数字范围选择
number－填写数字
url-url地址
email-邮件
color-颜色选取
search-搜索

视频和音频的支持

视频的支持

带控制器的视频播放器

1
2
3
4
5
6
7
8
<video src="movie.mp4" controls="controls"></video>
/*如果考虑到不同浏览器对视频文件的兼容性*/
<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  <p>Your browser does not support the video tag.</p>
</video>

video 元素允许含有多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

  1. 如果浏览器支持video元素，也支持H264（mp4格式），那么就使用第一个视频；
  2. 如果浏览器支持video元素，不支持H264（mp4格式）但支持Ogg，那么用第二个视频；
  3. 如果浏览器不支持video元素，那么就播放Flash；
  4. 如果浏览器不支持video元素，也不支持Flash，那么就给出了下载链接。
属性 值 说明
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src url 要播放的视频的 URL
width pixels 设置视频播放器的宽度。
height pixels 设置视频播放器的高度。

音频的支持

1
<audio src="song.ogg" controls="controls"></audio>

如果考虑到不同浏览器对视频文件的兼容性

1
2
3
4
5
<audio width="320" height="240" controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  <p>Your browser does not support the audio tag.</p>
</audio >

属性 值 说明
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src url 要播放的音频的 URL

本地存储

一提到存储，大家可能第一时间想到的是本地的文件存储，服务端的数据库存储等。那么html5时代，我们的存储是否会有更多选择呢？答案是肯定的。

关于存储

在html5之前的存储方式：

  1. cookies诞生
    • 通过http请求头带到不同页面上
    • 一个域名下的cookie大小限制为4k（谷歌火狐不限制大小，但数量过多同样会有问题）
    • 主域名污染，子域名的请求，都会把主域名的cookie带上。 (可以比较qq.com和y.qq.com的cookie比较document.cookie=”lesson=html5;path=/;domain=qq.com”)
  2. UserData
    • 只有IE才支持
    • xml文件

HTML的web存储方法

HTML5 提供两种web存储方法，localStorage 与 sessionStorage

1
2
3
4
- 解决了存储大小的问题
- 解决了请求头臃肿的问题
- 跨浏览器
- 键值对的形式进行存储

localStorage 与 sessionStorage 区别

过期时间：

1
2
localStorage没有过期时间，只要不clear或remove，数据会一直保存。
sessionStorage 针对一个session进行数据存储，生命周期与session相同，当用户关闭浏览器后，数据将被删除。

大小：

1
localStorage标准大小限制为5M

在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:

1
2
3
4
5
6
if(typeof(Storage)!=="undefined"){
// 是的! 支持 localStorage  sessionStorage 对象!
// 一些代码.....
}else{
// 抱歉! 不支持 web 存储。
}

两者特点：

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

localStorage和sessionStorage的方法

  • setItem存储value 用途：将value存储到key字段 用法：.setItem( key, value) 代码示例：

    1
    2
    sessionStorage.setItem("key", "value");
    localStorage.setItem("site", "js8.in");

  • getItem获取value 用途：获取指定key本地存储的值 用法：.getItem(key) 代码示例：

    1
    2
    var value = sessionStorage.getItem("key");
    var site = localStorage.getItem("site");

  • removeItem删除key 用途：删除指定key本地存储的值 用法：.removeItem(key) 代码示例：

    1
    2
    sessionStorage.removeItem("key");
    localStorage.removeItem("site");

  • clear清除所有的key/value 用途：清除所有的key/value 用法：.clear() 代码示例：

    1
    2
    sessionStorage.clear();
    localStorage.clear();

如果要保存非字符串的内容，建议使用JSON来处理。

  • 写入数据时用JSON.stringify转成字符串

    1
    2
    var data = {a:1,b:2,c:3};
    localStorage.setItem("data",JSON.stringify(data));

  • 读取数据时用JSON.parse把字符串转为之前的格式。

    1
    2
    var JasonString =localStorage.getItem("data");
    console.log(JSON.parse(JasonString));

storage事件

storage还提供了storage事件，当键值改变或者clear的时候，就可以触发storage事件，如下面的代码就添加了一个storage事件改变的监听：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//可以通过添加storage侦听，来监测本地存储数据的变化
if(window.addEventListener){
    window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){
    window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e){
    if(!e){e=window.event;}
    var status = {};
    status.key = event.key;
    status.oldValue = event.oldValue;
    status.newValue = event.newValue;
    status.url = event.url;
    status.storage = event.storageArea;
    console.log(status);
}

storage事件对象的具体属性如下表:

  • storageArea: 表示存储类型（Session或Local）
  • key:发生改变项的key
  • oldValue: key的原值
  • newValue: key的新值
  • url*: key改变发生的URL