HTML的链接

HTML的链接

链接

链接的种类:

  • 超链接型标签
  • 外部资源链接

超链接型标签

link标签

link标签是元信息的一种.link标签会生成超链接,也可能生成外部资源链接.

link标签生成超链接

link标签会生成不是显示的超链接.

link标签的链接类型主要通过rel属性来区分:

  • canonical型link
    在有多个URL指向同一个页面时,提示搜索引擎保留哪一个URL.

    <link rel="canonical" href="...">
  • alternate型link
    提示页面的变形形式(页面内容的不同形式,不同的语言,不同的设计版本),通常时提供给搜索引擎来使用的.
    如,页面提供rss订阅时:

    <link rel="alternate" type="application/rss+xml" title="RSS" href="...">
  • prev型,next型link
    告诉搜索引擎或者浏览器它的前一项和后一项,有助于页面的批量显示.

  • author型link
    链接到本页面的作者,一般是mailto:协议

  • help型link
    链接到本页面的帮助页.

  • license型link
    链接到本页面的版权信息页.

  • search型link
    链接到本页面的搜索页面.

外部资源link标签

会被主动下载,并根据rel类型做不同的处理.

  • icon型link
    icon型link是唯一一个外部资源类的元信息link.icon型link中的图标地址默认会被浏览器下载和使用.

    如果没有指定link,多数浏览器会使用域名根目录下的favicon.ico.一定要保证页面中有icon型的link.

    有size属性,允许一个页面出现多个iconlink,并用sizes指定icon的尺寸.

  • 预处理类link
    允许我们控制浏览器,提前针对一些资源去做预处理操作,以提高性能.

    • dns-prefetch型link:提前对一个域名做dns查询.
    • preconnect型link:提前对一个服务器建立TCP连接.
    • preload型link:提前加载href指定的url.
    • prefetch型link:提前提取href指定的url内容.
    • preender型link:提前渲染href指定的url.
  • modulepreload型link
    预先加载一个JavaScript的模块.这里的加载是指,完成下载并放入内存,并不会执行对应的javascript.

    <link rel="modulepreload" href="test.js">
  • stylesheet型link
    从一个CSS文件创建一个样式表.
    type可以省略.如果指定type,必须是"text/css".

    <link rel="stylesheet" href="xxx.css" type="text/css">
  • pingback型link
    表示本页面被引用时,应该使用的pingback地址.

a标签

a标签时anchor的缩写.锚点.

是不会被主动下载的被动型链接.

属性:

  • alternate
  • author
  • help
  • license
  • next
  • prev
  • search

以上属性可参照link的属性.

  • tag
    表示本网页所属的标签.
  • bookmark
    到上级章节的链接.
  • nofollow
    此链接不会被搜索引擎索引.
  • noopener
    此链接打开的网页无法使用opener来获得当前页面的窗口
  • noreferrer
    此链接打开的网页无法使用referrer来获得当前页面的url
  • opener
    打开的网页可以使用window.opener来访问当前页面的window对象.

area标签

与a标签相似,不同的是,不是文本型的链接,是区域性的链接.

shape属性支持圆形,矩形,多边形.

area必须跟img,map标签配合使用.

<p>
 Please select a shape:
 <img src="shapes.png" usemap="#shapes"
      alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
 <map name="shapes">
  <area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
  <area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
  <area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
  <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
  <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
        href="yellow.html" alt="Yellow star.">
 </map>
</p>

发表评论

电子邮件地址不会被公开。 必填项已用*标注