关于HTML5

简介php

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的区别html

1. 简化的语法
2. canvas替代flash
3. 新的header和footer标记
4. 新的section和article标记
5. 新的menu和figure标记
6. 新的audio和video标记
7. 全新的表单设计
8. 再也不使用b和font标记
9. 再也不使用frame,center,big标记等

判断浏览器是否可使用HTML5html5

HTML5---标签python

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---属性mysql

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---事件git

针对window的事件:

针对form的事件:

针对keyboard的事件:

针对mouse的事件:

针对media的事件:

HTML5---canvas画布web

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---加强表单标签的属性sql

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() 方法
相关文章
相关标签/搜索