所谓元信息标签,是指描述自身的信息,元信息类标签,就是HTML用于描述文档自身的一类标签,他们通常出现在head标签中,一般不会在页面被显示出来(与此相对,其他标签,如语义标签,描述的就是业务)
head标签
head标签本身并不携带任何信息,主要是用于盛放其他语义标签的容器。
head表i请安规定了自身必须是html标签中的第一个标签,他内容必须包含一个title,除非文档作为iframe或者其他指定了文档标题时可以不包含title。
title标签
表示文档的标题。作为元信息,可能会被用于浏览器收藏夹、微信推送卡片、微博等各种场景,所以title应该完整的概括整个网页内容。
base标签
历史遗留标签,作用给页面上所有的URL加一个基础地址,只能有一个base标签。实际开发中一般不再使用。
meta标签
meta标签是一组键值对,它是一种通用的元信息表示标签。
在head中可以出现多个meta标签,一般是meta标签由name和content两个属性来定义。
它的基本用发如下所示:
<meta name=application-name content='IsForums'>
具有charset属性的meta
<meta charset='UTF-8'>
charset型meta标签非常关键,它描述于HTML文档自身的编码形式。因此,我建议这个标签放在head的第一个。
具有http-equiv属性的meta
<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,声明内容安全策略
name为viewport的meta
它是移动端开发的事实标准
<meta name='viewport' content='width=500, initial-scale=1'>
这里指定两个属性,宽度和缩放,实际上他还有很多属性:
- width 页面宽度
- height 页面高度
- initial-scalse 初始缩放比例
- minimum-scale 最小缩放比例
- maximum-scale 最大缩放比例
- user-scalable 是否允许用户缩放
对于一个已经做好了的移动端适配网页,应该把用户缩放等功能都禁止掉,宽度设为设备宽度,一个标准的meta如下:
<meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no'>
其他预定义meta
- author 作者
- description 描述
- generator 生成页面所用的工具
- keywords 页面关键字,用于seo场景
- referrer 跳转策略
- theme-color 风格颜色