html5教程：[2]设计中如何合理规划页面，掌握这些方法和技巧很重要！原创

阅读：178次时间：2024-09-19 17:30:32来源：用户

最佳经验

由作者撰写原创经验并推荐置顶

HTML5的强大功能中很重要的一面是信息的映射——也可以说是内容块化（content blocking），将你所需要处理的信息模块化，你会发现整个设计思路特别的清晰而顺畅，以下内容是由微蓝经验网用户发布html5教程：[2]设计中如何合理规划页面，掌握这些方法和技巧很重要，希望对于用户有一定帮助，为朋友进行解决疑惑，如若想了解更多相关内容，可以向底部移动了解更多与本教程文章相关解决经验方法！

方法/步骤

1
设计前，考虑一下你的网页上需要有什么？
在HTML5页面的设计中，页面一般包含以下几个区域
1、一个Header区
2、一个Navigation区
3、一个包含了三个Section区和一个Aside区的Article区
4、一个Footer区。
2
Haeder区：（页面标题和副标题）
Header区的例子包含了页面标题和副标题，< header>标签被用来创建页面的Header区的内容，除了网页本身之外，< header>标签还可以包含关于< section>和< article>的公开信息，这里创建的网页有该页面的一个Header区，这在高层设计中有给出，以及一个位于Article和Section区内部的Header区。
3
示例1,< header>标签的例子（把下面代码复制到文本文档中，把后缀名改为首页,HTML）
标题文字
文本或是图像可放在这里
Logo通常也放在这个地方
4
Navigation区（导航区）
< nav>标签来创建页面的Navigation区，< nav>元素定义了一个专门用于导航的区域，< nav>标签应该用做主站点的导航，而不是用来放置被包含在页面的其他区域中的链接。
5
示例二：（把下面代码复制到文本文档中，把后缀名改为nav,HTML）
6
Article和Section区：（存储了页面的实质内容）
< section>标签也可以包含< article>标签，就像< article>标签可以包含< section>标签一样，< section>标签应该用来分组相类似的信息，而< article>标签则应该是用来放置诸如一篇文章或是博客一类的信息，这些内容可在不影响内容含义的情况下被删除或是被放置到新的上下文中。
7
示例三：（把下面代码复制到文本文档中，把后缀名改为article,HTML）
内容
还是内容
内容依旧
好吧，还是内容
8
Footer区：
元素包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或是日期，作为页面的页脚，其有可能包含了版权或是其他重要的法律信息
9
示例四：（把下面代码复制到文本文档中，把后缀名改为footer,HTML）
Copyright 2011 Acme United, All rights reserved,