HTML5简单笔记

HTML5新标签与特性

w3c手册中文官网 : http://w3school.com.cn/

语义标签

注意：在IE9及以上才支持，**但可能解析为行内元素，需转换为块级元素。**IE8及以下可以引入第三方插件html5shiv.js来达到兼容。

• header：定义文档的页眉 头部
• nav：定义导航链接的部分
• main：定义主要内容
• footer：定义文档或节的页脚 底部
• article：定义文章。
• section：定义文档中的节（section、区段）
• aside：定义其所处内容之外的内容 侧边

<header> 语义 :定义页面的头部  页眉</header>
<nav>  语义 :定义导航栏 </nav> 
<main> 语义：主要内容</main>
<footer> 语义: 定义 页面底部 页脚</footer>
<article> 语义:  定义文章</article>
<section> 语义： 定义区域</section>
<aside> 语义： 定义其所处内容之外的内容 侧边</aside>

新增表单元素

• datalist 标签定义选项列表。请与 input 元素配合使用该元素(各浏览器略有不同，少用)

<input type="text" value="输入明星" list="star"/><!-- input里面用 list -->
<datalist id="star">   <!-- datalist 里面用 id  来实现和 input 链接 -->  
      <option value="刘德华" label="提示信息（辅助）"></option>
      <option value="刘若英" label="提示信息（辅助）"></option>
      <option value="刘晓庆" label="提示信息（辅助）"></option>
      <option value="郭富城" label="提示信息（辅助）"></option>
      <option value="张学友" label="提示信息（辅助）"></option>
      <option value="郭郭" label="提示信息（辅助）"></option>
</datalist>

• fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用

<fieldset>
    <legend>用户登录</legend>  <!-- 标题 -->
    用户名: <input type="text"><br /><br />
    密　码: <input type="password">
</fieldset>

新增的input type属性值：

类型	使用示例	含义
email	<input type="email">	输入邮箱格式
tel	<input type="tel">	输入手机号码格式
url	<input type="url">	输入url格式
number	<input type="number">	输入数字格式
search	<input type="search">	搜索框（体现语义化）
range	<input type="range">	自由拖动滑块
time	<input type="time">	小时分钟
date	<input type="date">	年月日
datetime	<input type="datetime">	时间
month	<input type="month">	月年
week	<input type="week">	星期 年
color	<input type="color">	拾色器

新增的input属性

属性	用法	含义
placeholder	<input type="text" placeholder="请输入用户名">	占位符 当用户输入的时候 里面的文字消失 删除所有文字，自动返回
autofocus	<input type="text" autofocus>	规定当页面加载时 input 元素应该自动获得焦点
multiple	<input type="file" multiple>	多文件上传，多邮件
autocomplete	<input type="text" autocomplete="off">	规定表单是否应该启用自动完成功能 有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 2.这个表单必须有name
required	<input type="text" required>	必填项 内容不能为空
accesskey	<input type="text" accesskey="s">	规定激活（使元素获得焦点）元素的快捷键 采用 alt + s的形式
pattern	<input type="text" pattern="正则表达式">	使用正则表达式
form	<input type="text" form="form表单id">	指定id表单进行数据提交
accept	<input type ="file" accept="image/*">	限制上传文件的文件类型（不是新增属性）

新增进度条（较少用，一般div自定义）

• <progress>进度条
  • 属性：
    • max最大值
    • value当前进度
• <meter>度量器
  • 属性：
    • high规定较高的值
    • low规定的较低的值
    • max最大值
    • min最小值
    • value当前值

多媒体标签

• embed：标签定义嵌入的内容
• audio：播放音频
• video：播放视频

多媒体 embed（会使用就行）

embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。有兼容性问题。
本质是调用本机上已经安装的软件。

多媒体 audio

通过<audio>标签来解决音频播放的问题。
如下图所示

并且可以通过附加属性可以更友好控制音频的播放，如：

• autoplay 自动播放
• controls 是否显不默认播放控件
• loop 循环播放 如果这个属性不写 默认播放一次 loop 或者 loop = “loop” 表示无限循环

由于版权等原因，不同的浏览器可支持播放的格式是不一样的，如下图供参考

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

<audio controls>
    <!-- 通过source标签指定多格式音频文件 -->
	<source src="./music/See You Again.mp3">
    <source src="./music/See You Again.wav">
    <source src="./music/See You Again.ogg">
    您的浏览器不支持HTML音频播放功能
</audio>

多媒体 video

通过<vudio>标签来解决音频播放的问题。

同样，通过附加属性可以更友好的控制视频的播放

• autoplay 自动播放
• controls 是否显示默认播放控件
• loop 循环播放
• width 设置播放窗口宽度
• height 设置播放窗口的高度
• poster当视频还没有完全下载，或者用户还没有点击播放时的封面

由于版权等原因，不同的浏览器可支持播放的格式是不一样的，如下图供参考

多浏览器支持的方案与audio一样。

网络状态改变事件（了解，与元素无关，与页面window有关）

• ononline()：网络连通的时候触发。
• onoffline()：网络断开时触发。

全屏接口

主要方法和属性（兼容操作(if判断)）

	描述
requestFullScreen()	开启全屏显示
cancelFullScreen()	退出全屏显示
fullScreenElement	判断是否是全屏状态

注意：

1. 不同浏览器要添加不同的前缀。
   • chrome：webkit
   • firefox：moz
   • ie：ms
   • opera：o

document.webkitCancelFullScreen();

2. 退出全屏和判断是否全屏只能用document来实现。

文件读取接口FileReader

属性和方法	描述
readAsText()	读取文本文件(即可使用Txt打开的文件)，返回文本字符串，默认utf-8
readAsBinaryString()	读取任意类型文件，返回二进制字符串，一般用于存储文件
readAsDataURL()	读取文件获取一般以data开头的字符串，这段字符串的本质就是DataURL。接收一个参数Blob二进制大对象，没有返回值，但读取完之后会把结果存储在文件读取对象的result中。
abort()	中断读取
onabort	读取文件中断时触发
onerror	读取错误时触发
onload	读取成功完成时触发
onloadend	读取完成时触发，无论成功还是失败
onloadstart	开始读取时触发
onprogress	读取文件过程中持续触发

DataURL是一种将文件（一般指图像或能够嵌入到文件的文件格式）嵌入到文档的方案。将资源转换为base64编码的字符串形式，并且将这些内容之间存储在url中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
即时预览
即时，当用户选择完图片后立即进行预览的处理
预览：通过玩家读取图像的readdAsDataURL()完成
-->
<form action="">
    文件：<input type="file" id="myFile" onchange="getFileContent()"><br>
    <img src="">
    <input type="submit">
</form>
<script>
    function getFileContent() {
        // 创建文件读取对象
        var reader = new FileReader();
        // 读取文件
        var file = document.getElementById("myFile").files;//返回一个数组
        reader.readAsDataURL(file[0]);
        reader.onload= function () {
            // console.log(reader.result);
            document.querySelector("img").src=reader.result;
        };
    }
</script>
</body>
</html>

拖拽接口

想要拖拽元素，就必须为元素添加draggable=“true”，图片和超链接默认就可以拖拽。
浏览器默认阻止ondrop事件，需在ondragover中利用e.preventDefault()阻止此默认行为。
一般利用document来添加拖拽事件，再利用添加节点来添加拖拽元素到目标元素。

方法	描述
ondrag	应用于拖拽元素，整个拖拽过程都会调用
ondragleave	应用于拖拽元素，当鼠标离开拖拽元素时调用
ondragstart	应用于拖拽元素，当拖拽开始时调用
ondragend	应用于拖拽元素，当拖拽结束时调用
ondragenter	应用用目标元素，当拖拽元素进入时调用
ondragleave	应用用目标元素，当鼠标离开目标元素时调用
ondragover	应用用目标元素，当停留在目标元素上时调用
ondrop	应用用目标元素，当在目标元素上松开鼠标时调用

在进行拖放操作时，DataTransfer 对象用来保存，通过拖放动作，拖动到浏览器的数据。它可以保存一项或多项数据、一种或者多种数据类型。通过setData(数据类型，字符串值)设置，数据类型有text/html, text/uri-list。只能在ondrop中取值。

e.dataTransfer.setData("text/html",e.target.id)；
e.dataTransfer.getData("text/html");

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1 {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        .div2 {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
        }
        .div3 {
            width: 100px;
            height: 100px;
            border: 1px solid green;
        }
    </style>
</head>
<body>
<div class="div1" id="div1">
    <p id="pe" draggable="true">拖拽过去</p>
    <p id="pe2" draggable="true">也拖拽过去</p>
</div>
<div class="div2" id="div2"></div>
<div class="div3" id="div3"></div>
<script>
    // 应用于被拖拽元素
    document.ondragstart = function (ev) {
        ev.target.style.opacity = 0.5;
        ev.dataTransfer.setData("text/html",ev.target.id);
    };
    document.ondragend = function (ev) {
        ev.target.style.opacity = 1;
    };
    document.ondrag = function (ev) {

    };
    document.ondragleave = function (ev) {

    };
    // 应用于目标元素
    document.ondragover = function (ev) {
        ev.preventDefault();
    };
    document.ondragenter = function (ev) {

    };
    document.ondrop = function (ev) {
        var obj = ev.dataTransfer.getData("text/html");
        ev.target.appendChild(document.getElementById(obj));
    };
    document.ondragleave = function (ev) {

    };
</script>
</body>
</html>

地理位置接口（少用，大多利用第三方接口）

浏览器是自己选择最优定位方式。

地理位置属于私密信息，所以浏览器会弹出提示框请求，同意才可获取。
navigator.geolocation首先if判断浏览器是否支持地理定位。它有一个getCurrentPosition()方法来获取当前定位。
getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息。

• successCallback获取地理信息成功之后回调，并返回一个包含位置信息的对象position给回调函数。

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

• errorCallback获取地理信息失败之后回调，并返回错误信息error给回调函数。

error.PERMISSION_DENIED 用户拒绝请求
error.POSITION_UNAVAILABLE 定位信息不可用
error.TIMEOUT 请求超时
error.UNKNOWN_ERROR 未知错误

• options调整获取当前地理位置方式（少用）

enableHighAccuracy:true/false是否使用高精度
timeout:设置超时时间，单位ms
maximumAge:重新获取时间间隔，单位ms

第三方接口：去打开某一地图，进入其开发平台，获取JavaScript的API。

web存储

1. sessionStorage存储数据到本地，容量5mb左右，本质存储在当前页面的内存中，声明周期为关闭当前页面，关闭后会自动清除。
2. localStorage存储大概20mb，不同浏览器不能共享数据，永久生效，存储在硬盘上，不会随页面关闭而清除。
   都含有一下方法（用法一样）：
   | 方法 | 描述 |
   | ------------------- | -------------------- |
   | setItem(key, value) | 以键值对方式存储数据 |
   | getItem(key) | 获取数据 |
   | removeItem(key) | 删除数据 |
   | clear() | 清空所有存储内容 |

例：window.localStorage.setItem("name","张三");

应用缓存（了解）

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。
优势：
​ 1. 可配置需要缓存的资源
​ 2. 网络无连接应用仍可用
​ 3. 本地读取缓存资源，提升访问速度，增强用户体验
​ 4. 减少请求，缓解服务器负担

Cache Manifest 基础：

1. 如需启用应用程序缓存，在文档的 <html> 标签中包含 属性manifest:缓存文件名。建议扩展名为.appcache。
   注意:manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置。
2. Manifest 文件编辑

• CACHE MANIFEST 开始，必须在第一行
• CACHE: 在此标题下列出的文件将在首次下载后进行缓存
• NETWORK: 在此标题下列出的文件需要与服务器的连接，且不会被缓存
• FALLBACK: 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

CACHE MANIFEST
#需要缓存的文件清单列表
CACHE:
../images/1.jpg
# *代表所有文件
#配置每一次都需要重新从服务器获取的文件清单列表
NETWORK:
../images/3.jpg
#配置如果文件无法获取则使用指定的文件代替
FALLBACK:
../images/4.jpg ../images/2.jpg
# /代表所有文件

说明：更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法

自定义播放器

w3school：http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

常用属性/方法	描述
play()	开始播放音频/视频
pause()	暂停当前播放的音频/视频
load()	重新加载音频/视频元素
currentTime	设置或返回音频/视频中的当前播放位置（以秒计）
duration	返回当前音频/视频的长度（以秒计）
paused	设置或返回音频/视频是否暂停

事件	描述
oncanplay	当浏览器可以播放音频/视频时
timeupdate	当目前的播放位置已更改时
onended	当目前的播放列表已结束时

Web worker

为web内容在后台现场中运行脚本提供一个简单的方法。线程可以执行任务而不干扰用户界面。
为了JavaScript创造多线程环境，允许主线程创建worker线程。
注意：

1. 无法使用document、window、parent这些对象，可以使用navigator对象和location对象。
2. 线程不能执行alert()方法和confirm()方法，但可以使用AJAX请求。

使用流程：

1. 创建web worker对象，new worker();
2. onmessage事件监听线程返回来的信息；
3. postMessage()返回消息给worker；
4. terminate() 终止web worker；

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>计数：
    <output id="result"></output>
</p>
<button onclick="startWorker()">开始 Worker</button>
<button onclick="stopWorker()">停止 Worker</button>

<script>
    var w;

    function startWorker() {
        // 判断用户浏览器是否支持web workers
        if (typeof (Worker) !== 'undefined') {
            if (typeof (w) == 'undefined') {
                // 创建web worker对象，demo_workers.js为web worker文件；对象执行的代码。
                w = new Worker('js/demo_workers.js');
            }
            // 监听后台执行代码返回来的信息，即postMessage发过来的信息
            w.onmessage = function (event) {
                // 参数event为message实例，里面包含了data、origin、source等属性，data是发送方发送的message,origin是发送方所属的域，source是发送方的window对象的引用。
                document.getElementById('result').innerHTML = event.data;
            }
        } else {
            document.getElementById('result').innerHTML = 'Sorry, your browser does not support Web Workers...';
        }
    }

    function stopWorker() {
        // 终止web worker
        w.terminate();
    }
</script>
</body>
</html>

websocket

一种在单个TCP连接上进行全双工通讯的协议。允许服务端主动向客户端推送数据。
附：Ajax轮询是指浏览器通过JavaScript启动一个定时器，然后固定的间隔给服务器请求，询问服务器有没有新消息。

websocket使用ws或wss的统一资源标志符，类似于HTTPS，其中wss表示在TLS之上的websocket。

• 通过new webSocket(url, [protocol]); 向服务器建立websocket连接。
  • url为指定连接的URL。
  • protocol可选，指定可接受的子协议。

websocket属性

• Socket.readyState
  • 0 连接尚未建立。
  • 1 已连接。
  • 2 正在关闭连接。
  • 3 连接打不开或连接已经关闭。

websocket事件

• Socket.onopen 连接建立时触发
• Socket.onmessage 客户端接收服务端数据时触发
• Socket.onerror 通讯发生错误时触发
• Socket.onclose 连接关闭时触发

websocket方法

• Socket.send() 使用连接发送数据
• Socket.close() 关闭连接