首页html写一个古诗词展示静态网页

html写一个古诗词展示静态网页

时间: 2024-10-11 14:10:15 浏览: 49

HTML可以轻松地用来创建静态网页来展示古诗词。下面是一个简单的例子，展示了如何使用HTML5的`<p>`标签来显示一首唐诗《静夜思》： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>古诗词展示</title> <style> .poem { font-family: '宋体', sans-serif; line-height: 1.6; } </style> </head> <body> <div class="poem"> <h1><a href="#">静夜思</a></h1> <p> 床前明月光，疑是地上霜。举头望明月，低头思故乡。 </p> </div> </body> </html> ``` 在这个例子中： - `<!DOCTYPE html>`声明文档类型为HTML5。 - `<html>`标签包含整个页面结构，`lang`属性设定了语言环境。 - `<head>`部分包含了元信息和样式，`.poem`类用于设置诗歌的字体和行高。 - `<body>`是内容区域，其中包含标题(<h1>)和诗句(<p>)。如果你想在现代网站上嵌入更多的交互元素，比如鼠标悬停显示注释，或者点击链接跳转到更多诗词，你可以结合CSS和JavaScript来增强用户体验。不过这已经超出了纯静态HTML的范畴。

阅读全文