1.HTML 超链接(链接)

一.HTML 超链接

 HTML中使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

 我们通过使用 <a> 标签在 HTML 中创建链接。有两种使用 <a> 标签的方式：

       (1)通过使用 href 属性 - 创建指向另一个文档的链接。

       (2)通过使用 name 属性 - 创建文档内的书签。

二，HTML 链接语法

       链接的 HTML 代码很简单。它类似这样：<a href="url">超链接文本内容</a>。href 属性规定链接的目标。开始标签和结束标签之间的文字被作为超级链接来显示。

       实例

       <a href="javascript:void(0)">青樱初绽，望君来游珞珈山……</a>

       点击这个超链接会把用户带到 我的首页。

       提示："链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

       三，HTML 链接 - target 属性

       使用 Target 属性，你可以定义被链接的文档在何处显示。

       下面的这行会在新窗口打开文档：

       <a href="javascript:void(0)"  target="_blank">青樱初绽，望君来游珞珈山……</a>


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML超链接标签演示</title>
</head>
<body>
    <h3 align="center"><a href="javascript:void(0)" target="_blank" >青樱初绽，望君来游珞珈山……</a></h3>
    <p align="center">同学，你喜欢篮球吗？</p>
    <p align="center">&nbsp&nbsp&nbsp&nbsp&nbsp----赤木晴子</p>
</body>
</html>



HTML第四耍 超链接标签_javascript

 四，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="javascript:void(0)" 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>


HTML第四耍 超链接标签_超链接_02

另外，还可以利用图片作为超链接的载体，只要把之前作为载体的文本改为一个img标签引用的图片就好了。


<a href="javascript:void(0)"><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="javascript:void(0)"><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>


HTML第四耍 超链接标签_html_03


2.

3.

4.

5.

6.

7.




作者：Glacier