超级链接和常用标签
超级链接超级链接超级链接锚点 常用标签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="">百度</a><!-- div>a*5 --><div><a href="">首页</a>  <a href="">导航</a>  <a href="">收藏</a>  <a href="">关于</a><ahref=""></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./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 controlssrc="/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="" 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超级链接和常用标签的使用，欢迎大家沟通讨论。
如果觉得《html超级链接和常用标签》对你有帮助，请点赞、收藏，并留下你的观点哦！
