meta元素标签的常见作用

<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>元素还有不少内容可自行百度