1. meta概念
<meta>
是HTML 语言头部的一个辅助性标签,常用于定义页面的说明,关键字,最后修改日期,页面编码语言,索引擎优化,自动刷新并指向新的页面,控制页面缓冲,响应式视窗等以及其它的元数据。这些元数据将服务于浏览器(如何布局或重载页面),搜索引擎和其它网络服务。该标签常用属性如下:
属性 | 值 | 说明 |
---|---|---|
charset | character_set类型(如utf-8) | 定义文档的字符编码类型 |
content | 文本值 | 定义与 http-equiv 或 name 属性相关的元信息 |
http-equiv | 常用可选值有content-type,default-style,refresh | 定义 HTTP 头部信息 |
name | 常用可选值有application-name,author,description,generator,keywords | 把 content 属性关联到一个名称 |
2. http-equiv
相当于HTTP头文件的作用,用于定义需要的头文件参数的值,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容。其格式为:
<meta http-equiv="头参数名" content="头参数值">
示例1:X-UA-Compatible用于告知浏览器以何种版本来渲染页面
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 定义ie浏览器使用最新版本渲染页面-->
示例2:content-Type用于设定网页字符集(HTML5建议使用charset属性来定义)
<meta http-equiv="content-Type" content="text/html;charset=utf-8">
3. charset
HTML5设定网页字符集的方式,推荐使用UTF-8
<meta charset="utf-8">
4. name
name属性主要用于描述网页,比如网页的关键词,叙述等,以便于搜索引擎查找和搜索引擎优化。其常用值介绍如下:
4.1 keywords
用于告诉搜索引擎你的网页的关键字,多个关键字之间用逗号隔开
示例:
<meta name="keywords" content="html,css,javascript,sass,less,react,vue"/>
4.2. description
网站内容的简介描述,大致主题
示例:
<meta name="description" content="铸心个人博客,专注于互联网前端技术学习与分享">
4.3. viewport
网页的显示视口的设置(如视口大小,缩放设置)
示例:
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
其中content中各属性简单介绍:
width
:viewport的宽度
height
:viewport 的高度
user-scalable
:是否允许缩放(yes,no)
initial-scale
:初始化缩放比例(范围为0到10)
minimum-scale
:允许缩放的最小比例
maximum-scale
:允许缩放的最大比例
4.4 robots
用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。
示例:
<meta name="robots" content="all"/>
其中content中可选值简单介绍:
all
:文件将被检索,且页面上的链接可以被查询;
none
:文件将不被检索,且页面上的链接不可以被查询;
index
:文件将被检索;
follow
:页面上的链接可以被查询;
noindex
:文件将不被检索,但页面上的链接可以被查询;
nofollow
:文件将被检索,但页面上的链接不可以被查询;
4.5. author
标注网页的作者
示例:
<meta name="author" content="铸心"/>