关于HTML5

简介

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 是 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() 方法