Web前端基础案例——跳转

1.掌握知识点：

（1）音频标签：支持MP3，Wav，Ogg

<audio src="./music.mp3" controls></audio>

（2）视频标签：支持MP4，WebM，Ogg

<video src="./music.mp4" controls></video>

属性名	功能
src	音频/视频路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

(3)链接标签：

<a href="https://www.baidu.com" target="_blank"></a>

href属性：

跳转网页网站

target属性：

_self	默认值，在当前窗口中跳转（覆盖原网页）
_blank	在新窗口中跳转（保留原网页）

2.案例效果与HTML代码：

（1）index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
</head>
<body>
    <h1>今日搜索热词</h1>
    <hr>
    <h2>1.阿卡贝拉</h2>
    <p>阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例：<a href="./one.html" target="_blank">阿卡贝拉《千与千寻》</a></p>
    <h2>2.翻唱</h2>
    <p>“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带来不一样的风格。视频示例：<a href="./two.html" target="_blank">有一种悲伤（翻唱）-《A Kind of Sorrow》</a></p>
</body>
</html>

(2)one.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>one</title>
</head>
<body>
    <h1>阿卡贝拉《千与千寻》</h1>
    <hr>
    <h2>音频</h2>
    <audio src="../../image/music.mp3" controls></audio>
</body>
</html>

（3）two.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>two</title>
</head>
<body>
    <h1>有一种悲伤（翻唱）-《A Kind of Sorrow》</h1>
    <hr>
    <h2>视频</h2>
    <video src="../../image/video.mp4" controls></video>
</body>
</html>

Web前端基础案例——跳转

1.掌握知识点：

2.案例效果与HTML代码：

猜你喜欢