一.HTML5的介绍:
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定，其设计目的是为了在移动设备上支持多媒体。
二.HTML5新增的内容有以下:
(1) .用于绘画的 canvas 元素
(2).用于多媒体回放的video和audio元素
(3) .对本地离线存储的更好的支持
(4). 新的特殊内容元素，比如 article、footer、header、nav、section
(5).新的表单控件，比如 calendar、date、time、email、url、search
- canvas:即画布，一种HTML5技术。通过它，可以绘制图形，可以开发游戏！
canvas的使用方法:
eg:
1.创建canvas标签
<body>
<canvas id="huabu"></canvas>
</body>2.获取和创建2D画笔
var canvas = document.getElementById("huabu");//获取画布
var hb = canvas.getContext('2d');//创建画笔2D3.根据不同的场景使用:
eg:
(1).绘制线条:
context.moveTo(100,100)//画笔起点
context.linrTo(600,600)//画笔终点
context.lineWidth='5'//线条宽度
context.strokeStyle="#353537"//绘制颜色
fill()//填充
stroke()//描边
beginpath（）//开始绘制，可以使后面的线段的颜色等不覆盖前面的
fill（）、stroke（）、closePath（）//结束绘制eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制三角形</title>
</head>
<body>
<canvas id="huabu"></canvas>
</body>
<script>
var canvas = document.getElementById("huabu"); //获取画布
var hb = canvas.getContext('2d'); //创建画笔2D
hb.beginPath();
hb.moveTo(20, 20);//起点
hb.lineTo(30, 30);
hb.lineTo(20, 40);
hb.lineTo(20, 20);
hb.closePath();
hb.lineWidth = '2'; //线条粗细
hb.strokeStyle = ' red'; //线条颜色
hb.fillStyle = "black"; //内容填充色
hb.stroke(); //描边结束
hb.fill(); //绘制结束
</script>
</html>(2).绘制矩形
hb.beginPath();
hb.rect(20,30,100,200);//生成矩形(参数分别为:X轴,Y轴,矩形的宽,矩形的高)
hb.lineWidth = 1;//宽度
hb.strokeStyle = "red";//颜色
hb.fillStyle = "black";//填充色
hb.stroke();
hb.fill();(3).绘制圆形
// arc（x,y,r,startAngle,endAngle,anticlockwise）
// x,y圆心坐标，r半径，
// startAngle：开始的弧度值，endAngle：结束的弧度值
// anticlockwise：表示绘制的方法（用布尔值进行表示），是（false）顺时针还是（true）逆时针，当此值不填写的时候，默认为false，顺时针
hb.beginPath();
hb.arc(100, 100, 50, Math.PI * 0, Math.PI * 2);
hb.lineWidth = 1; //宽度
hb.strokeStyle = "red"; //线条的颜色
hb.fillStyle = "black"; //填充色
hb.stroke();
hb.fill();弧度值如下图:
多媒体回放的video和audio元素:
1. 标签定义视频，比如电影片段或其他视频流
2.属性:
video标签的属性
src: 用于告诉video标签需要播放的视频地址
autoplay: 用于告诉video标签是否需要自动播放视频
controls: 用于告诉video标签是否需要显示控制条
poster: 用于告诉video标签视频没有播放之前显示的占位图片
loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放
preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
muted:静音
width/height:视频的宽高
eg:
< video src="">< /video>还有一种格式:
< video>
< source src="" type=“video/webm”>< /source> //webm格式视频
< source src="" type=“video/mp4”>< /source> //MP4格式视频
< source src="" type=“video/ogg”>< /source> //ogg格式视频
< /video>3.audio元素
1.音频
2.属性:
src----指定音频的文件位置
autoplay是否自动播放
preload是否预加载
loop是否循环播放
controls显示或隐藏用户控制界面
3.eg:
<audio id="myAudio"></audio>
<script>
var myAudio = document.getElementById('myAudio');
myAudio.src = '../content/audio/海阔天空.mp3';
myAudio.play();
myAudio.loop = true;
myAudio.preload = true;
myAudio.currentTime
</script>新的特殊内容元素
1.HTML5
添加了诸如header、footer、nav、article、section等大量新标签，这些新标签为开发人员提供更多的选择和辅助特性。
默认情况下，浏览器呈现这些新标签的方式与div相似。然而，合理地使用它们，可以使你的标签更加的语义化。辅助技术（如：屏幕阅读器）可以通过这些标签为用户提供更加准确的、易于理解的页面信息。
2.介绍:
1.header：页眉 描述了文档的头部区域，于定义内容的介绍展示区域。
（1）只有必要时使用header，大多数情况下，如果只有h1~h6或hgroup，没有其它需要与之组合在一起的伴生内容，就没有必要用header将它包起来。
（2）header与h1~h6元素中的标题是不能互换的，它们都有各自的语义目的。
（3）不能在header里嵌套footer元素或另一个header，也不能在footer或address元素里嵌套header。
（4）header不一定必须包含nav元素，不过在大多数情况下，如果header包含导航性链接，就可以用nav。
2.nav：标记导航
标签定义导航链接的部分。无论哪种情况，应该仅对文档中重要的链接群使用nav。通常用一个ul元素（无序列表）对链接列表进行标记，除非链接是面包屑链接则使用ol元素（有序列表）。
（1）HTML5不允许将nav嵌套在address元素中。
（2）HTML5规范不推荐对辅助性的页脚链接（使用条款，隐私政策等），所以选择用nav。
3.article：文章标记标签
表示文档、页面、应用或网站中一个独立的容器，原则上是可独立分配或可再用的，即聚合。
（1）article可以嵌套在另一个article里面，只要里面的article与外面的article是部分与整体的关系，但是不能将article嵌套在address元素里。
（2）一个article里包含一个或者多个section元素并是不强制性的。
4.section：区块定义标签
表示的是文档或是应用的一个一般的区块，一般是有一组相似的主题的内容。
（1）section不是一个像div一样的通用容器，因为section表达一定的含义，而div则没有任何语义上的含义。
5.aside：定义侧栏标签
表示一部分内容与页面的主题并不是有很大的关系，可以独立存在。aside的例子包括抬升式引用、侧栏、新闻站上列出相关文章的连接框、广告、nav元素组（如博客的友情链接）、商业站上相关产品列表。
（1）如果子啊侧栏中使用一个或多个aside（或将其作为侧栏使用），应在HTML中将他们放在页面主要内容的后面。将重要的内容放在前面有利于SEO和提升可访问性。
（2）对于与内容有关的图像（如图表、图形或带有说明文字的插图），使用figure而非aside。
（3）HTML5不允许将aside嵌套在address元素中。
6.footer：页脚标签 与header标签对应的标签，可以放附录、索引、版权页、许可协议等。 （1）footer元素代表嵌套它的最近的article、aside、nluckquote、body、details、fieldset、figure、nav、section或td元素的页脚。只有当它最近的祖先是body时，它才是整个页面的页脚。
（2）不允许在footer里嵌套header或另一个footer。同时，也不能将footer嵌套在header或address元素里。
Html5本地储存
- HTML5storage提供了一种方式让网站能够把信息存储到你本地的计算机上，并再以后需要的时候进行获取。这个概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候cookie都会被发送过去。HTML5的storage是存储在你的计算机上，网站在页面加载完毕后可以通过Javascript来获取这些数据。
2.sessionStorage
(1).检测
!!window.sessionStorage;
(2).常用方法
sessionStorage.name= value//赋值
sessionStorage.setItem(key,value)//赋值
sessionStorage.getItem(key)//取值
sessionStorage.removeItem(key)//移除
sessionStorage.clear()//移除所有
eg:
window.sessionStorage.name = 'rainman'; // 赋值
window.sessionStorage.setItem('name','cnblogs'); // 赋值
window.sessionStorage.getItem('name'); // 取值 window.sessionStorage.removeItem('name'); // 移除值 window.sessionStorage.clear(); // 删除所有2、localStorage
(1)检测
!!window.localStorage;
(2)方法和sessionStorage相同
注意:
(1)local storage把只把数据存储在了客户端使用，不会发送的服务器上（除非你故意这样做）。
(2)而且对于某一个域下来说，local storage是共享的（多个窗口共享一个“数据库”）。
(2)localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
新增的表单控件
eg;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="text1.html" method="get">
<fieldset>
<legend>HTML5新增表单元素</legend>
<table>
<tr>
<td>邮箱</td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td>地址</td>
<td><input type="url" name="url"></td>
</tr>
<tr>
<td>日期</td>
<td><input type="date" name="date"></td>
</tr>
<tr>
<td>时间</td>
<td><input type="time" name="time"></td>
</tr>
<tr>
<td>月份</td>
<td><input type="month" name="month"></td>
</tr>
<tr>
<td>星期</td>
<td><input type="week" name="week"></td>
</tr>
<tr>
<td>滑动条</td>
<td><input type="range" name="range"></td>
</tr>
<tr>
<td>颜色</td>
<td><input type="color" name="color"></td>
</tr>
<tr>
<td>数字</td>
<td><input type="number" name="number"></td>
</tr>
<tr>
<td><input type="submit" value="提交"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>当输入的格式不对将会提示,无法提交
eg:
