超链接和常用标签
- 超级链接
-
- 超级链接
- 超链接锚点
- 常用标签
-
- 1.图片标签
- 2.表格标签
- 3.音频标签
- 4.视频标签
- 5.框架标签
- 图片圆角属性
超级链接
超级链接
- 超级链接 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="">五巨魔芋开花了</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&t;/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超级链接和常用标签的使用，欢迎大家沟通讨论。