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

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6

前言

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

一直走在路上🏔

🐒设计要求

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

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

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

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

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

6网站页面中要含有表单form3

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相信在很多方面存在着不足乃至错误希望可以得到大家的指正。🙇‍(ง •_•)ง

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6
标签: HTML5