HTML5
HTML5和HTML大体上有何不同？
HTML5 Canvas
HTML5 Video(视频)
HTML5 Audio(音频)
HTML5 Input 类型
HTML5 语义元素
HTML5 Web 存储
HTML5和HTML大体上有何不同？
HTML5在HTML原有的基础上对某些元素进行了改进、移除，再次基础上，又新增了很多新的特性：
1.用于绘画的 canvas 元素
2.用于媒介回放的 video 和 audio 元素
3.对本地离线存储的更好的支持
4.新的特殊内容元素，比如 article、footer、header、nav、section
5.新的表单控件，比如 calendar、date、time、email、url、search
HTML5 Canvas
1.什么是HTML5 Canvas?
HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。
2.如何使用canvas去绘制元素？
注意：所有的绘制工作都必须在JavaScript内部完成
（一）创建canvas标签
<canvas id='myCanvas'></canvas>
（二）找到<canvas元素>
var myCanvas = document.getElementById("myCanvas");
（三）创建context对象
var cvs = myCanvas.getContext("2d");
getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
（四）为创建的context对象添加属性
cvs.fillStyle='blue';
//右20.下10.100×100正方形
cvs.fillRect(20,10,100,100);
这里面包含了两个属性：
1.fillstyle属性：
设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle默认设置是#000000（黑色）。
2.fillRect属性（Canvas 坐标）
Canvas的左上角坐标为（0,0），这里fillRect(20,10,100,100)
意味着从（0,0）点开始向X轴右偏移20，延Y轴向下偏移10，并且绘制出一个100×100的正方形。
以上代码拼接而成：
<style>
#myCanvas{
border:1px solid red;
}
</style>
<body>
<canvas id='myCanvas'></canvas>
<script>
var myCanvas = document.getElementById("myCanvas");
var cvs = myCanvas.getContext("2d");
cvs.fillStyle='blue';
cvs.fillRect(20,10,100,100);
</script>
</body>
显示效果如下：
除了上面第四点中提到的fillstyle属性以及fillRect属性，还有一些其他的比如：
1.用Canvas绘制线条
绘制线条的步骤：
（1）确立起始点：moveTo(x,y);
（2）确定结束点: lineTo(x,y);
（3）输入开始画的指令：stroke()
辅助功能：
线条加粗 ： 2d对象.lineWidth = 5 线条颜色 : 2d对象.strokeStyle='red'
一下代码通过绘制线条顺时针方向绘制了一个长方形。
<style>
#myCanvas{
border:1px solid red;
}
</style>
<body>
<canvas id='myCanvas'></canvas>
<script>
var myCanvas = document.getElementById("myCanvas");
myCanvas.width = 1000;
myCanvas.height=500;
var cvs = myCanvas.getContext("2d");
cvs.moveTo(10,20);
cvs.lineTo(100,20);
cvs.lineTo(100,100);
cvs.lineTo(10,100);
cvs.lineTo(10,20);
//外边框颜色
cvs.strokeStyle='orange';
cvs.fillStyle='blue'; //填充颜色
// cvs.fill();
cvs.stroke();
</script>
</body>
效果图如下：
在绘制线条时，还有两个方法比较常用：
1》beginPath:方法开始一条路径，或重置当前的路径。
2》closePath: 方法创建从当前点到开始点的路径。
举一个例子：
var myCanvas = document.getElementById("myCanvas");
myCanvas.width = 1000;
myCanvas.height = 500;
var cvs = myCanvas.getContext("2d");
cvs.moveTo(10,10);
cvs.lineTo(50,50);
cvs.lineTo(10,100);
cvs.strokeStyle='red';
cvs.stroke();
cvs.beginPath();
cvs.moveTo(80,10);
cvs.lineTo(120,50);
cvs.lineTo(80,100);
cvs.strokeStyle='blue';
cvs.stroke();
//cvs.closePath();
cvs.beginPath();
cvs.moveTo(150,10);
cvs.lineTo(190,50);
cvs.lineTo(150,100);
cvs.strokeStyle='pink';
cvs.stroke();
让线条重置当前路径好开始新的绘制，效果如下：
2.用Canvas绘制一个圆形
一、2d对象.arc()
arc(x,y,r,sAngle,eAngle,counterclockwise);
x:横向位置
y:垂直位置
r:半径
sAngle:起始点
eAngle:结束点
counterclockwise:方向false ==>顺时针 true ==>逆时针
x,y确立中心点的位置，r确定半径，起始点和结束点如图所示。
<style>
#myCanvas {
border:1px solid red;
}
</style>
</head>
<body>
<canvas id='myCanvas'></canvas>
<script>
var myCanvas= document.getElementById("myCanvas");
myCanvas.width=200;
myCanvas.height = 120;
var cvs = myCanvas.getContext("2d");
cvs.arc(100,60,50,0,2*Math.PI);
cvs.stroke();
</script>
显示效果如下：
3.用Canvas绘制文本
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
相对简单
1.使用 fillText():实心
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
2.使用 strokeText():空心
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
3.用Canvas填充渐变
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变：
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。
使用 createLinearGradient():
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
HTML5 Video(视频)
<video><video>
格式：
ogg 、 mp4 、webm
属性：
poster==》视频图
<video controls poster='1.jpg'>
<source src='preview.webm'>
<source src='preview.mp4'>
您的浏览器版本太低了
</video>
source==》资源加载 :按照网速，浏览器支持程度..
HTML5 Audio(音频)
兼容问题
<audio>
<h1>您的浏览器不支持</h1>
</audio>
属性:
src ==>音频的url
controls ==>显示控件
loop ==>循环播放
autoplay ==>自动播放
preload ==>页面加载时进行加载，并预备播放
js的api方法
play() ==>开始播放
pause() ==>暂停播放
HTML5 Input 类型
<form action="">
<!-- email 类型用于应该包含 e-mail 地址的输入域。 -->
<!-- 在提交表单时，会自动验证 email 域的值是否合法有效: -->
<input type="email">
<hr>
<!-- url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。 -->
<input type="url">
<hr>
<input type="number">
<hr>
<!-- range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。 -->
<input type="range">
<hr>
<!-- date 类型允许你从一个日期选择器选择一个日期。 -->
<input type="date">
<hr>
<!-- time 类型允许你选择一个时间。 -->
<input type="time">
<hr>
<!-- search 类型用于搜索域，比如站点搜索或 Google 搜索。 -->
<input type="search">
<hr>
<!-- color 类型用在input字段主要用于选取颜色，如下所示 -->
<input type="color">
<hr>
<!-- number 类型用于应该包含数值的输入域。 -->
<!-- max- 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value - 规定默认值 -->
<input type="number" value='2' step='3' max='20' min='3'>
<hr>
<input type="submit" value="提交">
</form>
HTML5 语义元素
HTML5提供了新的语义元素来明确一个Web页面的不同部分:
<header>：页眉
<nav>：导航
<section>：区域
<article>：独立的内容
<aside>：辅助信息的内容
<figcaption>：描述图像或视频的标题部分
<figure>：描述图像或视频
<footer>：页脚
HTML5 Web 存储
使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速.
这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能。数据以键/值对存在, web网页的数据只允许该网页访问使用。
客户端存储数据的两个对象是：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
在使用web存储前，先检查浏览器是否支持 localStorage 和
sessionStorage
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 对象!
// 一些代码.....
}
else
{
// 抱歉! 不支持 web 存储。
}
localStorage 对象
localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
常用的api：
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
26万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
