html5标准于2014年10月由万维网联盟(W3C)完成标准制定。
设计目的是为了在移动设备上支持多媒体,在之前这项任务通常 要由flash插件来完成,HTML5 的到来给我们最明显的感受是各大厂都不再支持flash了
Flash作为html5出现前的救火队员曾经肩负着显示网页中动画、图标、游戏等功能,功能强大但效率低下,安全性低,稳定性差。充斥屏幕的flash压榨着移动设备的电量和电脑的性能。
移动互联网的发展,迫使厂商需要更为高效的工具取代flash
canvas非常强大但实际绘图过程复杂,我们通常会借助框架完成
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) 。
网页并不存在一个视频和音频的播放标准,之前大多数视频和音频是通过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 为
这些方法、属性和事件允许使用 JavaScript 来操作
视频和音频dom手册
新语义化块元素header, section, footer, aside, nav, main, article, figure
我们可以添加自己的元素如
优点
易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。
有利于爬虫,搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析,
有利于开发和维护,语义化更具可读性,代码更好维护,与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框架开发,使用的组件
最终会被渲染成之前,在客户端储存数据是由 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);
HTML5 引入了应用程序缓存,使得 web 应用可进行缓存,并可在没有因特网连接时进行访问。
使得页面可以离线浏览
缓存资源加快了加载速度
减轻了服务器压力
HTML标签中的manifest可以指定缓存页面,建议缓存文件的扩展名为.appcache
<html manifest="demo.appcache">
...
html>
manifest 文件需在 web 服务器上进行配置。
manifest 文件可分为三个部分:
新的表单控件,比如 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" />
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
为输入域指定表单,输入域不需要一定在