前端二向箔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, 在网页搜索中比较重要,