html 链接 a

最新推荐文章于 2024-05-17 17:38:00 发布

小步教程

最新推荐文章于 2024-05-17 17:38:00 发布

阅读量273

点赞数

分类专栏： HTML教程文章标签： html 前端

本文链接：https://blog.csdn.net/quickreg201112/article/details/132613268

版权

HTML教程专栏收录该内容

27 篇文章 0 订阅

订阅专栏

html 链接 a | 小步教程

html 链接 a

鼠标点击链接，会打开链接指定的新页面。

1 基本语法

<a href="页面地址" target="目标窗口位置">链接内容</a>

点击链接内容，在target指定的位置打开href指定的页面。

示例

<a href="https://www.xiaobeach.com">小步教程首页</a>

2 href属性

a标签的href属性的页面地址路径与img标签的src属性的地址路径规则一样。

包括3种路径。

1）绝对路径：以http://或https://开头的路径

2）相对当前路径：不以斜杠或http(s)://开头的路径

3）相对根路径：以斜杠开头的路径。

1）绝对路径

直接以http或https开头的路径，也称完整路径。

例1：链接到网站首页

<a href="https://www.xiaobuteach.com">小步教程首页</a>

例2：链接到网站指定页面

<a href="https://www.xiaobuteach.com/html/tutorial/function.html">小步教程HTML教程</a>

2） 相对当前路径

不以斜杠/与http(s)开头的路径，表示当前网站的网页，相对当前html文件的路径。

3 target属性

target属性常用值	说明
_self	默认值。表示在当前窗口打开新页面。
_blank	表示在新窗口打开新页面。

示例

<a href="https://www.xiaobuteach.com"  target="_blank">小步教程首页</a>

建议

为保证用户体验，尽量少的使用_blank；弹出太多新窗口会让用户很烦。

小技巧

Chrome浏览器，即使链接设置target属性为_self，也可以通过快捷键选择打开窗口。

Ctrl+点击链接：新的TAB页打开链接，并且页面不跳转。非常适用。搜索时，连续打开多个页面。

Shift+点击链接：新的窗口打开链接。

4 链接内容的类型

链接内容的类型包括：文字、图片、div等html元素。

例：链接图片

  <!-- 链接内容是图片 -->
  <a href="https://www.xiaobuteach.com"><img src="logo.jpg"></a>

例：链接div

    <!-- 链接内容是div -->
    <a  href="https://www.xiaobuteach.com">
        <div>
            <p>第1段</p>
            <p>第2段</p>
        </div>
    </a>

5 页面内部跳转

链接不仅可以跳转到其它页面，也可以跳转到当前页面指定位置。

例如：从顶部跳到页面尾部，从页面尾部跳到页面顶部。

说明：通常当前页面有滚动条，才能更好的看到效果。

基本用法

第1步：定义id锚点，设置id属性值即可。

以后可以跳转到此处。

例：

<div id="header">

id值可以自定义。

第2步：a标签跳转

<a href="#header">链接内容</a>

href值的内容需要带#，表示id锚点；

#后的内容与第1步设置的id值需要一致。

完整示例

<body>
    <div id="header">顶部</div>
    <div id="main" style="height: 1000px;">主体内容</div>
    <div>
        <a href="#header">回到顶部</a>
    </div>
</body>

6 默认样式

a链接的默认样式是真的丑，但很有代表性。

a默认不是只有一个样式，当不同的动作时，a有不同的样式。

链接动作	默认值
已经访问过的链接	有下划线，暗红色。
没有访问过的链接	有下划线，蓝色。
鼠标悬停在链接上	有下划线，颜色与是否访问过一致。
鼠标点击未松开时	有下划线，红色

上图中，百度已经访问过显示暗红色，bing未访问过显示蓝色。

上图中，鼠标正在点击bing未松开时，显示红色。

实际项目，通常会对上述各动作的样式进行定制，需要通过CSS的伪类技术实现。

设置当前页面所有链接的样式

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>html 链接 a 例子 | 小步教程</title>
    <style>
        /* 设置默认样式 */
        a{
            text-decoration: none;
        }
        /* 没有访问过的样式 */
        a:link{
            color:#f00;
            
        }
        /* 访问过的样式 */
        a:visited{
            color:#0f0;
        }
        /* 鼠标悬停的样式 */
        a:hover{
            color:#00f;
        }
        /* 鼠标激活(点击未松开)的样式 */
        a:active{
            color:#ccc;
        }

        
    </style>
</head>

<body>

    <a href="https://www.baidu.com" >百度</a>
    <br>
    <a href="https://www.bing.com">bing</a>


</body>

</html>

后续进一步介绍。

小步教程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html 链接 a

Ctrl+点击链接：新的TAB页打开链接，并且页面不跳转。搜索时，连续打开多个页面。不以斜杠/与http(s)开头的路径，表示当前网站的网页，相对当前html文件的路径。a标签的href属性的页面地址路径与img标签的src属性的地址路径规则一样。实际项目，通常会对上述各动作的样式进行定制，需要通过CSS的伪类技术实现。点击链接内容，在target指定的位置打开href指定的页面。a默认不是只有一个样式，当不同的动作时，a有不同的样式。直接以http或https开头的路径，也称完整路径。
复制链接

扫一扫

专栏目录