html网页设计作业成品（一个简单的网页设计HTML5作业）

时间2025-06-18 02:22:14分类IT科技浏览3220

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

前言：

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