1.HTML 超链接(链接)
一.HTML 超链接
HTML中使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
我们通过使用 <a> 标签在 HTML 中创建链接。有两种使用 <a> 标签的方式：
(1)通过使用 href 属性 - 创建指向另一个文档的链接。
(2)通过使用 name 属性 - 创建文档内的书签。
二，HTML 链接语法
链接的 HTML 代码很简单。它类似这样：<a href="url">超链接文本内容</a>。href 属性规定链接的目标。开始标签和结束标签之间的文字被作为超级链接来显示。
实例
<a href="https://www.cnblogs.com/wildness-priest/">青樱初绽，望君来游珞珈山……</a>
点击这个超链接会把用户带到 我的首页。
提示："链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
三，HTML 链接 - target 属性
使用 Target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
<a href="https://www.cnblogs.com/wildness-priest/" target="_blank">青樱初绽，望君来游珞珈山……</a>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML超链接标签演示</title>
</head>
<body>
<h3 align="center"><a href="https://www.cnblogs.com/wildness-priest/" target="_blank" >青樱初绽，望君来游珞珈山……</a></h3>
<p align="center">同学，你喜欢篮球吗？</p>
<p align="center">     ----赤木晴子</p>
</body>
</html>
四，HTML 链接 - name 属性
name 属性规定锚（anchor）的名称。您可以使用 name 属性创建 HTML 页面中的书签。书签不会以任何特殊方式显示，它对读者是不可见的。当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
命名锚的语法：
<a name="label">锚（显示在页面上的文本）</a>
提示1：锚的名称可以是任何你喜欢的名字。
提示2：您可以使用 id 属性来替代 name 属性，命名锚同样有效。
五，HTML超链接标签演示
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML超链接标签演示</title>
</head>
<body> <a name=top>顶部位置(锚)</a><!--锚位置 这个位置是叫top的锚留下的，无论那个top在哪，只要一点击，立马回到这个地方，回城有木有-->
<h4>超链接标签演示</h4>
<!--
作用1：连接资源
当有了href属性才有点击效果
href属性的值不同，解析的方式也不同
如果在该值中没有指定任何协议，解析时，是按照默认的协议来解析该值的，默认的协议是file协议
-->
<a href="https://www.cnblogs.com/wildness-priest/" target="_blank">网站链接-------博客园</a>
<hr/>
<a href="https://img3.doubanio.com/img/musician/large/5545.jpg">图片链接-------贾斯汀.比伯</a>
<hr/>
<a href="https://so.gushiwen.org/guwen/bookv_3048.aspx">网站链接--------国学-中庸</a>
<hr/>
<a href="mailto:qq.com">邮箱启动链接------</a><!--我去，HTML居然能直接启动程序-->
<hr/>
<a href="JavaScript:void(0)" onclick="alert('弹弹弹……')">这是一个弹窗超链接>
<!--超链接标签
作用2：定义标记
-->
<br/>
<a name=center>中间位置(锚)</a>
</hr>
<br/>
<img src="https://www.cnblogs.com/images/cnblogs_com/wildness-priest/1440160/t_alone-cold-footprints-897014.jpg" height="280" width="400" border=10></a><!--border是设置图像的边框-->
<hr/>
<br/>
<img src="https://www.cnblogs.com/images/cnblogs_com/wildness-priest/1440160/t_alone-cold-footprints-897014.jpg" height="280" width="400" border=10></a>
<hr/>
<a href="#top">回到顶部位置</a>
<br/>
<img src="https://www.cnblogs.com/images/cnblogs_com/wildness-priest/1440160/t_alone-cold-footprints-897014.jpg" height="280" width="400" border=10></a>
<br/>
<a href="#center">回到中间位置</a>
</body>
</html>
另外，还可以利用图片作为超链接的载体，只要把之前作为载体的文本改为一个img标签引用的图片就好了。
<a href="https://www.cnblogs.com/wildness-priest/"><img src="https://www.cnblogs.com/images/cnblogs_com/wildness-priest/1440160/t_alone-cold-footprints-897014.jpg" width="400" height="280" boeder="10"/></a>
六，图片作为超链接的载体演示
<!doctype html>
<html>
<head>
<meta charset="utf-8"/><!--meta标签是一个单标签，注意要在最后写结束标记-->
<title>HTML超链接演示---用图片作为超链接的载体</title>
</head>
<body>
<h3 align="center" color="blue">用图片作为超链接的标记</h3>
<a href="https://www.cnblogs.com/wildness-priest/"><img src="https://www.cnblogs.com/images/cnblogs_com/wildness-priest/1440160/t_alone-cold-footprints-897014.jpg" width="400" height="280" boeder="10"/></a>
<p><font face="楷体" color="red" size="+10">单标签记得写最后的结束标志啊！！！</font>虽然有的浏览器不写也能解析，但是HTML往后发展会强制要求必须得有结束标记的</p>
<p>暂时只知道p标签里可以加对齐属性align，不支持size属性和color属性，想要改变p标签里的文本的字体的大小、颜色、字体类型，还是老老实实用font标签吧</p>
</body>
</html>