HTML古诗词

本文主要是介绍HTML古诗词，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言：
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：
此次我设计的页面为古诗词页面，含有标题，古诗词，推荐作者，@baidu 4块内容
网页首页

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>古诗词大全</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head><body><div class="a1"><div class="a2"><h3>古诗词大全</h3></div><div class="a3"><div class="a4"><h5>推荐作者<br><br><hr><br></h5><div class="aa"><table cellpadding=5px><tr ><td><a href="https://baike.baidu.com/item/%E5%88%98%E7%A6%B9%E9%94%A1/296467?fromModule=lemma_search-box"target="_blank"><img src="img/lyx.jpg"height=100px width=80px position="absolute" title="刘禹锡"></a></td><td><a href="https://baike.baidu.com/item/%E6%9D%A8%E4%B8%87%E9%87%8C/35772?fromModule=lemma_search-box"target="_blank"><img src="img/ywl.jfif"height=100px width=80px position="absolute" title="杨万里"></a></td><td><a href="https://baike.baidu.com/item/%E6%9F%B3%E5%AE%97%E5%85%83/127462?fromModule=lemma_search-box"target="_blank"><img src="img/lzy.jfif"=100px width=80px position="absolute" title="柳宗元"></a> </td></tr><tr><th><b>刘禹锡</b></th><th><b>杨万里</b></th><th><b>柳宗元</b></th></tr><tr ><td><a href="https://baike.baidu.com/item/%E5%B2%B3%E9%A3%9E/127844?fromModule=lemma_search-box"target="_blank"><img src="img/yf.jpg"height=100px width=80px position="absolute" title="岳飞"></a> </td><td><a href="https://baike.baidu.com/item/%E6%9D%8E%E7%99%BD/1043?fromModule=lemma_search-box"target="_blank"><img src="img/lb.jpg"height=100px width=80px position="absolute" title="李白"></a></td><td><a href="https://baike.baidu.com/item/%E7%8E%8B%E7%BB%B4/37558?fromModule=lemma_search-box"target="_blank"><img src="img/ww.jpg"=100px width=80px position="absolute" title="王维"></a> </td></tr><tr><th><b>岳飞</b></th><th><b>李白</b></th><th><b>王维</b></th></tr><tr ><td><a href="https://baike.baidu.com/link?url=XJEzaSD72T2O-IA3BzX4zM6ELKN8zsPtieTZPJ8qqaFy_TptJnMIIJfEXazggAIE9mUETHmUZkMOPEqNqr1728LAEwGfhU7Xqs9CHnBJ_B7"target="_blank"> <img src="img/sw.jpg"height=100px width=80px position="absolute" title="苏洵"></a></td><td><a href="https://baike.baidu.com/item/%E8%8B%8F%E8%BD%BC/53906?fromModule=lemma_search-box"target="_blank"><img src="img/ssh.jpg"height=100px width=80px position="absolute" title="苏轼"></a></td><td> <a href="https://baike.baidu.com/item/%E8%8B%8F%E8%BE%99?fromModule=lemma_search-box"target="_blank"><img src="img/szh.jpg"=100px width=80px position="absolute" title="苏辙"></a></td></tr><tr><th><b>苏洵</b></th><th><b>苏轼</b></th><th><b>苏辙</b></th></tr></table>	  </div></div><div class="a5"><h4>古诗词</h4><hr><li><a href="qjj.html">将进酒  </a><p>[作者]李白【朝代】唐<br>君不见黄河之水天上开,奔流到海不复回。<br>君不见高堂明镜悲白发,朝如青丝暮成雪。<br>. . .<br></p>  </li><li><a href="changsha.html">沁园春 &middot; 长沙</a><p>[作者]毛泽东<br>独立寒秋，湘江北去，橘子洲头。<br>看万山红遍，层林尽染；漫江碧透，百舸争流。<br>. . .<br></p>  </li><li><a href="xue.html">沁园春 &middot; 雪</a><p>[作者]毛泽东<br>北国风光，千里冰封，万里雪飘。<br>望长城内外，惟余莽莽；大河上下，顿失滔滔。<br>. . .<br></p></li><li><a href="songeryuan.html">送二元使安西</a><p>[作者]王维[朝代]唐<br>渭城朝雨浥轻尘，客舍青青柳色新。<br>劝君更进一杯酒，西出阳关无故人。<br>. . .</p></li></div></div><div class="a6"><p>&copy; Baidu | <a href="https://www.baidu.com/duty"target="_blank">使用百度前必读 | </a><a href="https://www.baidu.com"target="_blank">百度首页 | </a><a href="/s"style="display: none"target="_blank">站内搜索 | </a><a href="http://help.baidu.com/newadd?prod_id=8&category=1"target="_blank">问题反馈</a></p></div>	</div>
</body>
</html>

分页.html：
将进酒

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>将进酒</title>
</head><body><div align="center"><div><a href="index.html">首页</a> | <a href="changsha.html">沁园春&middot;长沙</a> | <a href="xue.html">沁园春&middot;雪</a> | <a href="songeryuan.html">送二元使安西</a><hr></div><img src="img/qjj.jpg"title="将进酒"width="200px"height="150px"><font face="楷体"><h1>将进酒</h1><p> 君不见黄河之水天上来，奔流到海不复回。</p><p> 君不见高堂明镜悲白发，朝如青丝暮成雪。</p><p>人生得意须尽欢，莫使金樽空对月。</p><p>天生我材必有用，千金散尽还复来。 </p><p>烹羊宰牛且为乐，会须一饮三百杯。 </p><p> 岑夫子，丹丘生，将进酒，杯莫停。</p><p>与君歌一曲，请君为我倾耳听。</p><p>钟鼓馔玉不足贵，但愿长醉不愿醒。</p><p>陈王昔时宴平乐，斗酒十千恣欢谑。</p><p>主人何为言少钱，径须沽取对君酌。 </p><p>五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。</p></font><hr></div><div><p>1.岑夫子:人名</p><p>2.丹丘生:人名</p>	</div>
</body>
</html>

沁园春长沙

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>沁园春&middot;长沙</title>
</head><body><div align="center"><div><a href="index.html">首页</a> | <a href="qjj.html">将进酒</a> | <a href="xue.html">沁园春&middot;雪</a> | <a href="songeryuan.html">送二元使安西</a><hr></div><img src="img/changsha.jpg"title="沁园春&middot;长沙"width="200px"height="150px"><font face="楷体"><h1>沁园春&middot;长沙</h1><p>独立寒秋，湘江北去，橘子洲头。</p><p>看万山红遍，层林尽染；漫江碧透，百舸争流。</p><p>鹰击长空，鱼翔浅底，万类霜天竞自由。</p><p>怅寥廓，问苍茫大地，谁主沉浮？</p><p>携来百侣曾游，忆往昔峥嵘岁月稠。</p><p>恰同学少年，风华正茂；书生意气，挥斥方遒。</p><p>指点江山，激扬文字，粪土当年万户侯。</p><p>曾记否，到中流击水，浪遏飞舟?</p></font><hr></div><div><p>1.舸：大船</p><p>2.万户侯:古代官职</p>	</div>
</body>
</html>

沁园春雪

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>沁园春&middot;雪</title>
</head><body><div align="center"><div><a href="index.html">首页</a> | <a href="qjj.html">将进酒</a> | <a href="#">沁园春&middot;长沙</a> | <a href="songeryuan.html">送二元使安西</a><hr></div><img src="img/xue.jpg"title="沁园春&middot;长沙"width="200px"height="150px"><font face="楷体"><h1>沁园春&middot;雪</h1><p>北国风光，千里冰封，万里雪飘。</p><p>望长城内外，惟余莽莽；大河上下，顿失滔滔。</p><p>山舞银蛇，原驰蜡象，欲与天公试比高。</p><p>须晴日，看红装素裹，分外妖娆。</p><p>江山如此多娇，引无数英雄竞折腰。</p><p>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</p><p>俱往矣，数风流人物，还看今朝。</p></font><hr></div><div><p>1.今朝:</p><p>2.唐宗宋祖:皇帝</p>	</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head><body>
</body>
</html>

送元二使安西

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>沁园春&middot;雪</title>
</head><body><div align="center"><div><a href="index.html">首页</a> | <a href="qjj.html">将进酒</a> | <a href="#">沁园春&middot;长沙</a> | <a href="songeryuan.html">送二元使安西</a><hr></div><img src="img/xue.jpg"title="沁园春&middot;长沙"width="200px"height="150px"><font face="楷体"><h1>沁园春&middot;雪</h1><p>北国风光，千里冰封，万里雪飘。</p><p>望长城内外，惟余莽莽；大河上下，顿失滔滔。</p><p>山舞银蛇，原驰蜡象，欲与天公试比高。</p><p>须晴日，看红装素裹，分外妖娆。</p><p>江山如此多娇，引无数英雄竞折腰。</p><p>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</p><p>俱往矣，数风流人物，还看今朝。</p></font><hr></div><div><p>1.今朝:</p><p>2.唐宗宋祖:皇帝</p>	</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head><body>
</body>
</html>

style.css

body {font-family: 微软雅黑;font-size: 15px;
}
.a1{margin:0 auto;width: 1000px;height: 1500px;
}
.a2{margin-bottom:10px; height: 100px;background-color: #f2f2f2;font-size: 25px;line-height: 100px;text-align: center;
}
.a3{margin-bottom: 10px;height: 700px;
}
.a4{float: right;width: 390px;height:700px;background: white;border: 2px solid #eeeeee;
}
.a5{float: left;width: 600px;height: 700px;background: white;border: 2px solid #eeeeee;
}
.a6{height: 150px;background: #f2f2f2;text-align: center;font-size: 15px;
}hr{color: #f2f2f2;background: #f2f2f2;height: 1px;
}