0


一个简单的网页设计HTML5作业

前言:

HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进,虽然技术人员在开发过程中可能不会将这些新技术投入应用,但是对于该种技术的新特性,网站开发技术人员是必须要有所了解的。

一直走在路上🏔

🐒设计要求:

(1)网站页面数量不少于4个,文件命名规范,网站结构要求层次清楚,目录结构清晰,代码缩进规整。(4分)

(2)采用HTML结构标记(或div标记)+CSS进行整体布局定位。(5分)

(3)网站首页栏目数量不能少于3个,各栏目要能正确链接到相应栏目子页面,同时各栏目页面也能正确返回到网站首页。(3分)

(4)网站页面标题、图片图标等要符合网站主题。(2分)

(5)网站页面中要有列表。(2分)

(6)网站页面中要含有表单(form)。(3分)

(7)网站内容应具有原创性,内容充实。(7分)

(8)网站整体色系符合视觉习惯,布局合理美观。(4分)

🐒首页.html:

此次我设计的页面为古诗词页面,含有标题,古诗词,推荐作者,@baidu4块内容

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <meta content="width=device-width, initial-scale=1.0" name="viewport">
                <title>
                    古诗词大全
                </title>
                <link href="./style.css" rel="stylesheet" type="text/css">
                </link>
            </meta>
        </meta>
    </head>
    <body>
        <div id="con">
            <div id="a">
                <h3>
                    古诗词大全
                </h3>
            </div>
            <div id="b">
                <div id="d">
                    <br/>
                    <h5>
                        推荐作者
                        <br/>
                        <hr/>
                        <br/>
                    </h5>
                    <div>
                        <img alt="刘禹锡" height="100px" position="absolute" src="images/刘禹锡.jpg" width="80px"/>
                        <img alt="杨万里" height="100px" position="absolute" src="images/杨万里.jpg" width="80px"/>
                        <img alt="柳宗元" height="100px" position="absolute" src="images/柳宗元.jpg" width="80px"/>
                    </div>
                    <div>
                        <img alt="" height="300" src="images/shiren.jpg" width="250">
                        </img>
                    </div>
                </div>
                <div id="f">
                    <br/>
                    <h4>
                        古诗词
                    </h4>
                    <hr/>
                    <li>
                        <a href="first.html">
                            将进酒
                        </a>
                        <p>
                            [作者]李白 [朝代]唐
                            <br/>
                            君不见黄河之水天上来,奔流到海不复回。
                            <br/>
                            君不见高堂明镜悲白发,朝如青丝暮成雪。
                            <br/>
                            ......
                            <br/>
                        </p>
                    </li>
                    <li>
                        <a href="second.html">
                            沁园春·长沙
                        </a>
                        <p>
                            [作者]毛泽东
                            <br/>
                            独立寒秋,湘江北去,橘子洲头。
                            <br/>
                            看万山红遍,层林尽染;漫江碧透,百舸争流。
                            <br/>
                            ......
                            <br/>
                        </p>
                    </li>
                    <li>
                        <a href="thired.html">
                            沁园春·雪
                        </a>
                        <p>
                            [作者]毛泽东
                            <br/>
                            北国风光,千里冰封,万里雪飘。
                            <br/>
                            望长城内外,惟余莽莽;大河上下,顿失滔滔。
                            <br/>
                            ......
                            <br/>
                        </p>
                    </li>
                    <li>
                        <a href="">
                            送元二使安西
                        </a>
                        <p>
                            [作者]王维 [朝代]唐
                            <br/>
                            渭城朝雨浥轻尘,客舍青青柳色新。
                            <br/>
                            劝君更尽一杯酒,西出阳关无故人。
                            <br/>
                        </p>
                    </li>
                </div>
            </div>
            <div id="c">
                <p id="copyright">
                    © Baidu
                    <a href="http://www.baidu.com/duty/">
                        使用百度前必读
                    </a>
                    <a href="http://www.baidu.com">
                        百度首页
                    </a>
                    <a href="/s" style="display:none">
                        站内搜索
                    </a>
                    <a href="http://help.baidu.com/newadd?prod_id=8&category=1">
                        问题反馈
                    </a>
                </p>
            </div>
        </div>
    </body>
</html>

🐒分页.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <meta content="width=device-width, initial-scale=1.0" name="viewport">
                <title>
                    Enovo将进酒
                </title>
            </meta>
        </meta>
        <style typr="text/css">
            hr{
                background-color: #303841;
                border: none;
                height: 1px;
                width: 100%;
            }
            p{
                font-family: 楷书;
            }
        </style>
    </head>
    <body>
        <div align="center" id="container">
            <div class="select">
                <a href="index.html">
                    首页 |
                </a>
                <a href="first.html">
                    将进酒 |
                </a>
                <a href="second.html">
                    沁园春·长沙 |
                </a>
                <a href="thired.html">
                    沁园春·雪
                </a>
                <hr/>
                <a href="oddments.html">
                    附页
                </a>
            </div>
            <hr/>
            <img alt="" height="150px" src="images/qiang.jpg" width="200px">
                <div id="contain">
                    <h1>
                        将进酒
                    </h1>
                    <p>
                        君不见黄河之水天上来,奔流到海不复回。
                    </p>
                    <p>
                        君不见高堂明镜悲白发,朝如青丝暮成雪。
                    </p>
                    <p>
                        人生得意须尽欢,莫使金樽空对月。
                    </p>
                    <p>
                        天生我材必有用,千金散尽还复来。
                    </p>
                    <p>
                        烹羊宰牛且为乐,会须一饮三百杯。
                    </p>
                    <p>
                        岑夫子,丹丘生,将进酒,杯莫停。
                    </p>
                    <p>
                        与君歌一曲,请君为我倾耳听。
                    </p>
                    <p>
                        钟鼓馔玉不足贵,但愿长醉不愿醒。
                    </p>
                    <p>
                        陈王昔时宴平乐,斗酒十千恣欢谑。
                    </p>
                    <p>
                        主人何为言少钱,径须沽取对君酌。
                    </p>
                    <p>
                        五花马、千金裘,呼儿将出换美酒,与尔同销万古愁。
                    </p>
                </div>
            </img>
        </div>
        <hr/>
        <div class="exp">
            <p>
                1.岑夫子:人名
            </p>
            <p>
                2.丹丘生:人名
            </p>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <meta content="width=device-width, initial-scale=1.0" name="viewport">
                <title>
                    Enovo沁园春·长沙
                </title>
            </meta>
        </meta>
        <style typr="text/css">
            hr{
                background-color: #303841;
                border: none;
                height: 1px;
                width: 100%;
            }
            p{
                font-family: 楷书;
            }
        </style>
    </head>
    <body>
        <div align="center" id="container">
            <div id="navi">
                <a href="index.html">
                    首页 |
                </a>
                <a href="first.html">
                    将进酒 |
                </a>
                <a href="second.html">
                    沁园春·长沙 |
                </a>
                <a href="thired.html">
                    沁园春·雪
                </a>
                <hr/>
                <a href="oddments.html">
                    附页
                </a>
            </div>
            <hr/>
            <img alt="" height="150px" src="images/chang.jpg" width="200px">
                <div id="contain">
                    <h1>
                        沁园春·长沙
                    </h1>
                    <p>
                        独立寒秋,湘江北去,橘子洲头。
                    </p>
                    <p>
                        看万山红遍,层林尽染;漫江碧透,百舸争流。
                    </p>
                    <p>
                        鹰击长空,鱼翔浅底,万类霜天竞自由。
                    </p>
                    <p>
                        怅寥廓,问苍茫大地,谁主沉浮?
                    </p>
                    <p>
                        携来百侣曾游,忆往昔峥嵘岁月稠。
                    </p>
                    <p>
                        恰同学少年,风华正茂;书生意气,挥斥方遒。
                    </p>
                    <p>
                        指点江山,激扬文字,粪土当年万户侯。
                    </p>
                    <p>
                        曾记否,到中流击水,浪遏飞舟?
                    </p>
                </div>
            </img>
        </div>
        <hr/>
        <div class="exp">
            <p>
                1.浪遏飞舟:
            </p>
            <p>
                2.万户侯:古代官职
            </p>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <meta content="width=device-width, initial-scale=1.0" name="viewport">
                <title>
                    Enovo沁园春·雪
                </title>
            </meta>
        </meta>
        <style typr="text/css">
            hr{
                background-color: #303841;
                border: none;
                height: 1px;
                width: 100%;
            }
            p{
                font-family: 楷书;
            }
        </style>
    </head>
    <body>
        <div align="center" id="container">
            <div id="navi">
                <a href="index.html">
                    首页 |
                </a>
                <a href="first.html">
                    将进酒 |
                </a>
                <a href="second.html">
                    沁园春·长沙 |
                </a>
                <a href="thired.html">
                    沁园春·雪
                </a>
                <hr/>
                <a href="oddments.html">
                    附页
                </a>
            </div>
            <hr/>
            <img alt="" height="150px" src="images/xue.jpg" width="200px">
                <div id="contain">
                    <h1>
                        沁园春·雪
                    </h1>
                    <p>
                        北国风光,千里冰封,万里雪飘。
                    </p>
                    <p>
                        望长城内外,惟余莽莽;大河上下,顿失滔滔。
                    </p>
                    <p>
                        山舞银蛇,原驰蜡象,欲与天公试比高。
                    </p>
                    <p>
                        须晴日,看红装素裹,分外妖娆。
                    </p>
                    <p>
                        江山如此多娇,引无数英雄竞折腰。
                    </p>
                    <p>
                        惜秦皇汉武,略输文采;唐宗宋祖,稍逊风骚。
                    </p>
                    <p>
                        <p>
                            俱往矣,数风流人物,还看今朝。
                        </p>
                    </p>
                </div>
            </img>
        </div>
        <hr/>
        <div class="exp">
            <p>
                1.今朝:
            </p>
            <p>
                2.唐宗宋祖:皇帝
            </p>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
            <meta content="width=device-width, initial-scale=1" name="viewport">
                <title>
                    附页
                </title>
            </meta>
        </meta>
        <style type="text/css">
            body{
                background: url(images/de.jpg);
                width: 100%;
            }
            hr{
                background-color: #c7cbd1;
                border: none;
                height: 1px;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <form>
            <div align="center" id="container">
                <div id="navi">
                    <a href="index.html">
                        首页 |
                    </a>
                    <a href="first.html">
                        将进酒 |
                    </a>
                    <a href="second.html">
                        沁园春·长沙 |
                    </a>
                    <a href="thired.html">
                        沁园春·雪
                    </a>
                    <hr/>
                    <a href="oddments.html">
                        附页
                    </a>
                </div>
                <hr/>
            </div>
            <hr/>
            <p>
                诗词,
是指以古体诗、近体诗和格律词为代表的中国古代传统诗歌。亦是汉字文化圈的特色之一。
            </p>
            <h4>
                古诗词考试频率:
            </h4>
            <ol>
                <li>
                    唐:
                </li>
                <ol>
                    <li>
                        锦瑟【李商隐】
                    </li>
                    <li>
                        登高【杜甫】
                    </li>
                    <li>
                        雁门太守行【李贺】
                    </li>
                </ol>
                <li>
                    宋:
                </li>
                <ol>
                    <li>
                        念奴娇·赤壁怀古【苏轼】
                    </li>
                    <li>
                        永遇乐·京口北固亭怀古【辛弃疾】
                    </li>
                </ol>
                <hr/>
                <table align="center" border="5" height="30%" width="50%">
                    <tr>
                        <!-- 居中加粗 -->
                        <th>
                            古诗词
                        </th>
                        <th>
                            近五年考试频率
                        </th>
                    </tr>
                    <tr>
                        <td>
                            念奴娇·赤壁怀古【苏轼】
                        </td>
                        <td>
                            4.3星
                        </td>
                    </tr>
                    <tr>
                        <td>
                            登高【杜甫】
                        </td>
                        <td>
                            3.2星
                        </td>
                    </tr>
                </table>
                <hr/>
                <p>
                    <h2>
                        2023高考押题:
                    </h2>
                </p>
                <p>
                    <h3>
                        昵称:
                    </h3>
                    <input name="name" placeholder="请输入您的昵称" size="20" type="text"/>
                </p>
                <p>
                    <h3>
                        古诗词选择:
                    </h3>
                    <select name="古诗词">
                        <option selected="selected" value="A1">
                            锦瑟【李商隐】
                        </option>
                        <option value="A2">
                            念奴娇·赤壁怀古【苏轼】
                        </option>
                        <option value="A3">
                            登高【杜甫】
                        </option>
                    </select>
                    <!-- 单选框 -->
                    <div>
                        <h3>
                            考试几率:
                        </h3>
                        <label>
                            <input name="interset" type="radio" value="J1">
                                30%
                            </input>
                        </label>
                        <label>
                            <input name="interset" type="radio" value="J2">
                                50%
                            </input>
                        </label>
                        <label>
                            <input name="interset" type="radio" value="J3">
                                70%
                            </input>
                        </label>
                        <label>
                            <input name="interset" type="radio" value="J4">
                                90%
                            </input>
                        </label>
                    </div>
                </p>
                <p>
                    考试心得:
                </p>
                <textarea cols="30" id="" name="" rows="10">
                </textarea>
                <p>
                    <input name="确认信息无误" type="radio">
                        我已阅读信息并确认无误
                    </input>
                </p>
                <p>
                    <input name="submit" type="submit" value="提交">
                        <input name="reset" type="reset" value="重置">
                        </input>
                    </input>
                </p>
            </ol>
        </form>
    </body>
</html>

🐒style.css

.exp {
    text-align: left;
}
* {
    margin: 0;
    padding: 0;
}
body {
    font-family: 微软雅黑;
    font-size: 15px;
}
#con {
    margin: 0 auto;
    width: 1000px;
    height: 1500px;
}
#a {
    height: 100px;
    margin-bottom: 10px;
    background: #f2f2f2;
    text-align: center;
    font-size: 25px;
    line-height: 100px;
}
#b {
    margin-bottom: 10px;
    height: 500px;
}
#d {
    float: right;
    width: 390px;
    height: 500px;
    background: white;
    border: 2px solid #eeeeee;
}
#f {
    float: left;
    width: 600px;
    height: 500px;
    background: white;
    border: 2px solid #eeeeee;
}
#c {
    height: 150px;
    background: #f2f2f2;
}
p {
    font-size: 10px;
}
hr {
    color: #f2f2f2;
    background: #f2f2f2;
    height: 1px;
}
#copyright {
    text-align: center;
}

结语:

上述内容就是此次html作业的全部内容了,感谢大家的支持,由于初次学习html相信在很多方面存在着不足乃至错误,希望可以得到大家的指正。🙇‍(ง •_•)ง

标签: html5 html 前端

本文转载自: https://blog.csdn.net/m0_63244368/article/details/125466876
版权归原作者 Enovo_飞鱼 所有, 如有侵权,请联系我们删除。

“一个简单的网页设计HTML5作业”的评论:

还没有评论