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