如果面试让你手写一份标准的 HTML5 模板，不知道你能不能写的出来呢？
作为前端开发，平时我们对项目的 HTML 模板，很少回去改动，基本项目确定就不会在动了。但是这个很简单的东西，也是很深奥滴。
最近看了两篇关于这个的英文文章特别的棒，给出链接：
更新：2021-05-17
以下部分是看到简书首页研究的结果：
<!DOCTYPE html><!-- DTD文档类型声明为HTML5版本的格式 -->
<html lang="zh-CN"><!--指定为中文网站，主要避免触发谷歌浏览器翻译功能-->
<!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
<head>
<!-- 字符编码写法 优于 html4.01的<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> -->
<meta charset="UTF-8">
<!-- 网站标题，最好在自己使用对应框架的路由拦截中每次设置不同的标题较好 -->
<title>Condor Hero</title>
<!-- 用于告诉搜索引擎，你网页的关键字，特别有用 -->
<meta name="keywords" content="简书,简书官网,图文编辑软件,简书下载,图文创作,创作软件,原创社区,小说,散文,写作,阅读">
<!-- 网页作者，一般放在keywords之下 -->
<meta name="author" content="重庆派臣科技有限公司,https://www.paichen.net/" />
<!-- 用于告诉搜索引擎，你网站的主要内容。不超过150个字符 -->
<meta name="description" content="简书是一个优质的创作社区，在这里，你可以任性地创作，一篇短文、一张照片、一首诗、一幅画……我们相信，每个人都是生活中的艺术家，有着无穷的创造力。">
<!-- 移动端网页布局必备 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 用于告知浏览器以何种版本来渲染页面 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><!-- 指定IE和Chrome使用最新版本渲染当前页面 -->
<!-- renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。比如说360浏览器。 -->
<meta name="renderer" content="webkit"/><!--默认webkit内核-->
<!-- Start of Baidu Transcode -->
<!-- 移动端专用禁止百度转码乱加广告导致页面布局散了，此方法并不能百分之百有效 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta http-equiv="Cache-Control" content="no-transform" />
<!-- 此网站可同时适合在移动设备和电脑上进行浏览会自动适配 -->
<meta name="applicable-device" content="pc,mobile">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="width"/>
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true"/>
<meta name="mobile-agent" content="format=html5;url=https://www.jianshu.com/">
<!-- End of Baidu Transcode -->
<!-- robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引content默认是all搜索引擎将索引此网页与继续通过此网页的链接索引。 -->
<meta name="robots" content="all" />
<!-- 快捷方式图标推荐大小为32x32 -->
<link href="//cdn2.jianshu.io/assets/favicons/favicon-e743bfb1821442341c3ab15bdbe804f7ad97676bd07a770ccc9483473aa76f06.ico" rel="shortcut icon" type="image/x-icon">
<!-- iOS 设备 begin -->
<!-- 添加到主屏后的标题（iOS 6 新增） -->
<meta name="apple-mobile-web-app-title" content="标题">
<!-- IOS 设备可以使用添加到主屏按钮将网站添加到主屏幕上apple-touch-icon-precomposed用来设置主屏幕上的图标 -->
<link rel="apple-touch-icon-precomposed" href="//cdn2.jianshu.io/assets/apple-touch-icons/57-a6f1f1ee62ace44f6dc2f6a08575abd3c3b163288881c78dd8d75247682a4b27.png" sizes="57x57" />
<!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
<link rel="apple-touch-icon-precomposed" href="//cdn2.jianshu.io/assets/apple-touch-icons/72-fb9834bcfce738fd7b9c5e31363e79443e09a81a8e931170b58bc815387c1562.png" sizes="72x72" />
<link rel="apple-touch-icon-precomposed" href="//cdn2.jianshu.io/assets/apple-touch-icons/76-49d88e539ff2489475d603994988d871219141ecaa0b1a7a9a1914f4fe3182d6.png" sizes="76x76" />
<link rel="apple-touch-icon-precomposed" href="//cdn2.jianshu.io/assets/apple-touch-icons/114-24252fe693524ed3a9d0905e49bff3cbd0228f25a320aa09053c2ebb4955de97.png" sizes="114x114" />
<link rel="apple-touch-icon-precomposed" href="//cdn2.jianshu.io/assets/apple-touch-icons/120-1bb7371f5e87f93ce780a5f1a05ff1b176828ee0d1d130e768575918a2e05834.png" sizes="120x120" />
<link rel="apple-touch-icon-precomposed" href="//cdn2.jianshu.io/assets/apple-touch-icons/152-bf209460fc1c17bfd3e2b84c8e758bc11ca3e570fd411c3bbd84149b97453b99.png" sizes="152x152" />
<!-- iOS 图标 end -->
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="sNMk592JV2wwHn6DPJ8C5oy/hHDnjIlZBOHyngtTbpQ=" />
</head>
<body>
</body>
</html>
no-siteapp 和 no-transform 有什么区别？？
作者：师旭
链接：https://www.zhihu.com/question/24375835/answer/77448034
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
说下我自己的理解吧：
no-transform是百度官方在站长学院中提及过的禁止转码方式：（原文：移动搜索_官方课件）
而当站长们采用no-transform这种方式后，发现得到的效果并不满意：并不能有效阻止百度转码。
于是在多次探寻中，终于求得一良方：通过手机百度查看网页时页面底部有个链接，里面有相关转码的说明，官方提到了”siteapp转码声明“。
页面底部有转码声明，上图一：
点击转码声明后，得到以下解释：
于是这两个标签就一传十、十传百的在各个网站中流行开来。
有只用no-transform，也有只用no-siteapp，当然也有两个都用的。
究竟用哪个好呢？反正不管咋用，至少现阶段都无法保证100%的不被转码。
<meta name="applicable-device" content="pc,mobile">
3，做好终端适配：
随着移动互联网的发展，越来越多的用户使用移动设备访问网站，百度移动搜索会对移动站给予优先排序的机会，对于有PC网站的站长，我们强烈建议您做以下工作：
1、做好自适配，将移动终端的访问自主适配跳转至移动版站点；
2、为了更快地告知百度移动搜索您PC网站与移动站内容的一一对应关系，建议使用站长平台移动适配工具进行适配关系提交。
关于移动适配帮助可以参考：/wiki/39 3、同时还可以使用如下Meta标签协议规范：
●如果该网页只适合在电脑上进行浏览，例如（http://www.sina.com.cn/ ），在html中加入如下meta：
<meta name="applicable-device" content="pc">
●如果该网页只适合在移动设备上进行浏览，例如（http://3g.sina.com.cn/ ），在html中加入如下meta： <meta name="applicable-device" content="mobile">
●如果网页采用了响应式网页设计，例如（http://cdc.tencent.com/） 不需要经过url自适配跳转就可以根据浏览器的屏幕大小自适应的展现合适的效果，同时适合在移动设备和电脑上进行浏览，在html中加入如下meta： <meta name="applicable-device" content="pc,mobile">
<meta name="mobile-agent" content="format=html5;url=https://www.jianshu.com/">
<meta name="format-detection" content="telephone=no,email=no">
让页面出的所有手机号码和邮箱被忽略，让 a 标签在移动端不能识别电话和邮箱。
apple-touch-icon
在 iPhone,iPad,iTouch 的 safari上可以使用添加到主屏按钮将网站添加到主屏幕上。apple-touch-icon是IOS设备的私有标签，如果设置了相应apple-touch-icon标签，则添加到主屏上的图标会使用指定的图片。在<head></head>区域加入下面代码即可。
<link rel="apple-touch-icon" href="/custom_icon.png"/>
apple-touch-icon 标签支持sizes属性，可以用来放置对应不同的设备。
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
分别放置57x57（默认值）的图标对应320x640的老设备，72x72对应ipad，114x114对应retina屏的iPhone及iTouch。由于手头没有iPad3，所以没测试是否支持144x144的图标在iPad3上的显示。
虽然官方都用的png图片做说明，但实际测试jpg格式也可用（不推荐），图片无需做圆角处理，同Native App一样，系统会自动为图标添加圆角及高光。如果不想系统对图标添加效果，可以用apple-touch-icon-precomposed代替apple-touch-icon。
图标搜索的优先级如下：
- 如果没有跟相应设备推荐尺寸一致的图标，那个会优先使用比推荐尺寸大，但最接近推荐尺寸的图标。
- 如果没有比推荐尺寸大的图标，会优先选择最接近推荐尺寸的图标。
- 如些有多个图标符合推荐尺寸，会优先选择包含关键字precomposed的图标。
- 如果未在区域指定用link标签指定图标，会自动搜索网站根目录下有apple-touch-icon...或者 apple-touch-icon-precomposed…前缀的图标。 如设备推荐尺寸为57x57,优先级如下：
- apple-touch-icon-57x57-precomposed.png
- apple-touch-icon-57x57.png
- apple-touch-icon-precomposed.png
- apple-touch-icon.png
偷懒的方法，可以直接设置一个最大尺寸的图标，如我测试使用一个114x114大小的图标，在iPhone4以及iPad2上都可以正常显示。以上内容在iPhone4以及iPad2上测试通过。
google的网站认证代码，证明该网站的所有者是你，和利于搜索引擎收入：获取代码可以进入http://www.google.com/webmasters/tools/，将自己网站添加进 google网站管理，有利于google 的收录。
<meta name="google-site-verification"content="tPkY-Quj85Ni78uIWOIREPO9k5xczDgjch10qsLfVfs" />
360 和腾讯网站认证：
<meta name="tencent-site-verification" content="39a5ed77a02c0103af6ac08addbc3851"/>
<meta name="360-site-verification" content="604a14b53c6b871206001285921e81d8" />
QQ登陆声明:
<meta property="qc:admins" content="153033120760567656375" />
微博登陆声明：
<meta property="wb:webmaster" content="e9da5e10879ed7c9" />
关于这两个 meta 代码我实在是没搞懂怎么使用的，只知道是防止 CSRF：
<meta content="authenticity_token" name="csrf-param" />
<meta content="gv1xdpH2w4MYcMtoT52pRPV+tPoWFDSJhxNiBOC5idQ=" name="csrf-token" />
缓存不可缓存的内容：CSRF安全性 涉及到了 Ruby on Rails 就不懂了。
兼容IE浏览器
现在对低版本的 IE 浏览器，虽然不要刻意来处理兼容问题，但是为了防止用户使用低版本的 IE 浏览器访问我们的网页，一般使用只有 IE 认识的条件注释来强迫用户升级浏览器，常用的注释如下：
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lte IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以下版本可识别 <![endif]-->
<!--[if gt IE 7]> IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->
如果确实想兼容低版本的 IE 也可以使用条件注释来引入第三方兼容包。
在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用，但是在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement('tagName')创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍，这样IE低版本也能正常解析HTML5新标签了。
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]—>
- html5shiv：解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。
- respond:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
写作时间：2020年2月25日16点14分
