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. hdu 5877 Weak Pair （Treap)

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=5877 题面; Weak Pair Time Limit: 4000/2000 MS (Java/Other ...

  2. bzoj 2429: [HAOI2006]聪明的猴子 (最小生成树）

    链接:https://www.lydsy.com/JudgeOnline/problem.php?id=2429 思路:就是找最小生成树最大的一条边,最小生成树的性质,最后加入的那条边就是最大的 实现 ...

  3. git回滚部分文件到某个版本

    reset 命令只能将整个版本的代码一起回滚,需要使用checkout 命令,可以还原部分文件到某一版本 格式为:git checkout [<branch>] [file] 1.首先使用 ...

  4. eclipse中git推送上传错误 没有足够的数据写入

    Can't connect to any repository: https://github.com/jiashubing/test.git (https://github.com/jiashubi ...

  5. Gulp 新手使用

    Gulp 注意:gulp依赖于nodejs,在安装前要确保已经安装node环境,如为安装查看<windows系统下nodejs安装及环境配置>安装node环境. 1.全局安装 在命令行执行 ...

  6. 「2017 Multi-University Training Contest 1」2017多校训练1

    1001 Add More Zero(签到题) 题目链接 HDU6033 Add More Zero 找出最大的k,使得\(2^m-1\ge 10^k\). 直接取log,-1可以忽略不计. #inc ...

  7. PWM实现ADC和DAC

    一.PWM实现AD 利用普通单片机的2个IO及一个运算放大器即可实现AD转换电路,而且很容易扩展成多通道.其占用资源少,成本低,AD 转换精度可以达到8位甚至更高,因此具有一定的实用价值. 1.1 硬 ...

  8. hdu 3374 String Problem(kmp+最小表示法)

    Problem Description Give you a string with length N, you can generate N strings by left shifts. For ...

  9. uWSGI+Nginx安装、配置

    1.关闭SELINUX: [root@PYTHON27 /]# vim /etc/selinux/config 将SELINUX=enforcing修改为SELINUX=disabled 2.关闭防火 ...

  10. JavaScript深入之作用域链

    前言 在 <javascript深入之执行上下文栈> 中讲到,当javascript代码执行一段可执行代码(executable code)时,会创建对应的执行上下文(execution ...