李白静夜思html代码
时间: 2024-05-26 21:08:01 浏览: 26
李白的诗《静夜思》是中国古典文学中的经典之作,下面是它的HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>静夜思</title>
</head>
<body>
<div style="text-align:center;">
<h1>静夜思</h1>
<p>床前明月光,</p>
<p>疑是地上霜。</p>
<p>举头望明月,</p>
<p>低头思故乡。</p>
</div>
</body>
</html>
```
上述代码使用了HTML5标准,包含了文档类型声明、字符集设置、页面标题、内容主体等基本元素。其中,`<div>`元素用于创建一个区块,并通过`style`属性设置了文字居中对齐的样式;`<h1>`和`<p>`元素分别用于创建标题和段落,其中的文字内容即是《静夜思》的原文。
相关问题
html鉴赏古诗词代码,教你如何鉴赏古诗词
很高兴能回答您的问题。以下是一份简单的 HTML 代码,可以用于鉴赏古诗词:
```
<!DOCTYPE html>
<html>
<head>
<title>古诗词鉴赏</title>
<meta charset="UTF-8">
</head>
<body>
<h1>古诗词鉴赏</h1>
<h2>唐诗三百首</h2>
<ul>
<li><a href="http://so.gushiwen.org/view_1.aspx?&page=1&id=2" target="_blank">《静夜思》</a> - 李白</li>
<li><a href="http://so.gushiwen.org/view_1.aspx?&page=1&id=5" target="_blank">《登高》</a> - 杜甫</li>
<li><a href="http://so.gushiwen.org/view_1.aspx?&page=1&id=6" target="_blank">《望岳》</a> - 杜甫</li>
<li><a href="http://so.gushiwen.org/view_1.aspx?&page=1&id=7" target="_blank">《黄鹤楼送孟浩然之广陵》</a> - 李白</li>
</ul>
<h2>宋词精选</h2>
<ul>
<li><a href="http://so.gushiwen.org/view_1.aspx?&page=1&id=360" target="_blank">《声声慢·寻寻觅觅》</a> - 李清照</li>
<li><a href="http://so.gushiwen.org/view_1.aspx?&page=1&id=260" target="_blank">《浣溪沙·一曲新词酒一杯》</a> - 王磐</li>
<li><a href="http://so.gushiwen.org/view_1.aspx?&page=1&id=195" target="_blank">《钗头凤·世情薄》</a> - 李清照</li>
<li><a href="http://so.gushiwen.org/view_1.aspx?&page=1&id=219" target="_blank">《如梦令·昨夜雨疏风骤》</a> - 李清照</li>
</ul>
<p>以上诗词仅供参考,若要更深入地了解古诗词,建议阅读相关书籍或参加相关课程。</p>
</body>
</html>
```
这份代码包含了一个 HTML 页面的基本结构,包括标题、字符集、正文等元素。在正文部分,我们使用了无序列表和超链接来展示一些经典的古诗词作品,其中包括了李白、杜甫、李清照等著名诗人的代表作品。最后,我们添加了一段简短的文字说明,提醒读者这些诗词仅供参考。
当然,这份代码只是一个简单的示例,如果您需要更加丰富和复杂的页面效果,可以添加更多的 HTML 元素和 CSS 样式来实现。希望这份代码能对您有所帮助,谢谢!
在网页DIV中设置一首诗词(要求有诗的标题和作者),在页面空白处使用toggle()函数,单击时诗词正文在三种颜色之间切换。
这里是一个示例代码,可以实现你所需的功能:
HTML代码:
```html
<div id="poem">
<h2>《静夜思》</h2>
<h3>李白</h3>
<p>
床前明月光,<br>
疑是地上霜。<br>
举头望明月,<br>
低头思故乡。
</p>
</div>
<button onclick="toggleColor()">切换颜色</button>
```
JavaScript代码:
```javascript
function toggleColor() {
var poem = document.getElementById("poem");
var colors = ["red", "green", "blue"];
var currentColor = poem.style.color;
var index = colors.indexOf(currentColor);
if (index === -1 || index === 2) {
index = 0;
} else {
index ++;
}
poem.style.color = colors[index];
}
```
在上述代码中,我们首先定义了一个包含诗词的 `div` 元素,并在其中设置了标题和作者,然后在页面上创建了一个按钮,当用户单击按钮时,调用 `toggleColor()` 函数。
在 `toggleColor()` 函数中,我们首先获取诗词 `div` 元素的引用,然后定义了一个包含三种颜色的数组。接着,我们获取当前文本颜色,并根据其在颜色数组中的位置来切换到下一个颜色。最后,我们将新的颜色应用于诗词元素的文本颜色。
注意,为了使 `toggle()` 函数正常工作,需要在 CSS 样式表中定义 `color` 属性。例如:
```css
#poem {
color: red;
}
```
相关推荐
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![ppt](https://img-home.csdnimg.cn/images/20210720083527.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)