超链接标签

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像。将文档链接到其他文档或资源，链接到文档的特定部分。

(1)语法

<a href="">文字或图片</a>

(2)语义

超链接

(3)默认样式

• 不独占一行

• 默认当前窗口打开

• 默认带有下划线、文字颜色

(4)超链接属性

• href属性

  • 作用：指定链接跳转的地址

    <a href="http://www.jd.com">京东商城（文字链接）</a>
    <a href="4.例-导航.html" target="_blank"><img src="pic.png" alt="">（图片链接）</a>

• target属性

  • 作用：指定目标地址的打开方式

  • 取值

    • _blank新窗口打开

    • _self当前窗口打开（默认值 ）

     <a href="http://www.jd.com" target="_blank"><img src="pic.png" alt=""></a>

• title属性

  • 作用：定义提示文本，将鼠标悬停在链接上会显示标题作为工具提示

(5)链接的类型

• 空链接

  • 描述：如果当时没有确定链接的目标时使用空链

    <a href="#">商品</a>

• 外部链接

  • 描述：链接到站外其他 网站的链接 （绝对地址）

    <a href="https://www.baidu.com"> 百度 </a>

• 内部链接 （相对地址）

  • 描述：网站内部页面之间的相互链接。直接链接内部页面的名称

    <a href="index.html">首页</a>

• 下载链接

  • 描述：如果href里面的地址是一个文件或压缩包，会下载这个文件。

  • 代码演示

    <a href="1.txt">下载文本文件</a>

  (6)锚点链接

  描述：当我们点击锚点链接时，可以快速定位到页面中的某个位置。

  • 跳转至当前页面指定位置的锚点

    • 语法：

    定义目标：<p id="box"></p> 
    定义跳转：<a href="#box"></a>

  • 跳转至其它页面的锚点

    • 语法：

    定义目标：a.html页面的 <div id="box"></div>
    定义跳转：<a href="a.html#test"></a>

  总结：重点掌握内部链接，外部链接，锚点链接。

  效果参考：腾讯公司 - Tencent 腾讯 腾讯企业站