[前端] 网站中常用的meta头

1、Meta标签的name属性语法格式是：＜meta name="参数" content="参数值"＞

 

其中name属性主要有以下几种参数：

A、Keywords(关键字)

含义：keywords用来告诉搜索引擎你网页的关键字是什么。

举例：

<meta name="keywords" content="网站关键字,技术网站,个人网站" />

 

B、description(网站内容描述)

含义：description用来告诉搜索引擎你的网站主要内容。

举例：

<meta name="description" content="网站描述" />

 

C、robots(机器人向导)

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

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

举例：

<meta name="robots" content="机器人向导" />

 

D、author(作者)

含义：标注网页的作者或者官网网址

举例：

<meta name="author" content="张三" />

 

 

2、http-equiv属性

http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

meat标签的http-equiv属性语法格式是：＜meta http-equiv=”参数” content=”参数值”＞ ；其中http-equiv属性主要有以下几种参数：

A、Expires(期限)

说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。

用法：

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

 

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

B、Pragma(cache模式)

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

用法：

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

 

注意：这样设定，访问者将无法脱机浏览。

 

C、Refresh(刷新)

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

用法：

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

 

注意：其中的2是指停留2秒钟后自动刷新到URL网址。

D、Set-Cookie(cookie设定)

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

用法：

<meta http-equiv="set-cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT; path=/"/>

 

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

E、Window-target(显示窗口的设定)

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

用法：

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

 

注意：用来防止别人在框架里调用自己的页面。

F、content-Type(显示字符集的设定)

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

用法：

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

 

 

3、移动站meta

A、禁止缩放

 

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

 

B、忽略数字被识别为电话号码

 

 

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

 

C、忽略数字被识别为邮箱

 

 

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

 

D、强制UC浏览器竖屏显示

 

 

<meta name="screen-orientation" content="portrait">

E、强制UC浏览器全屏显示

 

 

<meta name="full-screen" content="yes">

 

F、UC浏览器应用模式

 

 

<meta name="browsermode" content="application">

 

G、强制QQ浏览器竖屏显示

 

 

<meta name="x5-orientation" content="portrait">

 

H、强制QQ浏览器全屏显示

 

 

<meta name="x5-fullscreen" content="true">

 

I、QQ浏览器应用模式

 

 

<meta name="x5-page-mode" content="app">

 

J、针对一些不识别viewport的浏览器，如黑莓

 

<meta name="HandheldFriendly" content="true">

 

K、针对微软的老式浏览器

 

 

<meta name="MobileOptimized" content="320">

 

L、隐藏状态栏/设置状态栏颜色

 

 

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

 

M、safari浏览器，添加到主屏界面显示的标题

 

 

<meta name="apple-mobile-web-app-title" content="应用标题">

 

N、隐藏状态栏/设置状态栏颜色2

 

 

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

 

默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。

 

O、离线应用（开启缓存）

<meta name="apple-mobile-web-app-capable" content="yes" />

 

P、添加到主屏应用的图标

 

<link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png" />

 

Q、启动图片

 

 

<link rel="apple-touch-startup-image" href="milanoo_startup.png" />

 

 

R、iphone打电话，meta头把telephone="yes" 即可 

 

<a href="18256771872">18256771872</a>

 

S、android机打电话

 

 

<a href="tel:18256771872">18256771872</a>

 

 

T、优先使用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" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

 

 

U、兼容内核

 

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

 

 

欢迎关注技术开发分享录：http://fenxianglu.cn/