a超链接标签的作用:用于从一个页面链接到另一个页面。
a超链接标签的分类 :文本超链接 、图像超链接
文本超链接
<!-- a超链接标签 -->
<a href="https://www.baidu.com/">百度</a>
图像超链接
<a href="https://www.baidu.com/"><img src="./img/baidulogo.png" width="200" ></a>
a超链接的常用属性:
(1)href="" 链接跳转的地址
这里说的地址,可以是空地址,可以是访问根目录,可以是禁止跳转,可以是绝对地址,也可以是相对地址。
空地址,又叫空链接
href="" 这个属性里面,如果不写值,叫“空链接”
href="#" 这个属性里面,写#,叫“空链接”
访问根目录
href="/" 这个属性里面,写/,叫“访问根目录”
禁止跳转
href="javascript:;" 这个属性里面,写javascript:;,叫“禁止跳转”
绝对地址
是一个网址,一定要带上协议头 https:// 或 http://
<a href="https://www.youku.com">优酷</a>
相对地址
在当前项目中,文件与文件之间访问跳转。
(2)html文件
<a href="default.html">我要访问default文件</a>
(3)title="" 提示性文本 (有利于网站的内部优化)
<a href="https://www.youku.com" title="优酷">优酷</a>
<a href="" title="安踏男鞋休闲运动鞋2022春季减震耐磨男士网面透气跑步鞋学生轻便户外防水旅游鞋潮流板鞋黑色皮面鞋子 【透气网面】黑金 42">安踏男鞋</a>
(4)target="_blank" 链接跳转的地址 以“新的窗口”打开
<a href="https://www.jd.com/" title="" target="_blank">京东</a>
特殊的目标
有 4 个保留的目标名称用作特殊的文档重定向操作:
_blank
浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self
这个目标的值对所有没有指定目标的 <a> 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的,除非和文档标题 <base> 标签中的 target 属性一起使用。
_parent
这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。
_top
这个目标使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
<!-- target="_blank" 新窗口打开 -->
<a href="https://www.jd.com/" title="" target="_blank">京东_blank</a>
<!-- target="_self" 覆盖原窗口 -->
<a href="https://www.jd.com/" title="" target="_self">京东_self</a>
<!--_parent 和 _self等效 覆盖原窗口 -->
<a href="https://www.jd.com/" title="" target="_parent">京东_parent</a>
<!-- 覆盖原窗口 -->
<a href="https://www.jd.com/" title="" target="_top">京东_top</a>
a超链接标签的4个样式:
a:link 超链接的默认样式。
a:visited 访问过的(已经看过的)链接样式。
a:hover 鼠标处于鼠标悬停状态的链接样式。
a:active 当鼠标左键按下时,被激活(就是鼠标按下去那一瞬间)的链接样式。
简写:
a{}
a:hover{}
<style type="text/css">
/* 修饰当前页面中所有的超链接 */
a{
/* 文本颜色 */
color: #515151;
/* 去除下划线 */
text-decoration: none;
}
/* 鼠标悬停 */
a:hover{
color: red;
}
</style>
</head>
<body>
<a href="">网易</a>
a 超链接标签的特点:
(1)是行元素,行元素与行元素之间,内容可以"并排"存在。
(2)行元素,本身不能设置"宽度和高度"
如果在某些场景下,需要把 超链接 由 行元素 转成 块元素,我们的操作方法:
a{
/* 文本颜色 */
color: #515151;
/* 去除下划线 */
text-decoration: none;
/*行元素 转成 块元素*/
display: block;
/*宽度*/
width: 200px;
/*高度*/
height: 50px;
/*轮廓线(我们在网页布局中,写给开发人员自己看的,看完之后可以把它删了)*/
outline: 1px dashed red;
}
a超链接锚点的设置和应用
(1) 添加 锚点链接 ,写法:#锚点名
<!-- 添加 锚点链接 ,写法:#锚点名 -->
<a href="#top1">第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</a>
<a href="#top2">第二回 张翼德怒鞭督邮 何国舅谋诛宦竖</a> 
<a href="#top3">第三回 议温明董卓叱丁原 馈金珠李肃说吕布</a> 
<a href="#top4">第四回 废汉帝陈留践位 谋董贼孟德献刀</a>
(2) 跳转到指定锚点
<!-- 第一个锚点 -->
<a name="top1"></a>
<!-- 第二个锚点 -->
<a name="top2"></a>
<!-- 第三个锚点 -->
<a name="top3"></a>
<!-- 第四个锚点 -->
<a name="top4"></a>