共计 11662 个字符，预计需要花费 30 分钟才能阅读完成。
简介
HTML5 是 HTML 第五次重大批改
HTML5 的 8 个个性：1. 语义个性
2. 本地存储个性（indexedDB 是 HTML5 本地存储最重要的技术之一）3. 设施兼容个性
4. 连贯个性（Server-Send Event 和 Websockets 这两个个性能帮忙咱们实现服务器将数据推送到客户端的性能）5. 网页多媒体个性
6. 三维，图形及特效个性（基于 SVG，Canvas，WebGL 及 CSS3 的 3D 性能）7. 性能与集成个性（通过 XMLHttpRequest2 等技术帮忙 web 利用和网站在多样化的环境中更疾速的工作）8. CSS3 个性
w3c 文档：https://www.w3school.com.cn/html5/html5_reference.asp
mdn 文档：https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5
HTML5 和 HTML4 的区别
1. 简化的语法
2. canvas 代替 flash
3. 新的 header 和 footer 标记
4. 新的 section 和 article 标记
5. 新的 menu 和 figure 标记
6. 新的 audio 和 video 标记
7. 全新的表单设计
8. 不再应用 b 和 font 标记
9. 不再应用 frame，center，big 标记等
判断浏览器是否能够应用 HTML5
HTML5— 标签
1. <article>：规定独立的自蕴含内容。一篇文章应有其本身的意义，应该有可能独立于站点的其余部分对其进行散发。<article> 元素的潜在起源：论坛帖子
报纸文章
博客条目
用户评论
2. <aside>：定义其所处内容之外的内容。aside 的内容应该与左近的内容相干。3. <audio>：定义声音，比方音乐或其余音频流。4. <bdi>：容许您设置一段文本，使其脱离其父元素的文本方向设置。属性：dir（可选。规定 <bdi> 元素内的文本的文本方向。默认值：auto）属性值：ltr，rtl，auto（目前只有 Firefox 和 Chrome 反对）5. <canvas>：定义图形，比方图表和其余图像。<canvas> 标签只是图形容器，您必须应用脚本来绘制图形。属性：height：设置 canvas 的高度。width：设置 canvas 的宽度。6. <datalist>：定义选项列表。请与 input 元素配合应用该元素，来定义 input 可能的值。datalist 及其选项不会被显示进去，它仅仅是非法的输出值列表。请应用 input 元素的 list 属性来绑定 datalist。7. <dialog> 标签定义对话框或窗口。属性：open（规定 dialog 元素是流动的，用户可与之交互。）属性值：open（目前只有 Chrome 和 Safari 6 反对）8. <embed>：定义嵌入的内容，比方插件。属性：height：设置嵌入内容的高度。src：嵌入内容的 URL。type：定义嵌入内容的类型。width：设置嵌入内容的宽度。9. <figcaption>：定义 figure 元素的题目（caption）。"figcaption" 元素应该被置于 "figure" 元素的第一个或最初一个子元素的地位。10. <figure>：规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相干，但如果被删除，则不应答文档流产生影响。11. <footer>：定义文档或节的页脚。<footer> 元素该当含有其蕴含元素的信息。页脚通常蕴含文档的作者、版权信息、应用条款链接、分割信息等等。您能够在一个文档中应用多个 <footer> 元素。12. <header>：定义文档的页眉（介绍信息）。13. <keygen>：规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。属性：autofocus：使 keygen 字段在页面加载时取得焦点。challenge：如果应用，则将 keygen 的值设置为在提交时询问。disabled：禁用 keytag 字段。form：定义该 keygen 字段所属的一个或多个表单。keytype：定义 keytype。rsa 生成 RSA 密钥。name：定义 keygen 元素的惟一名称。用于在提交表单时收集字段的值。（Firefox, Chrome, Opera 以及 Safari 6 反对）14. <mark>：定义带有记号的文本。请在须要突出显示文本时应用 <m> 标签。15. <meter>：标签定义已知范畴或分数值内的标量测量。也被称为 gauge（尺度）。例子：磁盘用量、查问后果的相关性，等等。<meter> 标签不利用于批示进度（在进度条中）。如果标记进度条，请应用 <progress> 标签。（Firefox, Chrome, Opera 以及 Safari 6 反对）16. <nav>：定义导航链接的局部。17. <output>：定义不同类型的输入，比方脚本的输入。属性：for：定义输入域相干的一个或多个元素。form：定义输出字段所属的一个或多个表单。name：定义对象的惟一名称。（表单提交时应用）18. <progress>：标示工作的进度（过程）。请联合 <progress> 标签与 JavaScript 一起应用，来显示工作的进度。<progress> 标签不适宜用来示意度量衡（例如，磁盘空间应用状况或查问后果）。如需示意度量衡，请应用 <meter> 标签代替。属性：max：规定工作一共须要多少工作。value：规定曾经实现多少工作。19. <rp> : ruby 正文中应用，以定义不反对 ruby 元素的浏览器所显示的内容。ruby 正文是中文注音或字符。20. <rt>：定义字符（中文注音或字符）的解释或发音。ruby 正文是中文注音或字符。21. <ruby>：定义 ruby 的中文正文（注音或字符）。22. <section>：定义文档中的节（section、区段）。比方章节、页眉、页脚或文档中的其余局部。属性：cite：ection 的 URL，如果 section 摘自 web 的话。23. <source>：为媒介元素（比方 <video> 和 <audio>）定义媒介资源。<source> 标签容许您规定可替换的视频 / 音频文件供浏览器依据它对媒体类型或者编解码器的反对进行抉择。属性：media：规定媒体资源的类型。src：规定媒体文件的 URL。type：规定媒体资源的 MIME 类型。24. <summary>：蕴含 details 元素的题目，"details" 元素用于形容无关文档或文档片段的详细信息。与 <details> 标签一起应用。题目是可见的，当用户点击题目时会显示出详细信息。"summary" 元素应该是 "details" 元素的第一个子元素。25. <time>：定义公历的工夫（24 小时制）或日期，工夫和时区偏移是可选的。属性：datetime：规定日期 / 工夫。否则，由元素的内容给定日期 / 工夫。pubdate：批示 <time> 元素中的日期 / 工夫是文档（或 <article> 元素）的公布日期。26. <track>：为诸如 video 元素之类的媒介规定内部文本轨道。用于规定字幕文件或其余蕴含文本的文件，当媒介播放时，这些文件是可见的。属性：default：规定该轨道是默认的，如果没有抉择任何轨道。kind：示意轨道属于什么文本类型。（取值：captions，chapters，descriptions，metadata，subtitles）label：轨道的标签或题目。src：轨道的 URL。srclang：轨道的语言，若 kind 属性值是 "subtitles"，则该属性必须的。（Internet Explorer 10, Chrome 以及 Opera 反对）27. <video>：定义视频，比方电影片段或其余视频流。属性：autoplay：如果呈现该属性，则视频在就绪后马上播放。controls：如果呈现该属性，则向用户显示控件，比方播放按钮。height：设置视频播放器的高度。loop：如果呈现该属性，则当媒介文件实现播放后再次开始播放。muted：规定视频的音频输入应该被静音。poster：规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。preload：如果呈现该属性，则视频在页面加载时进行加载，并准备播放。（如果应用 "autoplay"，则疏忽该属性）src：要播放的视频的 URL。width：设置视频播放器的宽度。28. <wbr>：规定在文本中的何处适宜增加换行符。（所有浏览器都反对 <wbr> 标签，除了 Internet Explorer）HTML5— 属性
1. accesskey：规定激活（使元素取得焦点）元素的快捷键
语法：<element `accesskey="_character_"`>
属性值：character：规定激活（使元素取得焦点）元素的便捷按键。（应用 alt+character 来拜访带有快捷键的元素）2. contenteditable：规定元素内容是否可编辑
语法：<element contenteditable="true|false">
属性值：true：规定元素可编辑。false：规定元素不可编辑。3. contextmenu：规定元素的上下文菜单。当用户右键点击元素时，会呈现上下文菜单
contextmenu 属性的值是要关上的 <menu> 元素的 id。语法：<element contextmenu="_menu_id_">
属性值：menu_id：要关上的 <menu> 元素的 id。（目前只有 firefox 反对）4. data-*：用于存储页面或应用程序的公有自定义数据
data-* 属性赋予咱们在所有 HTML 元素上嵌入自定义 data 属性的能力。存储的（自定义）数据可能被页面的 JavaScript 中利用，以创立更好的用户体验（不进行 Ajax 调用或服务器端数据库查问）。data-* 属性包含两局部：属性名不应该蕴含任何大写字母，并且在前缀 "data-" 之后必须有至多一个字符
属性值能够是任意字符串
语法：<element data-*="_somevalue_">
属性值：somevalue：规定属性的值（以字符串）。5. draggable：规定元素是否可拖动
语法：<element draggable="true|false|auto">
属性值：true：规定元素的可拖动的。false：规定元素不可拖动。auto：应用浏览器的默认行为。6. hidden：是布尔属性。如果设置该属性，它规定元素仍未或不再相干。浏览器不应显示已规定 hidden 属性的元素。hidden 属性也可用于避免用户查看元素，直到匹配某些条件（比方抉择了某个复选框）。而后，JavaScript 能够删除 hidden 属性，以使此元素可见。语法：<element hidden>
7. spellcheck：规定是否对元素进行拼写和语法查看
能够对以下内容进行拼写查看：1) input 元素中的文本值（非明码）2) <textarea> 元素中的文本
3) 可编辑元素中的文本
语法：<element spellcheck="true|false">
属性值：true：对元素进行拼写和语法查看
false：不查看元素。HTML5— 事件
针对 window 的事件：
针对 form 的事件：
针对 keyboard 的事件：
针对 mouse 的事件：
针对 media 的事件：
HTML5—canvas 画布
Canvas 简介：可能帮忙你实现 2D 绘制图形图像及各种动画成果性能
实现 canvas 的相干性能次要依赖于 JavaScript 实现
Canvas 个性：
Canvas 的应用：每一个 canvas 都领有一个上下文（context），能够用来调用相干的画布办法
2D 类型的图形须要调用 2D context
3D 类型的图形须要调用 3D 图形相干的 context（如 WebGL）定义画布：<canvas id='mycanvas(xxx)' width='xx' height='xxx'></canvas>
获取上下文：var canvas=document.getElementById('mycanvas');
var context=canvas.getContext('2d');
Canvas 画布的坐标构造：坐标 (0,0) 在左上方
Canvas 的一些属性设置（配合 JavaScript 应用）：色彩，款式和暗影：
线条款式：
矩形：
门路：
转换：
文本：
图像绘制：
像素操作：
合成：
其余：
具体用法可参考网址：https://www.w3school.com.cn/tags/html_ref_canvas.asp
HTML5—SVG
SVG 简介：SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 应用 XML 格局定义图形
SVG 图像在放大或扭转尺寸的状况下其图形品质不会有损失
SVG 是万维网联盟的规范
SVG 劣势：其余图像格式相比（比方 JPEG 和 GIF），应用 SVG 的劣势在于：SVG 图像可通过文本编辑器来创立和批改
SVG 图像可被搜寻、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像品质不降落的状况下被放大
定义 SVG：<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">...</svg>
SVG 的形态：1. 矩形 <rect>
2. 圆形 <circle>
3. 椭圆 <ellipse>
4. 线条 <line>
5. 折线 <polyline>
6. 多边形 <polygon>
7. 门路 <path>
SVG 的滤镜：用来向形态和文本增加非凡的成果。
高斯滤镜：
SVG 的突变：SVG 突变必须在 <defs> 标签中进行定义。突变是一种从一种色彩到另一种色彩的平滑过渡。另外，能够把多个色彩的过渡利用到同一个元素上。在 SVG 中，有两种次要的突变类型：线性突变，放射性突变
线性突变：
喷射突变：
HTML5— 加强表单标签的属性
1. required：规定必须在提交之前填写输出域（不能为空）。2. placeholder：提供一种提醒（hint），形容输出域所期待的值。placeholder 实用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。提醒（hint）会在输出域为空时显示呈现，会在输出域取得焦点时隐没。3. autocomplete：规定 form 或 input 域应该领有主动实现性能。4. autofocus：规定在页面加载时，域主动地取得焦点。5. form：规定输出域所属的一个或多个表单。6. 表单重写属性：
7. list：规定输出域的 datalist。datalist 是输出域的选项列表。8. min、max 和 step：用于为蕴含数字或日期的 input 类型规定限定（束缚）max 属性规定输出域所容许的最大值。min 属性规定输出域所容许的最小值。step 属性为输出域规定非法的数字距离（如果 step="3"，则非法的数是 -3,0,3,6 等）。9. multiple：规定输出域中可抉择多个值。10. novalidate：规定在提交表单时不应该验证 form 或 input 域。11. pattern：规定用于验证 input 域的模式（pattern）。模式（pattern）是正则表达式
pattern 实用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。HTML5— 文件操作 API
几个无关的 JS 对象：1. FileList：File 对象的一个汇合
2. Blob 对象：其实就是一个原始数据对象，它提供了 slice 办法能够读取原始数据中的某块数据。另外有两个属性：size（数据的大小），type（数据的 MIME 类型）3. File 对象：继承自 Blob 对象，指向一个具体的文件，它还有两个属性：name（文件名）,lastModifiedDate（最初批改工夫）4. FileReader 对象：设计用来读取文件外面的数据，提供三个罕用的读取文件数据的办法，另外读取文件数据应用了异步的形式，十分高效
三个罕用的读取文件数据的办法：1) readAsBinaryString(Blob blob)
传入一个 Blob 对象，而后读取数据的后果作为二进制字符串的模式放到 FileReader 的 result 属性中
2) readAsText(Blob blob, optional DOMString encoding)
第一个参数：传入 Blob 对象
第二个参数：传入编码格局
异步将数据读取胜利后放到 result 属性中，读取的内容是一般的文本字符串的模式
3) readAsDataURL(Blob blob)
传入一个 Blob 对象，读取内容能够作为 URL 属性，就是说能够将一个图片的后果指向给一个 img 的 src 属性
应用时 new 一个对象，再应用相干的办法
HTML5— 本地存储与本地数据库
本地存储：HTML5 反对两种 WebStorage：永久性的本地存储：localStorage
会话级别的本地存储：sessionStorage
HTML5 中数据不是由每个服务器申请传递的，而是只有在申请时应用数据
数据都存储在客户端
localStorage：1. 存储的数据没有工夫限度
2. 它仅在客户端（即浏览器）中保留，不参加和服务器的通信。3. 存储数据：localStorage.setItem('存储的变量名','存储的值')
4. 获取数据：localStorage.getItem('获取的变量名')
5. 删除某个已保留的数据：localStorage.removeItem('要删除的变量名')
6. 清空所有保留的数据：localStorage.clear()
7. 可利用 localStorage.pagecount 对用户拜访页面的次数进行计数
8. localStorage 只能存储字符串（如果存储对象为 json，数组等，须要先序列化成字符串））9. 存储大小个别为 5M
10. 获取某个索引的 key 值：localStorage.key(index)
11. 获取数据的个数：localStorage.length
sessionStorage：1. 存储的数据仅在以后会话下无效，敞开页面或浏览器后被革除
2. 它仅在客户端（即浏览器）中保留，不参加和服务器的通信。3. 存储数据：sessionStorage.setItem('存储的变量名','存储的值')
4. 获取数据：sessionStorage.getItem('获取的变量名')
5. 删除某个已保留的数据：sessionStorage.removeItem('要删除的变量名')
6. 清空所有保留的数据：sessionStorage.clear()
7. 可利用 localStorage.pagecount 对用户拜访页面的次数进行计数
8. sessionStorage 只能存储字符串（如果存储对象为 json，数组等，须要先序列化成字符串））9. 存储大小个别为 5M
10. 获取某个索引的 key 值：sessionStorage.key(index)
11. 获取数据的个数：sessionStorage.length（数据库适宜贮存大量简单的数据）本地数据库 ---Web SQL Database（关系型数据库）HTML5 提供了一个浏览器端的数据库反对
在本地数据库中咱们能够间接利用 JavaScript 创立数据库，并利用 SQL 语句执行相干的数据库操作
1. 关上或创立数据库：openDatabase()
可传递五个参数：数据库名
数据库版本号（可省略）对数据库的形容
设置调配的数据库的大小
回调函数
2. 执行 sql 语句：executeSql()
可传递四个参数：示意查问的字符串，应用的 SQL 语言是 SQLite 3.6.19。插入到查问中问号所在处的字符串数据。胜利时执行的回调函数，返回两个参数：tx 和执行的后果。一个失败时执行的回调函数。返回两个参数：tx 和失败的错误信息。如：context.executeSql(‘INSERT INTO testTable(id,name) VALUES (?,?)’, [id,'xx'], function(xx,result){...}, function(xx,error){});
3. 处理事务：transaction()
可传递三个参数：事务内容的一个办法
执行胜利的回调函数
执行失败的回调函数（后两者能够省略）通过联合 transaction 和 executeSql，咱们就可在咱们之前创立的数据库中增加创立数据表并增加数据了，如：myWebDatabase（数据库）.transaction(function (context){context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');
context.executeSql('INSERT INTO testTable (id, name) VALUES (0,"Byron")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (1,"Casper")');
});
本地数据库 --IndexedDB：（非关系型数据库）IndexedDB 是一个用于在浏览器中存储较大数据结构的 Web API，并且提供了索引性能以实现高性能查找
IndexedDB 是一个事务型的数据库系统，然而它是应用 JavaScript 对象，而不是列数固定的表格来存储数据的
在 indexedDB 中，没有数据表，indexedDB 是应用 objectStore 来存储数据的。objectStore 相当于一张表，然而 objectStore 并不想 mysql 中的表一样，具备一列一列的构造，它只有两列，一列是 keypath（键值），另一列就是存储的数据了，存储的数据个别用 JavaScript 中的对象来示意。每一条数据都和一个键相关联
1. 关上或者创立数据库：indexedDB.open()
可传递两个参数：数据库的名字，必须传入
数据库的版本，不传入的话默认是 1
open 办法并不会返回一个 DB 对象，而是返回了一个 IDBOpenDBRequest 对象，咱们通常用到的 DB 对象在 result 属性中
2. 创立 objectStore（存储对象）：createObjectStore()
可传递两个参数：objectStore 的名字
创立表的键类型（创立 objectStore 相当于批改了数据库的模式，所以这个操作应该放到 onupgradeneeded 中）DBOpenRequest.onupgradeneeded = function(event) {
var db = event.target.result;
var objectStore = db.createObjectStore(dbName, {
keyPath: 'id',
autoIncrement: true
});
}
objectStore 上的办法：1) 向数据库增加数据：objectStore.add()
2) 向数据库删除数据：objectStore.delete()
3) 清空数据库:objectStore.clear()
4) 替换（更新）数据：objectStore.put()（先用 objectStore.get(id)获取对应行的对象，再进行替换更新）5) 创立索引：objectStore.createIndex()
...（具体的参数，办法可查看网址：https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore）3. 在治理数据时，所有操作都要基于事务来进行，所以须要先创立一个事务：var transaction = xx.transaction();
可传递两个参数：存储对象名
模式（三种：1. 只读：read，不能批改数据库数据，能够并发执行。2. 读写：readwrite，能够进行读写操作。3. 版本变更：verionchange）创立完后，关上存储对象 objectStore：var objectStore = transaction.objectStore('存储对象名');
而后就能够进行对数据的操作了
web SQL Database 和 indexedDB 的比拟：
HTML5— 服务器推送事件
web 浏览器到 web 服务器的事件类型称为客户端事件
HTML5 引入了一个从 web 服务器到 web 浏览器的事件流，称为服务器推送事件（SSE）应用 SSE 能够不停地将 DOM 事件推送到用户的浏览器中
SSE 会关上一个到服务器的长久连贯，新音讯可用时发送数据到客户端，从而不再须要继续的轮询
应用 SSE，则须要增加一个元素：EventSource
此元素的 src 属性应该指向一个 URL，这个 URL 提供了一个 HTTP 长久连贯用于发送蕴含事件的数据流，会指向一个继续发送事件数据的 php，python 或任意脚本
如：客户端实例：
服务器实例：（以 PHP，ASP 为例）
HTML5—WebSocket 和信息推送（另写一篇文章具体介绍 WebSocket）
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连贯上进行全双工通信的协定
WebSocket 使得客户端和服务器之间的数据交换变得更加简略，容许服务端被动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只须要实现一次握手，两者之间就间接能够创立持久性的连贯，并进行双向数据传输。WebSocket 的长处：1. 事件驱动
2. 异步
3. 应用 ws 或 wss 协定的客户端 socket
4. 可能实现真正意义上的推送性能
WebSocket 的毛病：1. 少部分浏览器反对，浏览器反对的水平与形式有区别（目前反对的浏览器：Chrome, Mozilla, Opera 和 Safari 等）当初，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的工夫距离（如每 1 秒），由浏览器对服务器收回 HTTP 申请，而后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很显著的毛病，即浏览器须要一直的向服务器发出请求，然而 HTTP 申请可能蕴含较长的头部，其中真正无效的数据可能只是很小的一部分，显然这样会节约很多的带宽等资源。而 HTML5 定义的 WebSocket 协定，能更好的节俭服务器资源和带宽，并且可能更实时地进行通信。
创立 WebSocket 对象：var Socket = new WebSocket(url, [protocol]);
参数：url：指定连贯的 URL
protocol：是可选的，指定了可承受的子协定
相干的属性：
相干的事件：
相干的办法：
在执行相干的 websocket 程序前，须要创立一个反对 websocket 的服务：装置 pywebsocket
HTML5— 应用程序缓存
应用程序缓存为利用带来三个劣势：1. 离线浏览 - 用户可在利用离线时应用它们
2. 速度 - 已缓存资源加载得更快
3. 缩小服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。启用应用程序缓存：在文档的 <html> 标签中蕴含 manifest 属性：<!DOCTYPE HTML>
<html manifest="xxx.appcache"> //manifest 文件的倡议的文件扩展名是：".appcache"。...
</html>
注：manifest 文件须要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。对于 mainifest 文件：
如：
一旦利用被缓存，它就会放弃缓存直到产生下列状况：1. 用户清空浏览器缓存
2. manifest 文件被批改（参阅上面的提醒）3. 由程序来更新利用缓存
一旦文件被缓存，则浏览器会持续展现已缓存的版本，即便您批改了服务器上的文件。为了确保浏览器更新缓存，您须要更新 manifest 文件。注：浏览器对缓存数据的容量限度可能不太一样（某些浏览器设置的限度是每个站点 5MB）。HTML5— 天文定位
HTML5 中可用 Geolocation API 取得用户的地理位置
应用 getCurrentPosition() 办法来取得用户的地位
此办法的三个参数：
getCurrentPosition() 办法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其余上面的属性
watchPosition()：返回用户的以后地位，并持续返回用户挪动时的更新地位（就像汽车上的 GPS）。clearWatch()：进行 watchPosition() 办法
正文完