HTML5（上）

一、HTML5简介

HTML5是HTML最新的修订版版，2014年10月由W3C完成标准制定。它的设计的目的是为了在移动设备上支持多媒体。并且HTML5简单易学。

1、什么是HTML5

HTML5是下一代标准。HTML4.01的上个版本诞生于1999年,HTML5目前为止仍然处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5支持

2、HTML5有趣的新特性

用于媒介回放的video和audio元素
新的特殊内容元素：比如article,footer,header,nav,section
新的表单控件：比如calendar、date、time、email、url、search
2D/3D绘图&效果
支持对本地离线存储

3、HTML5的文档声明

声明必须位于 HTML5 文档中的第一行,使用非常简单:

<!DOCTYPE html>

之前我们所编写的网页其实都是HTML5的文档，为了向后兼容。如果我们编写HTML4的文档声明，那么就可能不会兼容HTML5的新的标签支持。

4、HTML5浏览器支持

最新版本的五个主流浏览器都支持某些HTML5特性，IE9以上浏览器支持HTML5新特性。但是IE8以下的浏览器不支持

IE8以下(包含IE8)以下版本浏览器兼容HTML5的方法，我们必须使用htmlshiv垫片包，让其支持HTML5新特性

<!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><![endif]-->

二、HTML5新标签

1、8个新语义元素和新属性

header,section,footer,aside,nav,main,article,figure所有的这些元素都是块级元素

所有的标签都支持HTML5新属性

属性	描述	浏览器支持性
contenteditable	规定是否可编辑元素的内容	All
contextmenu	指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单	只有Firefox浏览器支持
data-*	嵌入自定义数据	All
draggable	规定元素是否可拖动。链接和图像默认是可拖动的。经常用它实现拖放操作	ie8以下浏览器都支持，其它不支持
hidden	规定对元素进行隐藏。如果使用该属性，则会隐藏元素，隐藏的元素不会被显示，可以通过js来设置hidden属性为true,使得元素变得可见	All

1.nav标签

<nav> 标签定义导航链接的部分。

并不是所有的 HTML 文档都要使用到<nav>元素。<nav>元素只是作为标注一个导航链接的区域。

比如之前HTML4中我们定义导航的时候通常都这样写

<div class="nav">
    <a href="#">python</a>
    <a href="#">linux</a>
    <a href="#">web前端</a>
    <a href="#">Java</a>
    <a href="#">Go</a>
</div>

通过HTML5的nav标签我们可以这样表示：

<nav>
    <a href="#">python</a>
    <a href="#">linux</a>
    <a href="#">web前端</a>
    <a href="#">Java</a>
    <a href="#">Go</a>
</nav>

2.header标签

header标签定义文档的头部区域，它是作为网页的头部介绍内容或者是导航链接栏的容器。在一个文档中，你可以定义多个header元素

注意：header标签不能被放在footer、address或者另一个header元素内部

3.main标签

标签规定文档的主要内容。一个文档中只有一个main元素。

你会发现，把整个文档作为了主要内容。

4.aside标签

aside标签定义article标签外的内容。aside的内容应该与附近的内容相关

比如像稀土掘金网站上

5.section标签

section标签定义了文档的某个区域。比如章节、头部、顶部或者文档的其他区域

<section>
    <h2>重大新闻</h2>
    <p>
        mmmmmmm
    </p>
</section>

比如这个网站aside侧边栏中定制了三个section

6.article标签

定义页面独立的内容。必须是独立于文档的其余部分。

article通常都应用在：

论坛帖子
博客文档
新闻故事
评论

7.figure标签

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

figure元素的内容应该与主内容有关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响

<figure>
  <img src="flower.jpg" alt="My 女神" width="304" height="228">
  <figcaption>我的女神照</figcaption>
</figure>

8.footer标签

定义文档或者文档一部分区域的页脚。该元素会包含文档闯作业的姓名、文档的版权信息、使用条款的链接、联系信息等等。在一个文档中，可以定义多个footer。

比如小猿圈的底部就是用footer

2、其它的新语义化标签

1、mark 高亮状态

高亮文本标签

<p><mark> 元素用于 <mark>高亮</mark> 文本</p>

2、progress 进度条

用来显示一项任务的完成进度。

属性：

max 最大值
value 当前进度

70 %

3、address

个人或者某个组织的联系信息等等

<address>
  <a href="mailto:jim@rock.com">mjj67890@163.com</a><br>
  <a href="tel:+13115552368">(311) 555-2368</a>
</address>

以上标签都是我们在网页中常见到的。还有很少可以在网页中见到的HTML5新标签。在这里我就不一一赘述了。大家可以参考这个链接去查阅相关资料：新标签

3、新的表单特性

HTML5新增了新的表单元素

datalist
keygen
output

1、datalist

该元素规定输入域的选项列表。规定了form或input应该拥有自动完成功能，都能够用户在自动完成域中开始输入是，浏览器应该在该域中显示填写的选项：

<form action="">
    <input type="text" list="class">
    <datalist id="class">
        <option value="hello world"></option>
        <option value="hello web"></option>
        <option value="hello Go"></option>
        <option value="hello python"></option>
    </datalist>
    <input type='submit'/>
</form>

注意：input中的list跟datalist中的id必须关联。

2、kegen(了解)

是提供一种验证用户的可靠方法，当提交表达时，会生成两个键，一个是私钥，一个是公钥。

私钥存储于客户端，公钥则被发送给服务器。公钥可用于之后验证用户的客户端证书

<form action="hello.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>

3、output

用于不同类型的输出，比如计算或脚本输出

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

三、HTML5新的表单属性

1、form新属性

1、autocomplete属性（自动完成）

此属性规定form或input应该拥有自动完成功能

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项

<!--autocomplete默认是on，如果改为off则是取消了自动完成-->
<form action="" autocomplete="on">
    用户名: <input type="text" name="usr_name" >
    <input type="submit">
</form>

当刷新网页，再次输入内容，查看效果

2、novalidate属性

是一个布尔值，当为true时，表示规定在提交表单时，不应该验证form或input域

如果给input的type改成email。则我们在输入邮箱时通常自动验证。如图所示

如果将form设置此属性，则可以直接提交。

<form action="" autocomplete="on" novalidate="">
    用户名: <input type="text" name="usr_name" >
    email: <input type="email">
    <input type="submit">
</form>

2、input新属性

1、autofocus属性

在页面加载时，是否自动获得焦点

用户名: <input type="text" name="usr_name" autofocus>

2、formaction属性

该属性用于描述表单提交的URL地址。会覆盖form元素中的action属性。该属性用于type='submit'。

<form action="" autocomplete="on" novalidate="">
    用户名: <input type="text" name="usr_name" autofocus>
    email: <input type="email">
    <input type="submit" value='提交到当前服务器'>
    <input type="submit" formaction="http://www.baidu.com" value='提交到百度服务器'>
</form>

3、formenctype属性

该属性描述了表单提交到服务器的数据编码(只对form表单中 method=’post‘表单)

第一个提交按钮已默认编码发送表单数据，第二个提交按钮以 “multipart/form-data” 编码格式发送表单数据:

<form action="" autocomplete="on" novalidate="" method='post'>
    用户名: <input type="text" name="usr_name" autofocus>
    email: <input type="email">
    <input type="submit" value='提交到当前服务器'>
    <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交">
</form>

4、formmethod属性

formmethod 属性定义了表单提交的方式。

formmethod 属性覆盖了 <form>元素的 method 属性。

注意: 该属性可以与 type=”submit” 和 type=”image” 配合使用。

<form action="" autocomplete="on" novalidate="" method='get'>    
    用户名: <input type="text" name="usr_name" autofocus>    
    email: <input type="email">    
    <input type="submit" value='get提交'>    
    <input type="submit" method= 'post' formenctype="multipart/form-data" value="post提交">
</form>

5、formnovalidate属性

novalidate 属性是一个 boolean 属性.

novalidate属性描述了 <input> 元素在表单提交时无需被验证。

formnovalidate 属性会覆盖 <form> 元素的novalidate属性.

注意: formnovalidate 属性与type=”submit一起使用

<form action="">    
    E-mail: <input type="email" name="userid">    
    <input type="submit" value="提交">    
    <input type="submit" formnovalidate value="不验证提交">
</form>

6、formtarget属性

formtarget属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。

<form action="">    
    用户名: <input type="text">    
    密码: <input type="password">    
    <input type="submit" formtarget="_blank" value="提交到一个新的页面上"> 
</form>

7、height和width属性

定义一个图像提交按钮，使用width和height属性

<input type="image" src="img_submit.gif" width="30" height="30">

8、list属性

规定输入域的datalist。datalist是输入域的选项列表。前面有介绍

9、multiple属性

规定input元素可以选择多个值。适用于像input标签：file

上传多个文件:选择图片:<input type='file' name= 'img' multiple>

10、pattern属性

描述了一个正则表达式用于验证input元素的值

注意：适用于以下类型input标签:text,search,url,tel,email,passworld

<form action="">    
    请输入正确的账号: <input type="text" style="width: 200px;" 
    placeholder="由字母,数字,下划线 组成,以字母开头 4-16位" 
    pattern="^[a-zA-Z]\w{3,15}$"  title="输入的账号不合法">    
    <input type="submit" value="提交" />
</form>

11、required属性

规定必须在提交之前输入框不能为空。

用户名: <input type="text" name="usrname" required>

3、新的input类型

HTML5拥有多个表单的输入类型。这些新特性提供了更好的输入控制和验证

新的输入类型

color : 取色
date : 日期选择器
datetime ：选择UTC时间
datetime-local: 选择一个日期和时间(无时区)
email：提交表单时。自动验证email的值是否有效
month：选择月份
number:输入数值
range：包含一定范围内数字值的输入域
search:搜索域
tel:输入电话号码字段
time:选择一个时间
url:输入包含URL地址
week:选择周和年

四、HTM5中的API

新的操作方法

1.获取元素的方法

获取单个元素,参数可以是我们任意的选择器。

document.querySelect('选择器');

获取多个元素，参数是任意的选择器

document.querySelectAll('选择器');

例子：

 <div id="box" class="han"></div>
    <div id="box2" class="han"></div>
    <script>
/*      //获取单个标签
        var div = document.querySelector('#box');
        console.log(div); */

/*         //获取多个标签
        var oDivs = document.querySelectorAll('div');
        console.log(oDivs);//NodeList(2) [div#box.han, div#box2.han]
        oDivs.forEach(function(ele,index){
            console.log(ele);
        })//ele是集合里面的每一个元素 */

        function $(select){
            return document.querySelector(select);
        }
        console.log($('#box'));

2.类的操作

添加类

oDiv.classList.add('类名');

移除类

oDiv.classList.remove('类名');

检测类

oDiv.classList.contains('类名');

切换类

oDiv.classList.toggle('类名');//有则删除，无则添加

3.自定义属性

我们可以通过data-自定义属性名来给元素添加自定义的属性名。一旦添加完成之后。通过JS可以获取以及设置自定义属性。

比如定义一个data-test属性名

获取自定义的属性名

oDiv.dataset.test

设置自定义属性

oDiv.dataset.自定义属性名 = 值

    <header>
        <button class="btn" data-rel="p1">按钮1</button>
        <button class="btn" data-rel="p2">按钮2</button>
        <button class="btn" data-rel="p3">按钮3</button>
        <p id="p1">1</p>
        <p id="p2">2</p>
        <p id="p3">3</p>
    </header>

    <script>
        var btns = document.querySelectorAll('.btn');
        var ps = document.querySelectorAll('p');
        ps.forEach(function(e){
            e.style.display = 'none';
        })

        btns.forEach(function(ele,index){
           ele.onclick = function(){
            document.querySelectorAll('p').forEach(function(e){
                e.style.display = 'none';
            })
            document.querySelector(`#${ele.dataset.rel}`).style.display = 'block';
           }
        })

文件读取

读取文件，首先先得将文件上传，可以通过input的type为file的表单控件实现

<input type='file' name=''>

其次，通过FileReader读取文件。读取完文件之后，会将结果存储在result属性中，而不是直接返回

1、FileReader常用方法

1.readAsBinaryString: 将文件读取为二进制编码
2.readAsDataURL: 将文件读取为DataURL
3.readAsText:将文件读取为文本

2、FileReader提供的事件

1.onabort
读取文件中断时触发
2.onerror
读取文件出错时触发
3.onload
读取文件完成时触发，只在读取成功后触发
4.onloadend
读取文件完成时触发，无论读取成功或失败都会触发
5.onloadstart
读取文件开始时触发
6.onprogress
正在读取文件

3、读取文件实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05 文件读取</title>
    <style>

    </style>
</head>

<body>
    <input type="file">
    <script>
        //1、获取元素
        var fileInput = document.querySelector('input');
        //2、监听选中
        fileInput.onchange = function () {
            //3、获取文件
            //  console.log(this.files);   
            var file = this.files[0];

            //4、创建读取器 
            var reader = new FileReader();
            //  console.log(reader);

            //5、开始读取
            reader.readAsText(file);

            //6、监听文件读取的状态
            reader.onload = function () {
                console.log(reader.result);
            }
        }

    </script>

</body>

</html>

获取网络状态

window.navigator.onLione返回浏览器的网络状态。联网状态返回true,断网状态时返回false。

例子代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>network status</title>
</head>
<body>
    <script type="text/javascript">
    // 获取当前网络状态
    var state = window.navigator.onLine;
    if (state) {
        alert("联网状态");
    }
    else {
        alert("断网状态");
    }
    </script>
</body>
</html>

地理位置定位

地理位置api允许用户向web应用程序提供他们的位置。处于隐私考虑，报告地理位置前会先请求用户许可

1、geolocation对象

地理位置API通过navigator.geolocation提供

if(navigator.geolocation){
    /*地理位置服务可用*/    
}else{
    /*地理位置服务不可用*/
}

2、获取当前定位

if(navigator.geolocation){
    /*地理位置服务可用*/
    navigator.geolocation.getCurrentPosition(function(postion){
        position.coords.latitude;//经度
        position.coords.longitude;//纬度
    })
}else{
    /*地理位置服务不可用*/
}

3、百度地图定位

所以，为了实现定位，我们还是用第三方的好啊。比如百度地图开发平台，真的！！这个平台上想要什么都有。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
	<title>设置地图3D视角</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
	var map = new BMapGL.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMapGL.Point(116.280190, 40.049191), 19);  // 初始化地图,设置中心点坐标和地图级别
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	map.setHeading(64.5);
	map.setTilt(73);
</script>

注意：一定要去申请自己的密钥。

本地存储

HTML5 web存储，一个比cookie更好的本地存储方式。

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂。为了满足各种各样的需求，会经常在本地存储大量的数据，传统方式我们会以document.cookie来进行存储，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范提出解决方案，使用sessionStorage和localStorage存储数据

1、JSON的介绍

每个JSON对象就是一个值，可能是数组或者对象

/*规定：

1、复杂类型的值只能是数组或对象，不能是函数  正则  日期

2、基本数据类型的值只有4种：字符串 数值 布尔值 null 不能使用NaN  Infinity  undefined

3、字符串必须使用双引号表示，不能使用单引号

4、数组或对象最后一个成员的后面，不能加逗号*/

创建一个JSON对象

<script>
    var myJson = {
        "data":{
            "key1":["one","tow"],
            "age" : 28,
            "friends":[{
                "name":"xiaohong",
                "age" : 12
            }
                      {
                "name":"mjj",
                "age" : 11
            }
        {
                "name":"cherry",
                "age" : 13
            }]
        }
    }

</script>

以上述代码为json对象为例，完成以下操作

1、把JSON转换成字符串JSON.stringify()

var jsonStr = JSON.stringify(myJson);

2、将JSON字符串转换成JSON对象JSON.parse()*

var json = JSON.parse(jsonStr);

2、localStorage

特点：

永久存储
多窗口共享
容量大约为20M

常用方法

window.localStorage.setItem(key,value); //设置存储的内容
window.localStorage.getItem(key); //获取内容
window.localStorage.removeItem(key);//删除内容
window.localStorage.clear(); //清空内容

sessionStorage

生命周期为关闭当前浏览器窗口
可以在同一个窗口下访问
数据大小为5M左右

window.sessionStorage.setItem(key,value); //设置存储的内容 window.sessionStorage.getItem(key); //获取内容 window.sessionStorage.removeItem(key);//删除内容
本地存储

3、本地储存登录案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本地存储案例</title>
</head>

<body>
    <div class="login">
        <p>
            <label for="user">用户名：</label>
            <input type="text" name="user" id="user">
        </p>
        <p>
            <label for="pwd">密码：</label>
            <input type="password" name="pwd" id="pwd">
        </p>
        <span class="showName"></span>
        <input type="button" value="登录">
        <input type="button" value="退出">
    </div>
    <script>
        window.onload = function () {
            //1、获取标签
            function $(select) {
                return document.querySelector(select);
            }

            //当前用户显示的函数
            function isUserInfo() {
                //(1)获取当前的存储的内容 看他是否存在
                var userInfoStr = window.localStorage.getItem('name');
                var userObj = JSON.parse(userInfoStr);

                //(2)判断用户是否登录
                if (userObj) {
                    //表示已经登录
                    $('.showName').style.display = 'inline-block';
                    $('.showName').innerHTML = userObj.username;
                    $('input[value = 登录]').style.display = 'none';
                } else {
                    //没有登录
                    $('.showName').style.display = 'none';
                    $('input[value = 登录]').style.display = 'inline-block';
                }
            }
            // isUserInfo();
            //2、监听登录按钮的点击事件
            $('input[value = 登录]').onclick = function () {
                //3、获取用户名和密码
                var username = $('input[name = user]').value;
                var pwd = $('input[name = pwd]').value;
                if (username && pwd) {
                    //4、将json对象转换为字符串
                    var jsonStr = JSON.stringify({
                        "username": username,
                        "pwd": pwd
                    })
                    //5、用户名和密码保存到localStrage中
                    window.localStorage.setItem("name", jsonStr);
                    //6、显示当前用户名到网页上
                    isUserInfo();
                    //7、清空输入框
                    $('#user').value = '';
                    $('#pwd').value = '';

                }

            }
            $('input[value = 退出]').onclick = function(){
                window.localStorage.clear();
                isUserInfo();
            }

        }
    </script>

</body>

</html>

调取摄像头的API

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>调取摄像头</title>
</head>
<body>
    <video  width="480px" height="300px" autoplay></video>
    <div>
        <button id="photo">拍照</button>
    </div>
    <canvas id="canvas" width="480" height="300"></canvas>

    <script>
        window.onload = function(){
            //1、获取标签
            var video = document.querySelector('video');
            var photo = document.querySelector('#photo');
            var ctx = document.querySelector('#canvas').getContext('2d');

            //2、调取摄像头
            navigator.mediaDevices.getUserMedia({
                video:{
                    width:480,
                    height:300
                }
            }).then(function(stream){
                //获取url对象
                var URL = window.URL || window.webkitURL;
                try{
                    video.src = URL.createObjectURL(stream);
                }catch(e){
                    video.srcObject = stream;
                }

            }).catch(function(err){
                console.log(err);
            })

            photo.onclick = function(){
                ctx.drawImage(video,0,0,480,300);
            }
        }

    </script>
</body>
</html>