web head

一些常用head的收集

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
搜索引擎的关键词
<meta name="keywords" content="your,keywords,here,comma,separated,no,spaces">
页面描述
<meta name="description" content="150 chars">
<meta name="language" content="en">
定义网页搜索引擎索引方式,通常有如下几种取值:none,noindex,nofollow,all,index和follow。
<meta name="robots" content="index,follow">
定义页面的最新版本
<meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm">
网页作者
<meta name="author" content="name, email@example.com">
<meta name="designer" content="">
版权信息
<meta name="copyright" name="Copyright 2016"/>

一些多核浏览器使用chrome模式

优先使用 IE 最新版本和 Chrome,安装了 Google Chrome Frame,则使用 GCF 来渲染页面,如果没有安装 GCF,则使用最高版本的 IE 内核进行渲染
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">

360浏览器
页面需默认用极速核,增加标签
<meta name="renderer" content="webkit"> 
若页面需默认用ie兼容内核,增加标签
<meta name="renderer" content="ie-comp"> 
若页面需默认用ie标准内核,增加标签
<meta name="renderer" content="ie-stand">

移动端设置

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>

android

<meta name="theme-color" content="#E64545">

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-app-status-bar-style" content="black">
是否启用 WebApp 全屏模式
<meta name="apple-touch-fullscreen" content="yes">
添加到主屏按钮将网站添加到主屏幕上
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<link rel="apple-touch-startup-image" href="startup.png">
把一串数字识别为电话号码,点击的时候会提示是否呼叫
<meta name="format-detection"content="telephone=no, email=no" />

更多

浏览器

<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- 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">

缓存相关

<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">

百度禁止转码,神马搜索禁止转码

<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

跳转

<meta http-equiv="refresh" content="300;url=https://example.com/">
每8秒刷新一次网站
<meta http-equiv="refresh" content="8" />

icon

<link rel="icon" href="path/to/favicon.ico" type="image/x-icon"/> 
<link rel="shortcut icon" href="path/to/favicon.ico" type="image/x-icon"/>

<!-- For IE 10 and below -->  
<!-- No link, just place a file called favicon.ico in the root directory -->

<!-- For IE 11, Chrome, Firefox, Safari, Opera -->  
<link rel="icon" href="path/to/favicon-16.png" sizes="16x16" type="image/png">
<link rel="icon" href="path/to/favicon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="path/to/favicon-48.png" sizes="48x48" type="image/png">
<link rel="icon" href="path/to/favicon-62.png" sizes="62x62" type="image/png">
<!-- More info: https://bitsofco.de/all-about-favicons-and-touch-icons/ -->

参考

html5-boilerplate

web64