HTML5 是对 HTML 标准的第五次修订

时间：2018-09-20 12:29:36 阅读：175 评论：0 收藏：0 [点我收藏+]

HTML5
HTML5 是对 HTML 标准的第五次修订。其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。HTML5 的语法是向后兼容的。现在国内普遍说的 H5 是包括了 CSS3，JavaScript 的说法（严格意义上说，这么叫并不合适，但是已经这么叫开了，就将错就错了）。
:
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。
HTML5的设计目的是为了在移动设备上支持多媒体。
HTML5 中的一些有趣的新特性：
:用于绘画的 canvas 元素。
:用于媒介回放的 video 和 audio 元素
:对本地离线存储的更好的支持。
http:/ /www.iis7.com/b/plc/
:新的特殊内容元素，比如 article、footer、header、nav、section。
:新的表单控件，比如 calendar、date、time、email、url、search。
一.HTML5 的改进
新元素
新属性
完全支持 CSS3
Video 和 Audio
2D/3D 制图
本地存储
本地 SQL 数据
Web 应用
二.HTML5 多媒体
使用 HTML5 你可以简单的在网页中播放视频(video)与音频 (audio) 。
HTML5 <video>
HTML5 <audio>
三.HTML5 应用
使用 HTML5 你可以简单地开发应用
本地数据存储
访问本地文件
本地 SQL 数据
缓存引用
Javascript 工作者
XHTMLHttpRequest 2
四.HTML5 图形
使用 HTML5 你可以简单的绘制图形:
使用 <canvas> 元素。
使用内联 SVG。
使用 CSS3 2D 转换、CSS3 3D 转换。
五.HTML5 使用 CSS3
新选择器
新属性
动画
2D/3D 转换
圆角
阴影效果
可下载的字体
:
HTML5 定了 8 个新的 HTML 语义（semantic）元素。所有这些元素都是块级元素。
为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:
1.header,2. section,3. footer,4. aside,5. nav,6. main,7. article,8. figure
：
HTML5 新元素
<canvas>：标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API。
新多媒体元素：
<audio>，定义音频内容。
<video>定义视频（video 或者 movie）。
<source>，定义多媒体资源 <video> 和 <audio>。
<embed>，定义嵌入的内容，比如插件。
<track>，为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。
新表单元素：
<datalist>，定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen>，规定用于表单的密钥对生成器字段。
<output>，定义不同类型的输出，比如脚本的输出。
新的语义和结构元素：
HTML5提供了新的元素来创建更好的页面结构。
<article>，定义页面独立的内容区域。
<aside>，定义页面的侧边栏内容。
<bdi>，允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command>，定义命令按钮，比如单选按钮、复选框或按钮
<details>，用于描述文档或文档某个部分的细节
<dialog>，定义对话框，比如提示框
<summary>，标签包含 details 元素的标题
<figure>，规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>，定义 <figure> 元素的标题
<footer>，定义 section 或 document 的页脚。
<header>，定义了文档的头部区域
<mark>，定义带有记号的文本。
<meter>，定义度量衡。仅用于已知最大和最小值的度量。
<nav>，定义导航链接的部分。
<progress>，定义任何类型的任务的进度。
<ruby>，定义 ruby 注释（中文注音或字符）。
<rt>，定义字符（中文注音或字符）的解释或发音。
<rp>，在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section>，定义文档中的节（section、区段）。
<time>，定义日期或时间。
<wbr>，规定在文本中的何处适合添加换行符。
：
HTML5 Canvas(画布)：
<canvas>标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API。
<canvas>元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。
<canvas>标签定义图形，只是图形容器，比如图表和其他图像，您必须使用脚本来绘制图形。
<canvas>元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。
一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制，注意: 默认情况下 <canvas> 元素没有边框和内容。
注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小。
Javascript中的<fillRect(填充)(上下,左右,宽度,高度)。
实例解析:
首先，找到 <canvas> 元素:
var c=document.getElementById("myCanvas");
然后，创建 context 对象：
var ctx=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
Canvas 坐标：
canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
Canvas 路径：
在Canvas上画线，我们将使用以下两种方法：
moveTo(x,y) 定义线条的 "开始坐标"。
lineTo(x,y) 定义线条的 "结束坐标"。
stroke()，绘制线条。
：
在canvas中绘制圆形, 我们将使用以下方法:
beginPath()，绘制圆形。
arc(x,y,r,start,stop)(左右，上下，大小，开始点，停止点)
：
Canvas - 文本：
使用 canvas 绘制文本，重要的属性和方法如下：
font，定义字体。
fillText(text,x,y)，在 canvas 上绘制实心的文本。
strokeText(text,x,y)，在 canvas 上绘制空心的文本(描边的)。
：
Canvas - 渐变：
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变：
createLinearGradient(x,y,x1,y1)，创建线条渐变。
createRadialGradient(x,y,r,x1,y1,r1)，创建一个径向/圆渐变。
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1。
使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。
：
Canvas - 图像
把一幅图像放置到画布上, 使用以下方法:
drawImage(image,x,y)。
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
：
HTML5 内联 SVG
HTML5 支持内联 SVG。
一.什么是SVG？：
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)。
SVG 用于定义用于网络的基于矢量的图形。
SVG 使用 XML 格式定义图形。
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失。
SVG 是万维网联盟的标准。
二.SVG优势：
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
SVG 图像可通过文本编辑器来创建和修改。
SVG 图像可被搜索、索引、脚本化或压缩。
SVG 是可伸缩的。
SVG 图像可在任何的分辨率下被高质量地打印。
SVG 可在图像质量不下降的情况下被放大。
三.SVG 与 Canvas两者间的区别：
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
：
HTML5 MathML(数学标记语言)
HTML5 可以在文档中使用 MathML 元素，对应的标签是 <math>...</math> 。
MathML是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写 "数学符号" 和 "公式" 的置标语言。
：
HTML5 拖放（Drag(拖拽) 和 Drop(放下)）
拖放（Drag 和 drop）是 HTML5 标准的组成部分
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
首先，为了使元素可拖动，把 draggable 属性设置为 true 。
ondragover 事件规定在何处放置被拖动的数据。
：
HTML5 Geolocation（地理定位）
用于定位用户的位置。
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
注意: Geolocation（地理定位）对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。
请使用 getCurrentPosition()，方法来获得用户的位置。
getCurrentPosition()，方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数。
Permission denied，用户不允许地理定位。
Position unavailable，无法获取当前位置。
Timeout，操作超时。
给定位置的信息：
更新本地信息。
显示用户周围的兴趣点。
交互式车载导航系统 (GPS)。
getCurrentPosition() 方法 - 返回数据：
若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。
属性描述
coords.latitude，十进制数的纬度。
coords.longitude，十进制数的经度。
coords.accuracy，位置精度。
coords.altitude，海拔，海平面以上以米计。
coords.altitudeAccuracy，位置的海拔精度。
coords.heading，方向，从正北开始以度计。
coords.speed，速度，以米/每秒计。
timestamp，响应的日期/时间。
watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。
clearWatch()，停止 watchPosition() 方法。
：
HTML5 Video(视频)
很多站点都会使用到视频. HTML5 提供了展示视频的标准。
直到现在，仍然不存在一项旨在网页上显示视频的标准。
今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
<video> 元素提供了播放、暂停和音量控件来控制视频，同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件，浏览器将使用第一个可识别的格式。
当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg。
MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件。
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件。
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件。
HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。
<video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.
其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。
：
HTML5 Audio(音频)
HTML5 提供了播放音频文件的标准。
直到现在，仍然不存在一项旨在网页上播放音频的标准。
今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。
control 属性供添加播放、暂停和音量控件。
在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本。
<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。
：
HTML5 新的 Input 类型：
color，类型用在input字段主要用于选取颜色。
date，类型允许你从一个日期选择器选择一个日期。
datetime，类型允许你选择一个日期（UTC 时间）。
atetime-local，类型允许你选择一个日期和时间 (无时区)。
email，类型用于应该包含 e-mail 地址的输入域。
month，类型允许你选择一个月份。
number，类型用于应该包含数值的输入域,您还能够设定对所接受的数字的限定1-5。
range，类型用于应该包含一定范围内数字值的输入域,range 类型显示为滑动条。
search，类型用于搜索域，比如站点搜索或 Google 搜索。
tel，定义输入电话号码字段。
time，类型允许你选择一个时间。
url，类型用于应该包含 URL 地址的输入域。
week，类型允许你选择周和年。
：
HTML5 表单元素:
<datalist>，元素规定输入域的选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen>，元素的作用是提供一种验证用户的可靠方法，规定用于表单的密钥对生成器字段加密。
<output>，元素用于不同类型的输出，比如计算或脚本输出。
HTML5 新的表单属性:
autocomplete，属性规定 form 或 input 域应该拥有自动完成功能。
autocomplete，属性有可能在 form元素中是开启的，而在input元素中是关闭的
novalidate，属性是一个 boolean(布尔) 属性.
novalidate，属性规定在提交表单时不应该验证 form 或 input 域
autofocus，属性是一个 boolean 属性.
autofocus，属性规定在页面加载时，域自动地获得焦点
form，属性规定输入域所属的一个或多个表单
The formaction，属性用于描述表单提交的URL地址
The formaction，属性会覆盖<form> 元素中的action属性
注意: The formaction 属性用于 type="submit" 和 type="image"
formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)
formenctype 属性覆盖 form 元素的 enctype 属性。
主要: 该属性与 type="submit" 和 type="image" 配合使用。
formmethod 属性定义了表单提交的方式。
formmethod 属性覆盖了 <form> 元素的 method 属性。
注意: 该属性可以与 type="submit" 和 type="image" 配合使用。
novalidate 属性是一个 boolean 属性.
novalidate属性描述了 <input> 元素在表单提交时无需被验证。
formnovalidate 属性会覆盖 <form> 元素的novalidate属性.
注意: formnovalidate 属性与type="submit一起使用
formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。
The formtarget 属性覆盖 <form>元素的target属性.
注意: formtarget 属性与type="submit" 和 type="image"配合使用.
height 和 width 属性只适用于 image 类型的<input> 标签图标
list 属性规定输入域的 datalist。datalist 是输入域的选项列表
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束
multiple 属性是一个 boolean 属性.
multiple 属性规定<input> 元素中可选择多个值。
注意: multiple 属性适用于以下类型的 <input> 标签：email 和 file:
pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。
注意:pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password
placeholder 属性提供一种提示（hint），描述输入域所期待的值
required 属性是一个 boolean 属性.
required 属性规定必须在提交之前填写输入域（不能为空）
step 属性为输入域规定合法的数字间隔。
如果 step="3"，则合法的数是 -3,0,3,6 等
提示： step 属性可以与 max 和 min 属性创建一个区域值。
：
HTML5中新的语义元素：
语义= 意义，语义元素 = 有意义的元素。
<section>，标签定义文档中的节（section、区段）。章节、页眉、页脚或文档中的其他部分
<article>，标签定义独立的内容
<nav>，标签定义导航链接的部分，<nav>元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在其元素中。
<aside>，标签定义页面主区域内容之外的内容（比如侧边栏），<aside>标签的内容应与主区域的内容相关。
<header>元素描述了文档的头部区域，<header>元素主要用于定义内容的介绍展示区域。
<footer> 元素描述了文档的底部区域，<footer> 元素应该包含它的包含元素，一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等。
<figure>标签规定独立的流内容（图像、图表、照片、代码等等），<figure>元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
<figcaption> 标签定义 <figure> 元素的标题，<figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
：
HTML5 Web 存储：
HTML5 web 存储，一个比cookie更好的本地存储方式。
客户端存储数据的两个对象为：
localStorage，用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage，用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
不管是 localStorage，还是sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
sessionStorage 方法针对一个 session进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
网站列表程序实现以下功能：
可以输入网站名，网址，以网站名作为key存入localStorage
根据网站名，查找网址
列出当前已保存的所有网站
HTML5 Web SQL 数据库：
Web SQL 数据库 API 并不是HTML规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs
以下是规范中定义的三个核心方法：
openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql：这个方法用于执行实际的 SQL 查询
HTML5 应用程序缓存：
应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们。
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
：
HTML5 Web SQL 数据库
Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。
以下是规范中定义的三个核心方法：
openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql：这个方法用于执行实际的 SQL 查询。
打开数据库
我们可以使用 openDatabase() 方法来打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库，使用代码如下：
var db = openDatabase(‘mydb‘, ‘1.0‘, ‘Test DB‘, 2 1024 1024);
openDatabase() 方法对应的五个参数说明：

数据库名称
版本号
描述文本
数据库大小
创建回调
第五个参数，创建回调会在创建数据库后被调用。
：
HTML5 应用程序缓存
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。
什么是应用程序缓存（Application Cache）？：
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
：
HTML5 Web Workers
web worker 是运行在后台的 JavaScript，不会影响页面的性能。
什么是 Web Worker？：
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
：
HTML5 服务器发送事件(Server-Sent Events)
HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。
Server-Sent 事件 - 单向消息传递：
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。

标签：移动标题侧边栏它的 html 上下精度 speed 覆盖

原文地址：http://blog.51cto.com/13941970/2177434

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行