本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 网页 > html5 >

收藏
分享到

HTML5超链接的创建方法

html5 来源：互联网 作者：佚名 发布时间：2025-02-17 20:38:19 人浏览
摘要

超链接是网页中最常用的元素，每个网页通过超链接关联在一起，构成一个完整的网站。超链接可以是网页中的任何元素，只有通过超链接定义的对象，才能再单击后进行跳转。 一、创建超链

  超链接是网页中最常用的元素，每个网页通过超链接关联在一起，构成一个完整的网站。超链接可以是网页中的任何元素，只有通过超链接定义的对象，才能再单击后进行跳转。

一、创建超链接

1、用<a></a>标签环绕需要被链接的对象。

1>、基本语法格式：<a href="跳转目标" target="目标窗口弹出方式">文本或图像</a>

        i、href：用于指定链接目标的url（网址）地址，当<a>标签应用href属性时，他就具有了超链接功能。

        ii、target：用于指定链接打开方式，_self为原窗口打开，_blank为新窗口打开。

1

2

3

4

5

6

7

8

9

10

11

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>超链接</title>

</head>

<body>

    <a href="http://www.zcool.com.cn/" target="_self">站酷</a> target="_self"原窗口打开<br/>

    <a href="http://www.baidu.com/" target="_blank">百度</a> target="_blank"新窗口打开<br/>

</body>

</html>

ps:1、超链接标签本身带有默认显示样式。

2、暂时没有链接目标时，href的属性值可定义为“#”，意为空链接。

2>、图像超链接出现边框解决办法：

        创建图像超链接时，在某些浏览中，图像会自动添加边框效果，影响页面美观。去掉边框最直接的方法是将边框设置为0，具体代码如下：

        <a href="#"><img src="图像url"   border="0"/></a>

二、锚点链接

        通过创建锚点链接，用户能够直接跳到指定位置的内容，提高信息检索速度。

1、基本语法格式：<a href="#id名">内容</a>

2、href="#id名"，只要单击创建了超链接的对象就会跳到指定位置。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>锚点链接</title>

</head>

<body>

    <ul>

        <li><a href="#one">李四光</a></li>

        <li><a href="#two">袁隆平</a></li>

        <li><a href="#three">屠呦呦</a></li>

        <li><a href="#four">南仁东</a></li>

        <li><a href="#five">孙家栋</a></li>

    </ul>

    <h3 id="one">李四光</h3>

    <p>李四光1889年出生于湖北黄冈，是中国地质力学的创立者、现代地球科学和地质工作的奠基人。</p>

    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

    <h3 id="two">袁隆平</h3>

    <p>袁隆平1930年出生于北京，被誉为“世界杂交水稻之父”。发明了“三系法”籼型杂交水稻，“两系法”杂交水稻。</p>

    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

    <h3 id="three">屠呦呦</h3>

    <p>屠呦呦1930年出生于浙江宁波，是中国第一位获得诺贝尔科学奖的本土科学家，也是第一位获得诺贝尔医学奖的华人科学家。</p>

    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

    <h3 id="four">南仁东</h3>

    <p>南仁东1945年出生于吉林辽源，被誉为中国“天眼之父”。担任FAST工程首席科学家兼总工程师。</p>

    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

    <h3 id="five">孙家栋</h3>

    <p>孙家栋1929年出生于辽宁瓦房店，被誉为中国航天的“大总师”，“中国卫星之父”。</p>

</body>

</html>

三、链接伪类控制超链接

1、超链接的四种不同状态：

超链接标签<a>的伪类 描述
a:link{CSS样式规则；} 超链接默认样式
a:visited{CSS样式规则；} 超链接被访问之后的样式
a:hover{CSS样式规则；} 鼠标指针经过、悬停时超链接的样式
a:active{CSS样式规则；} 鼠标单击不放时超链接的样式

ps：4种伪类顺序也需按上表排列，否则定义样式可能不起作用。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>链接伪类选择器</title>

    <style type="text/css">

        a{margin-right: :20px;}/*设置右边距为20px*/

        a:link,a:visited{

            color:#000;        /*设置默认和被访问之后的颜色为黑色*/

            text-decoration:none;   /*设置<a>自带下划线效果为无*/

        }

        a:hover{

            color:#093;       /*默认样式颜色为绿色*/

            text-decoration: underline; /*设置鼠标指针悬停时显示下划线*/

        }

        a:active{color:#FC0;}    /*设置鼠标单击不放时颜色为黄色*/

    </style>

</head>

<body>

    <a href="#">公司首页</a>

    <a href="#">公司简介</a>

    <a href="#">产品介绍</a>

    <a href="#">联系我们</a>

</body>

</html>

版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章

  • CSS弹性布局常用设置方式

    CSS弹性布局常用设置方式
    一、单位元素 vm 1vm 为视口的1% vh 视口高的1% vmin 参照长边 vmax 参照长边 rem 等比缩放 需要设置最外层盒子html设置vw 根字号html的--- font-- 1v
  • 使用CSS3实现平滑的过渡动画效果
    要使用CSS3实现平滑的过渡动画，可以按照以下步骤进行： 1：定义初始状态：首先，为元素设置其初始样式。这通常是在CSS中直接定义的样
  • HTML5超链接的创建方法
    超链接是网页中最常用的元素，每个网页通过超链接关联在一起，构成一个完整的网站。超链接可以是网页中的任何元素，只有通过超链接

  • HTML5超链接和图片基础用法介绍

    HTML5超链接和图片基础用法介绍
    一、HTML5 超链接（链接） 超链接可以是一个文本，也可以是一幅图像，您可以点击这些内容来跳转到新的页面或新的文档或者当前文档中的

  • HTML5 Input日期选择器的介绍

    HTML5 Input日期选择器的介绍
    HTML5 Input DatePicker 对象 1 Input Date 对象表示 HTML `input type=datetime` 元素。 是 HTML5 中的新对象。 访问 Input Date 对象 1 var x = document.getElementById(
  • HTML5 details标签的基础知识
    定义和用法 details标签规定用户可以根据需要打开和关闭的其他详细信息。 details标签通常用于创建用户可以打开和关闭的交互式小部件。默

  • HTML5使用details标签：展开/收缩信息

    HTML5使用details标签：展开/收缩信息
    details 标签提供了一种替代JavaScript的方法，它主要是提供了一个展开/收缩区域。details 标签中可以使用 summary 标签从属于details 标签，单击
  • HTML5实现本地摄像头拍照与照片上传的方法介绍
    HTML5通过input type=file标签及其capture属性，允许网页调用本地摄像头进行拍照，提升了用户交互体验。本文将详细介绍如何使用HTML5和JavaScri

  • HTML5元素定位的介绍

    HTML5元素定位的介绍
    1.元素定位 为了实现网页整体布局，我们先要知道，一个元素，是如何定位到页面上的某个位置的，这就是元素定位。 元素定位有四种，可

  • html5浏览器中实现高德地图定位功能(推荐)

    html5浏览器中实现高德地图定位功能(推荐)
    HTML5是当前Web开发中最常用的技术之一，而地图应用又是其中一个非常常见的需求。高德地图是国内最受欢迎的地图服务提供商之一，他们提
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计