HTML5网页设计

html5

HTML5结构之美(2)

时间:2012-04-07 15:53来自:未知作者:网络点击:
任何一门新技术,都需要一个适应的过程。如果你准备好了做一名优秀的Web前端开发人员,那你就得不断的尝试并接受最新的前端技术。 孙文曾说,欲经文明这幸福,不得不经文明之痛苦。人类的革命如此,HTML 5的革命亦

任何一门新技术,都需要一个适应的过程。如果你准备好了做一名优秀的Web前端开发人员,那你就得不断的尝试并接受最新的前端技术。

孙文曾说,欲经文明这幸福,不得不经文明之痛苦。人类的革命如此,HTML 5的革命亦是如此。IE的日渐没落,让各大浏览器厂商以一次进入了战国时代,群雄逐鹿。而对于开发者,我们只

奢求各大浏览器厂商尽可能的遵循同一个标准,而不是群雄逐鹿后的四分五裂。因为,高效完美的呈现给各类用户同样的应用才是我们的终极目标。

如此,本文从页面的doctype说起,到用HTML 5新标签搭建语义化更明确的页面的结构,再解释了一番与页面结构相关的新标签。相信大家对HTML 5的结构性新标签有了一个新的认知,如果你

有兴趣,那就打开你的IDE,写上一段由HTML 5新标签搭建的代码,然后用CSS去描绘你的宏伟蓝图吧!


<menu>
<li>HTML 5</li>
<li>CSS</li>
<li>JavaScript</li>
</menu>


<figure>
<img src=”img.gif” alt=”figure标签”  title=”figure标签” />
<figcaption>这儿是图片的描述信息</figcaption>
</figure>


<article>
<header>
<hgroup>
<h1>这是一篇介绍HTML 5结构标签的文章</h1>
<h2>HTML 5的革新</h2>
</hgroup>
<time datetime=”2011-03-20″>2011.03.20</time>
</header>
<p>文章内容详情</p>
</article>


<footer>
COPYRIGHT@ieFans.Net
</footer>


<aside>
<h1>作者简介</h1>
<p>Mr.Think,专注Web前端技术的凡夫俗子。</p>
</aside>


<nav>
<ul>
<li>HTML 5</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</nav>


<hgroup>
<h1>这是一篇介绍HTML 5结构标签的文章</h1>
<h2>HTML 5的革新</h2>
</hgroup>


<header>
<hgroup>
<h1>网站标题</h1>
<h1>网站副标题</h1>
</hgroup>
</header>


<header>
<hgroup>
<h1>网站标题</h1>
<h1>网站副标题</h1>
</hgroup>
<nav>
<ul>
<li>HTML 5</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</nav>
</header>
<div id=”left”>
<article>
<p>这是一篇讲述HTML 5新结构标签的文章。</p>
</article>
<article>
<p>这还是一篇讲述HTML 5新结构标签的文章。</p>
</article>
</div>
<aside>
<h1>作者简介</h1>
<p>Mr.Think,专注Web前端技术的凡夫俗子。</p>
</aside>
<footer>
网页底部
</footer>


<div id=”header”>
<div class=”hgroup”>
<h1>网站标题</h1>
<h1>网站副标题</h1>
</div>
<div id=”nav”>
<ul>
<li>HTML 5</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
<!–//header end–>
<div id=”left”>
<div class=”article”>
<p>这是一篇讲述HTML 5新结构标签的文章。</p>
</div>
<div class=”article”>
<p>这还是一篇讲述HTML 5新结构标签的文章。</p>
</div>
</div>
<!–//left end–>
<div id=”aside”>
<h1>作者简介</h1>
<p>Mr.Think,专注Web前端技术的凡夫俗子。</p>
</div>
<!–//side end–>
<div id=”footer”>
页面的底部
</div>
<!–//footer end–>


<!doctype html>
<html>
<head>
<meta charset=”gb2312″ />

</head>
<body>

</body>
</html>


<!doctype html>
<meta charset=gb2312>


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
</head>

当前文章地址:http://www.shejicool.com/web/html5/330.html

阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐