AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

初识Html5

2013-04-04 1088
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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>

 


文章标签：
HTML5
移动开发
JavaScript
前端开发
语音技术
内存技术
SEO
程序员
存储
关键词：
HTML初识
蓬莱仙羽
目录
相关文章
开发者小达人
|
开发者
HTML初识|学习笔记
快速学习HTML初识
开发者小达人
123 0
HTML初识|学习笔记
icoders
|
前端开发 数据安全/隐私保护 Python
初识HTML
1、    一套规则，浏览器认识的规则。 2、    在html里的注释： 3、    只能有一个html标签、head标签、body标签 4、    在head标签里写的所有标签内容是看不见的，除了title标签 head里的标签： 标题： z赵凡 标题旁边的图标 ：shortc...
icoders
991 0
codyl
HTML---初识HTML
codyl
1077 0
二二*一一
|
19天前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
43 1
土木林森
|
5天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制，两者不仅提升了代码复用率和可维护性，还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战，文章提出了相应的解决策略，强调了持续创新的重要性，旨在构建高效、灵活的Web应用。
土木林森
17 6
进步`于辰
|
22天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧，包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录，便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码，帮助读者更好地理解和应用这些知识点。
进步`于辰
41 1
[HTML、CSS]细节与使用经验
进步`于辰
|
24天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签（如video、input、canvas）、datalist和details标签的使用方法，以及CSS布局技巧（如margin、overflow: hidden和动态height）。文章旨在分享作者的学习经验和实用技巧。
进步`于辰
30 1
[HTML、CSS]知识点
aliyun8599273441-30642
|
2月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站：从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代，拥有一个个人博客不仅是展示自我的平台，也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建，涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章，你将学会如何从零开始构建自己的网络空间，并在互联网世界留下你的足迹。
aliyun8599273441-30642
267 65
游客g5tp3lgf24cqc
|
18天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
游客g5tp3lgf24cqc
45 12
温轻舟
|
15天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看！用HTML+CSS+JS打造企业级官网-源码直接可用，文章代码仅用于学习，禁止用于商业
温轻舟
65 1