前端二向箔03-HTML元数据和链接

03 HTML元数据和链接

html元数据即在head标签中的部分, 主要是描述了网页的一些重要的信息和媒体链接. 大多情况下是提供给浏览器爬虫和机器阅读的. 链接作为网页的互联的基石, 在head中链接有link和script两种形式.

本文归纳常见的元数据和链接的重要知识.

元数据

• head

  head本身没有意义, 只提供保存容器, 是Document的元数据集合. 不会在页面上显示, 且只有一个title和base.

• title

  网页html文档标题, 而非网页内容标题( h1~h6), 主要在搜索中体现重要性, 对于整个文档的概括性. 这个标题在其他上下文中也会被使用，例如在用户的历史、书签，或搜索结果中

• base

  给网页上的URL提供相对地址的基础, 相当于根目录前缀, 只能有一个base. 它会改变全局的链接, 并不提倡使用.

  <base href="https://www.example.com/news/index.html">
  ...
  <p>Visit the <a href="archives.html">archives</a>.</p>
  

  上面例子中的链接地址是 “https://www.example.com/news/archives.html”。

• style

  css样式表

最重要的meta

meta是作为title, base, link等的补充, 而实际上meta类型是开发者常见的优化方向. 本质是key-value.

使用meta要注意:

• 必须指定任意一个: name，http-equiv，charset， 和 itemprop( 除了itemprop其他的都要同时指定content)
• 每个文档必须存在不少于一个有 charset 属性的 meta 元素。

可以自定义meta, 约定好name和value即可, 也可以使用预定义的规范meta.

主要预定义的类型有这几项:

1. html5简化了meta的charset写法, 新增charset属性用于设置网页的编码. 即:

   <meta charset="UTF-8">
   

   进行utf-8(ASCII是utf-8的子集)编码是因为一般http请求过程, 服务器会设定编码格式, 但应对一些非http协议无请求头, 如file, 就可以避免乱码情况.

2. 具有http-equiv属性的meta, 执行命令, 一般是添加http头, 即content-type, 可以同时设定编码:

   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   

3. name为viewport的meta, 设置网页缩放, 响应式设计中最常用.

   <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
   

   上述是移动端响应式设计中最典型的使用, 其中content设置key=value, 中间使用逗号分隔.

   属性解释:

   • width：页面宽度，可以取数值，一般设置成 device-width，即设备宽度。
   • height：页面高度，可以取数值，一般设置成 device-height，即设备高度。
   • initial-scale：初始缩放比例. (一般为1)
   • minimum-scale：最小缩放比例。 (一般为1)
   • maximum-scale：最大缩放比例。 (一般为1)
   • user-scalable：是否允许用户缩放。(对于移动端已有响应式设计就设置为no)

4. description\application-name, 前者描述网页, 后者提供网页应用的名称

   <meta name=application-name content="mugu">
   <meta name="description" content="this is a description>
   

   对于description, 在网页搜索中比较重要, 对于信息的提取也比较高效

   而application-name是为网页应用设置的, 可以用作标签收藏时的使用, 利于浏览器算法生成.

5. keyword弃用, 很多搜索引擎不会考虑这些关键字，因为该特性是不可靠的甚至会导致垃圾结果，对用户并没有帮助。特别是面对一些作弊, 恶意填充的keyword, 浏览器搜索引擎基本不作为考量.

6. referrer, generator, theme-color…

链接

链接包括两种, 超链接和外部资源链接, 其中核心就是互联网的URL和URI系统.

URI 指的是一个资源，URL 指的是用地址定位一个资源，URN 指的是用名称定位一个资源。 即URL 和 URN 是 URI 的子集。 详细可见引用[4]

在网页中链接最重要的两个属性是rel和href, 前者是Relationship, 指链接目标文档和本文档的关系; 后者表示Hypertext Reference, 指超链接的目标地址. 把握这两者的对应关系可以更好的理解和使用响应的标签.

网页中的链接主要有以下:

link

1. rel属性, 不同的功能

link最主要的使用时链接外部资源. 即外部资源类链接. 常见在head标签中, 进行stylesheet关系的css文件引用.

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

大多情况向link不会显示在网页中, 作为元数据的一类, 其设计的目的是为了浏览器和搜索引擎识别. 比如icon资源, 会被浏览器识别:

<link rel="alternate" type="application/atom+xml" href="/blog/news/atom">
<!-- 移动端提供不同分辨率, 此处的apple开头rel为ios特有 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png">

此外指定不同的rel可以有不同的功能, 如preload预加载一些资源文件( 只是缓存, 未执行, 同常加上type属性声明MIME类型 ); 使用prerender可以预渲染页面, 这在确定用户会接下的页面中设置, 来访问可以极大提升用户体验.

<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
<link rel="prerender" href="http://example.com/">

as属性指定加载资源的类型，它的值一般有下面几种。

• script
• style
• image
• media
• document

还有一些其他信息类的元数据用途, 即提供给搜索引擎\浏览器等, 此类一般为超链接类链接, 当rel指明为:

<!-- 作者信息 -->
<link rel="author" href="humans.txt">

<!-- 版权信息 -->
<link rel="license" href="copyright.html">

<!-- 另一个语言的版本, 通常由搜索引擎判别; 也可由插件判断RSS订阅链接 -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">
<link rel="alternate" type="application/atom+xml" href="/blog/news/atom">

<!-- 联系方式 -->
<link rel="me" href="https://google.com/profiles/someone" type="text/html">
<link rel="me" href="mailto:name@example.com">
<link rel="me" href="sms:+15035550125">

<!-- 历史资料 -->
<link rel="archives" href="http://example.com/archives/">

<!-- 目录 -->
<link rel="index" href="http://example.com/article/">

<!-- 导航, 主要在分页浏览的业务场景中 -->
<link rel="first" href="http://example.com/article/">
<link rel="last" href="http://example.com/article/?page=42">
<link rel="prev" href="http://example.com/article/?page=1">
<link rel="next" href="http://example.com/article/?page=3">

<!-- 部分来自wangdoc.com -->

当然有些已经被meta元数据替代.

2. media属性, 外部资源生效的媒介条件

   <link href="print.css" rel="stylesheet" media="print">
   <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">
   

   和css的媒体查询类似, 在不同条件下, 加载不同的文件资源.

3. 其他属性

   <link>标签的其他属性如下。

   • crossorigin：加载外部资源的跨域设置。
   • href：外部资源的网址。
   • referrerpolicy：加载时Referer头信息字段的处理方法。
   • as：rel="preload"或rel="prefetch"时，设置外部资源的类型。
   • type：外部资源的 MIME 类型，目前仅用于rel="preload"或rel="prefetch"的情况。
   • title：加载样式表时，用来标识样式表的名称。
   • sizes：用来声明图标文件的尺寸，比如加载苹果手机的图标文件。

a

a标签指anchor, 即锚点, 在网络中定下信标就是a标签的功能. a标签于link同样具有rel和href, 也可充当元数据, 且rel的:

alternate \ author \ help \ license \ next \ prev \ search

与link的语义相同, 不同的是, a会显示在页面上, 更多是阅读用途.

除了常用的链接, 还有几个比较重要的用法:

• download属性, 表示当前链接用于下载, 如下例, 文件名为bar.exe, 也可省略.

  <a href="foo.exe" download="bar.exe">点击下载</a>
  

  注意，如果链接点击后，服务器的 HTTP 回应的头信息设置了Content-Disposition字段，并且该字段的值与download属性不一致，那么该字段优先，下载时将显示其设置的文件名。

• mailto协议, 打开本机默认的邮件程序发送邮件

  <a href="mailto:contact@example.com">联系我们</a>
  
  <!-- 详细用法可以指定邮件的主题\日期等, 注意需要转义, %20为空格 -->
  <a
    href="mailto:foo@bar.com?cc=test@test.com&subject=The%20subject&body=The%20body"
  >发送邮件</a>
  
  <!-- 分享网页的用法 -->
  <a href="mailto:">告诉朋友</a>
  

script

作为交互的灵魂, script标签加载脚本代码, 执行JavaScript程序.

最重要的就是type属性, 一般默认是"text/javascript". 还有下面一些其他属性，大部分跟 JavaScript 语言有关.

• async：该属性指定 JavaScript 代码为异步执行，不是造成阻塞效果，
• JavaScript 代码默认是同步执行。
• defer：该属性指定 JavaScript 代码不是立即执行，而是页面解析完成后执行。
• crossorigin：如果采用这个属性，就会采用跨域的方式加载外部脚本，即 HTTP 请求的头信息会加上origin字段。
• integrity：给出外部脚本的哈希值，防止脚本被篡改。只有哈希值相符的外部脚本，才会执行。
• nonce：一个密码随机数，由服务器在 HTTP 头信息里面给出，每次加载脚本都不一样。它相当于给出了内嵌脚本的白名单，只有在白名单内的脚本才能执行。
• referrerpolicy：HTTP 请求的Referer字段的处理方法。

<noscript>标签用于浏览器不支持或关闭 JavaScript 时，所要显示的内容. noscript不是一个功能性标签, 我个人感觉更像是一种人性化的设计, 虽然有些争议, 但是在某些层面noscript照顾到一部分人的利益. 可以查阅这篇博客🔗I Used The…[5]

要注意的是href和src虽然都是提供了URL, 但是两种用本质区别, 即前者为替换型标签, 引入资源后替换自身, 如script. 但href则是链接到外部的标签.

那为什么style标签不能像script一样使用src呢? 而是要link链接? 下篇博客详细讨论相关内容和媒体标签的引用.

以上为链接相关的内容.

引用

1. HTML Standard. (2021). Retrieved 18 February 2021, from https://whatwg-cn.github.io/html
2. 文档级元数据元素 - HTML（超文本标记语言） | MDN. (2020). Retrieved 18 February 2021, from https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta
3. 链接标签. (2021). Retrieved 19 February 2021, from https://wangdoc.com/html/link.html
4. URI、URL 和 URN 的区别. (2019). Retrieved 19 February 2021, from https://juejin.cn/post/6844904003348725767
5. I Used The Web For A Day With JavaScript Turned Off — Smashing Magazine. (2018). Retrieved 19 February 2021, from https://www.smashingmagazine.com/2018/05/using-the-web-with-javascript-turned-off/