首页 > 代码库 > HTML5新增功能
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="http://www.mamicode.com/horse.ogg" type="audio/ogg">
<source src="http://www.mamicode.com/horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
视频文件的插入
<video src="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/planets.gif" alt="Planets" usemap ="#planetmap" /><map id="planetmap"> <area shape ="rect" coords ="0,0,110,260" href ="http://www.mamicode.com/sun.htm" alt="Sun" /> <area shape ="circle" coords ="129,161,10" href ="http://www.mamicode.com/mercur.htm" alt="Mercury" /> <area shape ="circle" coords ="180,139,14" href ="http://www.mamicode.com/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>
我并不为去除这些标记感到悲哀。相同的原因，有更好的标记能实现它们的功能——这很好，任何作废的标记从标准中剔除都是受欢迎的。
HTML5新增功能