HTML5 Quick Learning Guide--提前HTMl5学习啊

HTMl5文档声明变化的精简：

新的文档申明方式更精简:
<!doctype html>
相比于老的文档声明方式:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"https://www.w3.org/TR/html4/strict.dtd">
与

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

要简单了很多。

而文档编码格式申明则更精简：<meta charset="UTF-8"> ，一个meta 标签，直接chaset；比老式的<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />要简单很多，在一定程度上减少了文档的加载方式。

更为潇洒的则是一个html5页面的主要文档不再是body，而是<header>、<nav>、<section>、<article>、<aside>以及<footer>，像现在html4的布局一般用来作为id施用的nav导航标签被直接拿来当“导航标签"了。按典型的上下三栏布局，则可能需要有三个 <sections>标签，而每个 <sections>标签中又有其独立的<header>和<footer>标签，这个类似于目前xml文档格式。

以下来个典型的HTML5的文档树：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Very Basic Document</title> 
<!--[if IE]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>header, footer, section, aside, nav, article {display: block;}</style> 
</head> 
<body>
<nav> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Products</a></li> 
<li><a href="#">Contact Us</a></li> 
</ul> 
</nav> 
<header> 
<h1><a href="#">Very Basic Document</a></h1> 
<h2>A tag line might go here</h2> 
</header>
<section>
         <article> 
<h3><a href="#">First Article Title</a></h3> 
<img src="images/flower.jpg" alt="flower">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. </p> 
</article>
         <article> 
<h3><a href="#">Second Article Title</a></h3> 
<img src="images/tree.jpg" alt="tree">
<p>Praesent libero. Sed cursus ante dapibus diam.</p> 
</article>
</section>
<aside> 
<h4>Connect With Us</h4> 
<ul> 
<li><a href="#">Twitter</a></li> 
<li><a href="#">Facebook</a></li> 
</ul> 
</aside>
<footer>
<p>All rights reserved.</p>
</footer>
</body> 
</html>

而<header>标签则像普通使用的H1、H2等得标签，可以作为一个头部导航标签。

<nav>则更具其本身的意义，可以作为一个导航栏或者菜单选择。

<section>则具有定位或者文档区域控制的意味，有点类似XHTMl中的DIV标签的内联意味。

<article>则具有更深层的定位功能，而不是其英文单词所表现的文章区域的意味。

<aside>则可以理解为可以扩展的文档区域，有点像spaan的意味，内联但又自动扩展。

<footer>则是作为<section>的内部标签使用。其跟目前的footer 意味相似，可以包含作者信息、版权信息等。

当然，html5还有一些很有实用意义的标签，某些组织甚至声称可以使用诸如<video>、<audio>结合js打败adobe的flash。

转载请注明本文标题和链接：《HTML5 Quick Learning Guide--提前HTMl5学习啊》