3.7　综合实例

3.7　综合实例

根据本章介绍的HTML知识，按照语义明确、结构清晰的要求，书写图3-27所示页面的HTML代码。

具体操作步骤如下：

（1）新建页面，在＜title＞标签中输入“计算机学院”作为页面标题。

（2）观察整个页面内容，根据语义选择使用哪个元素。页面最上方的导航条使用header和nav元素，页面最下方的页脚使用footer元素，左侧的栏目是独立的文章，使用article元素，内容中的小节可以使用section元素，右侧的栏目是附属信息，使用aside元素。

（3）为了方便设置整个页面内容的样式，使用id为wrapper的div元素将所有元素包裹起来。

（4）为了方便设置左、右两个栏目的样式及布局，分别使用id为content的div元素和id为sidebar的div元素将左、右两个栏目内容包裹起来。各部分内容的代码按照从上到下的顺序书写，先写header元素，然后是article和aside元素，最后是footer元素。

（5）在每个区域开始和结束的地方添加注释。

（6）向每个区域中填入与内容对应的代码。

完成后的代码如下：

图3-27　页面效果

这段代码显示的结果如图3-28所示。

不要奇怪为什么页面显示效果和预期不同，按照网页设计中内容与样式分离的原则，HTML负责内容，CSS负责样式，无论是文字部分的表现形式还是区块的布局，都是由CSS完成的工作，而在当前代码中并未添加CSS，因此所有元素都以默认样式显示。

图3-28　代码对应的页面效果