您的位置：首页 > Web前端 > HTML5

初识Html5

2013-04-04 16:05 162 查看

u html5的介绍和快速入门

html5 大致是 (html+css3+javascript apis)

一句话: html5 支持了css3 的强大的选择器和动画等功能+ 支持javascript 很多新的函数，所以html5就很强大了.

1. 增加了<canvas> 标签，这个标签就是画布，程序员可以再这里绘制图形，所以这个标签在一定程度上可以替代flash, 在canvas 上画出矩形

代码: html5-1.html

<!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>标签，我们视频和音频嵌入变得非常容易.



<!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的选择器



<!DOCTYPEhtml>

<html>

<head>



<metacharset="utf-8"/>

<styletype="text/css">

P:nth-child(odd){color:red}

</style>

</head>

<body>



<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



<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航