设计个网页,流行音乐排行网页,有五首歌曲,点击歌曲名称会实现跳转,歌曲名称后面有歌手名称,具体代码
时间: 2023-11-06 08:04:04 浏览: 50
流行音乐网页模板
好的,以下是一个简单的流行音乐排行网页的代码示例:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>流行音乐排行</title>
</head>
<body>
<h1>流行音乐排行榜</h1>
<ul>
<li><a href="song1.html">歌曲1 - 歌手1</a></li>
<li><a href="song2.html">歌曲2 - 歌手2</a></li>
<li><a href="song3.html">歌曲3 - 歌手3</a></li>
<li><a href="song4.html">歌曲4 - 歌手4</a></li>
<li><a href="song5.html">歌曲5 - 歌手5</a></li>
</ul>
</body>
</html>
```
以上代码中,`<h1>` 元素用于显示网页标题,`<ul>` 和 `<li>` 元素用于显示歌曲列表,每个列表项中的 `<a>` 元素用于实现跳转,其中 `href` 属性指定了跳转到的页面文件名。
接下来,你需要创建五个 HTML 文件,分别是 `song1.html`、`song2.html`、`song3.html`、`song4.html` 和 `song5.html`。这些文件中可以包含歌曲的相关信息、歌词、音频等内容,这里只提供一个简单的示例代码:
```
<!DOCTYPE html>
<html>
<head>
<title>歌曲1 - 歌手1</title>
</head>
<body>
<h1>歌曲1 - 歌手1</h1>
<p>这里是歌曲1的相关信息和歌词等内容。</p>
<audio controls>
<source src="song1.mp3" type="audio/mpeg">
</audio>
</body>
</html>
```
以上代码中,`<h1>` 元素用于显示歌曲标题,`<p>` 元素用于显示歌曲的相关信息和歌词等内容,`<audio>` 元素用于嵌入音频文件,`controls` 属性用于显示音频播放控制条,`<source>` 元素用于指定音频文件的路径和类型。
当用户点击歌曲名称时,就会跳转到对应的 HTML 文件,从而显示该歌曲的相关信息和内容。
阅读全文