这次我们来说一下：页面元信息类标签
一、概念
所谓元信息，是指描述自身的信息，元信息类标签，就是HTML用于描述文档自身的一类标签，它们通常出现在head标签中，一般都不会在页面被现实出来。
元信息多是给浏览器、搜索引擎等机器阅读的。
二、类型
1、head 标签
主要是作为盛放其他语义类标签的容器使用
head 标签规定了自身必须是html标签中的第一个标签，内容必须包含一个title，并且最多包含一个base。如果文档作为iframe，或者有其他方式指定了文档标题时，可以允许不包含title标签
2、title 标签
表示文档的标题。
首先我们的语义类标签中也有一组表示标题的标签：h1~h6。
title作为元信息，可能会被用在浏览器收藏夹、微信推送卡片、微博等各种场景，这时候一般上下文缺失，所有title应该要完整地概括整个网页内容。
h1则仅仅用于页面展示，它可以默认具有上下文，并且有链接辅助，所以可以简写，即便无法概括全文，也不会有很大的影响。
3、base 标签
历史遗留标签。作用时给页面上所有的URL相对地址提供一个基础。
base 标签最多只有一个。它改变全局的链接地址，是一个非常危险的标签，容易和JS产生配合的问题。所以实际的开发中，我们还是最好用JS来代替base标签。
4、meta 标签
一组键值对，表示一种通用的元信息表示标签
在head中可以有多个meta标签，一般由name和content两个属性来定义，name表示元信息的名，content表示元信息的值。
例如：
<meta name=application-name content="lsForums">
除了基本用法，meta标签还有一些变体，主要用于简化书写方式或者声明自动化行为。下面挑几个重点来说下：
具有charset属性的meta
从H5开始，为了简化写法，meta新增了charset属性
<meta charset="UTF-8" >
charset型meta标签非常关键，它描述了HTML文档自身的编码形式。因此，建议这个标签放在head的第一个。
<html>
<head>
<meta charset="UTF-8">
……
这样，浏览器处理所有的字符都是ASCII字符，即UTF-8和绝大多数字符编码的子集，所有这样可以最大限度的保证不出现乱码
具有http-equiv属性的meta
表示执行一个命令，这样的meta可以不要name属性
例如：
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
除了content-type，还有如下命令：
- content-language 指定内容的语言
- default-style 指定默认样式表
- refresh 刷新
- set-cookie 模拟http头 set-cookie，设置cookie
- x-ua-compatible 模拟http头x-ua-compatible，声明ua兼容性
- content-security-policy 模拟http头content-security-policy，声明内容安全策略
name 为 viewport 的 meta
实际上，meta可以被自由定义，只要写入和读取的双方约定好name和content的格式就可以了
这个类型是移动端开发的事实标准：就是name为viewport的meta
这类meta的content是一个复杂结构，使用都好分隔的键值对，格式为key=value。
例如：
<meta name="viewport" content="width=500, initial-scale=1">
viewport可以控制很多属性：
- width：页面宽度，可以取值具体的数字，也可以是device-width，表示跟设备宽度相等。
- height： 页面高度，可以取值具体的数字，可以是device-height，表示跟设备高度相等。
- initial-scale：初始缩放比例
- minimum-scale：最大缩放比例
- user-scalable: 是否允许用户缩放
对于一个标准的移动端meta 应该如下：
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
其他预定义的meta
application-name：如果页面是Web application，用这个标签表示应用名称。
- author：页面作者
- description： 页面描述，这个属性可能被用于搜索引擎
- generator： 生成页面所使用的工具，主要用于可视化编辑器
- keywords： 页面关键字，对于SEO场景非常关键
- referrer：跳转策略，是一个安全考量
- theme-color：页面风格颜色，实际并不影响页面，但是浏览器可能因此调整页面之外的UI，如窗口边框或着tab的颜色。
网友评论