HTML5新增

目录

 

1 新增标签

1.1 常用语义化标签

1.2 进度条

1.3 音频视频

2、表单元素中新增

2.1 input 中新增

2.2 datalist标签

2.3 keygun标签

2.4 output标签

2.5 新增事件

3 获取dom元素

4 操作类样式方法

5 自定义属性

6 新增接口

6.1 网络接口

6.2 全屏接口

6.3 地理定位接口

7 拖动事件

7.1 设置元素为可拖放

7.2 拖动什么 - ondragstart 和 setData()

7.3 放到何处 - ondragover

7.4 进行放置 - ondrop

 

8 Web 存储

8.1 sessionStorage

8.2 localStorage

9 canvas

10 WebWorker

 11 应用缓存

---

1 新增标签

1.1 常用语义化标签

<nav>、<header>、<footer>、<main>、<article>、<aside>    （在页面中不唯一）

1.2 进度条

<progress>：属性max、value

<meter>：度量器衡量当前进度值，属性：high、low、max、min、value

1.3 音频视频

<audio>：文件路径 src、控制进度条 controls、自动播放 autoplay、循环播放 loop

<video>：与上述一样  +  指定未播放时画面 poster、视频宽高 width  height（画面按比例缩放，一般只设置其中一个）

            source：保证浏览器可以播放其中一个视频，兼容性

<video controls>
        <source src = "....flv" type = "video/flv">
        <source src = "....mp4" type = "video/mp4">
</video>

2、表单元素中新增

2.1 input 中新增

属性	值	用途	备注
type	email	邮箱地址完整性验证	属性mutiple：允许用逗号分隔多个邮箱
	tel	在移动端打开数字键盘
	url	验证网址，必须包含http://
	number	只能输入数字	可以设置默认值value，最大值max，最小值min
	search	文本框	右边有一个删除全部内容键
	range	范围拖动条	属性max，min，value
	color	颜色选择
	time	时间
	date	日期
	datetime-local	日期+时间
	file	上传文件	属性mutiple增加上传的文件的个数
placeholder	placeholder	提示文本
autofocus	autofocus	自动焦点
autocomplete	on/off	自动提示输入过的内容	执行条件：成功提交过且有name属性
required	required	必须填写

2.2 datalist标签

<datalist> 标签定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值。

如果  input  的  type="url"  若  datalist  中没有含有  http://  的选项，则不会有下拉列表

使用  input  元素的  list  属性来绑定  datalist  的  id。

2.3 keygun标签

用于表单的密钥对生成器字段

当提交表单时，私钥存储在本地，公钥发送到服务器

2.4 output标签

不同类型的输出，比如脚本的输出

2.5 新增事件

oninput：元素内容改变触发

oninvalid：验证不通过时触发

                设置默认的提示信息：setCustomValidity

3 获取dom元素

.querySelector（"类样式 / # + id / . + class"）（如果有多个元素，则取第一个）

.querySelectorAll（）返回所有符合条件的元素----数组

4 操作类样式方法

.classList.add（"样式名字"）-------------追加样式，一次只能一个

.classList.remove（"样式名字"）-------------删除样式，一次只能一个

.classList.toggle（"样式名字"）-------------该样式  与  没有样式  之间切换

.classList.contain（"样式名字"）-------------判断元素是否包含指定名称的样式，返回Boolean值

.classList.item[x]（"样式名字"）-------------获取第x个样式名字

5 自定义属性

命名：

1、data-    开头

2、data-    后面至少有一个字符，多个单词用 - 连接

建议

1、名称都用小写

2、没有特殊符号

3、不使用纯数字

取值：js中取值

.dataset [ "data- 后面的内容" ]           多个单词用驼峰命名法连接

6 新增接口

6.1 网络接口

window.addEventListener（"online", function() {............}）;------------网络连通触发

window.addEventListener（"offline", function() {............}）;------------网络断开触发

6.2 全屏接口

1、开启全屏显示：requestFullScreen（）---------前面加某标签

2、退出全屏显示：cancelFullScreen（）--------前面加document全局

3、检测是否全屏状态：fullScreenElement（）---------前面加document全局

不同浏览器加不同前缀

chorme & safari : webkit      firefox : moz       ie : ms      opera : o

6.3 地理定位接口

获取当前地理信息

1. 原理：

    PC端：IP地址定位，精度很差

                问题：Chrome从google.com的IP库查询（翻墙），IE从microsoft.com的IP库查询

                解决：用后台的IP库来匹配

    移动端：GPS定位，精度高

2. 方法：

navigator.geolocation.getCurrentPosition(res, error, option)

（1）success：获取地理信息成功之后的回调

回调参数的数据：

• res.coords.latitude 纬度
• res.coords.longitude 经度
• res.coords.accuracy 精度
• res.coords.altitude 海拔高度

（2）error：     获取地理信息失败之后的回调

function showError(error)
{
    switch(error.code)
    {
        case error.PERMISSION_DENIED:
            x.innerHTML="User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML="Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML="The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML="An unknown error occurred."
            break;
    }
}

（3）option：

• 调整获取当前地进信息的方式
• enableHighAccuracy:true/false:是否使用高精度
• timeout:设置超时时间，单位ms
• maximumAge:可以设置浏览器重新获取地理信息的时间间隔，单位是ms

7 拖动事件

拖拽元素事件：ondrag、ondragstart、ondragleave、ondragend

目标元素事件：ondragenter、ondragover、ondrop、ondragleave

7.1 设置元素为可拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

<img draggable="true" />

7.2 拖动什么 - ondragstart 和 setData()

然后，规定当元素被拖动时，会发生什么，ondragstart（事件）。

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。

7.3 放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()        // 阻止默认处理方式（不允许放置）

7.4 进行放置 - ondrop

当放置被拖数据时，会发生 drop 事件。

浏览器默认会阻止 ondrop 事件，可以在 ondragover 中阻止浏览器默认行为， preventDefault（）

在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

    /*学习拖拽，主要就是学习拖拽事件*/

    /*应用于被拖拽元素的事件
    *ondrag         应用于拖拽元素，整个拖拽过程都会调用--持续
     ondragstart    应用于拖拽元素，当拖拽开始时调用
     ondragleave    应用于拖拽元素，当鼠标离开拖拽元素时调用
     ondragend    应用于拖拽元素，当拖拽结束时调用*/
    document.ondragstart=function(e){
        /*通过事件捕获来获取当前被拖拽的子元素*/
        e.target.style.opacity=0.5;
        e.target.parentNode.style.borderWidth="5px";
        obj= e.target;
        /*通过dataTransfer来实现数据的存储与获取
        * setData(format,data):
        * format:数据的类型：text/html   text/uri-list
        * Data:数据:一般来说是字符串值*/
        e.dataTransfer.setData("text/html", e.target.id);
    }
    document.ondragend=function(e){
        e.target.style.opacity=1;
        e.target.parentNode.style.borderWidth="1px";
    }
    document.ondragleave=function(e){
    }
    document.ondrag=function(e){
    }

    /*应用于目标元素的事件
    *ondragenter    应用于目标元素，当拖拽元素进入时调用
     ondragover    应用于目标元素，当停留在目标元素上时调用
     ondrop        应用于目标元素，当在目标元素上松开鼠标时调用
     ondragleave    应用于目标元素，当鼠标离开目标元素时调用*/
    document.ondragenter=function(e){
        console.log(e.target);
    }
    document.ondragover=function(e){
        /*如果想触发ondrop事件，那么就必须在这个位置阻止浏览器的默认行为*/
        e.preventDefault();
    }
    /*浏览器默认会阻止ondrop事件：我们必须在ondragover中阻止浏览器的默认行为*/
    document.ondrop=function(e){
        /*添加元素*/
        //e.target.appendChild(obj);
        /*通过e.dataTransfer.setData存储的数据，只能在drop事件中获取*/
        var id=e.dataTransfer.getData("text/html");
        /*console.log("id="+id);*/
        e.target.appendChild(document.getElementById(id));
    }
    document.ondragleave=function(e){
    }

 

8 Web 存储

8.1 sessionStorage

1. 每个域名5M
2. 存储在当前页面的内存中
3. 关闭页面，数据自动清除

8.2 localStorage

1. 每个域名5M
2. 不同浏览器不能共享数据。但是在同一个浏览器的不同窗口中可以共享数据
3. 永久生效，数据存储在硬盘上，必须手动清除
4. 用途：记录用户名，保存草稿

setItem ( key , value ): 存储数据，以键值对的方式存储
getItem ( key ): 获取数据，通过指定名称的key获取对应的value值
removeItem ( key ): 删除数据，通过指定名称key删除对应的值
clear (): 清空所有存储的内容

9 canvas

10 WebWorker

Web多进程（基本不用）

主进程——UI进程

子进程——工作进程

1. 不能控制UI，可以数据交互
2. 子进程不能再创建子进程
3. 不能跨域获取别人的文件
4. 利用CPU资源

都是用onmessage、postMessage交换数据

<!-- 主进程 -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    // 创建子进程（引入js文件）
    let oW=new Worker('1.js');
    // 收到子进程的数据
    oW.onmessage=function (ev){
      alert(ev.data);
    };
    // 向子进程发送数据
    oW.postMessage({n1: 25, n2: 99});
    </script>
  </head>
  <body>

  </body>
</html>

// 子进程
// 收到主进程数据
this.onmessage=function (ev){
  let {n1, n2}=ev.data;

  let result=n1+n2;
  // 发送数据给主进程
  this.postMessage(result);
};

 11 应用缓存

在html标签中添加 manifest 属性，对应值的文件扩展名建议为 .appcache

.appcache 文件格式

第一句必须是：CACHE MANIFEST
# 井号后面写注释

#需要缓存的文件清单列表
CACHE:
#下面就是需要缓存的清单列表
../images/l1.jpg
../images/l2.jpg
# *:代表所有文件

#配置每一次都需要重新从服务器获取的文件清单列表
NETWORK:
../images/l3.jpg

#配置如果文件无法获取则使用指定的文件进行替代
FALLBACK:
../images/l4.jpg ../images/banner_1.jpg
# /:代表所有文件