一之濑双叶的博客

HTML5新特性

2018/01/24

HTML5新特性

一、新的语义化标签

1. <section></section>

定义文档中的主体部分的节、段。

2. <article></article>

一个特殊的section标签,比section有更明确的语义。定义来自外部的一个独立的、完整的内容块,例如某个论坛的文章、博客的文本等

3. <aside></aside>

用来装载页面中非正文的内容,独立于其他模块,例如广告、成组的链接、侧边栏等

4. <header></header>

定义文档、页面的页眉。通常是一些引导和导航信息,不局限于整个页面头部,也可以用在内容里。

5. <footer></footer>

定义了文档、页面的页脚,和header类似。

6. <nav></nav>

定义了一个链接组组成的导航部分,其中的链接可以链接到其他网页或者当前页面的其他部分。

7. <hgroup></hgroup>

用于对网页或区段的标题元素进行组合。

8. <figure></figure>

用于对元素进行组合。

9. <figcaption></figcaption>

为figure元素加标题。一般放在figure第一个子元素或者最后一个。

10. <details></details>

定义元素的细节,用户可以点击查看或者隐藏。

11. <summary></summary>

和details连用,用来包含details的标题。

12. <canvas></canvas>

用来进行canvas绘图。

13. <video></video>

定义视频。

14. <audio></audio>

定义音频

15. <embed></embed>

定义嵌入网页的内容。比如插件。

16. <source></source>

该标签为媒介元素(比如video、audio)定义媒介元素。

17. <detailst id=’dl’></detailst>

定义可选数据的列表,与input配合使用(<input list=’dl’>)可制作输入值的下拉列表。

18. <mark></mark>

在视觉上向用户展现出那些想要突出的文字。比如搜索结果中向用户高亮显示搜索关键词。

19. <meter [min/max/low/high/optimum/value]></meter>

度量衡,用红黄绿表示出一个数值所在范围。

20 <output></output>

定义不同类型的输出,样式与span无异。

21. <progress></progress>

进度条,运行中的速度。

22. <time><time>

定义日期或者时间。

23. <keygen></keygen>

定义加密内容。

24. <command></command>

定义命令行为。

二、新的Javascript的API

2D绘图

我们学过的canvas和svg动画都属于javascript的API,

canvas:

  • canvas通过javascript来绘制2D图形
  • canvas是逐像素进行渲染的
  • 在canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注,如果位置发生变化,那么整个场景也需要重新绘制,包括任何已经被图形覆盖的对象。

SVG:

  • SVG是一种使用XML描述2D图形的语言
  • SVG基于XML,这意味着SVG DOM中的每个元素都是可用的,你可以为某个元素附加javascript事件处理器
  • 在SVG中,每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化,那么浏览器能够自动重现图形

两者区别

canvas与SVG的比较
canvas:
1、canvas依赖分辨率
2、不支持事件处理器
3、弱的文本渲染能力
4、能够以 .png 或 .jpg格式保存结果图像

SVG:
1、不依赖分辨率
2、支持事件处理器
3、最适合带有大型渲染区域的应用程序(如:google map)
4、复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
history对象

history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。
使用go()方法可以在用户的历史记录中任意跳转,可以向后也可以向前,这个方法接受一个参数,表示向后或向前跳转的页面数的一个整数值,负数表示向后跳转【类似浏览器的“后退”按钮】,正数表示向前跳转【类似浏览器的“前进”按钮】

1
2
3
history.go(-1); // 后退一页
history.go(1); // 前进一页
history.go(2); //前进两页

也可以给go()方法传递一个字符串参数,此时浏览器会跳转到历史记录中包含该字符串的第一个位置:可能后退,也可能前进,具体由位置近的决定。如果历史记录中不包含该字符串,那么这个方法什么也不做

1
history.go('worx.com'); 跳到最近的wrox.com页面

还可以使用两个简写方法back()和forward()来代替go()

1
2
history.back(); // 后退一页
history.forward(); // 前进一页

除此之外,history对象还有一个length属性,保存着历史记录的数量,这个数量包括所有的历史记录,即所有向后和向前的记录。

HTML5 Web 存储

如何在客户端存储数据?

HTML5提供了两种在客户端存储数据的新方法:

  • localStorage — 没有时间限制的数据存储
  • sessionSSStorage — 针对一个session的存储数据

之前我们学习的cookie缓存并不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得cookie速度很慢而且效率也不高

在HTML5中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据,它使在不影响网站性能的情况下存储大量数据成为可能

对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据

HTML5通过javascript来存储和访问数据

localStorage方法

localStorage方法存储的数据没有时间限制,长时间之后数据依然可用,

创建和访问localStorage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("lastname", "Gates");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
document.getElementById("result").innerHTML = "抱歉!您的浏览器不支持 Web Storage ...";
}
</script>
</body>
</html>

下面是对用户访问页面次数进行计数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits: " + localStorage.pagecount + " time(s).");
</script>
<p>刷新页面会看到计数器在增长。</p>
<p>请关闭浏览器窗口,然后再试一次,计数器会继续计数。</p>
</body>
</html>
sessionStorage方法

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

创建并访问一个sessionStorage:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "在本 session 中,您已经点击这个按钮 " + sessionStorage.clickcount + " 次。";
} else {
document.getElementById("result").innerHTML = "抱歉!您的浏览器不支持 Web Storage ...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">请点击这里</button></p>
<div id="result"></div>
<p>请点击按钮使计数器递增。</p>
<p>请关闭浏览器或标签页,然后再试一次,计数器会重置。</p>
</body>
</html>

下面对当前session中访问页面的次数进行计数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");
</script>
<p>刷新页面会看到计数器在增长。</p>
<p>请关闭浏览器窗口,然后再试一次,计数器已经重置了。</p>
</body>
</html>
<video>和<audio>
用法
1
<video src="./video/mv.mp4"></video>

注意audio和video元素必须同时包含开始和结束标签,不能使用<audio/>这样的空元素语法形式。

HTML属性

controls:ontrol
如果出现该属性,则向用户显示控件,如播放按钮,每个浏览器播放控件不一样,但是用途一致,都可以控制开始和结束,跳到新位置和调节音量。

autoplay:autoplay
如果出现该属性,则视频在就绪后马上播放,如果不设置autoplay属性,必须是用户单机播放按钮才会播放。

loop:loop
循环播放

preload:auto、mete、none:
告诉浏览器如何下载音频

auto:让浏览器下载整个文件,以便用户单机播放按钮就能播放

meta:告诉浏览器先获取音频文件开头的数据块,从而足以确定一些基本信息(比如音频的总时长)

none:告诉浏览器不必预先下载,合理利用这些值

常用API属性

duration:
返回当前音频、视频的长度(单位:S)

paused:
设置或返回音频、视频是否暂停

currentTime:
设置或返回音频/视频中的当前播放位置(单位:S)

ended:
返回音频、视频的播放是否已结束

如需具体了解请参考W3school书册

如果还想了解更多的API,请点击访问查看更多javascript的API

三、H5头部声明

H5将DOCTYPE的声明简化,只需要<!DOCTYPE>

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>

doctype是document type(文档类型)的简写,在页面中,用来指定页面所使用的xhtml(或者html)的版本。要想制作符合标准的页面,一个必不可少的关键组成部分就 是doctype声明。只有确定了一个正确的doctype,xhtml里的标识和css才能正常生效。

html 告诉浏览器这个文件是html格式网页文件

两个合起来就是 html5标准网页声明,原先的是一串很长的字符串,现在是这个简洁形式,支持html5标准的主流浏览器都认识这个声明。

CATALOG
  1. 1. HTML5新特性
    1. 1.1. 一、新的语义化标签
    2. 1.2. 二、新的Javascript的API
      1. 1.2.1. 2D绘图
      2. 1.2.2. history对象
      3. 1.2.3. HTML5 Web 存储
        1. 1.2.3.1. localStorage方法
        2. 1.2.3.2. sessionStorage方法
      4. 1.2.4.
        1. 1.2.4.1. 用法
        2. 1.2.4.2. HTML属性
        3. 1.2.4.3. 常用API属性
    3. 1.3. 三、H5头部声明