视觉艺术

HTML链接类标签都有哪些？

2020-10-01  本文已影响0人  读行笔记

链接

在HTML中，除过可见的链接a，还有很多不可见的链接link，它们都表示HTML文档和其他文档或者资源的连接关系。link标签可分为两种：一种是超链接型标签，一种是外部资源链接。

link

不可见的link标签也是一种元信息类标签，它是为了搜索引擎和浏览器以及插件服务的。可以分为两类：

另外，除过元信息类标签的用法，很多外部资源型link标签还能被放在body中，从而把外部资源连接进文档中。

link标签主要通过rel属性区分，内容用href属性表示。

<link rel="alternate" href="...">

超链接类link

超链接类link是一种被动型链接，在用户不操作的情况下，它们不会被下载。

canonical

canonical型的link提示页面它的的主URL。在网站中常常有多个URL指向同一页面的情况，搜索引擎访问这类页面时会去掉重复的页面，这个link会提示搜索引擎保留哪个URL。

例如Google主页的link标签：

<link href="/?ie=UTF-8&amp;rct=j" rel="canonical">

altername

alternate型link表示当前页面的变形，比如在不同格式、不同语言或不同设备版本状态下对应的页面。它们通常也是给搜索引擎看的。

<link rel="alternate" type="application/rss+xml" title="RSS" href="...">

prev & next

在很多应用中，页面呈序列状排布，比如浏览图片库、电子书。这时候，就可以使用prev和next型的link，分别告诉搜索引擎和浏览器它的前后项是什么。

<link rel="prev" href="http://stackoverflow.com/documentation/java/topics">
<link rel="next" href="http://stackoverflow.com/documentation/css/topics">

manifest

manifest是PWA（Progressive Web Apps）技术的一部分，可以让Web应用像原生应用一样在设备上运行，可提升体验。但到目前为止，只有一部分平台支持（Chrome）。manifest型的link主要提供了一份资源清单，用来指定Web Apps名称、图标、运行模式等。

这是来自MDN的例子：

{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "A simply readable Hacker News app.",
  "icons": [{
    "src": "images/touch/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "related_applications": [{
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
  }]
}

对应的link标签如下（来自得到Web版）：

<link rel="manifest" href="/pwa/iget_web.webmanifest">

Others

其他超链接型link标签表示某些和当前文档相关的资源，可以视为一种带链接功能的meta标签。

外部资源型

外部资源型link标签会被浏览器主动下载，并且根据rel类型会做出不同处理。

icon

当前页面或者站点的icon，是唯一一个外部资源类元信息link，浏览器普遍会将icon显示在窗口左上角处。如果没有提供，多数浏览器会使用域名根目录下的favicon.ico资源。因此为了性能考虑，务必提供icon型link标签。

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- iOS设备需要用apple-touch-icon和apple-touch-startup-image替代 -->
<link rel="apple-touch-icon" href="../pages/igetWeb/assets/images/global/pwa_logo.png">

预处理类

每一个网页的显示，都要经过DNS解析、建立HTTP连接、传输数据、分词、解析并构建DOM树、合成绘制和渲染，最终将所有数据显示出来。这个流程非常复杂耗时，按照正常的流程下来，经常达不到预期的效果和体验。

预处理类link就是为了提高性能，允许我们控制浏览器，提前做一部分工作，或者获取一些资源。

比如得到Web版首页：

<link rel="dns-prefetch" href="https://staticcdn.igetget.com">
<link rel="dns-prefetch" href="https://cdn2.luojilab.com">
<link rel="preload" href="https://imgcdn.umiwi.com/ttf/dedaojinkaiw03.ttf" as="font" type="font/ttf" crossorigin="" onload="DeDaoJinKaiOnload()">

modulepreload

modulepreload型link的作用是预先加载一个JavaScript的模块。这可以保证JS模块不必等到执行时才加载。这里的所谓加载，是指完成下载并放入内存中，并不会执行对应的JavaScript代码。

例如这个例子，app.js模块中包含helper.js、irc.js和fog-machine.js三个模块。为了提高性能，可预先加载这些模块。

<link rel="modulepreload" href="app.js">
<link rel="modulepreload" href="helpers.js">
<link rel="modulepreload" href="irc.js">
<link rel="modulepreload" href="fog-machine.js">
<script type="module" src="app.js">

stylesheet

这应该是大多数人最熟悉的link标签使用方法。它通过引入一个CSS文件创建样式表，如果有type属性，必须为"text/css"。

<link rel="stylesheet" href="xxx.css" type="text/css">

a

a标签是“anchor”的缩写，表示锚点，用于链接和定位目标点。当a有href属性时，表示链接，当有name属性时表示目标点。

rel

a和link的很多属性都是一样的，比如rel。两者rel相同的类型包括下面这些：

对于这些类型的元信息类超链接link和普通a链接，rel的语义都是相同的。

除此之外，还有一些a标签独有的rel类型：

a标签还有一些辅助rel类型，用于提示浏览器或搜索引擎做一些处理：

target

通过target属性指定将在何处显示链接资源，取值可以为是：

例如下面这段代码：

<h3>Table of Contents</h3>
<ul>
  <li><a href="/example/html/pref.html" target="view_window">Preface</a></li>
  <li><a href="/example/html/chap1.html" target="view_window">Chapter 1</a></li>
  <li><a href="/example/html/chap2.html" target="view_window">Chapter 2</a></li>
  <li><a href="/example/html/chap3.html" target="view_window">Chapter 3</a></li>
</ul>

在这种情况下，重复点击不同链接将会打开同一个窗口。

area

area和a很相似，唯一不同的是，它不再表示文本型链接，而表示区域性链接。

area是整个html规则中唯一支持非矩形热区的标签，它的shape属性支持三种类型。

area一个比较实用的场景是在地图中，点击不同区域可以进入相应的页面：

<img src="http://s2.sinaimg.cn/middle/69906822ga1e24ba6e971&690" width="444" height="395" alt="中国地图" usemap="#province"/>
<map name="province" id="province">
    <area shape="rect" coords="80,112,110,125"  alt="新疆" href="https://baike.baidu.com/item/%E6%96%B0%E7%96%86/132263?fr=aladdin">
    <area shape="rect" coords="77,209,110,229"  alt="西藏" href="https://baike.baidu.com/item/%E8%A5%BF%E8%97%8F/130045">
    <area shape="rect" coords="150,176,185,192"  alt="青海" href="https://baike.baidu.com/item/%E9%9D%92%E6%B5%B7/31638">
    <area shape="rect" coords="197,236,235,261"  alt="四川" href="https://baike.baidu.com/item/%E5%9B%9B%E5%B7%9D/212569">
    <area shape="rect" coords="170,300,211,325"  alt="云南" href="https://baike.baidu.com/item/%E4%BA%91%E5%8D%97/206207">
    <area shape="circle" coords="227,200,8"  alt="甘肃" href="https://baike.baidu.com/item/%E7%94%98%E8%82%83">
    <area shape="circle" coords="240,177,5"  alt="宁夏" href="https://baike.baidu.com/item/%E7%94%98%E8%82%83">
    <area shape="circle" coords="285,133,8"  alt="内蒙古" href="https://baike.baidu.com/item/%E7%94%98%E8%82%83">
</map>

总结

HTML所有标签中，除过元信息类、语义类和媒体替换类标签之外，还有链接类标签。为什么互联网能够如此繁荣发展，很多程度上就是因为这些起着连接作用的链接，它们让全世界所有能够触网的资源连接在一起，彼此互动，协同进步。

这些链接主要由两类组成：

上一篇 下一篇

猜你喜欢

热点阅读