超级链接
超级链接
- 超级链接 a:完成多个页面跳转
- a标签必须有属性href
- 当href的值为空 点击超级链接会刷新页面(向当前地址再次发送请求)
- href的值可以是其他域名网站下方的某一个地址 链接到其他网站
- href的值可以使用相对路径(./当前路径 可以省略 . ./ 上级路径)
- href结合target 当target的值为_blank时会在新的空白页打开
示例代码如下
<!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="">链接到自己</a>
<a href="https://www.baidu.com">百度</a>
<!-- div>a*5 -->
<div><a href="">首页</a>  <a href="">导航</a>  <a href="">收藏</a>  <a href="">关于</a><a
href=""></a></div>
<!-- ul>li*2>a -->
<ul>
<li><a href="">5巨魔芋开花了新</a></li>
<li><a href="">国家公路网将覆盖10万人以上市县</a></li>
</ul>
</body>
</html>
超级链接锚点
- 目标位置要有id（id必须以字母开头）
2. href的值要以#开头 并且内容和id的值一致
3. 当href的值为#时代表回到最顶部
所有锚点都是不需要刷新页面的
示例代码如下
<!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="#s30">到s30</a>
<p id="s1">s1</p>
<p>s2</p>
<p>s3</p>
<p>s4</p>
<p>s5</p>
<p>s6</p>
<p>s7</p>
<p>s8</p>
<p>s9</p>
<p>s10</p>
<p>s11</p>
<p>s12</p>
<p>s13</p>
<p>s14</p>
<p>s15</p>
<p>s16</p>
<p>s17</p>
<p>s18</p>
<p>s19</p>
<p>s20</p>
<p>s21</p>
<p>s22</p>
<p>s23</p>
<p>s24</p>
<p>s25</p>
<p>s26</p>
<p>s27</p>
<p>s28</p>
<p>s29</p>
<p id="s30">s30</p>
<p>s31</p>
<p>s32</p>
<p>s33</p>
<p>s34</p>
<p>s35</p>
<p>s36</p>
<p>s37</p>
<p>s38</p>
<p>s39</p>
<p>s40</p>
<p>s41</p>
<p>s42</p>
<p>s43</p>
<p>s44</p>
<p>s45</p>
<p>s46</p>
<p>s47</p>
<p>s48</p>
<p>s49</p>
<p>s50</p>
<p>s51</p>
<p>s52</p>
<p>s53</p>
<p>s54</p>
<p>s55</p>
<p>s56</p>
<p>s57</p>
<p>s58</p>
<p>s59</p>
<p>s60</p>
<p>s61</p>
<p>s62</p>
<p>s63</p>
<p>s64</p>
<p>s65</p>
<p>s66</p>
<p>s67</p>
<p>s68</p>
<p>s69</p>
<p>s70</p>
<p>s71</p>
<p>s72</p>
<p>s73</p>
<p>s74</p>
<p>s75</p>
<p>s76</p>
<p>s77</p>
<p>s78</p>
<p>s79</p>
<p>s80</p>
<p>s81</p>
<p>s82</p>
<p>s83</p>
<p>s84</p>
<p>s85</p>
<p>s86</p>
<p>s87</p>
<p>s88</p>
<p>s89</p>
<p>s90</p>
<p>s91</p>
<p>s92</p>
<p>s93</p>
<p>s94</p>
<p>s95</p>
<p>s96</p>
<p>s97</p>
<p>s98</p>
<p>s99</p>
<p>s100</p>
<a href="#s30">到s30</a>
<a href="#s1">回到顶部</a>
<a href="#">回到顶部</a>
</body>
</html>
常用标签
1.图片标签
- img 行内元素 没有闭合签
- src 图片地址
可用 网络地址（并不是所有的网络图片都可以直接用，比如有些网站使用了反爬技术）
可用本地地址 - width：300 属性width直接写不需要单位， 但是样式style需要单位
- alt 图片加载失败显示文本信息
示例代码如下
<!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>
<img width="300" src="./img/1.jpeg" alt="">
<img style="width: 300px;"
src="http://contentcms-bj.cdn.bcebos.com/cmspic/8d38c5c2694530ec7895b1cf947be157.jpeg?x-bce-process=image/crop,x_0,y_0,w_2352,h_1282"
alt="">
<img src="img" alt="图片加载失败">
</body>
</html>
2.表格标签
表格标签
-
table 外框
-
th 表头单元格 居中 加粗
-
td 普通单元格
-
boder 边框
-
cellpadding 单元格内补
-
cellsapcing 单元格间距
-
width 占页面大小
-
同一列 多行 使用行合并 rowspan -
同一行 多列 使用列合并 colspan
示例代码如下
<!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>
<table border="5" cellpadding="10" width="60%" align="center">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td rowspan="2">111</td>
<td>wang</td>
<td>20</td>
</tr>
<tr>
<td colspan="2">zhang</td>
</tr>
<tr>
<td colspan="3">
<table border="" style="width: 100%;">
<tr>
<td align="center">中国</td>
<td>香港</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
3.音频标签
- 网页中的声音，F12网络提取音频地址
- audio 音频标签
- src 音频地址 可以使用网络地址，也可以使用本地文件
- controls 显示音频组件 在不同浏览器下外观不一致， 一般都需要充写播放器外观
- autoplay 自动播放属性 在谷歌浏览器下面由于安全策略禁止使用
- h5标准 属性名=属性值 可以省略属性值
示例代码如下
<!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="./audio/丑八怪.mp3"></audio>
<hr>
<audio controls
src="https://audio04.dmhmusic.com/71_53_T10038986645_128_4_1_0_sdk-cpm/cn/0208/M00/E5/61/ChR46119DqeAJGANAD3PrR3qZCk162.mp3?xcode=39566af622d4f5cba6fd42d21c522ad171af037"></audio>
</body>
</html>
4.视频标签
- video 视频标签
- src 视频标签
- controls 视频组件
- autoplay 自动播放 谷歌浏览器禁用
- 一般 声音 audio 支持 mp3 ogg(体积特别小) 常见格式
- 一般 视频 video 支持 mp4 ogv(体积特别小) 等常见格式
示例代码如下（下面视频地址为本地视频地址）
<!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>
</body>
<video width="500" controls src="./video/zhafei.mp4"></video>
<video width="500" controls src="./video/xiugou.mp4"></video>
</html>
5.框架标签
框架属性
src 页面地址：
scrolling= “yes/no” 开启，关闭滚轮
示例代码如下
<!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>
<iframe width="200" height="200" src="https://www.hao123.com" frameborder="0"></iframe>
</body>
</html>
图片圆角属性
- style属性里面 border-radius的值越越大时，边框越圆润，值为50%时，方形图片变为圆形图片，矩形图片变为椭圆形图片。
- 示例代码如下
<!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>
<img src="./img/99.jpeg" alt="" style="width: 300px; border-radius:90px;">
</body>
</html>
总结：
以上为html超级链接和常用标签的使用，欢迎大家沟通讨论。
1271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
