超级链接

超级链接 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>&emsp;&emsp;<a href="">导航</a>&emsp;&emsp;<a href="">收藏</a>&emsp;&emsp;<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.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 controlssrc="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超级链接和常用标签的使用，欢迎大家沟通讨论。

html超级链接和常用标签相关推荐

在html语言中超级链接使用什么标签,什么是超链接（详解什么是 HTML 中的超链接标签 a）...
大纲1.什么是标签2.标签的几个重要属性3.a标签的运行机制4.a标签常用的协议5.超链接标签的样式问题--a标签的伪类选择器的书写顺序1.什么是标签标签定义超链接,用于从一张页面链接到另一张页面.元 ...
CSS——超级链接伪类
超级链接就是a标签. 2.1 伪类也就是说,同一个标签,根据用户的某种状态不同,有不同的样式.这就叫做"伪类". 类就是工程师加的,比如div属于box类,很明确,就是属于box ...
html特殊字符PPT,HTML 文档的结构,标签,在 HTML 文档中插入特殊字符,创建超级链接.ppt...
HTML 文档的结构,标签,在 HTML 文档中插入特殊字符,创建超级链接 * 演示例子:TG4-Source文件夹中"超链接"用例 * 提问:(因为前面讲过),链接路径分为哪两类 ...
超级链接代码，html中的a标签,超链详细用法
超级链接代码,html中的a标签,超链详细用法随着互联网的发展,网站的兴起,超链接随处可见.我们使用电脑或手机上网,能够穿梭在各个网页之间,都是通过超链接实现的.超链接就像通向另一个" 世 ...
java swing 链接_JAVA中Jtable标签设置超级链接：基于Java Swing的超链接标签和超链接按钮的实现...
希望在一个标签上设置超级链接,找到了如下的一种方法: 1.要解决的问题基于Java Swing的超链接实现 2.自定义一个超链接标签控件[LinkLabel] 2.1.完整代码如下: public ...
HTML----＞常用标签链接特殊符号
HTEL5+CSS3------>HPH 黑马程序视频目的:能够复刻各种页面,并且能够快速过度到PHP 1.Web标准的构成结构:HTML 没毛的鸟表现:CSS 有毛的鸟行为动作:JS ...
【2022.7.11】HTML基础介绍语法常用标签超文本链接锚点定位
来自2022.7.11 今日学习一.HTML基础介绍 1.网页 1.1什么是网页 1.2什么是HTML 1.3超文本 1.4网页的形成 2.常用浏览器 2.1常用浏览器 2.2浏览器内核 3.web ...
vscode——HTML基本标签A标签超级链接
什么是超级链接: 1通过超级连接建立链接的关系-->从一个页面跳转另一个页面-->a标签是成对出现的--<a></a>有开始有结束-->a标签不加属性: &l ...
在html中超链接_HTML 超级链接详细讲解
超级链接超级链接是网站中使用比较频繁的HTML元素,因为网站的各种页面都是由超级链接串接而成,超级链接完成了页面之间的跳转.超级链接是浏览者和服务器的交互的主要手段,在后面的技术中会逐步深化学习. ...

html超级链接和常用标签

超级链接和常用标签

超级链接

超级链接

超级链接锚点

常用标签

1.图片标签

2.表格标签

3.音频标签

4.视频标签

5.框架标签

图片圆角属性

html超级链接和常用标签相关推荐

最新文章

热门文章