关于html5页面设计

您将创建一个简单的 Web 页面。在这个过程中，我将讨论 HTML5 中引入的几个新标记。要创建一个有效的、高效的 Web 页面，必须对页面进行规划，考虑到需要创建的所有的组件。

 

创建的页面将采用如图下图所示。页面设计包含一个 Header 区、一个 Nav、一个 Article 区、一个 Aside 区和一个 Footer 区。这种结构的目的是清楚地展示新的 HTML5 标记的用法，展示如何使用它们创建构造良好的代码和优雅的页面设计。

在创建页面的过程中，我使用了 CSS3，需要用 CSS3 正确地呈现 HTML5 页面。CSS3 是实现 HTML5 页面样式、导航和整体感官的重要工具。

然而，在开始构建页面前，您需要了解一些有关新的 HTML5 标记的知识。

1，header

例如：

<header>

   <hgroup>

       <h1>Welcome to my WWF</h1>

       <h2>For a living planet</h2>          

   </hgroup>

   <p>The rest of the content...</p>

</header>

这里的hgroup是用来对网页或区段（section）的标题进行组合。

说到hgroup就不得不说figcaption，那么figcaption又是什么意思了。

figcaption：标签定义 figure 元素的标题（caption）。

figure：标签规定独立的流内容（图像、图表、照片、代码等等）。

figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

例如：

<figure>

   <figcaption>黄浦江上的的卢浦大桥</figcaption>

   <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />

</figure>

2，nav

nav就不用多说了专门为导航功能定义了一个区域，但是这里要多注意的是<nav>标记应当用于主站点的导航，而不是用于包含页面其他区域的链接

例如：

<nav>

    <ul>

        <li><a href="#">Home</a></li>

        <li><a href="#">About Us</a></li>

        <li><a href="#">Our Products</a></li>

        <li><a href="#">Contact Us</a></li>

    </ul>

</nav>

3，article

字面意思为“文章”。在web页面中表现为独立的内容，如一篇新闻，一篇评论，一段名言，一段联系方式。这其中包括两方面，一为整个页面的主旨内容，另外就是一些辅助内容。article可以嵌套，即article里面还可以包含article，此时内article应该跟外article有一定的关联性，如同情景二，其中主内容的评论。

例如：

<!doctype html>

<title>html5站案例</title>

<body>

   <article>

       <h1></h1>

       <p>主内容</p>

   </article>

   <aside>

      侧边内容

  </aside>

</body>

4，section  字面上理解为“块”，“部分”。在html5网页中表现的意思跟字面理解差不多，即部分，块，模块，主要作用为对页面的内容进行分块或者对文章的内容进行分段。

这里要注意的是section内部必须有标题，标题也代表了section的意义所在。

例如：

 

<!doctype html>

<article>

   <h1>Web编程语言比较</h1>

   <p>web编程语言常用的有asp,asp.net,php,jsp...</p>

   <section>

       <h2>asp</h2>

       <p>asp全称Active Server Page</p>

  </section>

   <section>

       <h2>asp.net</h2>

       <p>asp的颠覆版本</p>

   </section>

   <section>

       <h2>php</h2>

       <p>草根动态语言，免费，强大</p>

   </section>

</article>

5，footer

字面意思为“页脚”，“结尾”，在html5中跟字面意思类似，是页脚和结尾的意思。它与header是相对的一对。footer也是用于区块，即section，可以包含该区块相关的作者信息、相关文档的链接、版权信息、导航、附录，索引，长的版本记录，冗长的许可协议和其他的诸于此类的内容等。
例如：

<footer>

      <section>

          <h1>友情链接</h1>

      </section>

      版权所有，文章可自由转载，但请注明来源于html5zhan.com

</footer>

这里说道footer，header就不得不说一个address

address：

address字面理解为“地址”，在html5中，它用于文档或者文章作者或拥有者的联系信息。注意，这里放的不是字面上理解的“地址”，而是指“联系信息”，可以包括文档创建者的名字、站点链接、电子邮箱、真实地址、电话号码等各类联系信息。
address一般放在footer中，有时也放在header中，视情况而定。

例如：

 

<!doctype html>

<title>html5 address 示例 html5zhan.com</title>

<header>

   <h1>html5 address 示例 html5zhan.com</h1>

</header>   

<p>这里是主体...</p>

<footer>

  作者：前端巧友汇

   <address>

       <ul>

          <li>网址：http://www.html5zhan.com</li>

           <li>QQ：10000</li>

           <li>邮件：web@daojia100.com</li>

       </ul>

   </address>

</footer>