4、使用超链接标记<a>、图片标签<img>、多媒体标签<embed>、以及表格标签<table>编写,实现效果图如下。具体要求为: (1)标题“古诗鉴赏”居中,为一级标题。 (2)表格宽度280px,高度120px,居中,边框宽度3px,颜色为黑色;单元格宽度130px,高度50px,文字居中。 (3)在页面4-1中的表格里点击“春晓”对应的“详细信息1”超链接到页面4-2。 (4)点击页面4-1中“图片”对应的“详细信息2”超链接到页面4-3。图片边框为6像素,宽度为400像素,图片加载失败时显示“图片加载失败!!!”。 (5)点击页面4-1中“音乐”对应的“详细信息3”超链接到页面4-4。播放天空之城的音乐。
时间: 2024-02-19 17:57:16 浏览: 117
抱歉,我作为一名语言模型无法直接呈现HTML代码,但我可以提供如下代码示例供您参考:
页面4-1:
```html
<!DOCTYPE html>
<html>
<head>
<title>古诗鉴赏</title>
<meta charset="UTF-8">
<style>
h1 {
text-align: center;
}
table {
margin: 0 auto;
width: 280px;
height: 120px;
border: 3px solid black;
border-collapse: collapse;
}
td {
width: 130px;
height: 50px;
text-align: center;
border: 1px solid black;
}
img {
border: 6px solid;
width: 400px;
}
</style>
</head>
<body>
<h1>古诗鉴赏</h1>
<table>
<tr>
<td>标题</td>
<td><a href="4-2.html">春晓</a></td>
</tr>
<tr>
<td>图片</td>
<td><a href="4-3.html">详细信息2</a></td>
</tr>
<tr>
<td>音乐</td>
<td><a href="4-4.html">详细信息3</a></td>
</tr>
</table>
</body>
</html>
```
页面4-2:
```html
<!DOCTYPE html>
<html>
<head>
<title>春晓</title>
<meta charset="UTF-8">
</head>
<body>
<h1>春晓</h1>
<p>春眠不觉晓,</p>
<p>处处闻啼鸟。</p>
<p>夜来风雨声,</p>
<p>花落知多少。</p>
</body>
</html>
```
页面4-3:
```html
<!DOCTYPE html>
<html>
<head>
<title>详细信息2</title>
<meta charset="UTF-8">
<style>
img {
border: 6px solid;
width: 400px;
}
</style>
</head>
<body>
<h1>详细信息2</h1>
<img src="image.jpg" alt="图片加载失败!!!">
</body>
</html>
```
页面4-4:
```html
<!DOCTYPE html>
<html>
<head>
<title>详细信息3</title>
<meta charset="UTF-8">
<style>
audio {
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<h1>详细信息3</h1>
<audio src="sky.mp3" controls="controls">
您的浏览器不支持audio标签,请更换浏览器。
</audio>
</body>
</html>
```
以上代码示例中,表格标签使用了`<table>`,单元格标签使用了`<td>`,超链接标签使用了`<a>`,图片标签使用了`<img>`,多媒体标签使用了`<audio>`,同时还使用了CSS样式表来对页面进行美化。请您根据具体需求进行调整。
阅读全文