HTML古诗词

2023-10-31 00:59
文章标签 html frontend 古诗词

本文主要是介绍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;
}

这篇关于HTML古诗词的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/311715。

相关文章

HTML5 中的＜button＞标签用法和特征

HTML5 中的＜button＞标签用法和特征

《HTML5中的＜button＞标签用法和特征》在HTML5中，button标签用于定义一个可点击的按钮，它是创建交互式网页的重要元素之一，本文将深入解析HTML5中的button标签，详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled
阅读更多...
HTML5实现的移动端购物车自动结算功能示例代码

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.
阅读更多...
基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码，该代码实现了图片的旋转（90度和180度）以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中，
阅读更多...
CSS place-items: center解析与用法详解

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性，用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性，用于同时控制 网格(Grid) 和 弹性盒(F
阅读更多...
CSS实现元素撑满剩余空间的五种方法

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中，我们经常需要让某个元素占据容器的剩余空间，本文将介绍5种不同的方法来实现这个需求，并分析各种方法的优缺点，感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中，我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求
阅读更多...
CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

《CSSAnchorPositioning重新定义锚点定位的时代来临(最新推荐)》CSSAnchorPositioning是一项仍在草案中的新特性，由Chrome125开始提供原生支持需... 目录 css Anchor Positioning：重新定义「锚定定位」的时代来了！ 什么是 Anchor Pos
阅读更多...
CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

《CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比》CSS中的position属性用于控制元素的定位方式，不同的定位方式会影响元素在页面中的布... css 中的 position 属性用于控制元素的定位方式，不同的定位方式会影响元素在页面中的布局和层叠关
阅读更多...
HTML5 getUserMedia API网页录音实现指南示例小结

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API，结合WebAudioAPI，实现网页录音功能,从获取音频流到处理和保存录音，整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3
阅读更多...
全面解析HTML5中Checkbox标签

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一，通过合理使用其属性和样式自定义方法，可以为用户提供丰富多样的交互体验，这篇文章给大家介绍HTML5中C... 在html5中，Checkbox（复选框）是一种常用的表单元素，允许用户在一组选项中选择多个项目。本
阅读更多...
HTML5 搜索框Search Box详解

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具，能够有效提升用户体验,通过结合自动补全功能和适当的样式，可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框（Search Box）详解搜索框是一个用于输入查询内容的控件，通常用于网站或应用程
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2