<meta>标签用来提供有关html文档的元数据,元数据不会显示给用户看,但浏览器可以识别,同时对SEO(搜索引擎优化)起着重要作用
<meta charset="utf-8">
charset属性指定了html文档的编码格式,常用的就是utf-8(Unicode字符编码)
content属性定义与name或http-equiv属性相关的元信息,content 属性始终要和 name 属性或 http-equiv 属性一起使用。
name属性
<meta name="keywords" content="HTML, CSS, JavaScript">
keywords——为搜索引擎提供关键字
<meta name="description" content="My tutorials on HTML, CSS and JavaScript">
description——对网页整体上的描述
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minmum-scale=1.0">
viewport——定义页面视图相关内容(移动端常用)
width=device-width 设置页面的宽度跟随设备屏幕宽度
initial-scale=1.0 设置页面的初始缩放比,范围[0.0-10.0]
maxinum-scale=1.0 设置页面放大后最大比例,范围同上
mininum-scale=1.0 设置页面缩小后最小比例,范围同上
user-scalable=yes 设置是否允许用户缩放页面
<meta name="theme-color" content="#fff">
theme-color——定义页面的主题颜色
http-equiv属性,把 content 属性关联到 HTTP 头部
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
X-UA-Compatible ——用来指定Internet Explorer 8 及以上版本浏览器模拟某个特定版本IE浏览器的渲染方式,以此来解决IE浏览器的兼容问题。 (吐槽:ie还是恶心人啊)
IE = edge: 将采用浏览器支持的最高文档模式渲染页面
chrome=1: 这个可以让IE的浏览器使用Google Chrome Frame(谷歌内嵌浏览器框架GCF)去渲染页面,前提是用户安装了这个GCF.实际的效果就是用着IE的皮,实际是chorme内核在干活.用玄幻的话来说,IE被夺舍了.
<meta http-equiv="content-type" content="text/html; charset=utf-8">
Content-Type——表示描述文档类型
text/HTML 文档类型,这里为html,如果是JS就是text/javascript
charset=utf-8 页面字符集指定为utf-8
注意:本文内容仅为面试做的准备工作,内容不全面,关于<meta>元素还有不少内容可自行百度