您的位置:晶晶的博客>前端>HTML5 Quick Learning Guide--提前HTMl5学习啊

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

HTMl5文档声明变化的精简:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict
"http://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="http://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学习啊
分享到:

相关推荐

网友评论抢沙发

路人甲 表情
Ctrl+Enter快速提交