zoukankan      html  css  js  c++  java
  • HTML5新增功能

      HTML5是最新的HTML标准,是最新的标准,很多人都会感觉到,开发一个HTML5的网站,相比把一个网站从HTML4迁移到HTML5上容易的多,两个版本有很大的不同之处。HTML5并没有对HTML4做过重大的修改,它们很多东西都是相似的。

    首先是doctype声明是HTML5里众多新特征之一。现在你只需要写<!doctype html>,这就行了。它不用引入DTD,不基于SGSL。

    替代了Flash的 <canvas> 标签

    HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.

    <canvas> 标签只是图形容器,您必须使用脚本来绘制图形。

    你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

    目前, <canvas> 标记并不能提供所有的Flash具有的功能,但假以时日,Flash必将从web上淘汰。我们拭目以待,因为很多人还并不认同这种观点。

    <canvas id="myCanvas" width="200" height="100"
    style="border:1px solid #000000;">
    </canvas>

    <script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);
    </script>

    <header> 和 <footer> 标记

    HTML5的设计<header> 是页眉。
    <footer></footer> 页脚。

    不在需要用<div>标记来标注网页的这些部分。

    <section> 和 <article> 标记

    跟<header> 和 <footer>标记类似,HTML5中引入的新的<section> 和 <article> 标记可以让开发人员更好的标注页面上的这些区域。

    <article> <a href="http://www.apple.com">Safari 5 released</a><br /> 7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC, Apple announced the release of Safari 5 for Windows and Mac...... </article>

    <section>   <h1>PRC</h1>   <p>The People's Republic of China was born in 1949...</p> </section>

    新的 <menu> 和 <figure> 标记

    新的<menu>标记可以被用作普通的菜单,也可以用在工具条和右键菜单上,虽然这些东西在页面上并不常用。

    类似的,新的 <figure> 标记是一种更专业的管理页面上文字和图像的方式。当然,你可以用样式表来控制文字和图像,但使用HTML5内置的这个标记更适合。

     新的 <audio> 和 <video> 标记

    音频文件的插入

    <audio controls>
      <source src="horse.ogg" type="audio/ogg">
      <source src="horse.mp3" type="audio/mpeg">
      您的浏览器不支持 audio 元素。
    </audio>

    视频文件的插入

    <video src="img/audiovidio/video.webm" width="600" height="400"
                controls="controls" loop poster="img/audiovidio/PLMM.jpg"
                preload="auto" id="video1" >

    </video>

    <form> 和 <forminput> 标记对原有的表单元素进行的全新的修改,它们有很多的新属性(以及一些修改)。如果你经常的开发表单,你应该花时间更详细的研究一下。

    <form action="form_action.asp" method="get"> <p>First name: <input type="text" name="fname" /></p> <p>Last name: <input type="text" name="lname" /></p> <input type="submit" value="Submit" /> </form>

    form可以理解为一个框,然后把所有的input放在里面,

    form的属性action表示你要处理表单内容的那个后端页面,一般是php或asp的;method属性,表示发送请求的方法,包括get和post两种,post加密,无字节限制。

     由 于实际开发中一个页面的input内容不可能全是连着放一块的,中间可能插入其他内容,所以,html5中form有新的元素,设置一个ID,然后其他的 input元素中设置form属性,值等于ID,这样一个页面中不需要有多个form标签了,然后通过相同的ID就可以把所有的input标签放到 form元素内了。示例:

    <form action="/example/html5/demo_form.asp" method="get" id="user_form">

    First name:<input type="text" name="fname" />

    <input type="submit" />

    </form>

     
    <p>下面的输入域在 form 元素之外,但仍然是表单的一部分。</p>
     
    Last name: <input type="text" name="lname" form="user_form" />

    不再使用 <b> 和 <font> 标记用<strong></strong>

    不再使用 <frame>, <center>, <big> 标记

    <area> 标签定义图像映射内部的区域(图像映射指的是带有可点击区域的图像)。

    area 元素始终嵌套在 <map> 标签内部。

    <img src="planets.gif" alt="Planets" usemap ="#planetmap" /> <map id="planetmap"> <area shape ="rect" coords ="0,0,110,260" href ="sun.htm" alt="Sun" /> <area shape ="circle" coords ="129,161,10" href ="mercur.htm" alt="Mercury" /> <area shape ="circle" coords ="180,139,14" href ="venus.htm" alt="Venus" /> </map>

    <address> 标签定义文档作者或拥有者的联系信息。

    如果 <address> 元素位于 <article> 元素内部,则它表示该文章作者或拥有者的联系信息。

    <address> Written by w3chtml.com<br /> <a href="mailto:info@w3chtml.com">Email us</a><br /> Address: Box 564, Disneyland<br /> Phone: +12 34 56 78 </address>

    我并不为去除这些标记感到悲哀。相同的原因,有更好的标记能实现它们的功能——这很好,任何作废的标记从标准中剔除都是受欢迎的。

  • 相关阅读:
    spring aop实现过程之三Spring AOP中Aspect编织的实现
    spring aop实现过程之一代理对象的生成
    数据库常用面试题(SQL Server) (转载)
    回溯法解八后问题
    masmplus增加调试工具
    c++ new关键字 详解
    EMU8086 编译器使用简介
    汇编操作显存
    回溯法简介
    汇编链接时 错误:unresolved external symbol _WinMainCRTStartup
  • 原文地址:https://www.cnblogs.com/ydm21/p/5839758.html
Copyright © 2011-2022 走看看