HTML5新增功能

Posted 夜枭

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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:[email protected]">Email us</a><br /> Address: Box 564, Disneyland<br /> Phone: +12 34 56 78 </address>

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

以上是关于HTML5新增功能的主要内容,如果未能解决你的问题,请参考以下文章

HTML5新特性新增功能

HTML5的新增功能

关于html5新增的功能(百度)

HTML5新增功能

Html5新增的功能

HTML5新增功能