HTML中常用的网页布局！！

#本文详细介绍HTML网页<header> 、<nav> 、<section> 、<aside>、<footer>标签的使用#

header	定义文档或节的页眉
nav	定义导航链接的容器
section	定义文档中的节
aside	定义内容之外的内容（比如侧栏)
footer	定义文档或节的页脚

一、<header> 标签

1、前言

• <header>  标签用于定义文档或页面的头部区域，包含网站的标志、标题、主导航、搜索框等与页面整体相关的信息。

2、<header>标签的使用

    <header>
        <h1 align="center">广东XX学院</h1>
        <p align="center">欢迎来到:<ins>计算机学院</ins></p>
    </header>

运行代码后如下：

二、<nav> 标签

1、前言

• <nav>   标签用于定义页面的导航链接部分，可以包含网站的主导航菜单，如首页、关于我们、产品、服务等页面的链接。
• 增强语义性：有助于搜索引擎和辅助技术更好地理解页面结构和内容。
• 提高可维护性：使开发者和后续维护人员能够更直观地识别和处理导航部分的代码。

2、<nav>标签的使用

    <nav>
        <ul type="disc">
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">学生风采</a></li>
            <li><a href="#">联系方式</a></li>
        </ul>
    </nav>

运行代码后如下：

三、<section> 标签

1、前言

• <section> 元素用于定义文档中的一个章节或区域，通常包含一组相关的内容，如果你的网页有一个关于产品介绍的部分，你可以使用 <section>  来包裹这部分内容。

2、<section>标签的使用

    <main>
       <h2>最新文章</h2>
       <h3>文章标题</h3>
       <section>这是是文章的内容简介。</section>
       <section>可以使用</section>
       <section>标签进行换行。</section><br>
       <img src="E:\web\1111\1-HTML\风景.jpg" alt="图片显示失败" width="300"  height="300"> 
       <p>想了解广东XX学院：<a href="#">点击这里</a></p><br>
    </main> 

运行代码后如下：

四、<aside> 标签

1、前言

• <aside>  元素通常用于表示与页面主要内容相关但又可以独立存在的侧边栏内容。它可以包含引用、侧边栏导航、广告、相关链接等。

2、<aside>标签的使用

<aside>
    <h3>侧边栏</h3>
    <P>侧边栏内容，如快速链接、广告等</P>
    <table border="1" >
        <tr>
            <th>专业</th>
            <th>链接</th>
        </tr>
        <tr>
            <td>计算机应用技术</td>
            <td><a href="file:///E:/web/1111/计算机.html"> 专业A详情</a></td>
        </tr>
        <tr>
            <td> 数字媒体技术</td>
            <td><a href="file:///E:/web/1111/数字媒体.html"> 专业B详情</a></td>
        </tr>
    </table>
</aside>

运行代码后如下：

五、<footer> 标签

1、前言

• footer  元素用于定义文档或页面的页脚部分。它通常包含版权信息、联系信息、网站地图、相关链接等。
• 比如：
• 版权声明：“© 2023 本网站所有内容版权归所有者所有。”联系信息：“地址：XX 路 XX 号  电话：XXX-XXXXXXX  邮箱：XXXX@XXX.com”

2、<footer>标签的使用

    <footer>
        <p><b>联系我们</b></p>
        <form action="">
            姓名：<input type="text" ><br>
            邮箱：<input type="text"><br>
            <input type="submit" value="提交">
        </form>
        <hr>
        <p>版权所有@2024广东XX计算机学院</p>
    </footer>

运行代码后如下：