HTML 超链接 a

a 定义超链接,能从一个页面跳到另一个页面,还能添加上属性 title 和 alt 告诉搜索引擎这是什么,有利于seo页面优化。

超链接可以是文本,也可以是一幅图像,或其他 HTML 元素。把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。

<a href="https://www.pangugle.com/" title="盘古歌教程" alt="盘古歌教程" target="_blank">pangugle 教程</a>
注:未访问过的链接显示为蓝色字体并带有下划线;访问过的链接显示为紫色并带有下划线;点击链接时,链接显示为红色并带有下划线。如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定而显示。

HTML 超链接语法

1.href 属性 :定义链接的目标。就是要跳转的目标页面的地址。

2.target 属性 :定义被链接的文档在何处显示。常用属性值:

属性值 描述
_bank 在新窗口中打开被链接文档
_self 默认。在相同的框架中打开被链接文档

3.title 属性 & alt 属性:

定义提示信息。把鼠标移到文本上停留时会浮现 title 的内容。title 和 alt 是一样的作用,写 a 标签时,最好同时都写上,有利于seo页面优化。

了解一些样式(css)

什么是样式?查看样式

1.把鼠标移上去时剪头会变成一直小手,这是 cursor 样式决定的。cursor:pointer; 是 a 标签默认样式。

a{ cursor:pointer; }

其他常用样式:

属性值描述
default所有标签默认值(通常是一个箭头)。
crosshair光标呈现为十字线。
pointer光标呈现为指示链接的指针(一只手)。
e-resize光标指示矩形框的边缘可被向右(东)移动。
text光标指示文本。
help光标指示可用的帮助(通常是一个问号或一个气球)。
url自定义光标。

自定义光标 cursor:url

2.去掉下划线:text-decoration 是定义文本的样式,样式值为 none 时表示去掉下划线。

a{ text-decoration: none; }

3.a 标签的 hover :把鼠标移到 a 标签上时,文本颜色变了,这是用到了 :hover。

color 是设置颜色的属性,怎么在浏览器的开发工具上改变颜色值?查看实例

如下实例, 可以改变相应的值体验看看。

a{color: #5e6d82; }           /* 正常,未访问链接*/
a:visited {color:yellow;} /* 已访问链接 */
a:hover {color:#1989fa;}      /* 鼠标移动到链接上 */
a:active {color:red;}         /* 鼠标点击时 */

HTML 锚点

锚点使用的前提是在同一个页面。 比如,点击一个页面的头部 "IM 功能介绍" 页面将跳到同一个页面相应的锚点处。

查看锚点实例