字符编码
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
两种写法等效,推荐写第一种
语言设置
简体中文
<html lang="zh-cmn-Hans">
繁体中文
<html lang="zh-cmn-Hant">
不是写lang="zh-CN"
浏览器内核控制
设置IE的优先版本为edge,若不存在则选择当前最高版本,含有谷歌内核的会选择谷歌,如果设置多条的话只有第一条生效
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
针对多内核浏览器设置优先使用的内核
<meta name="renderer" content="webkit">
<!--
webkit: 极速内核
ie-comp: ie兼容内核
ie-stand: ie标准内核
-->
禁用百度转码
通过百度进去你的网页,百度可能会对你的网页进行转码,转码的意思就是会在你的网页上加广告,要防止这种情况需要加
<meta http-equiv="Cache-Control" content="no-siteapp">
SEO优化
<!-- 页面标题 -->
<title>页面标题</title>
<!-- 作者 -->
<meta name="author" content="Jencia">
<!-- 版权 -->
<meta name="copyright" content="本页版权归XXX所有">
<!-- 使用的编译器 -->
<meta name="generator" content="webstorm">
<!-- 网页描述 -->
<meta name="description" content="这是一个整合meta的页面">
<!-- 网页关键字 -->
<meta name="keywords" content="meta,教程,博客">
<!-- 搜索引擎索引方式 -->
<meta name="robots" content="index,follow">
<!--
all 文件将被检索,且页面上的链接可以被查询
none 文件将不被检索,且页面上的链接不可以被查询
index 文件将被检索
follow 页面上的链接可以被查询
noindex 文件将不被检索
nofollow 页面上的链接不可以被查询
-->
页面缓存
设置页面缓存的到期时间,content值为GMT时间格式,如果不想缓存就设置为0
<meta http-equiv="expires" content="Wed, 26 Feb 2012 08:21:57 GMT">
不想从缓存里读取页面,就添加
<meta http-equiv="pragma" content="no-cache">
win8图标
Windows 8 磁贴颜色
<meta name="msapplication-TileColor" content="#000">
Windows 8 磁贴图标
<meta name="msapplication-TileImage" content="icon.png">
移动端设备
viewport设置
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<!--
width 宽度(数值 / device-width)
height 高度(数值 / device-height)
initial-scale 初始的缩放比例 (范围从0到1)
minimum-scale 允许用户缩放到的最小比例
maximum-scale 允许用户缩放到的最大比例
user-scalable 是否允许用户缩放页面 (no,yes)
viewport-fit 适配iPhoneX,使页面完全覆盖整个窗口
-->
针对手持设备优化,主要是针对一些老的不识别viewport的浏览器
<!-- 黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
忽略数字自动识别为电话号码
<meta name="format-detection" content="telephone=no">
忽略识别邮箱
<meta name="format-detection" content="email=no">
其他
<!-- uc强制竖屏 | 横屏 -->
<meta name="screen-orientation" content="portrait | landscape">
<!-- QQ强制竖屏 | 横屏 -->
<meta name="x5-orientation" content="portrait | landscape">
<!-- 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">
其他
PWA应用定义
<link rel="manifest" href="manifest.json">
详细PWA介绍可参考 https://zhuanlan.zhihu.com/p/…
添加favicon icon
<link rel="shortcut icon" type="image/ico" href="/favicon.ico">
// 或者
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
详细favicon介绍可参考 https://github.com/audreyr/fa…
自动刷新或重定向
<!-- 2秒后刷新 -->
<meta http-equiv="refresh" content="2;url=">
<!-- 5秒后重定向到百度页面 -->
<meta http-equiv="refresh" content="5;url=http://www.baidu.com">
添加rss订阅
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml">
IOS设备添加主屏幕设置
添加到主屏后的标题(iOS 6 新增)
<meta name="apple-mobile-web-app-title" content="标题">
是否启用 WebApp 全屏模式
<meta name="apple-mobile-web-app-capable" content="yes">
设置状态栏的背景颜色,全屏模式下才生效
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!--
default 默认
black 黑色
black-translucent 黑色半透明
-->
图标设置
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="xx.png">
<!-- sizes不写默认57x57 -->
启动画面设置
<link rel="apple-touch-startup-image" sizes="768x1004" href="xx.png">
建议考虑不同分辨率,对每个分辨率设置各自的sizes,配上对应尺寸的图片,可参考以下表格。
手机型号 | 图标大小 | 分辨率大小 |
---|---|---|
iPad | 72×72 | 768×1004(竖屏)、1024×748(竖屏) |
iPad(Retina) | 144×144 | 1536×2008(竖屏)、2048×1496(竖屏) |
iPhone/iPod Touch | 57×57 | 320×480 |
iPhone/iPod Touch(Retina) | 114×114 | 640×960 |
iPhone 5/iPod Touch 5 | 114×114 | 640×1136 |
iPhone 6 | 120×120 | 750×1294 |
iPhone 6 Plus | 180×180 | 1242×2148 |
添加智能APP广告条 Smart App Banner(iOS 6+ Safari),顶部会自动弹出一条关于应用下载的广告条,下载地址就是你设置的myURL
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">