HTML5和CSS3的新特性(一)

别再问我工作何必这么拼，我之所以这么努力，因为我想要的生活比你的贵。

1. HTML5 新标签

标签	描述
article	定义页面独立的内容区域。
aside	定义页面的侧边栏内容。
header	定义了文档的头部区域。
nav	定义导航链接的部分。
footer	定义文档的页脚。
mark	定义带有记号的文本。
progress	定义任何类型的任务的进度。
meter	定义度量值。
section	定义文档中的区段。
wbr	规定文本换行位置，以防长单词在错误位置换行。

2. HTML5 Canvas

HTML5 canvas 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。

HTML5 canvas 标签只是图形容器，您必须使用脚本来绘制图形。

使用 JavaScript 来绘制图像

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。

具体使用方法，在后续中会有讲到。

3. HTML5 拖放

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

设置元素为可拖放，把 draggable 属性设置为 true 。如：

拖动什么 - ondragstart 和 setData()；放到何处 - ondragover；进行放置 - ondrop

4. HTML5地理位置

HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

5. HTML5 Audio(音频)和Video(视频)

Audio/Video 属性

注：这里只说常用的并且目前大部分PC端浏览器支持的属性。其余的不做介绍。

属性	值	描述
autoplay	autoplay	该属性可以让音频/视频在就绪后马上播放。
controls	controls	该属性向用户显示控件，比如播放按钮。
muted	Booleans	设置音频/视频是否应该被静音。
paused	Booleans	设置音频/视频是否已暂停。
preload	preload	该属性音频/视频在页面加载时进行加载，并预备播放。如果使用 autoplay，则忽略该属性。
src	url	要播放的音频/视频的 URL。
loop	loop	当音频/视频文件完成播放后再次开始播放。即循环播放。
currentTime	seconds	设置或返回音频/视频中的当前播放位置（以秒计）。常用来设置前进后退x秒。
volume	Num	规定音频/视频的当前音量。必须是介于 0.0 与 1.0 之间的数字。
playbackRate	Num	指示音频/视频的当前播放速度。

6. HTML5 Input 类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

表单类型	常用属性、值	描述
date	date	选取日、月、年。
datetime	date	选取时间、日、月、年（UTC 时间）。
datetime-local	date	选取时间、日、月、年（本地时间）。
month	date	选取月、年。
week	date	选取周和年。
time	time	选取时间（小时和分钟）。
email	- -	用于应该包含 e-mail 地址的输入域。
number	min:最小值(可选),max最大值(可选)	用于应该包含数值的输入域。
range	min:滑动条最小值,max滑动条最大值	用于应该包含一定范围内数字值的输入域，显示为滑动条。
search	任意值	用于搜索域，比如站点搜索或 Google 搜索。
tel	Num	用于输入电话号码类型。
url	URL	用于应该包含 URL 地址的输入域。

7. HTML5 表单元素

HTML5 有以下新的表单元素。

标签	描述
datalist	定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
keygen	规定用于表单的密钥对生成器字段。
output	定义不同类型的输出，比如脚本的输出。

注：以上三个表单元素目前大多PC端浏览器都不支持。

8. HTML5 表单属性

HTML5 的 form 和 input 标签添加了几个新属性.

form 新属性：

autocomplete、novalidate

input 新属性：

autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height and width、list、min and max、multiple、pattern (regexp)、placeholder、required、step

9. HTML5 语义元素

HTML5提供了新的语义元素来明确一个Web页面的不同部分:

标签	描述
header	标题
nav	导航
section	节、部分
article	文章、内容
aside	侧边栏
figcaption	图片标题
figure	图片、代码的容器
footer	底栏、页脚

images

10. HTML5 Web 存储

Web Storage DOM API 为Web应用提供了一个能够替代cookie的Javascript解决方案

sessionStorage—客户端数据存储，只能维持在当前会话范围内。

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

localStorage—客户端数据存储，能维持在多个会话范围内。

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

对于大量复杂数据结构，一般使用IndexDB

11. HTML5 离线Web应用（应用程序缓存）

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：
1. 离线浏览 - 用户可在应用离线时使用它们。
 2. 速度 - 已缓存资源加载得更快。
 3. 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

HTML5 Cache Manifest 实例

下面的例子展示了带有 cache manifest 的 HTML 文档（供离线浏览）

<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
	The content of the document......
</body>
</html>

Manifest 文件

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js


NETWORK:
login.asp


FALLBACK:
/html5/ /404.html

12. HTML5 Web Workers

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。（相当于实现多线程并发）

13. HTML5 SSE

Server-Sent 事件指的是网页自动获取来自服务器的更新。

以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。

14. HTML5 WebSocket

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。以下 API 用于创建 WebSocket 对象。

总结

1. HTML5 浏览器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

2. 解决 HTML5 IE 浏览器以及老的浏览器兼容问题

注：不包括 IE8 及更早 IE 版本浏览器

1. 将 HTML5 元素定义为块元素

HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是块级元素。

为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block。

实例

1
2
3

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

2. 为 HTML 添加新元素

为 HTML 添加新的元素，该实例向 HTML 添加的新的元素，并为该元素定义样式，元素名为。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>为 HTML 添加新元素</title>
<script>
	document.createElement("myHero")
</script>
<style>
    myHero {
        display: block;
        background-color: #ddd;
        padding: 50px;
        font-size: 30px;
    }
</style> 
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
    <myHero>我的第一个新元素</myHero>
</body>
</html>

3. 参考

参考：[菜鸟教程][https://www.runoob.com/html/html5-intro.html]