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>

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>HTML超链接标签演示</title>
  6. </head>
  7. <body>
  8.     <h3 align="center"><a href="https://www.cnblogs.com/wildness-priest/" target="_blank" >青樱初绽，望君来游珞珈山……</a></h3>
  9.     <p align="center">同学，你喜欢篮球吗？</p>
  10.     <p align="center">&nbsp&nbsp&nbsp&nbsp&nbsp----赤木晴子</p>
  11. </body>
  12. </html>

四，HTML 链接 - name 属性
       name 属性规定锚（anchor）的名称。您可以使用 name 属性创建 HTML 页面中的书签。书签不会以任何特殊方式显示，它对读者是不可见的。当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
       命名锚的语法：
       <a name="label">锚（显示在页面上的文本）</a>
       提示1：锚的名称可以是任何你喜欢的名字。
       提示2：您可以使用 id 属性来替代 name 属性，命名锚同样有效。

五，HTML超链接标签演示

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>HTML超链接标签演示</title>
  6. </head>
  7. <body>
  8.  
  9.     <a name=top>顶部位置(锚)</a><!--锚位置 这个位置是叫top的锚留下的，无论那个top在哪，只要一点击，立马回到这个地方，回城有木有-->
  10.     <h4>超链接标签演示</h4>
  11.     <!--
  12.     作用1：连接资源
  13.             当有了href属性才有点击效果
  14.             href属性的值不同，解析的方式也不同
  15.             如果在该值中没有指定任何协议，解析时，是按照默认的协议来解析该值的，默认的协议是file协议
  16.     -->
  17.     <a href="https://www.cnblogs.com/wildness-priest/" target="_blank">网站链接-------博客园</a>
  18.     <hr/>
  19.     <a href="https://img3.doubanio.com/img/musician/large/5545.jpg">图片链接-------贾斯汀.比伯</a>
  20.     <hr/>
  21.     <a href="https://so.gushiwen.org/guwen/bookv_3048.aspx">网站链接--------国学-中庸</a>
  22.     <hr/>
  23.     <a href="mailto:qq.com">邮箱启动链接------</a><!--我去，HTML居然能直接启动程序-->
  24.     <hr/>
  25.     <a href="JavaScript:void(0)" onclick="alert('弹弹弹……')">这是一个弹窗超链接>
  26.     <!--超链接标签
  27.         作用2：定义标记
  28.     -->
  29.     <br/>
  30.     <a name=center>中间位置(锚)</a>
  31.     </hr>
  32.     <br/>
  33.     <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是设置图像的边框-->
  34.     <hr/>
  35.     <br/>
  36.     <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>
  37.     <hr/>
  38.     <a href="#top">回到顶部位置</a>
  39.     <br/>
  40.     <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>
  41.     <br/>
  42.     <a href="#center">回到中间位置</a>
  43. </body>
  44. </html>

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

  1. <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>

六，图片作为超链接的载体演示

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8"/><!--meta标签是一个单标签，注意要在最后写结束标记-->
  5.     <title>HTML超链接演示---用图片作为超链接的载体</title>
  6. </head>
  7. <body>
  8.     <h3 align="center" color="blue">用图片作为超链接的标记</h3>
  9.     <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>
  10.     <p><font face="楷体" color="red" size="+10">单标签记得写最后的结束标志啊！！！</font>虽然有的浏览器不写也能解析，但是HTML往后发展会强制要求必须得有结束标记的</p>
  11.     <p>暂时只知道p标签里可以加对齐属性align，不支持size属性和color属性，想要改变p标签里的文本的字体的大小、颜色、字体类型，还是老老实实用font标签吧</p>
  12. </body>
  13. </html>

2.

3.

4.

5.

6.

7.

HTML第四耍 超链接标签的更多相关文章

  1. html body的属性 格式控制标签 内容容器标签 超链接标签 图片标签 表格

    一.body的属性 <body  bgcolor  页面背景色 background 背景壁纸.图片 text文字颜色 topmargin上边距 leftmargin左边距 rightmargi ...

  2. 前端 HTML body标签相关内容 常用标签 超链接标签 a标签

    超链接标签 <a> 超级链接<a>标记代表一个链接点,是英文anchor(锚点)的简写.它的作用是把当前位置的文本或图片连接到其他的页面.文本或图像,也可以是相同网页上的不同位 ...

  3. 详解HTML的a标签（超链接标签）

    原文 简书原文:https://www.jianshu.com/p/d6a2499db73b 大纲 1.什么是<a>标签 2.<a>标签的几个重要属性 3.a标签的运行机制 4 ...

  4. 超链接标签a样式生效，取消下划线，文字垂直（上下）居中

    直接设置超链接标签a的属性时并不会生效, 需要将display属性改为inline-block, 即style="display:inline-block" 添加标签a时,默认是有 ...

  5. html标签，格式控制标签，内容容器标签，超链接标签，图片标签，表格

    打开DREAMWEAVER,新建HTML,如下图: body的属性: bgcolor 页面背景色 background  背景壁纸.图片 text  文字颜色 topmargin  上边距 leftm ...

  6. 我给女朋友讲编程html系列(3) --html中的超链接标签-a标签 和 框架frame与框架集frameset

    我们浏览网页的时候,当单击某段文字或图片时,就会打开一个新的网页,这里面就使用了超链接. 就比如下图是一个导航类网页,当你单击某个链接就会打开新的网页. 比如,我拿我的qq空间“金河访谈”举例,新建一 ...

  7. AngularJS <a> 超链接标签不起作用？

    问题描述: Angular JS app中,使用超链接标签<a href='location'>click</a> 不起作用. 解决方法: 如果你不巧配置了$locationP ...

  8. 第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单[申明：来源于网络]

    第二天(就业班) html的引入.html常用标签.实体标签.超链接标签.图片标签.表格.框架标签.表单[申明:来源于网络] 第二天(就业班) html的引入.html常用标签.实体标签.超链接标签. ...

  9. img图像标签和超链接标签a

    图像标签语法:<img src="" alt="".../> img属性:src=""  显示图像的URLalt="& ...

随机推荐

  1. 【 HDU 1538 】A Puzzle for Pirates （海盗博弈论）

    BUPT2017 wintertraining(15) #5D HDU 1538 偷懒直接放个果壳的链接了,感觉比网上直接找这题的题解要更正确.易懂. 海盗博弈论 代码 #include <cs ...

  2. NORMA2 - Norma [cdq分治]

    题面 洛谷 你有一个长度为n的序列,定义这个序列中每个区间的价值是 \(Cost(i,j)=Min(Ai...Aj)∗Max(Ai...Aj)∗(j−i+1)Cost(i,j)=Min(A_{i}.. ...

  3. SCOI2016幸运数字（树剖/倍增/点分治+线性基）

    题目链接 loj luogu 题意 求树上路径最大点权异或和 自然想到(维护树上路径)+ (维护最大异或和) 那么有三种方法可以选择 1.树剖+线性基 2.倍增+线性基 3.点分治+线性基 至于线性基 ...

  4. 【题解】 bzoj2462: [BeiJing2011]矩阵模板

    题面戳我 Solution 二维矩阵\(hash\),判断即可 自己YY了一个方法,\(bzoj\)T到飞,(一开始还用的三\(hash\)),交到luogu貌似跑的不慢啊qwq (我是不会告诉你全输 ...

  5. CS academy Binary Flips（dp）

    开学啦,没啥时间写博客..过几天就能又停课啦qwq 做点中等 \(dp\) 题来找找 noip 的感觉 233 题意 原题戳这里. 给你一个 \(n \times m\) 的矩阵 \(A\) ,一开始 ...

  6. NOIP2015斗地主（搜索+模拟+贪心）

    %%%Luan 题面就不说了,和斗地主一样,给一组牌,求最少打几次. 注意一点,数据随机,这样我们瞎搞一搞就可以过,虽然直接贪心可以证明是错的. 枚举方法,每次搜索按照(三顺子>二顺子>普 ...

  7. poj 3279 Fliptile(二进制搜索)

    Farmer John knows that an intellectually satisfied cow is a happy cow who will give more milk. He ha ...

  8. javascript的性能优化tips

    谈到javascript的性能优化,有好多点,比如把script放到离body闭合标签附近,合并多个script标签等等,还有一些代码的性能,for的性能不如while的性能好,用while模拟for ...

  9. java ee wildfly spring 在线程池的线程中注入

    public class RtmpSpyingTests extends AbstractTransactionalJUnit4SpringContextTests { @Autowired Thre ...

  10. c 结构体 & 函数指针模拟实现一个java class(类) 和方法

    闲来无事,纯粹练习. student.h #ifndef STUDENT_H_INCLUDED #define STUDENT_H_INCLUDED #include <memory.h> ...