详解html常常被忽略的meta标签

目录

（一）charset属性

（二）name 属性

（三）http-equiv属性

（四）viewport属性

（五）全屏属性

---

meta标签。meta作为辅助性标签不具有展示作用，往往被忽略的。

meta称为元数据，即用来描述数据的数据。html里的<meta>标签则是用来描述html页面的。

meta的属性表

属性	值	描述	4	5
charset	character encoding	定义文档的字符编码。		5
content	some_text	定义与 http-equiv 或 name 属性相关的元信息。	4	5
http-equiv	content-type expires refresh set-cookie	把 content 属性关联到 HTTP 头部。	4	5
name	author description keywords generator revised others	把 content 属性关联到一个名称。	4	5
scheme	some_text	定义用于翻译 content 属性值的格式。不支持。	4
viewport		用于移动端设备优化

html5不再支持scheme属性

（一）charset属性

用来定义文档的字符编码

<meta charset="utf-8">

（二）name 属性

1. 针对搜索引擎的关键词：keywords

这个比较常用，当做展示型的网站时，SEO尤为重要。设置合适的keywords和description有利于搜索引擎的优化

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />

2. 对网站内容的描述：description

作用与keywords类似，主要针对搜索引擎设置

<meta name="description" content="这是xx的公司的官网" />

3.描述页面的最新版本：revised

 比较不常用的meta信息，主要针对版本的迭代的记录

<meta name="revised" content="chunling, 2019/01/25" />

4.开发者：author

<meta name="author" content="青玉" />

 5.说明网站采用什么方法制作的：generator

<meta name="generator" content="Apache" />

6.告诉搜索引擎机器人抓取哪些页面：robots

一般默认all，可取值有all / none / index / noindex / follow / nofollow

<meta name="robots" content="all">

（三）http-equiv属性

1.用来定义文档的字符编码：content-type（html5不推荐）

规定文档使用字符集，与name:charset功能一致。这是html4.01的用法。html5都使用charset而不用这一说明方法了

<meta http-equiv="content-type" content="text/html; charset=UTF-8">   // html4.01
<meta charset="UTF-8">    // html5

2.用于设定网页的到期时间：expires

用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。注意：必须使用GMT的时间格式。

<meta http-equiv="expires" content="Fri,12 Jan 2020 18:18:18 GMT">

3.定义文档自动刷新的时间间隔：refresh

每10秒刷新一次页面。注意，refresh应该慎重使用，它会使得页面不受用户控制

<meta http-equiv="refresh" content="10" />

4.设置cookie过期时间：set-cookie

如果网页过期，那么存盘的cookie会被删除。注意：必须使用GMT的时间格式。

<meta http-equiv="set-cookie" content="cookievalue=xxx">   // 单独描述
<meta http-equiv="set-cookie" content="cookievalue=xxx; expires=Friday,12-Jan-2020 18:18:18 GMT; path=/">   // 与网页过期时间一起设置

5.显示窗口的设定：window-target

强制页面在当前窗口以独立页面显示。注意：用来防止别人在框架（frame/iframe）里调用自己的页面。

<meta http-equiv="window-target" content="_top">

6.动画效果：page-enter

可以在进入网页或者离开网页的一刹那实现动画效果

<meta http-equiv="page-enter" content="revealTrans(duration=5.0,transition=20)">

（四）viewport属性

viewport主要用于移动端优化

可以参考这篇文章：

http://www.runoob.com/w3cnote/viewport-deep-understanding.html

https://www.cnblogs.com/2050/p/3877280.html

width	设置layout viewport  的宽度，为一个正整数，或字符串"width-device"
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport  的高度，这个属性对我们并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为 "no" 或 "yes", no 代表不允许，yes 代表允许

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

（五）全屏属性

<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->