H5主要新特性
文章目录HTML5五个主要新特性一、图形容器 canvas二、video&audio三、语义化元素四、对本地离线存储的更好的支持数据存储web缓存五、新的表单控件与属性1表单控件2表单属性HTML5html5标准于2014年10月由万维网联盟（W3C）完成标准制定。设计目的是为了在移动设备上支持多媒体，在之前这项任务通常 要由flash插件来完成，HTML5 的到来给我们最明显的感受...
HTML5
html5标准于2014年10月由万维网联盟（W3C）完成标准制定。
设计目的是为了在移动设备上支持多媒体，在之前这项任务通常 要由flash插件来完成，HTML5 的到来给我们最明显的感受是各大厂都不再支持flash了
Flash作为html5出现前的救火队员曾经肩负着显示网页中动画、图标、游戏等功能，功能强大但效率低下，安全性低，稳定性差。充斥屏幕的flash压榨着移动设备的电量和电脑的性能。
移动互联网的发展，迫使厂商需要更为高效的工具取代flash
五个主要新特性
一、图形容器 canvas
canvas非常强大但实际绘图过程复杂，我们通常会借助框架完成
<canvas> 标签通过脚本（通常是 JavaScript）来绘制图形，使得绘图可以直接由 JavaScript来完成不再需要使用 JavaScript和flash交互来绘图
canvas的坐标系与前端习惯相同，以左上方为零点，我们可以通过width与height定义一个矩形范围，在范围内随意绘制
<canvas id="test-canvas" width="20" height="10"></canvas>
使用canvas首先我们要获取canvas的dom，以及创建context对象
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//ctx有很多方法用于图形文字的绘制
可用于绘制图形、文字、颜色渐变、放入图像等
二、video&audio
现在可以简单的在网页中播放 视频(video)与音频 (audio) 。
网页并不存在一个视频和音频的播放标准，之前大多数视频和音频是通过flash播放
以视频为例（音频基本相同）
<video src="movie/movie.ogv" width="320" height="240" controls="controls"></video>
我们甚至只需要指定文件位置，为图像添加一个控制器就可以完成视频的播放，同时我们可以指定多个格式的文件，浏览器会选择第一个可以识别的格式进行播放，建议为MP4格式
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
其他属性
| 属性 | 描述 |
|---|---|
| autoplay | 自动播放 |
| controls | 显示控件 |
| loop | 循环播放 |
| preload | 预加载，会被自动播放忽略 |
HTML5 DOM 为 <audio> 和<video> 元素提供了方法、属性和事件。
这些方法、属性和事件允许使用 JavaScript 来操作<audio> 和 <video> 元素，构建自己控件
三、语义化元素
-
新语义化块元素header, section, footer, aside, nav, main, article, figure
我们可以添加自己的元素如<OVO> </OVO>
优点
-
易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
-
有利于爬虫，搜索引擎根据标签来确定上下文和各个关键字的权重。
-
方便其他设备解析，
-
有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。
<style> *{ margin: 0; padding: 0; } .center>header{ color: red; } .center>.header{ color: blue; } </style> <div class="center"> <header> head1 </header> <div class="header"> head2 </div> </div>实际上查看大厂（BAT）网页语义化标签使用并不多 ？
-
像使用react框架开发，使用的组件<Head>最终会被渲染成<div class=“Head”>实际上语义化标签并不多
四、对本地离线存储的更好的支持
数据存储
之前，在客户端储存数据是由 cookie 完成的。但是 cookie 不适合大量数据的存储
HTML5 使用 JavaScript 来存储和访问数据。
HTML5 提供了两种在客户端存储数据的新方法：(一个永久有效，一个仅本次会话有效)
-
localStorage - 没有时间限制的数据存储
localStorage生命周期是永久，除非主动清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。
var storage=window.localStorage; // 1、保存数据到本地 // 第一个参数是保存的变量名，第二个是赋给变量的值 storage.setItem('Author', 'local'); // 2、从本地存储获取数据 storage.getItem('Author'); //3.从本地存储修改数据 storage.Author='location' // 4、从本地存储删除某个已保存的数据 storage.removeItem('Author'); // 5、清除所有保存的数据 storage.clear(); -
sessionStorage - 针对一个 session 的数据存储
sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。
// 1、保存数据到本地
// 第一个参数是保存的变量名，第二个是赋给变量的值
sessionStorage.setItem('Author', 'session');
// 2、从本地存储获取数据
sessionStorage.getItem('Author');
// 3、从本地存储删除某个已保存的数据
sessionStorage.removeItem('Author');
// 4、清除所有保存的数据
sessionStorage.clear();
========
1.仅支持字符串格式
2.以字典（或伪数组？）的形式存储数据
Storage {amd: "som", cur: "tom", user: "pater", length: 3}
3.不支持对象和伪数组
var storage = window.localStorage;
storage.setItem("cur","tom");
console.log(storage);
storage.setItem("amd",{a:"a",b:"b"});
var user={
username:"wang",
userpwd:1221212
}
storage.setItem("user",user);
//Storage {amd: "[object Object]", cur: "tom", user: "[object Object]", length: 3}
4.支持json
var u =JSON.stringify(user);
storage.setItem("u",u);
console.log(storage);
console.log(storage.u);
//Storage { u: "{"username":"wang","userpwd":1221212}", length: 1}
// {"username":"wang","userpwd":1221212}
5.因为仅支持string，读取出来要进行转换
var uu =storage.getItem("u"); //不进行转换的话是一个字符串
console.log(uu);
uu = JSON.parse(uu); //转换后才是对象
console.log(uu);
web缓存
HTML5 引入了应用程序缓存，使得 web 应用可进行缓存，并可在没有因特网连接时进行访问。
-
使得页面可以离线浏览
-
缓存资源加快了加载速度
-
减轻了服务器压力
HTML标签中的manifest可以指定缓存页面，建议缓存文件的扩展名为.appcache
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
manifest 文件需在 web 服务器上进行配置。
manifest 文件可分为三个部分：
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
五、新的表单控件与属性
1表单控件
新的表单控件，比如 calendar、date、time、email、url、search
E-mail: <input type="email" name="user_email" />
在提交表单时，会自动验证 email 域的格式。（仅验证是否含有"@“和”.com"）,方便，但改写样式困难相关资料网上很少，我们不能通过css和js对其进行改写,可见企业开发大家应该都不会使用
同样的问题存在于其他控件
url
Homepage: <input type="url" name="user_url" />
在提交表单时，会自动验证 url 域的值。
number
Points: <input type="number" name="points" min="1" max="10" />
number 类型用于应该包含数值的输入域。
range
<input type="range" name="points" min="1" max="10" />
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
Date Pickers
Date: <input type="date" name="user_date" />
HTML5 拥有多个可供选取日期和时间的新输入类型
类似的表单属性
required
输入不为空
Name: <input type="text" name="usr_name" required="required" />
pattern
配合正则表达式自定义验证
Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />
2表单属性
autocomplete
<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" autocomplete="off" /><br />
<input type="submit" />
</form>
表单提交后再次回到表单，填写内容不会清空
autofocus
User name: <input type="text" name="user_name" autofocus="autofocus" />
autofocus 属性规定在页面加载时，域自动地获得焦点
form
为输入域指定表单，输入域不需要一定在<form>标签内更加灵活
保证form属性值相同与formID相同
<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />
list
list 属性规定输入域的 datalist（选项列表）
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
multiple
添加multipe属性可以选中多个文件上传
Select images: <input type="file" name="img" multiple="multiple" />
placeholder
在输入域为空时出现，获得焦点后消失，起到提示作用
<style>
input::-webkit-input-placeholder {
color: green;
}
</style>
<input type="search" name="user_search" placeholder="Search W3School" />
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
6
0- 0
已为社区贡献1条内容
所有评论(0)