HTML / CSS

meta

meta 元素定义的元数据的类型包括以下几种：

  • 如果设置了 name 属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面。
  • 如果设置了 http-equiv 属性，meta 元素则是编译指令，提供的信息与类似命名的HTTP头部相同。
  • 如果设置了 charset 属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码。
  • 如果设置了 itemprop 属性，meta 元素提供用户定义的元数据。

viewport

viewport 是用户网页的可视区域。

viewport 翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
  • height：和 width 相对应，指定高度。
  • initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
  • maximum-scale：允许用户缩放到的最大比例。
  • minimum-scale：允许用户缩放到的最小比例。
  • user-scalable：用户是否可以手动缩放。

apple-mobile-web-app-capable

WebApp全屏模式：伪装app，离线应用。

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

apple-mobile-web-app-status-bar-style

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

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

apple-mobile-web-app-title

添加到主屏后的标题

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

format-detection

忽略数字自动识别为电话号码

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

忽略识别邮箱

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

apple-itunes-app

添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载banner(如下图)。参考文档

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

申明编码

<meta charset='utf-8'>

Expires(期限)

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

＜meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT" /＞

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

Pragma(cache模式)

说明：是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出

＜meta http-equiv="Pragma" content="no-cache"＞

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

Refresh(刷新)

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

＜meta http-equiv="Refresh" content="2；URL=http://www.net.cn/"＞

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

Set-Cookie(cookie设定)

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

＜meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT； path=/"＞

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

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

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

＜meta http-equiv="Window-target" content="_top"＞

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

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

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

＜meta http-equiv="content-Type" content="text/html; charset=gb2312"＞

Pics-label(网页等级评定)

<meta http-equiv="Pics-label" contect="">

说明：在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的。

Page_Enter、Page_Exit

设定进入页面时的特殊效果

<meta http-equiv="Page-Enter"    contect="revealTrans(duration=1.0,transtion=    12)">

设定离开页面时的特殊效果

<meta http-equiv="Page-Exit"    contect="revealTrans(duration=1.0,transtion=    12)">

Duration 的值为网页动态过渡的时间，单位为秒。 Transition 是过渡方式，它的值为0到23，分别对应24种过渡方式。如下表：

  • 0 盒状收缩
  • 1 盒状放射
  • 2 圆形收缩
  • 3 圆形放射
  • 4 由下往上
  • 5 由上往下
  • 6 从左至右
  • 7 从右至左
  • 8 垂直百叶窗
  • 9 水平百叶窗
  • 10 水平格状百叶窗
  • 11 垂直格状百叶窗
  • 12 随意溶解
  • 13 从左右两端向中间展开
  • 14 从中间向左右两端展开
  • 15 从上下两端向中间展开
  • 16 从中间向上下两端展开
  • 17 从右上角向左下角展开
  • 18 从右下角向左上角展开
  • 19 从左上角向右下角展开
  • 20 从左下角向右上角展开
  • 21 水平线状展开
  • 22 垂直线状展开
  • 23 随机产生一种过渡方式

清除缓存（再访问这个网站要重新下载！）

<meta http-equiv="cache-control" content="no-cache">

设定网页的到期时间

<meta http-equiv="expires" content="0">

关键字,给搜索引擎用的

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

页面描述

<meta http-equiv="description" content="This is my page">

results matching ""

    No results matching ""