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"/>
<datalist id="star">
<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 搭配使用
新增的input type属性值：
| 类型 | 使用示例 | 含义 |
|---|---|---|
|
输入邮箱格式 | |
| tel | |
输入手机号码格式 |
| url | |
输入url格式 |
| number | |
输入数字格式 |
| search | |
搜索框（体现语义化） |
| range | |
自由拖动滑块 |
| time | |
小时分钟 |
| date | |
年月日 |
| datetime | |
时间 |
| month | |
月年 |
| week | |
星期 年 |
| color | |
拾色器 |
新增的input属性
| 属性 | 用法 | 含义 |
|---|---|---|
| placeholder | |
占位符 当用户输入的时候 里面的文字消失 删除所有文字，自动返回 |
| autofocus | |
规定当页面加载时 input 元素应该自动获得焦点 |
| multiple | |
多文件上传，多邮件 |
| autocomplete | |
规定表单是否应该启用自动完成功能 有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 2.这个表单必须有name |
| required | |
必填项 内容不能为空 |
| accesskey | |
规定激活（使元素获得焦点）元素的快捷键 采用 alt + s的形式 |
| pattern | |
使用正则表达式 |
| form | |
指定id表单进行数据提交 |
| accept | |
限制上传文件的文件类型（不是新增属性） |
新增进度条（较少用，一般div自定义）
进度条- 属性：
- max最大值
- value当前进度
- 属性：
- 属性：
- high规定较高的值
- low规定的较低的值
- max最大值
- min最小值
- value当前值
- 属性：
多媒体标签
- embed：标签定义嵌入的内容
- audio：播放音频
- video：播放视频
多媒体 embed（会使用就行）
embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。有兼容性问题。
本质是调用本机上已经安装的软件。
多媒体 audio
通过标签来解决音频播放的问题。
如下图所示
并且可以通过附加属性可以更友好控制音频的播放，如：
- autoplay 自动播放
- controls 是否显不默认播放控件
- loop 循环播放 如果这个属性不写 默认播放一次 loop 或者 loop = “loop” 表示无限循环
由于版权等原因，不同的浏览器可支持播放的格式是不一样的，如下图供参考
多浏览器支持的方案，如下
<audio controls>
<source src="./music/See You Again.mp3">
<source src="./music/See You Again.wav">
<source src="./music/See You Again.ogg">
您的浏览器不支持HTML音频播放功能
audio>
多媒体 video
通过
同样，通过附加属性可以更友好的控制视频的播放
- autoplay 自动播放
- controls 是否显示默认播放控件
- loop 循环播放
- width 设置播放窗口宽度
- height 设置播放窗口的高度
- poster当视频还没有完全下载，或者用户还没有点击播放时的封面
由于版权等原因，不同的浏览器可支持播放的格式是不一样的，如下图供参考
多浏览器支持的方案与audio一样。
网络状态改变事件（了解，与元素无关，与页面window有关）
- ononline()：网络连通的时候触发。
- onoffline()：网络断开时触发。
全屏接口
主要方法和属性（兼容操作(if判断)）
| 描述 | |
|---|---|
| requestFullScreen() | 开启全屏显示 |
| cancelFullScreen() | 退出全屏显示 |
| fullScreenElement | 判断是否是全屏状态 |
注意：
- 不同浏览器要添加不同的前缀。
- chrome：webkit
- firefox：moz
- ie：ms
- opera：o
document.webkitCancelFullScreen();
- 退出全屏和判断是否全屏只能用document来实现。
文件读取接口FileReader
| 属性和方法 | 描述 |
|---|---|
| readAsText() | 读取文本文件(即可使用Txt打开的文件)，返回文本字符串，默认utf-8 |
| readAsBinaryString() | 读取任意类型文件，返回二进制字符串，一般用于存储文件 |
| readAsDataURL() | 读取文件获取一般以data开头的字符串，这段字符串的本质就是DataURL。接收一个参数Blob二进制大对象，没有返回值，但读取完之后会把结果存储在文件读取对象的result中。 |
| abort() | 中断读取 |
| onabort | 读取文件中断时触发 |
| onerror | 读取错误时触发 |
| onload | 读取成功完成时触发 |
| onloadend | 读取完成时触发，无论成功还是失败 |
| onloadstart | 开始读取时触发 |
| onprogress | 读取文件过程中持续触发 |
DataURL是一种将文件（一般指图像或能够嵌入到文件的文件格式）嵌入到文档的方案。将资源转换为base64编码的字符串形式，并且将这些内容之间存储在url中。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<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");
例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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存储
- sessionStorage存储数据到本地，容量5mb左右，本质存储在当前页面的内存中，声明周期为关闭当前页面，关闭后会自动清除。
- localStorage存储大概20mb，不同浏览器不能共享数据，永久生效，存储在硬盘上，不会随页面关闭而清除。
都含有一下方法（用法一样）：
| 方法 | 描述 |
| ------------------- | -------------------- |
| setItem(key, value) | 以键值对方式存储数据 |
| getItem(key) | 获取数据 |
| removeItem(key) | 删除数据 |
| clear() | 清空所有存储内容 |
例：window.localStorage.setItem("name","张三");
应用缓存（了解）
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。
优势：
1. 可配置需要缓存的资源
2. 网络无连接应用仍可用
3. 本地读取缓存资源，提升访问速度，增强用户体验
4. 减少请求，缓解服务器负担
Cache Manifest 基础：
- 如需启用应用程序缓存，在文档的
标签中包含 属性manifest:缓存文件名。建议扩展名为.appcache。
注意:manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置。 - 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线程。
注意：
- 无法使用document、window、parent这些对象，可以使用navigator对象和location对象。
- 线程不能执行alert()方法和confirm()方法，但可以使用AJAX请求。
使用流程：
- 创建web worker对象，new worker();
- onmessage事件监听线程返回来的信息；
- postMessage()返回消息给worker；
- terminate() 终止web worker；
例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<p>计数：
<output id="result">output>
p>
<button onclick="startWorker()">开始 Workerbutton>
<button onclick="stopWorker()">停止 Workerbutton>
<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() 关闭连接