前端 HTML body标签相关内容常用标签超链接标签 a标签

超链接标签 <a>

超级链接<a>标记代表一个链接点，是英文anchor（锚点）的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像，也可以是相同网页上的不同位置。

a标签属于行内标签: 在一行内显示

href属性：目标URL

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <a href="www.baidu.com">百度</a>

</body>

</html>

点击跳转到百度，默认在当前网页打开目标页面

a标签 taget属性：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：

_self：在当前网页打开目标网页（默认值）
_blank：在新的标签页打开目标网页。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <a href="http://www.baidu.com" target="_blank">百度</a>

</body>

</html>

title属性鼠标悬停时显示的标题，意思是鼠标移上去 a标签之后显示的标题

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <a href="http://www.baidu.com" title="百度">百度</a>

</body>

</html>

href属性指定目标网页地址。该地址可以有几种类型：

绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
相对URL - 指当前站点中确切的路径（href="index.html"）
锚URL - 指向页面中的锚（href="#top"）

href 链接其他表现形式：

1.目标文档为下载资源例如：href属性值，指定的文件名称，就是下载操作(rar、zip等)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <a href="rar/txt.rar">下载压缩包</a>

</body>

</html>

2.href链接目标是html文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <a href="index.html">跳转到index.html</a>

</body>

</html>

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <p>1</p>

</body>

</html>

---------------------------------

锚链接(锚点)：
指给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转

3.返回页面顶部或具体id值的标签例如：<a href="#">内容</a>或<a href="#id值">内容</a>

用# 方法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <p style="height: 1000px">顶部</p>

    <!-- 返回页面顶部内容 -->

    <a href="#">返回顶部</a>

</body>

</html>

用id方法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <p id="p1" style="height: 1000px">顶部</p>

    <!-- 返回页面顶部内容 -->

    <a href="#p1">返回顶部标签</a>

</body>

</html>

4.链接到网页不同位置利用id实现

在当前页面上某一个div上面加上锚点加上#做一个对应关系

html里id是不能重复，id是唯一的

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <a href="#i1">第一章</a>

    <a href="#i2">第二章</a>

    <a href="#i3">第三章</a>

    <a href="#i4">第四章</a>

    <div id="i1" style="height: 600px;">第一章内容</div>

    <div id="i2" style="height: 600px;">第二章内容</div>

    <div id='i3' style="height: 600px;">第三章内容</div>

    <div id="i4" style="height: 600px;">第四章内容</div>

</body>

</html>

点击锚点跳转到第三章内容

跳转了

与js有关：

5. javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码。例如：<a href="javascript:alert()">内容</a>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <a href="javascript:alert('ok')">按钮</a>

</body>

</html>

6.javascript:;表示什么都不执行，这样点击<a>时就没有任何反应例如：<a href="javascrip:;">内容</a ，

把a标签默认动作给取消了。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <a href="javascript:;">按钮</a>

</body>

</html>

a标签是一个文本级的标签

比如一个段落中的所有文字都能够被点击，那么应该是p包含a；

<p>

    <a href="">段落段落段落段落段落段落</a>

</p>

而不是a包裹p：

<a href="">

    <p>

        段落段落段落段落段落段落

    </p>

</a>

a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字。