标签：
首先，来看一段HTML4中常见的JavaScript代码
<form> <p><label>UserName:<input name="search" type="text" id="search"></label></p> <script>document.getElementById(‘search‘).focus();</script> </form>
在HTML5中，这段代码将会以怎样的形式出现呢？
<form> <p> <label>UserName:<input type="text" name="search" autofocus /></laabel> </p> </form>
区别：在HTML4中的一段JavaScript代码，在HTML5中消失了，取而代之的是一个在HTML5中新出现的属性。
我们都知道，HTML4中最常见的页面结构通常采用div+css的方式进行页面布局，参考如下代码：
<html> <head> <title>HTML</title> <style type="text/css"> #header, #nav, #footer { height: 20px; width: 400px; background-color: #595959; text-align: center; color: #fff; line-height: 20px; } #nav, #footer { margin-top: 10px; margin-bottom: 10px; } .article, #side-bar { display: inline-block; width: 198px; height: 100px; background-color: #595959; text-align: center; color: #fff; line-height: 20px; vertical-align: top; } .section { height: 60px; background-color: #3b3b3b; margin: 10px; text-align: center; color: #fff; line-height: 20px; } </style> </head> <body> <div id="header"><div id="header"></div></div> <div id="nav"><div id="nav"></div></div> <div class="article"> <div class="article"></div> <div class="section"><div class="section"></div></div> </div> <div id="side-bar"><div id="side-bar"></div></div> <div id="footer"><div id="footer"></div></div> </body> </html>
代码执行效果图如下：
那么在HTML5中，我们会用怎样的页面代码来描述同样的结构呢？参考如下代码：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>HTML5</title> <style> header, nav, article, aside, footer { background-color: #595959; color: #fff; text-align: center; line-height: 20px; } header, nav, footer { height:20px; width:400px; margin-bottom:10px; } article, aside { width:198px; height:100px; display:inline-block; vertical-align:top; margin-bottom:10px; } section { height:60px; background-color:#3b3b3b; margin:10px; } </style> </head> <body> <header><header></header> <nav><nav></nav> <article> <article> <section><section></section> </article> <aside><aside></aside> <footer><footer></footer> </body> </html>
实际代码执行效果如下：
区别：HTML4中常见的用div来划分页面结构的方法，到了HTML5中，别一种HTML5中新出现的标签给替代了。
从上面的两个示例比较可以看出，相对于HTML4，HTML5能够创建更简单的Web程序，书写出更简洁的HTML代码，下面我们就逐一介绍HTML5中新增的元素。
HTML5中新增的结构标签：
<section>
<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。
<section> <h1>PRC</h1> <p>The People‘s Republic of China was born in 1949...</p> </section>
效果图如下：
<article>
<article> 标签规定独立的自包含内容。article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。
一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。
<article> 元素的潜在来源：
<article> <h1>Internet Explorer 9</h1> <p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p> </article>
效果图如下：
乍看起来，貌似article和section标签基本一样啊，事实上，在HTML5中，article元素可以看成是一种特殊种类的section元素，它比section元素更强调独立性。那么我们应该什么时候使用article标签，什么时候使用section标签呢？请参考如下几条规则：
举例说明一下
<article> <h1>苹果</h1> <p><b>苹果</b>,植物类水果，多次花果...</p> <section> <h2>红富士</h2> <p>红富士是从普通富士的芽（枝）变中选育出的着色系富士的统称...</p> </section> <section> <h2>国光</h2> <p>国光苹果品，又名小国光、万寿。原产美国，1600年发现的偶然实生苗...</p> </section> </article>
由于该代码段中描述的内容首先是一段独立的、完整的内容，因此使用article元素，明显看出改内容分为了三段，每一段都有一个独立的标题，因此使用了两个section元素，第一段其实也应该包含在section元素中，但由于其结构清晰，分析器可以识别第一段内容在一个section元素中，所以将第一个section元素略，但如果第一个section元素里还包括子section元素或子article元素，那么就必须写明第一个section元素了。
示例二
<section> <h1>水果</h1> <article> <h1>苹果</h1> <p><b>苹果</b>,植物类水果，多次花果...</p> </article> <article> <h1>橘子</h1> <p>。。。。。。。。</p> </article> </section>
该代码描述的是文章的一段，因此最初没有使用article（article强调独立，完整），在这段中有几块独立的内容，因此，嵌入了几个独立的article元素。
<nav>
<nav> 标签定义导航链接的部分。nav元素是一个可以用作页面导航的链接组，但并不是所有的链接组都要被放进nav元素，只需将主要的、基本的链接组放进nav元素。
<nav> <a href="http://www.baidu.com">Baidu</a> <a href="http://cn.bing.com/?FORM=HPCNEN">Bing</a> </nav>
<aside>
aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分。
aside元素主要有一下两种使用方法：
<!DOCTYPE HTML> <html> <body> <p>Me and my family visited The Epcot center this summer.</p> <aside> <h4>Epcot Center</h4> The Epcot Center is a theme park in Disney World, Florida. </aside> </body> </html>
未完待续。。。。
标签：
原文地址：http://www.cnblogs.com/zouyanzhi/p/4597757.html
