一个简单的网页设计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;
}