HTML5新特性

自渡爱学习87240
619 阅读13分钟
  • HTML：超文本标记语言
  • XHTML：更加严谨的HTML
  • HTML5：新一代HTML规范（适配移动端设备）

标签语义化

标签语义化：合理的标签做合适的事情

优点：有利于SEO搜索引擎优化推广

一、HTML5新特性

  1. 语义化标签：header、footer、section、nav、aside、article
  2. 增强型表单：input 的多个 type
  3. 新增表单元素：datalist、keygen、output
  4. 新增表单属性：placehoder、required、min 和 max
  5. 音频视频：audio、video
  6. canvas
  7. 地理定位
  8. 拖拽
  9. SVG
  10. 本地存储：localStorage - 没有时间限制的数据存储；sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除
  11. 新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
  12. WebSocket：单个 TCP 连接上进行全双工通讯的协议
  13. HTML5 离线Web应用（应用程序缓存
  14. HTML5 Web Workers
  15. 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 输入类型，这些新特性提供了更好的输入控制和验证

input 的 type 描述
color 主要用于选取颜色
date 从一个日期选择器选择一个日期
datetime 选择一个日期（UTC 时间）
datetime-local 用本地时间显示
email 包含 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 方法

方法 描述
addTextTrack() 向音频/视频添加新的文本轨道
canPlayType() 检测浏览器是否能播放指定的音频/视频类型
load() 重新加载音频/视频元素
play() 开始播放音频/视频
pause() 暂停当前播放的音频/视频

2> Audio/Video 属性

属性 描述
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 事件

事件 描述
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)来完成

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。 简单实例：

<canvas id="myCanvas" width="200" height="100"></canvas>

通过 JavaScript 来绘制

<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

  1. 给要拖拽的元素设置可被拖拽属性draggable="true"
  2. 在拖拽开始的时候，记录一些信息
  • 拖动什么 - ondragstart 和 setData()
  • 放到何处 - ondragover
  • 进行放置 - ondrop

9.SVG

  1. 什么是SVG？
  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用于定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
  • SVG 是万维网联盟的标准
  1. 优势
  • 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 不适合大量数据的存储
  1. 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>
  1. 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();
?>
avatar
文章
阅读
粉丝