Home > Web Front-end > HTML Tutorial > Common usage of meta and link tags

Common usage of meta and link tags

一个新手
Release: 2017-09-14 10:39:37
Original
2365 people have browsed it

Basic page settings

<!-- 页面描述 -->
<meta name="description" content="页面描述,控制在150字以内" />
<!-- 页面关键词 -->
<meta name="keywords" content="关键字列表" />
<!-- 作者信息 -->
<meta name="author" content="basecss, i@basecss.net" />
<!-- 页面图标 -->
<link rel="shortcut icon" type="image/icon" href="icon.ico" />
<!--解决360浏览器网页显示异常 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Copy after login

http information settings

<!-- 内容语言 -->
<meta http-equiv="content-language" content="zh-CN" />
<!-- 自动跳转 -->
<meta http-equiv="refresh" content="3; URL=http://www.baidu.com" />
<!-- 编码设置(可以直接用 charset="utf-8" 代替) -->
<meta http-equiv="content-type" content="UTF-8" />
<!-- 缓存信息 -->
<meta http-equiv="expires" content="GMT 格式时间" />
<!-- 禁止缓存 -->
<meta http-equiv="pragma" content="no-cache" />
<!-- 缓存控制 -->
<meta http-equiv="Cache-control" content="max-age=5" />
  <!-- ******************************
  public: 允许任何人缓存此页;
  private: 不允许缓存服务器缓存此页;
  no-cache: 相应不能被缓存;
  no-stroe: 请求相应都不能被缓存;
  max-age: 最大生存周期(秒);
  min-fresh: 客户端愿意接受的最小缓存时长,缓存时间超过该值会要求向服务器查新;
  max-stale: 接受超过缓存时限但不超过该值的数据;
  ******************************* -->
<!-- 添加 cookie -->
<meta http-equiv="set-cookie" content="cookieName=cookieValue;expires=GMT 格式时间;path=/" />
<!-- 页面加载动画 -->
<meta http-equiv="page-enter" content="blandtrans(duration=0.5)" />
<!-- 页面退出动画 -->
<meta http-equiv="page-exit" content="revealtrans(duration=0.5,transtion=1)" />
  <!-- ******************************
  transtion 可以取0-23的整数,分别表示:
  0.盒状收缩; 1.盒状展开; 2.圆形收缩; 3.圆形展开; 4.向上擦除;
  5.向下擦除; 6.向左擦除; 7.向右擦除; 8.垂直百叶窗; 9.水平百叶窗;
  10.纵向棋盘; 11.横向棋盘; 12.溶解; 13.左右向中间收缩; 14.中间向左右展开;
  15.上下向中间收缩; 16.中间向上下展开; 17.阶梯向左下; 18.阶梯向左上;
  19.阶梯向右下; 20.阶梯向右上; 21.水平随机线; 22.垂直随机线; 23.随机;
  ****************************** -->
Copy after login

Search engine related settings

<!-- 设置搜索引擎抓取间隔 -->
<meta name="visit-after" content="10 days">
<!-- 搜索引擎抓取设置 -->
<meta name="robots" content="index, follow" />
  <!-- ******************************
  index: 允许搜索引擎抓取此页;
  noindex: 不允许搜索引擎抓取此页;
  follow: 允许搜索引擎抓取子页面;
  nofollow: 允许搜索引擎抓取子页面;
  none: 等同于 noindex 和 nofollow
  all: 等同于 index 和 follow
  ******************************* -->
Copy after login

Mobile related settings

Basic settings for mobile development

<!-- 声明文档字符编码 -->
<meta charset="utf-8">
<!-- IE 兼容性设置 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /> <!-- 用最新模式渲染,优先使用 chrome -->

<!-- 为移动设备设置 viewport -->
<meta name="viewport" content="width=device-width,initial-scale=1, minium-scale=1, user-scalable=no" />
<!-- iOS 移动设备添加主屏幕标题设置 -->
<meta name="apple-mobile-web-app-title" content="My App" />
<!-- 是否启用全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 全屏时状态栏颜色设置 -->
<meta name="apple-mobile-web-status-bar-style" content="black-translucent" />
<!-- 禁用电话号码自动识别 -->
<meta name="format-detection" content="telephone=no" />
<!-- 禁用邮箱自动识别 -->
<meta name="format-detection" content="email=no" />
<!-- 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari), 默认禁用 -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" />
Copy after login

The above is the detailed content of Common usage of meta and link tags. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template