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">&nbsp&nbsp&nbsp&nbsp&nbsp----赤木晴子</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>

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. python_sort(key=) 的使用

    """ sort() 函数内含有 key 可以指定相关的函数来作为排序依据 比如这里指定每一项的索引为1 的元素作为排序依据 默认是以第一个作为排序依据 "&q ...

  2. bzoj2212[Poi2011]Tree Rotations [线段树合并]

    题面 bzoj ans = 两子树ans + min(左子在前逆序对数, 右子在前逆序对数) 线段树合并 #include <cstdio> #include <cstdlib> ...

  3. Linux 源码安装 Python3

    下载源码包https://www.python.org/downloads/ 解压(以3.64版本为例)wget https://www.python.org/ftp/python/3.6.4/Pyt ...

  4. 【BZOJ2576】[JSOI2011]序的计数 （动态规划）

    [BZOJ2576][JSOI2011]序的计数 (动态规划) 题面 BZOJ 题解 首先构建一个新的虚拟节点连接所有目标节点,强行将其作为第一个被访问的节点,这样子就解决了图不连通的问题. 除了目标 ...

  5. 洛谷P3740 【[HAOI2014]贴海报】

    (呃...本蒟蒻的第一篇题解qwq)..不废话了讲正题..思路来源于铺地毯(-->传送门)..先算出每一个格子上覆盖的海报并把可见的海报做标记然后算出有多少海报是可见的..但是作为省选题怎么可能 ...

  6. 【bfs】拯救少林神棍(poj1011)

    Description 乔治拿来一组等长的木棒,将它们随机地砍断,使得每一节木棍的长度都不超过50个长度单位.然后他又想把这些木棍恢复到为裁截前的状态,但忘记了初始时有多少木棒以及木棒的初始长度.请你 ...

  7. IO多路复用机制详解

    高性能IO模型浅析 服务器端编程经常需要构造高性能的IO模型,常见的IO模型有四种: (1)同步阻塞IO(Blocking IO):即传统的IO模型. (2)同步非阻塞IO(Non-blocking  ...

  8. 再谈 javascript 数组去重

    前言 数组去重方法老生常谈,既然是常谈,我也来谈谈 双层循环 也许我们首先想到的是使用 indexOf 来循环判断一遍,但在这个方法之前,让我们先看看最原始的方法: var array = [1,1, ...

  9. MyQR库自动为网址生成二维码

    首先安装MyQR库: pip install MyQR #导包 from MyQR import myqr #生成二维码 words=你要为那个网址生成二维码 save_name=保存后的图片名 pi ...

  10. px转换成bp单位的工具函数

    import {Dimensions} from 'react-native' //当前屏幕的高度 const deviceH = Dimensions.get('window').height // ...