HTML meta 标签

Mr Liuu

已于 2022-03-25 10:55:13 修改

阅读量135

点赞数

分类专栏： meta 文章标签： html

于 2022-03-25 10:45:44 首次发布

本文链接：https://blog.csdn.net/TomNumber/article/details/123729093

版权

meta 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

！！标签是 HTML 语言头部的一个辅助性标签，我们可以定义页面编码语言、搜索引擎优化、自动刷新并指向新的页面、控制页面缓冲、响应式视窗等！

属性	值	描述
charset( H5 New)	character_set	定义文档的字符编码。
content	text	定义与 http-equiv 或 name 属性相关的元信息。
http-equiv	content-type default-style refresh	把 content 属性关联到 HTTP 头部。
name	application-name author description generator keywords	把 content 属性关联到一个名称。
scheme(H5 删除)	format/URI	HTML5不支持。定义用于翻译 content 属性值的格式。

整体来看，HTML5之前，meta标签只有两个主要属性，分别是 name 属性和 http-equiv 属性。 HTML5新添加"charset".

一、name

name属性主要用于描述网页，对应属性是 content ，以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。

语法：

1.Keywords（关键字）

说明：为搜索引擎提供的关键字列表

语法：

<meta name="keywords" content="程序员,程序猿,攻城狮"/>

2.Description（简介）

说明：Description用来告诉搜索引擎你的网站主要内容。

语法：

<meta name="description" content="meta标签是HTML中的一个重要标签，它位于HTML文档头部的<HEAD>标签和<TITL>标签之间。"/>

3.robots（机器人向导）

说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。

语法：

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

content的参数值有all,none,index,noindex,follow,nofollow，默认值是all。

参数说明：

参数为 all ：文件将被检索，且页面上的链接可以被查询；参数为 none ：文件将不被检索，且页面上的链接不可以被查询；参数为 index ：文件将被检索；参数为 follow ：页面上的链接可以被查询；参数为 noindex ：文件将不被检索，但页面上的链接可以被查询；参数为 nofollow ：文件将被检索，但页面上的链接不可以被查询；

4.author（作者）

说明：标注网页的作者

语法：

<meta name="author" content="TG,TG@qq.com"/>

5.copyright（版权）

说明：标注版权

语法：

<meta name="copyright" content="本网站版权归TG所有"/>

6.generator

说明：说明网站采用什么编辑器制作。

语法：

<meta name="generator" content="你所用的编辑器"/>

7.revisit-after（重访）

说明：网站重访

语法：

<meta name="revisit-after" content="7days"/>

二、http-equiv

http-equiv类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

语法：

<meta http-equiv="参数"  content="参数值"/>

参数说明：

1.Expires（期限）

说明：指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新传输。

语法：

<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>

注意：必须使用GMT的时间格式，或者直接设为0（数字表示多久后过期）

2.Pragma（cache模式）

说明：禁止浏览器从本地计算机的缓存中访问页面内容。

语法：

<meta http-equiv="Pragma" content="no-cache"/>

注意：网页不保存在缓存中，每次访问都刷新页面。这样设定，访问者将无法脱机浏览。

3.Refresh（刷新）

说明：自动刷新并指向新页面。

语法：

<meta http-equiv="refresh"content="5; url=http://www.baidu.com/"/>

其中的5表示5秒后自动刷新并调整到URL新页面。

4.Set-Cookie（cookie设定）

说明：浏览器访问某个页面时会将它存在缓存中，下次再次访问时就可从缓存中读取，以提高速度。当你希望访问者每次都刷新你广告的图标，或每次都刷新你的计数器，就要禁用缓存了。

如果网页过期，那么存盘的cookie将被删除。

语法：

<meta http-equiv="Set-Cookie"  content="cookievalue=xxx; expires=Wednesday, 　　　　　　 21-Oct-98 16:14:21 GMT; path=/">

注意：必须使用GMT的时间格式

5.Window-target（显示窗口的设定）

说明：强制页面在当前窗口以独立页面显示

语法：

<meta http-equiv="Window-target" content="_top"/>

可以用来防止别人在框架里调用你的页面。

6.content-Type（显示字符集的设定）

说明：设定页面使用的字符集

<meta http-equiv="content-Type" content="text/html;charset=utf-8"/>

其他参数值：

meta标签的charset的信息参数如GB2312时，代表说明网站是采用的编码是简体中文；

meta标签的charset的信息参数如BIG5时，代表说明网站是采用的编码是繁体中文；

meta标签的charset的信息参数如iso-2022-jp时，代表说明网站是采用的编码是日文；

meta标签的charset的信息参数如ks_c_5601时，代表说明网站是采用的编码是韩文；

meta标签的charset的信息参数如ISO-8859-1时，代表说明网站是采用的编码是英文；

meta标签的charset的信息参数如UTF-8时，代表世界通用的语言编码；

在HTML5中，我们一般都是：<meta charset="utf-8"/>
7.content-Language（显示语言的设定）

说明：显示语言

语法：

<meta http-equiv="Content-Language" content="zh-cn"/>

8.http-equiv="imagetoolbar"

<meta http-equiv="imagetoolbar" content="false"/>

指定是否显示图片工具栏，当为false代表不显示，当为true代表显示。

！！HTML 5新增
一、name

1.viewport

说明：能优化移动浏览器的显示（屏幕的缩放）

语法：

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

参数值：

width viewport的宽度[device-width | pixel_value]width如果直接设置pixel_value数值，大部分的安卓手机不支持，但是ios支持；

height – viewport 的高度（范围从 223 到 10,000 ）

user-scalable [yes | no]是否允许缩放

initial-scale [数值] 初始化比例（范围从 > 0 到 10）

minimum-scale [数值] 允许缩放的最小比例

maximum-scale [数值] 允许缩放的最大比例

2.format-detection（忽略电话号码和邮箱）

说明：忽略电话号码和邮箱

语法：

//忽略页面中的数字识别为电话号码

<meta name="format-detection" content="telephone=no">

//忽略页面中的邮箱格式识别为邮箱

<meta name="format-detection" content="email=no"/>

也可以写成：

<meta name="format-detection" content="telphone=no, email=no"/>

3、浏览器内核控制：国内浏览器很多都是双内核（webkit和Trident），webkit内核高速浏览，IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。（仅限360浏览器）

<meta name="renderer" content="webkit|ie-comp|ie-stand">

若页面需默认用极速核，增加标签：<meta name="renderer" content="webkit">
若页面需默认用ie兼容内核，增加标签：<meta name="renderer" content="ie-comp">
若页面需默认用ie标准内核，增加标签：<meta name="renderer" content="ie-stand">

各渲染内核的技术细节

内核	Webkit	IE兼容	IE标准
内核版本	Chrome 45	IE6/7	IE9/IE10/IE11(取决于用户的IE)
HTML5支持	YES	NO	YES
ActiveX控件支持	NO	YES	YES

4、WebApp全屏模式

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->

5、隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

6、不同浏览器

<!-- 针对手持设备优化，主要是针对一些老的不识别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 点击无高光 -->  

<meta name="msapplication-tap-highlight" content="no">

二、http-equiv

1、优先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />  

<!-- 关于X-UA-Compatible -->  

<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->  

<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 用于在IE8版本浏览器中使用IE7渲染来避免出错 -->  

<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

2、转码申明：用百度打开网页可能会对其进行转码（比如贴广告），避免转码可添加如下meta

<meta http-equiv="Cache-Control" content="no-siteapp" />

三、charset

<meta charset="UTF-8">