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中的Microdata与历史记录管理详解

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性，它允许开发者在HTML文档中添加更多的语义信息，以便于搜索引擎和浏览器更好地理解页面内容，本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M
阅读更多...
html5的响应式布局的方法示例详解

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》：本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法，简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局，详细内容请阅读本文，希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的
阅读更多...
HTML5表格语法格式详解

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中，表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式，感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中，表格主要通过< tab
阅读更多...
Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》：本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例，但是返回n
阅读更多...
JS+HTML实现在线图片水印添加工具

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的
阅读更多...
前端CSS Grid 布局示例详解

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统，可以同时控制行和列，相比Flex（一维布局），更适合用在整体页面布局或复杂模块结构中,：本文主要介绍前端CSSGri... 目录css Grid 布局详解（通俗易懂版）一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行
阅读更多...
前端下载文件时如何后端返回的文件流一些常见方法

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》：本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子：使用 Blob
阅读更多...
Vuex Actions多参数传递的解决方案

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法（推荐）二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript
阅读更多...
Vue3使用router,params传参为空问题

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》：本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo
阅读更多...
CSS Padding 和 Margin 区别全解析

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性，它们用于控制元素周围的空白区域，本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2