初识Html5
u html5的介绍和快速入门
html5 大致是 (html+css3+javascript apis)
一句话: html5 支持了css3 的强大的选择器和动画等功能+ 支持javascript 很多新的函数，所以html5就很强大了.
1. 增加了<canvas> 标签，这个标签就是画布，程序员可以再这里绘制图形，所以这个标签在一定程度上可以替代flash, 在canvas 上画出矩形
代码: html5-1.html<!-- 告诉浏览器这个一个html5的网页-->
<!DOCTYPEhtml>
<html>
<head>
<!--网页的编码-->
<metacharset="utf-8"/>
</head>
<body>
<!--这是一个画布标签，我们这个这个区域绘制图形.-->
<canvasid="can1" width="500px" height="400px"style="border: 1px solid red">
</canvas>
<scripttype="text/javascript">
//我要在画布画出矩形.
//1. 得到画布
varcanvas=document.getElementById("can1");
//2. 得到上下文环境.,我们可以通过cxt这个对象来绘制图形
//你也可以简单的理解，这个cxt就是画笔,cxt提供了很多绘制图形的方法
//通过这些方法就可以绘制图形
varcxt=canvas.getContext("2d");
//我们看看cxt是什么类型
//alert(cxt);
//画出一个矩形,默认是黑色
//改变颜色-红色
cxt.fillStyle="#FF0000";
cxt.fillRect(10,10,30,30);
</script>
</body>
</html>
2. 增加了<header> <footer> 标签，做到内容和结构分离，利用seo
大家知道，我们很多网页都有头和尾
<html>
<header>网页的头部<header>
hello,world..
<footer>网页的尾部</footer>
3. 增加<video> 和<audio>标签，我们视频和音频嵌入变得非常容易.
<!-- 告诉浏览器这个一个html5的网页-->
<!DOCTYPEhtml>
<html>
<head>
<!--网页的编码-->
<metacharset="utf-8"/>
</head>
<body>
<!--嵌入一段视频-->
<videosrc="[HTML5教程].(HTML5.Tutorial).-.1.-.Introduction.mp4"controls="controls" width="300px"height="200px"></video>
</body>
</html>
☞ 1. 这里的video 支持ogg 格式和mp4 … 不是所有的视频格式支持
3. 如果我把这个 html5_2.html 放在apahce下，你们可以直接看这个视频.
4. html5 的离线存储功能:
a. 离线浏览网页(火车，飞机，汽车)
b. cookie就不需要了
5. html5支持语音识别和图形识别
语言识别:http://www.html5china.com/course/20120530_3747.html
图像识别:http://www.html5china.com/course/20120528_3742.html
html5游戏: http://www.html5china.com/game/
6. html5 支持强大的css3的各种功能(动画和css3的选择器)
举例:
html5-3.html
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8" />
<title>Animations功能使用方法(以前必须使用flash ,现在使用css3动画效果)</title>
<style>
div {
background-color: red;
}
@-webkit-keyframes mycolor {
0% {
background-color: red;
}
40% {
background-color: darkblue;
}
70% {
background-color: yellow;
}
100% {
background-color: red;
}
}
div:hover {
-webkit-animation-name: mycolor;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function:linear;
}
</style>
</head>
<body>
<div>hello,亲爱哒</div>
</body>
</html>
体验一下css3的选择器
<!-- 告诉浏览器这个一个html5的网页-->
<!DOCTYPEhtml>
<html>
<head>
<!--网页的编码-->
<metacharset="utf-8"/>
<styletype="text/css">
P:nth-child(odd){color:red}
</style>
</head>
<body>
<!--我要求p1,p2.p3,p4间隔显示红色和蓝色字体 ,传统做法是定两个选择器-->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
</body>
</html>
6.可以拖放
7.各个浏览器兼容性很好.
网页设计师，最大的困惑是 不同浏览浏览统一页面，效果不一样.
u html5增加了不少新标签，同时也废弃了一些老标签
这里我们列举出来:
u 现在，我们已经有了一些html5的大的概念，现在我们可以考虑开始写游戏
讲法是: 一个功能一个功能实现，我实现一个，你们跟着实现.
1． 准备工作
了解一下html5 的canvas 画布的坐标体系.
2. 说像素
一个像素是多少厘米?
4. 熟悉一下html5的各个绘图函数，我们用案例来说话:
html5_5.html
<!-- 告诉浏览器这个一个html5的网页-->
<!DOCTYPEhtml>
<html>
<head>
<!--网页的编码-->
<metacharset="utf-8"/>
</head>
<body>
<!--跟老师一起玩-->
<canvasid="can1" width="500px" height="400px"style="border: 1px solid red">
</canvas>
<scripttype="text/javascript">
//1.得到画布
varcanvas1=document.getElementById("can1");
//2. 得到上下文引用，你可以理解成画笔
var cxt=canvas1.getContext("2d");
//3.画出直线
//moveTo设置点位置
cxt.moveTo(20,20);
//设置第二个点位置.
cxt.lineTo(20,90);
//画出直线.
cxt.stroke();
//画出一个填充的三角形.-->路径
//开始新路径
cxt.beginPath();
cxt.moveTo(40,20);
cxt.lineTo(40,90);
cxt.lineTo(80,90);
//闭合路径,把最后这个点和第一点moveTo() 闭合
cxt.closePath();
//填充矩形
cxt.fill();
//空心矩形
//cxt.stroke();
//画出矩形(对于矩形，可以不用路径)
//提醒:stroke划线， fill就是填充
//strokeRect(x, y, width, height)
cxt.strokeRect(100,20,70,70);
//填充矩形
//如果希望改变填充的颜色，则修改画笔的 fillStyle
cxt.fillStyle="#00FF00";
cxt.fillRect(190,20,50,50);
//画出圆形arc
//六个参数:arc(x, y, radius, startAngle, endAngle, counterclockwise)
cxt.beginPath();
cxt.arc(270,40,20,0,360,true);
//闭合园
cxt.closePath();
cxt.stroke();
//画出填充的圆形
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(370,40,20,0,360,true);
//闭合园
cxt.closePath();
cxt.fill();
//把图片画出(这里有几个步骤)
//1.创建image对象
var img1=new Image();
//2.指定是哪个图片
img1.src="shunping.jpg";
//加载完毕后，在绘制图片
img1.onload=function(){
cxt.drawImage(img1,20,100,200,150);
}
//在画布上写字
var text="IT达人";
//设置字体的大小
cxt.fillStyle="#0000FF";
cxt.font="30px 华文彩云";
cxt.fillText(text,230,200);
</script>
</body>
</html>
