HTML5新特性
- HTML：超文本标记语言
- XHTML：更加严谨的HTML
- HTML5：新一代HTML规范（适配移动端设备）
标签语义化
标签语义化：合理的标签作合适的事情javascript
优势：有利于SEO搜索引擎优化推广php
1、HTML5新特性
- 语义化标签：header、footer、section、nav、aside、article
- 加强型表单：input 的多个 type
- 新增表单元素：datalist、keygen、output
- 新增表单属性：placehoder、required、min 和 max
- 音频视频：audio、video
- canvas
- 地理定位
- 拖拽
- SVG
- 本地存储：localStorage - 没有时间限制的数据存储；sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除
- 新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
- WebSocket：单个 TCP 链接上进行全双工通信的协议
- HTML5 离线Web应用（应用程序缓存
- HTML5 Web Workers
- HTML5 SSE
1.语义化标签
- 块级标签：header、main 、footer、article、nav 、figure 、figcaption、aside 、section
- 行内标签：mark 、time
- 处理兼容（IE6~8）只须要导入一个JS：html5.min.js
| 标签 | 描述 |
|---|---|
| header | 定义了文档的头部区域 |
| main | 主体 |
| article | 文章 |
| nav | 导航 |
| figure | 配图 |
| figcaption | 配图说明 |
| aside | 与主体内容无关（通常应用于侧边栏） |
| section | 普通区域 |
| footer | 尾部 |
| detailes | 用于描述文档或文档某个部分的细节 |
| summary | 标签包含 details 元素的标题 |
| dialog | 定义对话框，好比提示框 |
| bdi | 容许您设置一段文本，使其脱离其父元素的文本方向设置 |
| command | 定义命令按钮，好比单选按钮、复选框或按钮 |
| mark | 定义带有记号的文本 |
| meter | 定义度量衡，仅用于已知最大和最小值的度量 |
| progress | 定义任何类型的任务的进度 |
| ruby | 定义 ruby 注释（中文注音或字符） |
| rp | 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容 |
| time | 定义日期或时间 |
| wbr | 规定在文本中的何处适合添加换行符 |
2.加强型表单
HTML5 拥有多个新的表单 Input 输入类型，这些新特性提供了更好的输入控制和验证html
| input 的 type | 描述 |
|---|---|
| color | 主要用于选取颜色 |
| date | 从一个日期选择器选择一个日期 |
| datetime | 选择一个日期（UTC 时间） |
| datetime-local | 用本地时间显示 |
| 包含 e-mail 地址的输入域 | |
| month | 选择一个月份 |
| number | 数值的输入域 |
| range | 必定范围内数字值的输入域 |
| search | 用于搜索域 |
| tel | 定义输入电话号码字段 |
| time | 选择一个时间 |
| url | URL 地址的输入域 |
| week | 选择周和年 |
3. 新增表单元素
| 表单元素 | 描述 |
|---|---|
| datalist | 元素规定输入域的选项列表，使用 input 元素的 list 属性与 datalist 元素的 id 绑定 |
| keygen | 提供一种验证用户的可靠方法，标签规定用于表单的密钥对生成器字段 |
| output | 用于不一样类型的输出，好比计算或脚本输出 |
4.新增表单属性
| 表单属性 | 描述 |
|---|---|
| placehoder | 简短的提示在用户输入值前会显示在输入域上。即咱们常见的输入框默认提示，在用户输入后消失 |
| required | 是一个 boolean 属性。要求填写的输入域不能为空 |
| pattern | 描述了一个正则表达式用于验证 input 元素的值 |
| min 和 max | 设置元素最小值与最大值 |
| step | 为输入域规定合法的数字间隔 |
| height 和 width | 用于 image 类型的 input 标签的图像高度和宽度 |
| autofocus | 是一个 boolean 属性。规定在页面加载时，域自动地得到焦点 |
| multiple | 是一个 boolean 属性。规定 input 元素中可选择多个值 |
| pattern | 规定用于验证 input 域的模式（pattern 是正则表达式) |
| novalidate | 在提交表单时不该该验证 form 或 input 域 |
| multiple | 规定输入域中可选择多个值,适用于email 和 file |
| list | list 属性规定输入域的 datalist |
| autocomplete | 规定 form 或 input 域应该拥有自动完成功能 |
5.音频视频
1> Audio/Video 方法html5
| 方法 | 描述 |
|---|---|
| addTextTrack() | 向音频/视频添加新的文本轨道 |
| canPlayType() | 检测浏览器是否能播放指定的音频/视频类型 |
| load() | 从新加载音频/视频元素 |
| play() | 开始播放音频/视频 |
| pause() | 暂停当前播放的音频/视频 |
2> Audio/Video 属性java
| 属性 | 描述 |
|---|---|
| audioTracks | 返回表示可用音轨的 AudioTrackList 对象 |
| autoplay | 设置或返回是否在加载完成后随即播放音频/视频 |
| buffered | 返回表示音频/视频已缓冲部分的 TimeRanges 对象 |
| controller | 返回表示音频/视频当前媒体控制器的 MediaController 对象 |
| controls | 设置或返回音频/视频是否显示控件（好比播放/暂停等） |
| crossOrigin | 设置或返回音频/视频的 CORS 设置 |
| currentSrc | 返回当前音频/视频的 URL |
| currentTime | 设置或返回音频/视频中的当前播放位置（以秒计） |
| defaultMuted | 设置或返回音频/视频默认是否静音 |
| defaultPlaybackRate | 设置或返回音频/视频的默认播放速度 |
| duration | 返回当前音频/视频的长度（以秒计） |
| ended | 返回音频/视频的播放是否已结束 |
| error | 返回表示音频/视频错误状态的 MediaError 对象 |
| loop | 设置或返回音频/视频是否应在结束时从新播放 |
| mediaGroup | 设置或返回音频/视频所属的组合（用于链接多个音频/视频元素） |
| muted | 设置或返回音频/视频是否静音 |
| networkState | 返回音频/视频的当前网络状态 |
| paused | 设置或返回音频/视频是否暂停 |
| playbackRate | 设置或返回音频/视频播放的速度 |
| played | 返回表示音频/视频已播放部分的 TimeRanges 对象 |
| preload | 设置或返回音频/视频是否应该在页面加载后进行加载 |
| readyState | 返回音频/视频当前的就绪状态 |
| seekable | 返回表示音频/视频可寻址部分的 TimeRanges 对象 |
| seeking | 返回用户是否正在音频/视频中进行查找 |
| src | 设置或返回音频/视频元素的当前来源 |
| startDate | 返回表示当前时间偏移的 Date 对象 |
| textTracks | 返回表示可用文本轨道的 TextTrackList 对象 |
| videoTracks | 返回表示可用视频轨道的 VideoTrackList 对象 |
| volume | 设置或返回音频/视频的音量 |
3> Audio/Video 事件git
| 事件 | 描述 |
|---|---|
| abort | 当音频/视频的加载已放弃时 |
| canplay | 当浏览器能够播放音频/视频时 |
| canplaythrough | 当浏览器可在不因缓冲而停顿的状况下进行播放时 |
| durationchange | 当音频/视频的时长已更改时 |
| emptied | 当目前的播放列表为空时 |
| ended | 当目前的播放列表已结束时 |
| error | 当在音频/视频加载期间发生错误时 |
| loadeddata | 当浏览器已加载音频/视频的当前帧时 |
| loadedmetadata | 当浏览器已加载音频/视频的元数据时 |
| loadstart | 当浏览器开始查找音频/视频时 |
| pause | 当音频/视频已暂停时 |
| play | 当音频/视频已开始或再也不暂停时 |
| playing | 当音频/视频在已因缓冲而暂停或中止后已就绪时 |
| progress | 当浏览器正在下载音频/视频时 |
| ratechange | 当音频/视频的播放速度已更改时 |
| seeked | 当用户已移动/跳跃到音频/视频中的新位置时 |
| seeking | 当用户开始移动/跳跃到音频/视频中的新位置时 |
| stalled | 当浏览器尝试获取媒体数据，但数据不可用时 |
| suspend | 当浏览器刻意不获取媒体数据时 |
| timeupdate | 当目前的播放位置已更改时 |
| volumechange | 当音量已更改时 |
| waiting | 当视频因为须要缓冲下一帧而中止 |
6. canvas
建立 Canvas 元素 HTML5 <canvas> 元素用于图形的绘制，经过脚本 (一般是JavaScript)来完成web
<canvas> 标签只是图形容器，您必须使用脚原本绘制图形。 简单实例：正则表达式
<canvas id="myCanvas" width="200" height="100"></canvas>
复制代码
经过 JavaScript 来绘制canvas
<script type="text/javascript">
var c=document.getElementById("myCanvas");
//建立 context 对象
//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var cxt=c.getContext("2d");
//绘制一个红色的矩形,
//fillStyle 方法将其染成红色，
//fillRect 方法规定了形状、位置和尺寸
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
复制代码
7.地理定位
HTML5 Geolocation API 用于得到用户的地理位置。浏览器
鉴于该特性可能侵犯用户的隐私，除非用户赞成，不然用户位置信息是不可用的。
下例是一个简单的地理定位实例，可返回用户位置的经度和纬度。
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
</script>
复制代码
8.拖拽
HTML5中DRAG事件：能够把一个元素从当前位置拖拽到指定的容器中 dragstart、drag、dragend、dragover、drop
- 给要拖拽的元素设置可被拖拽属性
draggable="true" - 在拖拽开始的时候，记录一些信息
- 拖动什么 - ondragstart 和 setData()
- 放到何处 - ondragover
- 进行放置 - ondrop
9.SVG
- 什么是SVG？
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的状况下其图形质量不会有损失
- SVG 是万维网联盟的标准
- 优点
- SVG 图像可经过文本编辑器来建立和修改
- SVG 图像可被搜索、索引、脚本化或压缩
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不降低的状况下被放大
在 HTML5 中，够将 SVG 元素直接嵌入 HTML 页面中：
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
复制代码
10.数据存储
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对一个 session 的数据存储 以前，这些都是由 cookie 完成的。可是 cookie 不适合大量数据的存储
- localStorage localStorage 方法存储的数据没有时间限制。次日、第二周或下一年以后，数据依然可用
- 如何建立和访问 localStorage：
<script type="text/javascript">
//建立
localStorage.lastname="Smith";
document.write(localStorage.lastname);
//对用户访问页面的次数进行计数
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>
复制代码
- sessionStorage sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除
- 如何建立和访问 localStorage
<script type="text/javascript">
//建立：
localStorage.lastname="Smith";
document.write(localStorage.lastname);
//对用户在当前 session 中访问页面的次数进行计数：
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>
复制代码
11.新事件
| 事件 | 描述 |
|---|---|
| onresize | 当调整窗口大小时运行脚本 |
| ondrag | 当拖动元素时运行脚本 |
| onscroll | 当滚动元素滚动元素的滚动条时运行脚本 |
| onmousewheel | 当转动鼠标滚轮时运行脚本 |
| onerror | 当错误发生时运行脚本 |
| onplay | 当媒介数据将要开始播放时运行脚本 |
| onpause | 当媒介数据暂停时运行脚本 |
| onerror | 在错误发生时运行的脚本 |
| onload | 页面结束加载以后触发 |
| onmessage | 在消息被触发时运行的脚本 |
| ononline | 当文档上线时运行的脚本 |
| onoffline | 当文档离线时运行的脚本 |
| onunload | 一旦页面已下载时触发（或者浏览器窗口已被关闭） |
| onstorage | 在 Web Storage 区域更新后运行的脚本 |
| onchange | 在元素值被改变时运行的脚本 |
| onfocus | 当元素得到焦点时运行的脚本 |
| onkeydown | 在用户按下按键时触发 |
| onkeypress | 在用户敲击按钮时触发 |
| onkeyup | 当用户释放按键时触发 |
12. HTML5 WebSocket
WebSocket是HTML5开始提供的一种在单个 TCP链接上进行全双工通信的协议。
在WebSocket API中，浏览器和服务器只须要作一个握手的动做，而后，浏览器和服务器之间就造成了一条快速通道。二者之间就直接能够数据互相传送。浏览器经过 JavaScript 向服务器发出创建 WebSocket 链接的请求，链接创建之后，客户端和服务器端就能够经过 TCP 链接直接交换数据。
当你获取 Web Socket 链接后，你能够经过 send() 方法来向服务器发送数据，并经过 onmessage 事件来接收服务器返回的数据。如下 API 用于建立 WebSocket 对象。
13.HTML5 离线Web应用（应用程序缓存）
HTML5 引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有因特网链接时进行访问。
应用程序缓存为应用带来三个优点：
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减小服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
HTML5 Cache Manifest 实例
下面的例子展现了带有 cache manifest 的 HTML 文档（供离线浏览）：
<!DOCTYPE HTML>
<htmlmanifest="demo.appcache">
<body>
The content of the document......
</body>
</html>
复制代码
Manifest 文件
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件须要与服务器的链接，且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面没法访问时的回退页面（好比 404 页面)
14.HTML5 Web Workers
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的JavaScript，独立于其余脚本，不会影响页面的性能。您能够继续作任何愿意作的事情：点击、选取内容等等，而此时 web worker在后台运行。（至关于实现多线程并发）
15.HTML5 SSE
Server-Sent 事件指的是网页自动获取来自服务器的更新。
之前也可能作到这一点，前提是网页不得不询问是否有可用的更新。经过服务器发送事件，更新可以自动到达。
例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。
EventSource 对象用于接收服务器发送事件通知：
var source=newEventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data +"<br>";
};
复制代码
为了让上面的例子能够运行，您还须要可以发送数据更新的服务器（好比 PHP 和 ASP）。
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}nn";
flush();
?>
复制代码
相关文章
- 1. HTML5 新特性
- 2. Html5新特性
- 3. HTML5新特性
- 4. HTML5 新特性
- 5. html5新特性
- 6. HTML5的新特性
- 7. HTML HTML5 新特性
- 8. HTML5/CSS3新特性
- 9. html5的新特性
- 10. html5新增特性
- 更多相关文章...
- • PHP 7 新特性 - PHP教程
- • MySQL 5.7的新特性（新功能） - MySQL教程
- • JDK13 GA发布：5大特性解读
- • 互联网组织的未来：剖析GitHub员工的任性之源
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. HTML5 新特性
- 2. Html5新特性
- 3. HTML5新特性
- 4. HTML5 新特性
- 5. html5新特性
- 6. HTML5的新特性
- 7. HTML HTML5 新特性
- 8. HTML5/CSS3新特性
- 9. html5的新特性
- 10. html5新增特性