前端第三天之超链接以及音频标签小白进

NEWYORK4

已于 2022-07-20 21:05:36 修改

阅读量405

点赞数 2

文章标签：前端前端框架学习

于 2022-07-20 21:04:58 首次发布

本文链接：https://blog.csdn.net/a2237464569/article/details/125900452

版权

前端第三天之超链接以及音频标签

一.超链接
- 1.超链接介绍
- 2.代码示例
二.超级链接锚点
- 1.介绍
- 2.代码示例
三.音频标签

一.超链接

1.超链接介绍

超级链接 a：完成多个页面跳转
a标签必须有属性href
当href的值为空点击超级链接会刷新页面（向当前地址再次发起请求）
href可以是其他域名网站下方的某一个地址链接到其他网站
href的值可以使用相对路径（./当前路径可以省略 …/上级路径）
href结合target 当target的值为为-blank时会在新的空白页面打开

2.代码示例

<!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>Document</title>
</head>
<body>
    <a href="https://www.baidu.com/"target="blank">百度</a>
     <a href="../day0715/女人.html">女人</a>
     <div><a href="">首页</a>&emsp;<a href="">文档</a>&emsp;<a href="">关于</a></div>
</body>
</html>

二.超级链接锚点

1.介绍

超级链接锚点为滚动效果，点击能将屏幕聚焦到指定位置。

2.代码示例

<!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>Document</title>
</head>
<body>
   
    <a href="#p15">滚动到p15</a>
    <a href="#p35">滚动到p35</a>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
        <p>11</p>
        <p>12</p>
        <p>13</p>
        <p>14</p>
        <p id="p15">15</p>
        <p>16</p>
        <p>17</p>
        <p>18</p>
        <p>19</p>
        <p>20</p>
        <p>21</p>
        <p>22</p>
        <p>23</p>
        <p>24</p>
        <p>25</p>
        <p>26</p>
        <p>27</p>
        <p>28</p>
        <p>29</p>
        <p>30</p>
        <p>31</p>
        <p>32</p>
        <p>33</p>
        <p>34</p>
        <p id="p35">35</p>
        <p>36</p>
        <p>37</p>
        <p>38</p>
        <p>39</p>
        <p>40</p>
        <p>41</p>
        <p>42</p>
        <p>43</p>
        <p>44</p>
        <p>45</p>
        <p>46</p>
        <p>47</p>
        <p>48</p>
        <p>49</p>
        <p>50</p>
        <a href="#">回到最顶部</a>
    
</body>
</html>

三.音频标签

1.介绍以及包含内容

f12网络提取音频地址
audio 音频标签
src 音频地址可以使用
controls 显示音频组件不同浏览器下外观不一致
一般都需要重写播放器外观
autoplay 自动播放属性在谷歌浏览器由于安全策略禁止使用

2.代码示例

<!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>Document</title>
</head>
<body>
    <audio controls src="https://m701.music.126.net/20220720144105/35147bc4e3a387d9237ddf84966502ed/jdyyaac/obj/w5rDlsOJwrLDjj7CmsOj/15854242719/fcdb/876e/8611/81cc4933910b92ad658c9c367fefaa76.m4a"></audio>
</body>
</html>