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 | 自定义光标。 |
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 功能介绍" 页面将跳到同一个页面相应的锚点处。
查看锚点实例