meta标签有两个奇怪的地方,一个是别的标签都是一个属性一个功能,但是meta标签却是两个属性才一个功能;二是属性之间有明显的设计上的重叠。
一
meta标签的name和content属性需要连起来使用,分别提供了键和值,形成键值对。
既然name的值是固定的,content的值是自定义的,那么为什么不把name的值直接作为属性呢,这样也能和其它属性保持统一的风格?而要多此一举,让name和content形成键值对。
其实这主要是有一个历史原因在。
meta标签源于HTTP响应头映射。
通俗的话说是这样的,当浏览器解析html文件时,需要一些解析规则,这些规则可以从http请求的响应头获取,但是如果用户是从本地浏览器直接打开html文件呢?这样就没有响应头,就丢失了解析规则。
所以meta标签的http-equiv属性就是补全缺失解析规则的方法,http-equiv和content分别对应了响应头的键和值,组成键值对,模拟响应头,它得和响应头键值对的模式匹配,才设计成这样的。
于是,后面在设计让meta标签承载更多自定义键值对数据时,就继承了content属性,以及name加content组合的方式,这样也能降低开发者记忆成本。
这样还有一个附加的好处,元数据是持续增加的,把它定义成值而不是一种原生属性固定写死在标准里大大降低了扩展成本。
二
<meta charset="utf-8" />和<meta http-equiv="content-type" content="text/html;charset=UTF-8">
效果完全相同,为什么不优化一个?
这其实是因为它们并不是同时诞生的,后者先诞生,很多老旧网站已经使用了这样的规范,前者后来加进来了,它更简单,但是如果砍掉前者,那么老网站就会编译失败。
总结
我们总觉得技术是有严谨逻辑的,但往往有很多看着不够合理的地方。新旧技术也不是立马优胜劣汰,而是在相当长的一段时间中共存着。