Html5新特性归纳

Html5新特性

文章目录

Html5新特性
- 一.简介
- 二.十大新特性
- - 1.语义化结构化标签
  - - 1.section
    - 2.header
    - 3.footer
    - 4.nav
    - 5.article
    - 6.aside
    - 7.figure和figcaption
    - 8.main
    - 9.兼容低版本
  - 2.增强型表单
  - 3.多媒体标签
  - - 1.视频 video
    - 2.音频 audio
  - 4.本地存储
  - - 1.localStorage 永久存储
    - 2.sessionStorage 临时存储
    - 3.相同的API操作
    - 4.cookies,sessionStorage,localStorage的区别
  - 5.Canvas绘图
  - 6.geolocation 地理定位
  - - 1.geolocation.getCurrentPosition
    - 2.geolocation.watchPosition
  - 7.离线应用(应用程序缓存)
  - 8. web worker 多线程
  - 9.history历史管理
  - 10.WebSocket 通信

一.简介

Html5是下一代html的标准

必须使用<!doctype html>进行声明

PS:对于中文网页需要使用<meta charset='utf-8'>声明编码,否则会出现乱码

二.十大新特性

1.语义化结构化标签

1.section

表示页面中的一个内容区块

2.header

表示页面中的头部区域

3.footer

表示页面中的底部区域

4.nav

表示定义导航链接的区域

5.article

表示一块与上下文无关的独立内容

6.aside

表示页面主页面区域内容之外的内容比如侧边栏

7.figure和figcaption

(1) figure 规定独立的流内容(图像,图标,照片,代码等)

(2) figcaption 定义figure元素的标题

ps:元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

<figure><img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"><figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

8.main

表示页面主要的内容(IE不兼容)

9.兼容低版本

<!--[if lt IE9]>
<script>
(function() {if (! /*@cc_on!@*/0) return;var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');var i= e.length;while (i--){document.createElement(e[i])} })() </script>
<![endif]-->

2.增强型表单

类型	描述
type=“email”	限制用户必须输入email类型
type=“url”	限制用户必须输入url类型
type=“range”	产生一个滑动条表单
type=“search”	产生一个搜索意义的表单
type=“color”	生成一个颜色选择的表单
type=“time”	限制用户必须输入时间类型
type=“date”	限制用户必须输入日期类型
type=“month”	限制用户必须输入月类型
type=“week”	限制用户必须输入周类型
type=“datetime-local”	选取本地时间
type=“number”	限制用户必须输入数字类型

3.多媒体标签

1.视频 video

<video src="movie.ogg" controls="controls">Video元素</video>

2.音频 audio

<audio src="someaduio.wav">Audio元素</audio>

video/audio属性

属性	描述
controls	如果出现该属性,则向用户展示控件,比如播放按钮
autoplay	如果出现该属性,则视频在就绪后马上播放
loop	重复播放属性
muted	静音属性
poster	规定视频正在下载时显示的图像,直到用户点击播放按钮

<source>标签为媒介元素(比如video和audio) 定义媒介资源

<source>标签允许规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编码器的支持进行选择

video controls><source src="../mv/movie.ogg" type="video/ogg"><source src="../mv/web.mp4" type="video/mp4">
</video>

type属性可以取值为:

(1) 用户视频 video/ogg video/mp4 video/webm

(2) 用于音频 audio/ogg audio/mpeg audio/mp3

4.本地存储

html5的存储方式,比cookie更好的存储本地的方式

1.localStorage 永久存储

用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除

2.sessionStorage 临时存储

针对一个session进行存储,当用户关闭浏览器窗口后,数据会被删除

3.相同的API操作

(1) localStorage.setItem(key,value) 设置数据

(2) localStorage.getItem(key) 读取数据

(3) localStorage.removeItem(key) 删除单个数据

(4) localStorage.clear() 删除所有数据

4.cookies,sessionStorage,localStorage的区别

(1) cookie是网站为例标识用户身份而存储在用户本地客户端的上数据(通常经过加密)

(2) cookie数据始终在同源的http请求中携带,会在浏览器和服务器间来回传递

(3)sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存

(4) 存储大小:

cookie数据大小不能超过4KB
sessionStorage和localStorage虽然也有大小限制,但比cookie大得多,可以达到5M或更大

(5) 有效时间

localStorage 存储持久数据,浏览器关闭后数据不丢失,除非主动删除数据
sessionStorage 数据在当前浏览器窗口关闭后自动删除
cookie设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭

5.Canvas绘图

负责在页面设定一个区域,然后通过JavaScript动态的在这个区域中绘制图形

Canvas标签用于绘制图像(是通过JavaScript脚本),本身并没有绘制能力,因为它仅仅是图像的容器,必须使用脚本才能完成绘图任务

不兼容IE8以下

<canvas id="drawing" width="200" height="200">canvas绘制图像</canvas>

6.geolocation 地理定位

通过地理定位(geolocation), 这个API可以访问到用户的当前位置信息,不过访问之前用户必须同意共享其地理位置信息.

1.geolocation.getCurrentPosition

获取共享位置信息的经纬度.当调用这个方法,就会触发请求用户共享地理定位信息的对话框,成功会接收到一个Position的对象参数,然后这个对象有2个属性:coords和timestamp

coords对象中包含下列与位置相关的信息

latitude 纬度
longitude 经度
acuracy 经,纬度坐标的精度,以米为单位

2.geolocation.watchPosition

监听设备位置改变时,返回一个该监听器的ID值,与geolocation.getCurrentPosition()用法基本一致,第一次调用,执行成功回调或错误回调,然后此函数就等待系统发出位置改变的信号(不会轮询位置)

var x = document.getElementById("demo");
//BOM五大对象之一的navigator
navigator.geolocation.getCurrentPosition(position => {x.innerHTML = "Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
}, error => {console.log("Error Code:" + error.code);console.log("Error Message:" + error.message);
});

7.离线应用(应用程序缓存)

html5引入了应用程序缓存,没有的网的时候可以进行访问

离线应用,缓存的好处:

离线浏览,可以在应用离线的时候使用他们
已缓存的资源加载的更快
减少服务器负载,浏览器将只从服务器下载更新过或更改过的资源

兼容IE10以上

8. web worker 多线程

web worker的作用,就是为JavaScript创造多线程的环境

兼容IE10以上

具体实现可以参照阮一峰大神的文章 web worker 多线程

9.history历史管理

新加了一些API,后面在单页面应用程序运用非常广泛的,history API

详情参见 HTML5新出的history API

10.WebSocket 通信

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

详情参见WebSocket 通信

以上一些比较复杂实现的,我这里先不详细列出来,这里只是了解html5新添加了那些东西,日后遇到了,再写专题详情.

参考地址