【Html标签学习】a标签基本用法、假链接跳转、锚点跳转

html将元素分成了三类：内联元素（或叫行级元素，或叫行内元素）、块元素、内联块元素。他们的特点如下所示：

块元素：可以设置宽高，独占一行（div,ul,li,h*,p）。
内联元素：不可以设置宽高，可以与其他元素同占一行(a,span)。
内联块元素：可以设置宽高，可以与其他元素同占一行(img)。

标签a的作用：实现页面之间的切换或跳转。

常见用法：

链接https、http地址：

<a href="https://baidu.com" target="_blank">Baidu</a>

2.链接Page，比如自定义的Page（.html)

3.使用对象连接，例如一个图片，点击图片时进行页面跳转（鼠标悬浮时光标变成手指状态）

<a href="https://baidu.com" target="_blank"> <img src="../Pic/12.jpg" title="这是我的图片提示信息" alt="对不起，显示图片失败">Baidu</a>

4.使用假链接，比如自定义的Page暂时未完成

1.使用 # 进行假链接

<a href="#">假链接#</a>

2.使用JavaScript进行假链接

<a href="javascript:">假链接#</a>

两者区别：使用 # 假链接会返回到页面Top，使用JavaScript假链接则不会。

所以，返回顶端可用假链接# 来实现

5.其他连接：如发送Email、发送地图位置等

            <a href="tel:15815861586">15815861586</a>
            <a href="mailto:[email protected]?subject=TestObject">[email protected]</a>
            <a href="sms:10086?body=message_body">给 10086 发短信</a>
            <a href="geopoint:116.281469,39.866035">我的位置</a>

6.目录跳转：跳转到本页相对应的位置，点击目录跳转到指定的内容。

那么必须告诉a标签要跳转的位置，前提是该位置拥有一个独一无二的ID（这样才能跳转正确）。

<h1 id="H1">Head 1</h1>
<a href="#H1">跳转到</a>

跳转到其他页面、其他页面的特点位置（锚点）同理。

格式为：href=“页面#ID”

<a href="问题单01.html#H1">跳转到</a>

附：html文件

<!DOCTYPE html>
<html lang="en" xlmns = "http">
<head>
    <meta charset="UTF-8">
    <title>问题单处理流程</title>
</head>
<body>
<img src="../Pic/12.jpg" title="这是我的图片提示信息" alt="对不起，显示图片失败">
<hr/>
<p>hello</p>
<a href="https://baidu.com" target="_blank"> <img src="../Pic/12.jpg" title="这是我的图片提示信息" alt="对不起，显示图片失败">Baidu</a>
<a href="#">假链接#</a>
<a href="javascript:">假链接#</a>
</body>
</html><!DOCTYPE html>
<html lang="en" xlmns = "http">
<head>
    <meta charset="UTF-8">
    <title>问题单处理流程</title>
</head>
<body>
<img src="../Pic/12.jpg" title="这是我的图片提示信息" alt="对不起，显示图片失败">
<hr/>
<p>hello</p>
<a href="https://baidu.com" target="_blank"> <img src="../Pic/12.jpg" title="这是我的图片提示信息" alt="对不起，显示图片失败">Baidu</a>
<a href="#">假链接#</a>
<a href="javascript:">假链接JavaScript</a>
</body>
</html>

【Html标签学习】a标签基本用法、假链接跳转、锚点跳转

猜你喜欢