HTML5中的一些新特性

HTML5是HTML最新的修订版本，包含了新的标签元素，属性和行为，同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术。HTML5实现了不依赖flash插件播放视频，而且引入了一大批需要JavaScript驱动的功能。也可以让网页可以像桌面软件那样丰富多彩，富有交互能力。HTML5的终极目标，就是浏览器不依赖插件也能提供丰富的视频，交互功能和各种漂亮的效果。

下面来具体看看HTML5有那些新的东西。

1.定义了新的语义标签元素

<article>:规定独立的自包含内容。
<aside>:<aside> 标签定义其所处内容之外的内容。<aside> 的内容可用作文章的侧栏。
<figcaption>:定义  figure元素的标题（caption）。
<figure>:规定独立的流内容（图像、图表、照片、代码等等）
<footer>:义文档或节的页脚。
<header>:定义文档的页眉（介绍信息）
<nav>:定义导航链接
<section>:定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

<mark>
<time>
<progress>
<meter>

2.通过使用video标签来添加视频，使用audio加载音频

实例：
<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>

属性值：
autoplay 	autoplay 	如果出现该属性，则视频在就绪后马上播放。
controls 	controls 	如果出现该属性，则向用户显示控件，比如播放按钮。
height 	 	          设置视频播放器的高度。
loop     	loop 	    如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload 	 preload 	 如果出现该属性，则视频在页面加载时进行加载，并预备播放。
src 	     url 	     要播放的视频的 URL。
width 	            	设置视频播放器的宽度。

3.HTML5表单

(1).<input> 的 type 特性拥有更多的值.

color 用于选取颜色
date 从一个日期选择器选择一个日期
datetime
datetime-local
email e-mail 地址的输入域,在提交表单时，会自动验证 email 域的值是否合法有效
month
number 数值的输入域,能够设定对所接受的数字的限定
range 显示为滑动条,一定范围内数字值的输入域
search 一个搜索框
tel 电话号码的输入控件
time 选择一个时间
url URL 地址的输入域,在提交表单时，会自动验证 url 域的值
week

（2）.新的表单元素

<datalist> 规定输入域的选项列表,使用 <input> 元素的列表属性与 <datalist> 元素绑定.

<keygen>   用于表单的密钥对生成器字段。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

<output> 用于不同类型的输出

（3）.新的表单属性

autocomplete 自动完成
novalidate 设置了该特性不会在表单提交之前对其进行验证
novalidate 设置了该特性不会在表单提交之前对其进行验证
min and max 限定了能够输入元素的最大与最小值
maxlength 限制了用户能够输入的最大字符数
multiple 属性规定<input> 元素中可选择多个值
pattern (regexp) 用于限定元素值必须匹配一个特定的正则表达式
placeholder 作用于 <input> 与 <textarea> 元素上，提示用户此域内能够输入什么内容。
required 指定必须提供该元素的值,不能为空
step 规定输入数字间隔

4.支持拖放功能，canvas（画布，强大的功能）

5.支持地理定位

6.支持数据存储

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

7.支持离线功能

8.与服务器通信

• 一种是服务器发送事件（server-sent event），允许网页获得来自服务器的更新。

• 另一种是web socket框架，让网页和服务器双向通信

9.支持后台运行JavaScript

使用Web Worker，可以支持后台运行JavaScript

原文链接：https://www.cnblogs.com/YeChing/p/6247228.html
本文来源 爱码网，其版权均为 原网址 所有 与本站无关，文章内容系作者个人观点，不代表 本站 对观点赞同或支持。如需转载，请注明文章来源。