<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
两种写法等效,推荐写第一种html
简体中文git
<html lang="zh-cmn-Hans">
繁体中文github
<html lang="zh-cmn-Hant">
不是写lang="zh-CN"
web
设置IE的优先版本为edge,若不存在则选择当前最高版本,含有谷歌内核的会选择谷歌,若是设置多条的话只有第一条生效chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
针对多内核浏览器设置优先使用的内核json
<meta name="renderer" content="webkit"> <!-- webkit: 极速内核 ie-comp: ie兼容内核 ie-stand: ie标准内核 -->
经过百度进去你的网页,百度可能会对你的网页进行转码,转码的意思就是会在你的网页上加广告,要防止这种状况须要加segmentfault
<meta http-equiv="Cache-Control" content="no-siteapp">
<!-- 页面标题 --> <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时间格式,若是不想缓存就设置为0windows
<meta http-equiv="expires" content="Wed, 26 Feb 2012 08:21:57 GMT">
不想从缓存里读取页面,就添加浏览器
<meta http-equiv="pragma" content="no-cache">
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 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 | 72x72 | 768x1004(竖屏)、1024x748(竖屏) |
iPad(Retina) | 144x144 | 1536x2008(竖屏)、2048x1496(竖屏) |
iPhone/iPod Touch | 57x57 | 320x480 |
iPhone/iPod Touch(Retina) | 114x114 | 640x960 |
iPhone 5/iPod Touch 5 | 114x114 | 640x1136 |
iPhone 6 | 120x120 | 750×1294 |
iPhone 6 Plus | 180x180 | 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">