HTML综合练习

@动感超人

已于 2024-10-30 18:43:18 修改

阅读量727

点赞数 24

文章标签： html5 前端框架

于 2024-10-05 12:33:30 首次发布

本文链接：https://blog.csdn.net/2301_82005922/article/details/142676234

版权

想要编写一个简单的网页，首先我们需要学习一些关于编写网页所需的标签。

我们知道大部分的网页都有一个清晰的网页布局，那么怎么样才能构建一个清晰的网页结构？

1.结构元素

HTML5中主要文档结构元素
元素	描述
header	设置页面的页眉
nav	构建导航
main	呈现<body>类似应用的主体部分一个文档中不能出现一个以上的<main>标签。
article	表文档，页面，应用程序或网站中一体化的内容
aside	与页面内容相关，有别于主要内容的部分
section	用于对网站或应用程序中页面中的内容进行分块
footer	用于设置页面的页脚
figure,figcaption,hgroup	用于对页面的内容进行分组

1.1header元素

header元素是一种具有引导和导航作用的结构元素，该元素可包含所有通常放到页面头部的内容。基本语法格式为：

<herder>
        <h1 align="center">计算机学院</h1>
        <p align="center">欢迎来到<span style="color: brown;">计算机学院</span></p>
        <!-- 这里可以放你想要放在头部的任何内容 -->
</herder>

1.2 nav元素

nav元素用于定义导航链接，可以将具有导航性的链接都归纳在里面，使页面语义更加明确。

<nav>
       
           <a href="#">个人档案</a>
           <a href="#">我的战斗</a>
           <a href="#">我的收集</a>
           <a href="#">历史战绩</a>
           <a href="#">角色认知</a>
</nav>

1.3 section元素

section元素用于对网页内容进行分块，通常由内容和标题组成。使用时需注意以下三点：

（1）不要将section元素用作设置样式的页面容器，如要设置样式推荐使用<div>

（2）如果article元素，aside元素及nav元素更符合使用条件，建议不要使用section元素

（3）无标题内容的区块不要使用section元素

<section>
    <h1>HTML</h1>
    <p>超文本标记语言</p>
</section>

1.4 footer元素

footer元素用于定义页脚，通常包括网站版权，创作者，文档创造日期及联系信息。

<footer>
    <p>版权所有&COPY;计算机学院</p >
</footer>

1.5 article元素

用于定义独立都区块内容，可独立于页面中其他内容使用。article元素经常用于论坛帖子，新闻博客，用户评论等。section元素可包含article元素，article元素也可包含section元素。section元素是用来对类似信息进行分组，而article元素是用于放置类似与博客新闻等这种相对独立的信息，两个元素之间可以嵌套使用。

一个article元素通常有自己的标题（在header标签内）和脚注。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>article元素</title>
</head>
<body>
    <section>
        <h2 align="center">计算机学院通知</h2>
        
        <article>    
            <header><h3>关于国庆节放假通知</h3>
            <p>日期:2024/9/28</p>
            </header>
            <P><b>又迎来了新的一年国庆节</b>计算机学院在此告知各位放假通知....</P>
            <footer>版权所有&copy;计算机学院</footer>
        </article>
        <hr>
        
        <article>
            <header><h3>关于国庆节回校通知</h3>
            <p>日期:2024/9/28</p>
            </header>
            <P><b>国庆节回校时间</b>计算机学院在此告知各位回校时间....</P>
            <footer>版权所有&copy;计算机学院</footer>
        </article>
    </section>
</body>
</html>

嵌套

<!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>
    <!-- 外层article -->
    <article>    
            <header><h3>关于国庆节放假通知</h3>
            <p>日期:2024/9/28</p>
            </header>
            <P><b>又迎来了新的一年国庆节</b><br>计算机学院在此告知各位放假通知....</P>
        <section>
            <h2>评论</h2>
            <!-- 内层article -->
            <article>
                <header>
                    <h3>发布者：小白</h3>
                    <p>两个小时前</p> 
                </header>
                <p>我想知道假期...</p>
            </article>
            
            <hr>
            <article>
                <header>
                   <h3>发布者：小新</h3>
                   <p>两个小时前</p> 
                </header>
                <p>我也想知道放假...</p>
            </article>
            <!-- 内层article结束 -->
        </section>
            <footer>
                <p>版权所有&copy;计算机学院</p>
            </footer>
    </article>        
    <!-- 外层article结束 -->
</body>
</html>

article元素可以看作是一种特殊的section元素，他比section元素更注重独立性，，即section强调分段和分块，而article强调独立性。一块内容相对独立或完整时用article；如果要把一块内容分成好几块的时候就用section。另外，无标题内容的区块不要使用section元素。

1.6 aside元素

aside元素用来表示当前页面或者新闻的附属信息，可以包含当前页面或主要内容相关的引用，侧边栏，广告，导航条...

aside元素的用法：

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>aside</title>
</head>
<body>
    <aside>
        <nav>
            <h2>主页</h2>
            <ul type=" disc" >
                <li><a href="#">小白</a>5/21</li>
                <li><a href="#">小新</a>6/1</li>
                <li><a href="#">小葵</a></li>
                <li><a href="#">广志</a>请帮我看一下我的文章，谢谢</li>
                <li><a href="#">美伢</a> 恭喜开通博客</li>
            </ul>
        </nav>
    </aside>
    
</body>
</html>

本代码中是一个侧边栏的代码演示，因此放在了aside标签中，又因为这个侧边栏起到了一个导航的作用，所以放在nav元素中。

1.7 网页小作业

关于网页的结构元素我们已经大致了解了，那么我们一起来动手编写一个如下图一样的简单网页吧！！

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <herder>
        <h1 align="center">第五人格</h1>
        <p align="center">欢迎来到<span style="color: brown;"> 第五人格</span></p>
        <!-- 这里可以放你想要放在头部的任何内容 -->
    </herder>
<!-- 导航栏 -->
    <nav style="background-color:rgba(224, 223, 215, 0.479) ">
        <ul type=" disc" >
            <li style="color: cornflowerblue;"><a href="#">个人档案</a></li>
            <li style="color: cornflowerblue;"><a href="#">我的战斗</a></li>
            <li style="color: cornflowerblue;"><a href="#">我的收集</a></li>
            <li style="color: cornflowerblue;"><a href="#">历史战绩</a></li>
            <li style="color: cornflowerblue;"><a href="#">角色认知</a></li>
        </ul>
    </nav>

    <!-- 主要内容 -->
    <main>
        <section>
            <article align="center">
                    <h2>第五人格新角色上线啦！！</h2>
                    <p>求生以及监管新皮肤</p >
                    <p>积极做任务<br>可以参与获取<br>新皮肤的机会</p ><br>
                        <img src="./第五图片.png" alt="第五宣传图" title="第五人格图片">
                    <p>想了解第五人格：<a href="https://id5.163.com/index.html">点击可以了解一下</a></p >
        
        <!--   侧边栏 -->
                <aside>
                    <h3>侧边栏</h3>
                <!--     侧边栏内容，如快速链接，广告等 -->
                    <table border="1" align="center">
                    <tr>
                        <td>皮肤获取</td>
                        <td>点击领取</td>
                    </tr>
                    <tr>
                        <tr>
                            <td>求生者</td>
                            <td><a href="#">点击</a></td>
                        </tr>
                    </tr>
                        <td>监管者</td>
                        <td><a href="#">点击</a></td>
                    </tr>
                    </table>
                    <p>参加活动领取奖品吧</p >
                    姓名:<input type="text"><br>
                    电话号码: <input type="number"><br><br>
                    <input type="submit"  value="提交">
                </aside>
        
            </article>
        </section>
    </main>
        <hr>
        <!-- 页脚 -->
            <footer><p>版权所有&COPY;第五人格官方</p ></footer>
        
        
    
</body>

</html>

到这里你就可以做出一个简单的小网页啦！！