页面的布局中结构元素

在HTML5中，为了使文档的结构更加清晰明确，使用了文档结构元素构建网页布局。其典型布局如下图所示。

1.header元素

   该因素可以包含所有通常放在页面头部的内容，其基本语法格式为

 <header>
        <h1>网页主题</h1>
        
    </header>

例如，下面的代码定义了文档的欢迎信息。 

<header>
        <h1>欢迎来到 H5 创新学院主页</h1>
        <p>写代码是一种快乐</p>
    </header>

2.nav元素

用于定义导航链接，是HTML5新增的元素，该元素可以将具有导航性质的链接归纳在一个区域中，使网页元素的语义更加明确。例如，下面的代码定义了导航条中常见的首页，上一页和下一页链接。

<nav>
        <a href="index.html">首页</a>
        <a href="prev.html">上一页</a>
        <a href="next.html">下一页</a>
</nav>

3. section 元素

   用于对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容和标题组成。

在使用section元素时，需要注意以下3点：
（1）不要将 section元素用作设置样式的页面容器，那是div的特性。

（2）如果article元素、aside元素或nav元素更符合使用条件，那么建议不要使用section元素。
（3）没有标题的内容区块不要使用section元素定义。

<section>
        <h1>文章标题</h1>
        <p>这里是文章内容</p>
        <p>继续添加更多内容</p>
    </section>

4.footer元素

用来定义section或document的页脚，通常该标签包含网站的版权、创作者的姓名、文档的创作日期及联系信息。例如，下面的代码定义了网站的版权信息。 

<footer>
        <p>2023 H5 创新学院 版权所有</p>
    </footer>

5.article 元素

article 元素用来定义独立的区块内容，该标签定义的内容可独立于页面中的其他内容使用。article 元素经常用在论坛帖子、新闻文章、博客条目和用户评论等应用中。 

 

课后练习：

 

代码如下： 

 <header>
        <h1>欢迎来到 H5 创新学院主页</h1>
        <p>写代码是一种快乐</p>
 </header>
 <hr>
 <nav>
        <a href="#">首页</a>
        <a href="#">关于我们</a>
        <a href="#">服务</a>
        <a href="#">联系方式</a>
  </nav>
  <hr>
  <main>
        <section>
            <h2>文章标题</h2>
            <p>这里是文章内容，可以包含多个段落，图片，列表等元素</p>
            <p>继续添加更多内容</p>
        </section>
  </main>