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:c1586@qq.com?subject=TestObject">c6088@qq.com</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>