网页结构布局

EX_C

于 2024-10-06 22:10:40 发布

阅读量303

点赞数 12

文章标签：前端 javascript html5

本文链接：https://blog.csdn.net/2401_84309743/article/details/142731550

版权

一、网页结构语法

<header>网页结构头部模块</header>
<nav>网页结构导航模块</nav>
<!-- 主体部分 -->
<main>
    <section>网页结果的文章模块</section>
    <section>文章一</section>
    <section>文章二</section>
    <aside>网页侧边栏，给用户在线提建议</aside>
</main>
<footer>网页结构底部模块，用于介绍公司和具体业务</footer>

二、结构元素

header	设置页面页眉
nav	构建导航
main	主体部分
article	与文档、页面、应用程序或网站中一体化的内容
aside	与页面内容相关、有别于主要内容部分
section	对网站或应用程序中页面的内容进行分块
footer	设置页面页脚

1.header 元素

在HTML5中header元素是一种具有引领和导航的作用，其语法格式为：

<header><h1>网页结构头部模块</h1></header>

举例：

<header>
    <h1 align="center">页面布局结构内容</h1>
    <p>以下关于结构元素的内容</p>
</header>

结果如下：

2.nav 元素

用于定义导航链接，可将具有导航性质的链接归纳在一个区域，使页面元素的语义更加明确。其语法格式为：

<nav>网页结构导航模块</nav>

举例：

<nav>
    <a href="#">首页</a>
    <a href="#">上一页</a>
    <a href="#">下一页</a>
</nav>

结果如下：

3.section 元素

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

注：

①不要将section元素用作设置样式的页面容器，section元素并非是一个普通的容器元素，当一个容器需要被定义样式或通过脚本定义行为时，推荐使用div

②如果article元素、aside元素或nav元素更符合条件时，建议不要使用section元素

③没有标题的内容区块不要使用section元素定义

语法格式为：

    <section>网页结果的文章模块</section>
    <section>文章一</section>
    <section>文章二</section>

举例：

    <section>
        <h3>第一章节</h3>
        <p>第一回</p>
    </section>

结果如下：

4.article 元素

用来定义独立的区块内容，该标题定义的内容可独立于页面中的其他内容使用。其语法格式为：

<article>这是网页结构的主要模块</article>

举例：

    <article>
        <section>
            <h2>最新文章</h2>
            <b>文章标题</b>
            <p>这是文章的内容简介。
        </section>
    </article>

5.aside 元素

用来表示当前页面或新闻的附属信息部分，他可包含与当前页面或主体内容相关的引用、侧边栏、广告、导航条，以及其他类似的、有别于主题内容的部分。

两种用法：

①被包含在 article 元素内作为主要内容的附属信息部分

②在 article 元素之外使用，作为页面或站点全局的附属信息部分

其语法结构为：

<aside>网页侧边栏，给用户在线提建议</aside>

举例：

    <aside>
        <nav>
            <h2>评论</h2>
            <ul>
                <li><a href="#">张三</a><br>
                    <a href="#">你的文章很棒!</a>
                </li>
                <li><a href="#">H5创新学院博客</a><br>
                    <a href="#">恭喜！您成功开通博客！</a>
                </li>
            </ul>
        </nav>
    </aside>

结果如下：

6.footer 元素

用来定义section或document的页脚，通常该标签包含网站的版权、作者等信息。其语法格式为：

<footer>网页结构底部模块，用于介绍公司和具体业务</footer>

举例：

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

运行结果如下：

三、练习

运行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页布局</title>
</head>
<body>
    <header>
        <h1 align="center">XXX公司</h1>
        <p align="center">欢迎来到: <ins>计算机部门</ins></p>
    </header>
    
    <hr>
    <nav>
        <ul type="disc">
            <li><a href="#">首页</a></li><br>
            <li><a href="#">关于我们</a></li><br>
            <li><a href="#">职员风采</a></li><br>
            <li><a href="#">联系方式</a></li><br>
        </ul>
    </nav>

    <hr>
    <main>
        <article>
            <section>
                <h2>最新文章</h2>
                <b>文章标题</b>
                <p>这是文章的内容简介。 <br> 可以使用 <br> 标签进行换行 </p>
                <img src="#" alt="这是公司标志">
                <p>想了解更多关于本公司：<a href="#">点击这里</a></p>
            </section>
        </article>

        <br>
        <aside>
            <p>侧边栏内容，如快速链接、广告等</p>
            <table border="1">
                <tr>
                    <th>岗位</th>
                    <th>链接</th>
                </tr>
                <tr>
                    <td>前端部门</td>
                    <td><a href="#">部门A详情</a></td>
                </tr>
                <tr>
                    <td>后端部门</td>
                    <td><a href="#">部门B详情</a></td>
                </tr>
            </table>
        </aside>
    </main>

    <br>
    <section>
        <b>联系我们</b><br>
        姓名：<input type="text" id="name"><br>
        邮箱：<input type="text" id="youxiang"><br>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </section>

    <br>
    <footer>XXX公司，版权所有</footer>

</body>
</html>