HTML5又2008年诞生，HTML5大致可以等同于=html+css3+javascriptapi....

so --->支持css3强大的选择器和动画以及javascript的新的函数

先来记录一下HTML5增加的几个新的标签吧！

1。  <canvas>画布标签 HTML5的新标签

举例：

 <html>

     <head>

         <title>canvas画布的应用</title>

           <p align="center">画一个矩形<span style="color : #ff0000">龚细军创作</span></p>    </head>

   <body>

          <canvas id="can" width="400px" height="500px" style="border : 2px solid red"> </canvas>

     <script type="text/javascript">

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

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

         //alert(cxt);

         cxt.style="#FF0000"

         cxt.fillRect(10,10,30,30);

     </script>

      </body>

 </html>

2. 增加了<header> <forder>  这两个标签做到了网页和结构的分离 (使用seo 即搜索引擎)

格式：

 <html>

   <header>（网页）page的头部</header>

             你好呀，我是........

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

 </html>

3.增加了音频<audio>和 音频<video>两个新的标签........。

    <video src"=http://video.baomihua.com/37784322/32372832?ptag=vsogou" poster="C:\Users\Administrato\Desktop\火影Q版人物集\10.jpg"  controls="controls" width="500px" height="400px">呵呵，放不了哦！</video>

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

效果图：  （注意： 目前html所支持的格式为： mp4/ogg格式）

同理，音频也是一样的...
4. 增加了离线存储功能
   
5. 支持语音识别   6.支持图像识别 7.支持游戏
8.支持强大的css3......（动画和选择器）
(1)
 <!DOCTYPE html>

 <html>

     <head>

         <!--meta charset="utf-8"/-->

         <title>Gxjun</title>

         <!--CSS3模块-->

         <style type="text/css">

                  div{

                background-color: red;}

            @-webkit-keyframes mycolor {

          0%{background-color: red;}

          40%{background-color: blue;}

          70%{background-color: yellow;}

           100%{background-color: red;}

               }

           div: hover{

                -webkit-animation-name: mycolor;

                -webkit-animation-duration: 1s;

                -webkit-animation-timing-function:linear;

             }

         </style>

     </head>

     <body>

                     <div>hehhe</div>

     </body>

 </html>

以上呈现的是一个字体颜色逐渐变化的样式..

(2) css3代码选器举例：

 <html>

     <head>

         <style type="text/css">

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

       </style>

     </head>

     <body>

         <p >会是个什么颜色呢</p>

         <p >会是个什么颜色呢</p>

         <p >会是个什么颜色呢</p>

         <p >会是个什么颜色呢</p>

     </body>

 </html>

效果图：

6.支持拖放，跨文档，浏览器历史管理

7.各个浏览器的浏览器的兼容性很好....

学习HTML5之新特性标签一览（详细）的更多相关文章

  1. Atitit html5.1 新特性attilax总结

    Atitit html5.1 新特性attilax总结 9. 嵌入 header 和 footer1 7. 校验表单1 6. 浏览器的上下文菜单2 1. 响应式图像2 Attilax觉得还不错的心特性 ...

  2. Web开发者应当开始学习HTML5的新功能

    据国外媒体报道,谷歌开发者业务部门高管马克·皮尔格雷姆(Mark Pilgrim)在WWW2010会议上表示,尽管还需要进一步完善,HTML5已经获得大多数平台支持,适合完成大多数任务. 但并非所有人 ...

  3. WEB学习笔记14-HTML5新特性的使用

    (1)定义文档类型声明 <!DOCTYPE html> (2)定义页面编码 <!—HTML 4.01中定义的设置页面编码的方式--> <meta http-equiv=& ...

  4. Atitti html5 h5 新特性attilax总结

    Atitti html5 h5 新特性attilax总结 Attilax觉得不错的新特性 3.语义Header和Footer (The Semantic Header and Footer) 8.占位 ...

  5. 浅谈HTML5的新特性

    2014年10月29日,W3C宣布,经过接近8年的艰苦努力,HTML5标准规范终于制定完成. HTML5将会取代1999年制定的HTML 4.01.XHTML 1.0标准,使网络标准达到符合当代的网络 ...

  6. HTML5的新特性：范围样式，又叫做<style scoped>

    Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做<style scoped> .开发者可以通过为根元素设定一个添加了scoped属性的style标签,来限制样式只作用于 ...

  7. 可能是最早的学习Android N新特性的文章

    可能是最早的学习Android N新特性的文章 Google在今天放出了Android N开发者预览版.Android N支持Nexus6及以上的设备.5太子Nexus5不再得到更新. Android ...

  8. 从零开始一起学习SLAM | C++新特性要不要学？

    LAM,C++编程是必备技能.不过,大家在学校里学习的书本一般比较老,主要还是C++98那些老一套. 本文所谓的C++新特性是指C++11及其以后的C++14.C++17增加的新关键字和新语法特性.其 ...

  9. HTML5 的新特性以及新标签的浏览器兼容问题

    新特性: HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加. 1)  拖拽释放(Drag and drop) API 2)  语义化更好的内容标签(heade ...

随机推荐

  1. CodeForces 131A cAPS lOCK

    cAPS lOCK Time Limit:500MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Submit St ...

  2. Debug不崩溃Release版本崩溃的一种原因

    今天有一个工程Debug是正常,Release崩溃,郁闷至极. 研究了一下下午,原因是一个类成员变量没有构造函数中初始化.而Debug版本正好没有问题. 所以定义类成员,一定不能忘记初始化!!

  3. Mysql ERROR 1064 （42000）

    创建了一个表: +-------------+--------------+------+-----+---------+----------------+ | Field | Type | Null ...

  4. [POJ2182]Lost Cows（树状数组，二分）

    题目链接:http://poj.org/problem?id=2182 题意:给定1~n个数和n个位置,已知ai表示第i个位置前有ai个数比当前位置的数小,求这个排列. 和刚才YY的题意蛮接近的,用树 ...

  5. [转]ZigBee On Windows Mobile--ZigBee模块天线设计

    原文出处:http://www.cnblogs.com/dearsj001/archive/2008/10/26/1320029.html

  6. kaili 2.0 metasploit连接postgres数据库

    第一步:使用命令 db_init 初始化数据库

  7. 软/硬链接指令：ln

    语法: ln  [选项]  原文件  目标文件 选项: -s 创建软连接(创建软链接时,若所在文件夹不一致,原文件要使用绝对路径) 硬链接特征: 1.拥有相同i节点和存储block块,可以看成是同一个 ...

  8. 线程入门之start()和run()的区别

    package com.thread; /** * start()和run()的区别 * start():并行执行 * run():方法调用,顺序执行 * @author 95Yang */ publ ...

  9. Object-C中的排序和Compare陷阱

    来源:http://m.blog.csdn.net/blog/u011883764/38868097 Date : 2015-12-24 一.Compare陷阱 NSString有多个compare相 ...

  10. 一种json生成html的思路

    输入: [{ tag:"ul", attribute:{ class:"father6" }, property:{ className:"fathe ...