初识Html5

简介: u html5的介绍和快速入门 html5 大致是 (html+css3+javascript apis) 一句话: html5 支持了css3 的强大的选择器和动画等功能+ 支持javascript 很多新的函数,所以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>

 


目录
打赏
0
0
0
0
31
分享
相关文章
初识HTML
1、    一套规则,浏览器认识的规则。 2、    在html里的注释: 3、    只能有一个html标签、head标签、body标签 4、    在head标签里写的所有标签内容是看不见的,除了title标签 head里的标签: 标题: z赵凡 标题旁边的图标 :shortc...
1012 0
|
1月前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
50 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
153 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
66 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
2月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
70 34
|
2月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
104 33
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
40 2