前端 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里面相当于放的就是纯文字。
