简单了解html中meta标签
现在很多的编辑器都提供了一键生成HTML骨架的功能,对于一键生成的骨架都不大注意他的意思。
下面我简单整理了header里面的meta标签表示的几个意思。
<head>
<meta charset="UTF-8">
// charset 单词意思为字符编码集。表示字符编码集是UTF-8
<meta name="viewport" content="width=device-width, initial-scale=1.0">
// viewport 单词意思为视口,视窗。 device 设备的意思。initial-scale 初始化比例的意思。 整个meta标签的意思也很明显了,就是视口宽和视口宽的比例。此处比例为1,即布局完成后屏幕显示也不进行缩放。
<meta http-equiv="X-UA-Compatible" content="ie=edge">
//X-UA-Compatible 意思是浏览器兼容模式,此处指定以ie=edge即IE最高版本渲染当前页面、
<title>Document</title>
</head>
-
meat标签主要有两大属性:
- 属性1:name 主要用于描述网页,对网页的描述分为以下几种。
- keywords (关键词):告诉搜索引擎,网页主要的关键字。关键字适宜即可。
例如:<meta name="keywords" content="技术,博客,前端">
- description (网页描述):告诉搜索引擎网站的主要内容。
例如:<meta name="description" content="网页描述">
- viewport (移动端的视窗) :提供有关视口大小的提示,常用于设计移动端网页。
例子如上面代码片里面的那样。
- keywords (关键词):告诉搜索引擎,网页主要的关键字。关键字适宜即可。
- 属性1:name 主要用于描述网页,对网页的描述分为以下几种。
-
**属性2:http-equiv属性 ,**主要参数如下几种。
-
content-Tyoe (网页内容类型,也就是设置网页字符集) ,便于浏览器解析与渲染页面。
例如:<meta http-equiv="content-Type" content="text/html;charset=utf-8">
-
X-UA-Compatible(浏览器采取何种版本渲染当前页面)用于告知浏览器以何种版本来渲染页面。(一般都设置为最新模式,在各大框架中这个设置也很常见。)
例如<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
//指定IE和Chrome使用最新版本渲染当前页面。 -
refrech 以指定间隔时间重新载入当前页面。也可指定跳转页面。
例如:<meta http-equiv="refresh" content="10;URL=http://www.baidu.com">
//10秒后在当前页跳转到百度
`
-