六、（1）HTML5新特性

HTML5新特性

 HTML5介绍

什么是HTML5

　　HTML5是新一代的HTML，是HTML中的最新版本，目前是前端的前沿技术。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。HTML4.0.1与XHTML1.0本质都一样，唯一不同的就是XHTML1.0要求标签名和属性名都采用小写，属性值必须加双引号，所有的标签必须有结束标签。

 HTML5优势：

• 1、强化了Web网页表现能力。除了可以绘制图形外，还可以直接在网页中播放视频和音频（HTML4中需要flash插件，才能播放视频和音频，关键是flash容易崩溃，而且漏洞很多）；
• 2、支持（客户端 PC）本地数据库等Web应用的能力；
• 3、HTML5容错性更很高（例如：标签未正常的关闭、属性的引号问题等），HTML5是向上兼容的，这保证使用HTML5也可以在低版本浏览器中正常显示。
• 4、HTML5是近十年来Web标准发展而生的产物。 和以前版本不同，HTML5并非仅仅用来表示Web内容，它的使命是将Web带入一个成熟的应用平台。
• 5、HTML5对移动端兼容性非常好，所以手机网站开发必备。

HTML5新特性：

1. 语义（语义化标签）：header footer nav等。
2. 连通性（websocket双向通信协议。可用于实现即时通讯）：能够让你和服务器之间通过创新的新技术方法进行通信。
3. 离线和存储（本地存储）：能够让网页在客户端本地存储数据以及更高效地离线运行。
4. 多媒体（音频、视频播放器）：使 video 和 audio 成为了在所有 Web 中的一等公民。
5.  2D/3D绘图&和效果(canvas绘图&SVG)：提供了一个更加分化范围的呈现选择。
6. 性能和集成(webworks“多线程”)：提供了非常显著的性能优化和更有效的计算机硬件使用。
7. 设备访问和媒体查询：能够处理各种输入和输出设备。
8. flex布局 弹性盒子布局 伸缩布局。
9. 样式设计（css3）: 创作更加复杂的主题。

HTML5兼容性：引入兼容文件html5shiv.js

(function (e, t) {
    function n(e, t) {
        var n = e.createElement("p"), i = e.getElementsByTagName("head")[0] || e.documentElement;
        return n.innerHTML = "x<style>" + t + "</style>", i.insertBefore(n.lastChild, i.firstChild)
    }
    function i() {
        var e = m.elements;
        return "string" == typeof e ? e.split(" ") : e
    }
    function r(e) {
        var t = {}, n = e.createElement, r = e.createDocumentFragment, o = r();
        e.createElement = function (e) {
            m.shivMethods || n(e);
            var i;
            return i = t[e] ? t[e].cloneNode() : g.test(e) ? (t[e] = n(e)).cloneNode() : n(e), i.canHaveChildren && !f.test(e) ? o.appendChild(i) : i
        }, e.createDocumentFragment = Function("h,f", "return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&(" + i().join().replace(/\w+/g, function (e) {
            return t[e] = n(e), o.createElement(e), 'c("' + e + '")'
        }) + ");return n}")(m, o)
    }
    function o(e) {
        var t;
        return e.documentShived ? e : (m.shivCSS && !d && (t = !!n(e, "article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio{display:none}canvas,video{display:inline-block;*display:inline;*zoom:1}[hidden]{display:none}audio[controls]{display:inline-block;*display:inline;*zoom:1}mark{background:#FF0;color:#000}")), h || (t = !r(e)), t && (e.documentShived = t), e)
    }
    function a(e) {
        for (var t, n = e.getElementsByTagName("*"), r = n.length, o = RegExp("^(?:" + i().join("|") + ")$", "i"), a = []; r--;) t = n[r], o.test(t.nodeName) && a.push(t.applyElement(s(t)));
        return a
    }
    function s(e) {
        for (var t, n = e.attributes, i = n.length, r = e.ownerDocument.createElement(b + ":" + e.nodeName); i--;) t = n[i], t.specified && r.setAttribute(t.nodeName, t.nodeValue);
        return r.style.cssText = e.style.cssText, r
    }
    function l(e) {
        for (var t, n = e.split("{"), r = n.length, o = RegExp("(^|[\\s,>+~])(" + i().join("|") + ")(?=[[\\s,>+~#.:]|$)", "gi"), a = "$1" + b + "\\:$2"; r--;) t = n[r] = n[r].split("}"), t[t.length - 1] = t[t.length - 1].replace(o, a), n[r] = t.join("}");
        return n.join("{")
    }
    function c(e) {
        for (var t = e.length; t--;) e[t].removeNode()
    }
    function u(e) {
        var t, i, r = e.namespaces, o = e.parentWindow;
        return !y || e.printShived ? e : (r[b] === void 0 && r.add(b), o.attachEvent("onbeforeprint", function () {
            for (var r, o, s, c = e.styleSheets, u = [], d = c.length, h = Array(d); d--;) h[d] = c[d];
            for (; s = h.pop();) if (!s.disabled && v.test(s.media)) {
                for (r = s.imports, d = 0, o = r.length; o > d; d++) h.push(r[d]);
                try {
                    u.push(s.cssText)
                } catch (p) {
                }
            }
            u = l(u.reverse().join("")), i = a(e), t = n(e, u)
        }), o.attachEvent("onafterprint", function () {
            c(i), t.removeNode(!0)
        }), e.printShived = !0, e)
    }
    var d, h, p = e.html5 || {}, f = /^<|^(?:button|form|map|select|textarea|object|iframe)$/i,
        g = /^<|^(?:a|b|button|code|div|fieldset|form|h1|h2|h3|h4|h5|h6|i|iframe|img|input|label|li|link|ol|option|p|param|q|script|select|span|strong|style|table|tbody|td|textarea|tfoot|th|thead|tr|ul)$/i;
    (function () {
        var n = t.createElement("a");
        n.innerHTML = "<xyz></xyz>", d = "hidden" in n, d && "function" == typeof injectElementWithStyles && injectElementWithStyles("#modernizr{}", function (t) {
            t.hidden = !0, d = "none" == (e.getComputedStyle ? getComputedStyle(t, null) : t.currentStyle).display
        }), h = 1 == n.childNodes.length || function () {
            try {
                t.createElement("a")
            } catch (e) {
                return !0
            }
            var n = t.createDocumentFragment();
            return n.cloneNode === void 0 || n.createDocumentFragment === void 0 || n.createElement === void 0
        }()
    })();
    var m = {
        elements: p.elements || "abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",
        shivCSS: p.shivCSS !== !1,
        shivMethods: p.shivMethods !== !1,
        type: "default",
        shivDocument: o
    };
    e.html5 = m, o(t);
    var v = /^$|\b(?:all|print)\b/, b = "html5shiv", y = !h && function () {
        var n = t.documentElement;
        return t.namespaces !== void 0 && t.parentWindow !== void 0 && n.applyElement !== void 0 && n.removeNode !== void 0 && e.attachEvent !== void 0
    }();
    m.type += " print", m.shivPrint = u, u(t)
})(this, document);

 HTML5文档结构

HTML5简化了HTML文档结构的复杂性，让HTML的文档结构更加简洁。

HTML4：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <!-- 文档声明，复杂无法记忆 -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 文档编码 -->
    <title>文档标题</title>
</head>
<body>
    内容。。。。
</body>
</html>

HTML5：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
</head>
<body>
    文档内容......
</body>
</html> 

HTML5语义标签

语义标签

header：头部
nav：导航
section：区域
mian：主体
aside：侧边栏
article：文章
footer：页脚

结构化标签(布局标签)

　　HTML5中布局标签与div的功能是一模一样的，只是HTML5中新增了很多个种类的div,不同种类的div描述内容不同而已。目前主流的浏览器已经可以使用如下标签：

标签	描述
<header>	定义了文档的头部区域
<nav>	标签定义导航链接的部分。
<main>	定义页面主要内容,它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。
<section>	定义文档中的节（section、区段）。
<article>	定义页面独立的内容区域。
<aside>	定义页面的侧边栏内容。
<footer>	定义 section 或 document 的页脚。

注意：div(无语义) < section(内容分区) < article(独立的内容区域，可供外部使用)

HTML4与HTML5结构标签区别：结构上面来看都一样，html4中统一使用div来定义网页结构，而html5使用了语义标签来定义我们的网页结构，使我们的文档更加清晰，也就是说当浏览器或开发者看到<header>、<article>、<footer>标签的时候就知道这个标签里面装的是什么内容。

HTML5表单

form表单

1) input type

color	颜色选择器
date	日期选择框
Datetime	日期时间选择框
datetime-local	日期和时间 (无时区)选择框
month	月份选择器
time	时间选择框
week	周和年选择框
email	电子邮件
number	数值的输入域
range	区间选择器
search	搜索框
tel	电话号码
url	url地址

示例：

<form>
    颜色：<input type="color" /><br />
    日期：<input type="date" /><br />
    日期时间：<input type="datetime" /><br />
    日期时间（本地格式）：<input type="datetime-local" /><br />
    email：<input type="email" /><br />
    月份：<input type="month" /><br />
<!--
    max- 规定允许的最大值
    min - 规定允许的最小值
    step - 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
    value - 规定默认值
-->
    数值：<input type="number" max="100" min="1" /><br />
<!--
    max - 规定允许的最大值
    min - 规定允许的最小值
    step - 规定合法的数字间隔
    value - 规定默认值
-->
    区间值：<input type="range" min="0" max="100" step="1" /><br />
    搜索框：<input type="search" /><br />
    电话：<input type="tel" /><br />
    时间：<input type="time" /><br />
    url地址：<input type="url" /><br />
    周和年：<input type="week" /><br />
    <input type="submit" value="提交" />
</form>

表单元素

1）表：

<datalist> 输入域的选项列表
<output> output元素用于不同类型的输出，比如计算或脚本输出

2）datalist数据列表：

<datalist>:元素实现数据列表下拉效果,与input配合使用（必须带value值）

<!--<input> 元素的列表属性与 <datalist> 元素绑定.-->
<input list="browsers" name=”浏览器”>
    <datalist id="browsers">
    <option value="Internet Explorer">Internet Explorer</option>
    <option value="Firefox">Firefox</option>
    <option value="Chrome">Chrome</option>
    <option value="Opera">Opera</option>
    <option value="Safari">Safari</option>
</datalist>

3）output显示计算结果

<output>:元素用于不同类型的输出，比如计算或脚本输出.

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" id="a" value="50">100 +
    <input type="number" id="b" value="50">=
    <output name="x"></output>
</form>

表单新属性

<form>新属性：novalidate 取消浏览器验证，默认验证开启

<input>新属性：

　　autocomplete　　输入框的自动补全；(值是on或者off)
　　autofocus　　页面加载完毕后自动获取焦点；
　　form　　指定输入框属于那一个表单，输入框不在<form>内部也会进行提交；
　　multiple　　文件选择框为多选；(<input type=’file’ multiple>)
　　pattern　　输入框验证的正则表达式; [0-9]{6} 输入0-9直接的字符，并且字符串长度为6位。
　　placeholder　　输入框提示，描述输入域所期待的值；
　　required　　输入框是否是必填项；
　　formnovalidate　　设置给提交按钮可以跳过浏览器表单验证（input type=’submit’ formonvalidate）

常用属性：

　　<input autofocus=”autofocus” />
　　<input placeholder=”请输入关键字” name=”search” />

HTML5新属性

1. aria-*(增加可访问性) 

在构建Web应用时，我们必须确保所有用户都能访问，这其中就包括那些需要辅助技术（屏幕阅读器）才能访问的用户（盲人或残障人士）。
例如：

可视化设备：用户名：<input type=’username’ name=’username’ />
屏幕阅读设备：用户名：<input type=’username’ name=’username’ aria-label=’用户名’/>
（闭上眼睛，内容对于你而言是不可见的，但可以通过辅助设备读取出来给你听，当鼠标移入到input输入框的时候，辅助设备就会获取aria-label的值读给听.）

可视化设备： <div class=’button disabled’>点我</div>
屏幕阅读设备： <div class=’button disabled’ role=’button’ aria-checked=’false’ aria-disabled=’true’>点我</div>

常见角色：button,checkbox,menuitem,menuitemcheckbox,menuitemradio,tab或treeitem。

2. data-*(自定义数据)（重点）

data-*是一种以“键（key）/值（value）”对方式来描述HTML TAG的扩展属性。

<div data-name=”二狗”></div>

语法：

<标签 data-键=值 data-键=值 />

js取值:el.dataset.键

注意domstringmap 是data-*的一种新类型

3. contenteditable(内容编辑)

contentEditable：属性可以打开某些元素（一般为双标签）编辑标签中内容。

HTML代码方式设置

<html contenteditable>
.....
</html>

或者某个具体的标签

<div id=’text’ contentEditable style=’border:1px solid red;height:300px’></div>

JS编码方式设置

document.body.contentEditable = true ; // 默认为false

4. tabIndex(tab键控制)

tabIndex并且是HTML5新属性， 其实在HTML4就已经存在了，其功能提高了用户体验。tab键可以控制窗口或页面中获取焦点，设置tabIndex可以控制tab键获取焦点的元素。

<form>
    <input type="text" name="username" id="" tabindex="1" />
    <a href="www.baidu.com" tabindex="-1">注册账号</a>
    <input type="password" name="password" tabindex="2" />
</form>

Web存储

Web存储技术

　　随着Web应用的发展，数据存储不在单一的存储在后台的数据库中(mongoDB,mysql,oracle)。客户端（浏览器）存储的用途也越来越来，最经典的就是“记住用户名”，实现客户端存储的方式有很多种，比如cookie(通用),flash(插件),userData(ie),globalStroage（firefox）。所以HTML5出现之前，兼容性最好的是cookie存储，但是cookie存储容量有限，而且安全性并不高。

HTML5的Web存储提供两种客户端存储技术：
　　sessionStorage 会话存储
　　localStrorage 本地存储

cookie存储

NodeJS中，我们可以在后端通过res（响应）对象存储Cookie,其实在浏览器我们也可以操作cookie对象。

//存储数据至cookie中
document.cookie =’name=王大大’;

//创建cookie的有效时间
var expiresTime = new Date();
//当前时间+1天
expiresTime.setDate(expiresTime.getDate()+1);

//存储键为name,值为jack数据到cookie中，expires设置cookies的过期时间。
document.cookie = "address=chengdu;expires="+expiresTime.toGMTString();
document.cookie =’age=18’; //注意这里不是覆盖，系统内部实现，而是追加一条新数据。

//获取数据
console.log(document.cookie); //获取到一个字符串，内容为name=二狗; age=18....., 然后通过split(‘;’);分割。

sessionStorage 会话级存储

　　sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。 会话是一个周期，会话开始的周期就是你打开网页的那一刻至到网页被关闭的时候；

sessionStorage方法：

sessionStorage.setItem(“username”,”张三”);
sessionStorage.getItem(“username”);
sessionStorage.removeItem(“username”);
sessionStorage.clear();

localStorage 永远级存储

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

localStorage方法：

localStorage.setItem(“username”,”张三”);
localStorage.getItem(“username”);
localStorage.removeItem(“username”);
localStorage.clear();

　　localStorage与sessionStorage 最大的区别在于，使用sessionStorage保存数据只对当前窗口有效，这个窗口一旦关闭，数据也会被销毁。

使用场景：
　　保存皮肤样式表
　　网址之家记录用户常访问网站
　　简单购物数据存储

SVG矢量图

SVG：SVG 意为可缩放矢量图形(Scalable Vector Graphics)。

位图 ： 由一个个像素点构成的图片。（普通图片）。

矢量图： 内部是XML结构。由数学公式计算得到的图形。永久高清。

SVG的6种使用方式：

• 1.背景图.<div class="bg"></div>
• 2.iframe

<iframe src="face.svg" frameborder="0" style="width: 200px;height: 500px;">

</iframe>

• 3.对象.<object data="face.svg" type="svg"></object>
• 4.嵌入.<embed src="face.svg" type="">
• 5.图片<img src="face.svg" alt="">
• 6.直接使用SVG标签写内容

SVG优点：

• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
• 不适合游戏应用

新DOM API

传统DOM查找

• document.getElementById(); //通过指定元素的id值，查找页面对应的元素并返回。
• document.getElementsByName(); //通过指定元素的name值，查找页面对应的元素并返回。
• document.getElementsByTagName(); //通过指定元素的TagName，查找页面对应的元素并返回。
• document.getElementsByClassName(); //通过指定元素的class值，查找页面对应的元素并返回。

HTML5新DOM API

• document.querySelector(selector); 根据指定的选择规则，返回在页面中找到第一个匹配的元素。
• document.querySelectorAll(selector); 根据指定的选择规则，返回在页面中所有匹配的元素。
• document.querySelector('#id');
• document.querySelector('div.box > .content); // 支持层级选择
• document.querySelectorAll('ul');
• document.querySelectorAll('.container'); // 支持样式选择

作业

1） 什么是HTML5？什么是HTML标签语义化？
2） HTML5和HTML4有哪些区别？
3） 怎么解决HTML5的兼容性问题？
4） HTML5有哪些新特性？
5） HTML5新增了哪些元素？哪些新表单属性？
6） 什么是自定义属性，HTML5怎么获取和修改自定义属性？
7） 什么是web存储，sesstionStorage和LocalStorage有什么区别？
8） HTML5新增了哪些新的DOM API？
9）什么是svg图片？和位图有什么区别？