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. Spark学习（一）--RDD操作

    标签(空格分隔): 学习笔记 Spark编程模型的两种抽象:RDD(Resilient Distributed Dataset)和两种共享变量(支持并行计算的广播变量和累加器). RDD RDD是一种 ...

  2. LeetCode-Repeated DNA

    关于位操作符.如<<, value << num ,其中,num指定要位移值value移动的位数,每左移一个位,高阶位都被移出(直接丢掉),并用0填充右边.. 道理明明很简单啊 ...

  3. Using Post-Form Trigger In Oracle Forms

    Post-Form trigger in Oracle Forms fires during the Leave the Form process, when a form is exited.   ...

  4. “System.Data.OracleClient.OracleConnection”已过时

    处理办法: 在oracle 安装目录下 找到 Oracle.DataAccess.dll添加引用,然后 using Oracle.DataAccess.Client;其他的都不用动,即可.连接字符串中 ...

  5. JS学习笔记（五） HTML DOM

    参考资料: 1. http://www.w3school.com.cn/js/js_htmldom.asp 2. http://www.runoob.com/htmldom/htmldom-tutor ...

  6. Myeclipse 主题下载

    Myeclipse 主题下载 下载网址: 1. 编辑区背景主题:http://www.eclipsecolorthemes.org 2. 框架主题:https://marketplace.eclips ...

  7. [转载] 新浪微博MySQL优化的小结和反思

    原文: http://mp.weixin.qq.com/s?__biz=MzA4Nzg5Nzc5OA==&mid=206762682&idx=1&sn=1233ed1496d7 ...

  8. bootstrap学习笔记<三>（文本，代码域，列表）

    文本对齐 .text-left:左对齐 .text-center:居中对齐 .text-right:右对齐 .text-justify:两端对齐 <p class="text-left ...

  9. apt系统中sources.list文件的解析

    /etc/apt/sources.list 一般源信息都存在这个文件中.但众多软件源都放在一个文件中实在有点乱,于是新版ubuntu也有了分类的方法: 文件夹  /etc/apt/sources.li ...

  10. DHCP 工作原理

    DHCP 详解 DHCP 工作原理 一.什么是DHCP? DHCP,动态主机配置协议,前身是BOOTP协议,是一个局域网的网络协议,使用UDP协议工作,常用的2个端口:67(DHCP server), ...