HTML5教程

html超链接 ( a标签 )

本文主要是介绍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>

 

 

 

这篇关于html超链接 ( a标签 )的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!