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. git 本地推送远程仓库报错: error: failed to push some refs to 'https://github.com/yangtuothink/mxonline.git'

    报错现象 添加远程仓库后 推送代码的时候报错 报错分析 远程代码和本地代码不匹配问题 远程初始仓库的创建有些默认 的 README什么的本地是没有的 需要先同步后再上传 报错解决 git push - ...

  2. Eslint相关知识和配置大全

    ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目.它的目标是提供一个插件化的javascript代码检测工具. 代码检查是一种静态的分析,常用于寻找有问题的模式或 ...

  3. 使用template

    1.放置html片段模板 <script id="tpl" type="text/html"> <p>$title</p>& ...

  4. 【bfs】献给阿尔吉侬的花束

    [题目描述] 阿尔吉侬是一只聪明又慵懒的小白鼠,它最擅长的就是走各种各样的迷宫.今天它要挑战一个非常大的迷宫,研究员们为了鼓励阿尔吉侬尽快到达终点,就在终点放了一块阿尔吉侬最喜欢的奶酪.现在研究员们想 ...

  5. 51nod 1081 子段求和（线段树 | 树状数组 | 前缀和）

    题目链接:子段求和 题意:n个数字序列,m次询问,每次询问从第p个开始L长度序列的子段和为多少. 题解:线段树区间求和 | 树状数组区间求和 线段树: #include <cstdio> ...

  6. nginx常用配置

    nginx.conf配置文件详解 其主要分为几个模块 全局快 从开始到events块之间的一部分内容,其作用域为全局作用域 events块 主要负责Nginx服务器与用户的网络连接 常用设置: 是否开 ...

  7. 深挖JDK动态代理(二)：JDK动态生成后的字节码分析

    接上一篇文章深挖JDK动态代理(一)我们来分析一下JDK生成动态的代理类究竟是个什么东西 1. 将生成的代理类编程一个class文件,通过以下方法 public static void transCl ...

  8. 用foobar进行码率转换 适用与sacd-r转成低码率

    之前下载了不少高清音频,有黑胶转录的也有母带文件.这些高清音频大都是24bit,采样率96khz或者88.2khz或者更高.而我想将部分精品专辑刻录成cd.首先我需要将这些文件转换为16bit,44. ...

  9. react-native中的scrollables

    这是一个点击切换的demo 先看效果 然后看实现的代码 import React from 'react'; import { Text, View } from 'react-native'; im ...

  10. 跟我一起学习vue2（熟悉vue.js）[一]

    由于有angularjs的基础,所以我第一步是在官网:https://cn.vuejs.org/ 上面看了三遍他的理论知识,还有实例. 现在做完了第二步,就是在菜鸟教程:http://www.runo ...