html超链接 ( a标签 )

html超链接 ( a标签 )

介绍：HTML 提供了  标签（Anchor，锚点）a标签是一个有属性对称型标签，通过href属性指定URL地址可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。

格式:

在 HTML 4.01 中， 标签可以是超链接或锚。在 HTML5 中， 标签始终是超链接，但是如果未设置 href 属性，则只是超链接的占位符。 HTML5 提供了一些新属性，同时不再支持一些 HTML 4.01 属性。

a标签支持的属性 

1、href属性：接受一个URL路径地址作为参数，URL 规定链接指向的页面的 URL 或 URL 片段。

注意：

• URL 片段是哈希标记（#）前面的名称，哈希标记可以指定当前同一页面内的位置。URL 不限于基于 Web（HTTP）的文档，也可以使用浏览器支持的任何协议。
• 可以使用 href="#top" 或者 href="#" 链接返回到页面顶部。这种行为是 HTML5 的特性。

2、target属性 : 规定在何处打开链接文档,可选值包含(常用的值)：

• _self ：默认值，表示在当前页面加载，即在当前页面打开新的链接。
• _blank： 表示从新窗口打开超链接。

 注意：

• 使用target时，考虑添加 rel="noopener noreferrer" 以防止针对 window.opener API 的恶意行为。
• 使用target=“_blank”链接到另一个页面，将在与页面相同的进程中运行新页面。如果新页面执行开销大的的JS，那么页面的性能可能会受到影响。要避免这种情况，请使用rel=noopener。
• rel="noopener"：防止新标签页使用JavaScript的window.opener功能，该功能可能会访问包含链接（您的网站）的页面来执行恶意操作，例如窃取信息或共享受感染的代码。
• rel="noreferrer"：防止其他网站或跟踪服务（例如Google Analytics（分析））将您的页面标识为单击链接的来源；

3、download属性(HTML 5 新增)：download属性 接受一个 filename (文件名) 作为属性值或不设置任何属性值，download属性指示浏览器下载 URL 而不是导航到它，因此将提示用户将其保存为本地文件。 

4、hreflang: 该属性用于指定链接文档的人类语言。其仅提供建议，并没有内置的功能。

5、media: media_query 规定被链接文档是为何种媒介/设备优化的。(HTML 5 新增)

6、rel: 规定当前文档与被链接文档之间的关系，rel可选值 。

7、target:规定在何处打开链接文档,可选值包含：

• _self (默认)：当前页面加载，即在当前页面打开新的链接。
• _blank： 新窗口打开超链接。
• _parent：加载响应到的HTML5浏览器上下文的父浏览器上下文。如果没有parent框架或者浏览器上下文，此选项的行为方式与 _self 相同。
• _top：加载的页面占据整个原来的窗口，加载到顶层浏览器上下文。如果没有上层浏览器上下文，此选项的行为方式相同_self。

图片链接 (常用)

超链接的5种作用

1. 超链接: 页面跳转（站外跳转 和 站内跳转）

     2.锚点链接: 跳转到当前页面的其他位置(链接到本页面的某个部分)

 

    3.回到顶部

    4.下载文件 

 

    5.发送邮件 (需要电脑上安装有发送邮件的软件) 

锚点链接的应用 ：

 css样式：

  <style>
        div{
            display: none;
        }
        div:target{
            display:block;
        }
    </style>

相关代码： 

    <a href="#one">春意绵绵</a>
    <a href="#two">夏日炎炎</a>
    <a href="#three">秋高气爽</a>
    <a href="#four">白雪</a>
    <div id="one"><img src="/images/1.png" alt=""></div>
    <div id="two"><img src="/images/1.jpg" alt=""></div>
    <div id="three"><img src="/images/2.jpg" alt=""></div>
    <div id="four"><img src="/images/3.jpg" alt=""></div>