HTML href 属性 - 绿叶网

HTML href 语法

在 HTML 中，href 属性用于定义链接的目标 URL。只有以下 4 种元素支持 href 属性。

a：常见的超链接元素。
link：引用外部样式文件。
area：创建可点击区域的图像地图。
base：指定页面所有相对 URL 的基本 URL。

语法：

<element href="URL"></element>

说明：

element 是支持 href 属性的元素。URL 是文件路径，它可以是相对路径，也可以是绝对路径。

HTML href 摘要

适用元素	a、link、area 或 base
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML href 示例

接下来，我们通过几个简单的例子来讲解一下 HTML href 属性是如何使用的。

示例 1：a 元素中使用 href 属性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <a href="https://www.lvyenet.com">绿叶网</a>
</body>
</html>

页面效果如下图所示。

HTML a元素中使用href属性

分析：

在上面例子中，href 属性定义的是超链接指向的目标 URL 地址。

示例 2：link 元素中使用 href 属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
</body>
</html>

分析：

<link rel="stylesheet" href="./css/index.css">

在上面这句代码中，href 属性用于定义 CSS 文件的路径。

示例 3：area 元素中使用 href 属性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div>
        <img usemap="#frontend" src="./imgs/html-css-js.jpg" alt="">
        <map name="frontend">
            <area shape="rect" coords="35,205,195,365" alt="html" href="https://www.lvyenet.com/html">
            <area shape="rect" coords="205,205,365,365" alt="css" href="https://www.lvyenet.com/css">
            <area shape="rect" coords="120,35,280,195" alt="javascript" href="https://www.lvyenet.com/javascript">
        </map>
    </div>
</body>
</html>

页面效果如下图所示。

HTML area元素中使用href属性

分析：

在上面例子中，href 属性定义的是 area 区域指向的链接地址。

示例 4：base 元素中使用 href 属性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <base href="https://www.lvyenet.com/">
</head>
<body>
    <a href="index.html">绿叶网</a>
</body>
</html>

页面效果如下图所示。

HTML base元素中使用href属性

分析：

在上面例子中，我们使用 href 属性来为 base 元素定义基准 URL 为 “https://www.lvyenet.com/”，因此当前页面所有链接的地址都会使用该基准 URL 作为 “前缀”。

上面例子的超链接实际上指向了 https://www.lvyenet.com/index.html 这个地址。当我们点击超链接之后，就会跳转到 https://www.lvyenet.com/index.html。