关闭

html5学习笔记1

标签: html5技术
160人阅读 评论(0) 收藏 举报
分类:

Html5一定会成为web技术标准

RIA技术:




Html5学习网站:
 
http://www.html5cn.org/

  http://www.html5china.com/

 http://www.mhtml5.com/

Html5的介绍和快速入门

Html5大致是(html+css3+JavaScript apis)

Html5支持了css3的强大选择器和动画等功能+支持JavaScript很多新的函数,所以说html5就很强大。

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

绘制一个矩形

Html5代码:

<!--告诉浏览器这是一个html5的网页-->

<!DOCTYPE  html>

<html>

<head>

<!--网页的编码-->

<meta charset ="UTF-8"/>

</head>

<body>

<!--这是一个画布标签,我们绘制矩形图形-->

<canvas id = "can1"  width = "500 px"  height ="400 px" style="border : 3px solid  red">

</canvas>

<script type ="text/javascript">

//我要得到画布画出矩形

//得到画布

var canvas = document.getElementById("can1");

//2得到上下文环境,通过cxt这个对象来绘制图形,通过这个方法来绘制图形

var cxt =canvas.getContext("2d");

//画出矩形,默认是黑色的

//改变颜色

cxt.fillStyle="#FF0000";

cxt.fillRect(50,50,50,50);

</script>

</body>

</html>

 

2.增加了<header><footer>标签,做到内容和结构分离,利用SEO优化

 <html>

 <header>网页的头部</header>

 Hello,world

 <footer>网页的尾部</footer>

3.增加<video>和<audio>标签,将视频和音频的嵌入变得非常容易。

<!--告诉浏览器这是一个html5的网页-->

<!DOCTYPE  html>

<html>

<head>

<!--网页的编码-->

<meta charset ="gbk"/>

</head>

<body>

<!--嵌入一段视频-->

<video src ="(Letter Song -我们仍未知道那天所见到的那朵花的名字-MAD版).mp4"controls = "controls"  width="500px"height="300px"></video>

</body>

</html>

     这里的video支持ogg格式和mp4,不是所有的视频格式都支持                                

     如果我把这个网页的所有内容都放在Apache服务器下,是可以直接访问这个视频。

 

4.html5的离线存储功能

5.语音识别功能、图像识别

6.html5支持强大的css3的各种功能(css3的选择器)

动画效果 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>Animations功能使用方法</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>donghuaxiaoguo</div>

    </body>

 </html>

 

隔行显示颜色

<!--告诉浏览器这是一个html5的网页--><!DOCTYPEhtml>

<html>

 <head>

 <!--网页的编码-->

 <meta charset="gbk" />

 <style type="text/css">

/*even :是偶数  odd : 是奇数 */

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

</style>

 </head>

 <body>

 <!-- 我要求p1,p2,p3,p4剑客显示红色和蓝色字体,传统做法是定两个选择器--> 显示颜色,隔行显示

 <p>p1</p>

 <p>p2</p>

 <p>p3</p>

 <p>p4</p> 

 </body>

</html>

html5相对于前几版增加功能

6.增加拖放,跨文档消息,浏览器历史管理等

7.增强各大浏览器的兼容性

HTML5在引入新标签的同时,废弃了不少常见元素

第一类:表现性元素

basefont /big/center/font/s/strike/tt/u

建议用语义正确的元素代替他们,并使用CSS来确保渲染后的效果

第二类:框架类元素

因框架有很多可用性及可访问性问题,HTML5规范将以下元素移

除。frame/frameset/noframes,但html5支持iframe。

第三类:属性类

很多表现性的属性也被新规范移除,如下:

align/body标签上的link、vlink、alink、text属性/bgcolor/height和width

iframe元素上的scrolling属性/valign/hspace和vspace

table标签上的cellpadding、cellspacing和border属性

header标签上的profile属性

img和iframe元素的longdesc属性

第四类:其他

abbr取代acronym(用于表示缩写)

object取代了applet

ul取代了dir



 

------zyjjfm的微博期待与您交流!-------






1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    新浪微博
    文章分类
    文章存档
    阅读排行
    评论排行