canvas标签的作用 HTML5新标签新属性 | 实战实例讲解，你需要收藏

现在：

2.脚本和链接可以省略type属性

原来：

现在：

3.Header和Footer的优化

原来：

现在：

4.input标签新增的属性

①Placeholder属性的新增

placeholder属性可使使用区域有默认提示。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

举例：

效果：

②必填属性required的新增

required属性规定要在提交之前必须填写字段。若不填写canvas标签的作用，则会高亮显示。

举例：

效果：

若上面那个输入框输入为空，则此输入框会被高亮设置。

③Autofocus属性的新增

设置了Autofocus属性的标签在画面打开时自动获得焦点或自动选择。

举例：

效果：

④pattern属性

pattern属性用于检验输入的内容是否符合pattern中规定的要求。

举例：

效果：

5.Canvas标签

Canvas标签定义图形，比如图表和其他图像。

Canvas标签自己没有行为，但却可以借助Canvas API和JavaScript，把想绘制的东西都绘制到一块画布上，具体介绍请看下篇Canvas实例。

举例：

您的浏览器当前版本不支持canvas标签

效果：

6.图形元素figure的应用

figure标签可用来加入图像，图表和照片。figure元素可以包含figcaption，figcaption是figure元素中的图形的说明文字，允许输入一段描述来将图形与内容更紧密地联系在一起。figcaption元素应该被置于figure元素的第一个或最后一个子元素的位置。

举例：

咪咕阅读

效果：

7.多媒体标签

①Audio标签的新增

audio标签定义声音，比如音乐或其他音频流。

以前：

现在：您的浏览器不支持audio标签。

效果：

②Video标签的新增

video标签定义视频，比如电影片段或其他视频流。其拥有audio标签所有的属性，并多出poster,height,width属性。

以前：

现在：您的浏览器不支持video标签。

效果：

③Embed标签的新增

embed可以用来插入各种媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等，Netscape及新版的IE 都支持。url属性可以为音频或视频文件及其路径，可以是相对路径或绝对路径。

举例：

④多媒体标签的属性

preload属性

preload属性用于页面加载完成后，是否载入视频。

举例：

controls属性

controls属性用于浏览器是否为视频提供播放控件。

举例：

8.small元素的重新定义

在以前的版本中，small元素显示为更小的文本。

但是在HTML5中，small元素定义旁注信息，并显示为更小的文本。通常用于免责声明、注意事项、法律限制或版权声明等。

如图：

9.Hgroup的引入

HTML5引用了Hgroup元素来对,等标题标签的分组，以免此类标签过多的应用引来其他的问题。

举例：

重要的标题

次要的标题

10.高亮元素mark的新增

使用mark标签元素，可以高亮显示文档中的文字以达到醒目的效果。

注：使用strong、em元素同样能达到这样的效果，不推荐使用strong、em元素，因为strong、em元素的作用是强调文本canvas标签的作用，并非仅仅是高亮显示文本。

举例：

Let'stry the mark elements

效果：

11.Wbr标签的新增

表示软换行。与br标签的区别：br标签表示此处必须换行；wbr表示如果单词太长，或者您担心浏览器会在错误的位置换行时（浏览器窗口或当前父级元素不足时），则换行，否则，不换行。

举例：

如果想学习AJAX，那么您必须熟悉XMLHttpRequest对象。

12.progress标签的新增

表示运行中的进程，可以使用progress标签显示JavaScript中耗时时间函数的进程。

举例：

下载进度：

效果：

13.time标签的新增

标签定义日期或时间，或者两者。

举例：

现在时间9:00

14.注释标签

举例：

漢(ㄏㄢˋ)

15.本地缓存

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

localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

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

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

HTML5 使用 JavaScript来存储和访问数据。

小编在这里列出几条平时常用的本地缓存调用方法，希望对给大家能有所帮助。

①判断能否使用本地存储的方法：

if(window.localStorage){

alert("能使用本地存储");

}else{

alert("不能使用本地存储");

}

②三种设置本地存储的方法：

localStorage.key=value;

localStorage["key"]=value;

localStorage.setItem(key,value);(推荐使用)

③三种获取本地存储的方法：

localStorage.key;

localStorage[key];

localStorage.getItem(key);(推荐使用)

④清除单个数据：localStorage.removeItem(key);

⑤清除所有数据：localStorage.clear();

⑥获取数据总量：localStorage.length

⑦得到某个索引的key：localStorage.key(index);

———END———
限 时 特 惠：本站每日持续更新海量各大内部创业教程，一年会员只需128元，全站资源免费下载点击查看详情
站 长 微 信：jiumai99