关闭

html5学习笔记1

标签: html5技术
262人阅读 评论(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
查看评论

[持续更新]HTML5学习笔记(二)

1.  元素分类 元数据元素(metadata element):由此可见主要是元素中的事情了,向浏览器提供信息和指示; 流元素(flow element):听名字怪异,但是其实是规定这些元素可以成为父元素; 短语元素(phrasing element):和流元素呼应,规定...
  • u014267351
  • u014267351
  • 2015-09-01 13:03
  • 1751

HTML5学习笔记(总结提炼版)——001常见的HTML标签

前言:最近在学HTML5,想想还是把笔记放到博客来,一来可以相互分享和交流学习,二来2可以督促自己不要放松! 练习1: src和href的区别 src:引用,该资源是页面不可缺少的一部分,如(img标签 video标签 radio标签); href:引入,引入外部资源,如(a标签 link标...
  • sunnyboy9
  • sunnyboy9
  • 2016-03-14 00:42
  • 929

Html5学习标签个人笔记大全

<footer> <header> <html> <head> <title> <meta charset <meta name(description) <meta http-equiv页面描述,页面定时跳转 <b...
  • qq_23079443
  • qq_23079443
  • 2016-04-09 19:58
  • 433

FCC学习笔记-(一) HTML5 and CSS

<一> HTML5 and CSS标题主标h , 副标h1,h2,…<h>hello world</h> 正文<p>CatphotoApp</p>注释用法 <!-- <h>hello world</h> <...
  • weixin_39549890
  • weixin_39549890
  • 2017-07-25 13:03
  • 169

HTML5学习笔记 —— JavaScript基础知识

来源于我的HTML5学习笔记,通过它可以快速入门HTML5,同时可以作为工作中快速查找知识点的利器。 本文由浅入深地详解了JavaScript的各项基础知识点,通过本文你将会对JavaScript语言有深入的了解。 仔细学习文章中的知识点,并结合文章中的习题将会为你打下坚实的JavaScript基...
  • chencl1986
  • chencl1986
  • 2017-05-11 21:51
  • 2592

HTML5学习笔记之video标签

HTML5进阶笔记之video标签在HTML5的新特性中增加了对原生视频文件的支持,可以在播放视频时无需Flash插件。在页面中嵌入视频可以通过如下的简单代码实现:<video src="foo.mp4" width="300" height=&quo...
  • zhxiong1994
  • zhxiong1994
  • 2015-09-22 21:23
  • 275

OpenCV学习笔记大集锦

转载自: OpenCV学习笔记大集锦 – 视觉机器人 http://www.cvrobot.net/collect-opencv-resource-learn-study-note-chinese/ 整理了我所了解的有关OpenCV的学习笔记、原理分析、使用例程等相关的博文...
  • qq_26898461
  • qq_26898461
  • 2016-01-06 09:49
  • 1436

myBatis学习笔记(1)——快速入门

在项目中使用myBatis 导入jar包 在src下创建配置文件 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE configuration PUBLIC "-//mybatis.o...
  • u010837612
  • u010837612
  • 2015-05-12 11:06
  • 947

Html5学习笔记(一)初认识html5

html5初认识
  • ZengIsCoding
  • ZengIsCoding
  • 2016-06-01 16:00
  • 1022

HTML5学习笔记(1)

1. HTML5 文档类型声明  HTML5的文档类型声明可以触发所有具备标准模式的浏览器的标准模式,包括那些对HTML5一无所知的浏览器。 2. 字符编码 A Tiny HTML Document 3. 添加样式表 type="text/css"没有...
  • u010345073
  • u010345073
  • 2013-09-17 17:01
  • 663
    新浪微博
    文章分类
    文章存档
    阅读排行