我的 HTML 模板-CFANZ编程社区

如果面试让你手写一份标准的 HTML5 模板，不知道你能不能写的出来呢？

作为前端开发，平时我们对项目的 HTML 模板，很少回去改动，基本项目确定就不会在动了。但是这个很简单的东西，也是很深奥滴。

最近看了两篇关于这个的英文文章特别的棒，给出链接：

htmlhead 一定要看这个
My current HTML boilerplate

更新：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 有什么区别？？

说下我自己的理解吧：
no-transform是百度官方在站长学院中提及过的禁止转码方式：（原文：移动搜索_官方课件）

而当站长们采用no-transform这种方式后，发现得到的效果并不满意：并不能有效阻止百度转码。
于是在多次探寻中，终于求得一良方：通过手机百度查看网页时页面底部有个链接，里面有相关转码的说明，官方提到了”siteapp转码声明“。

页面底部有转码声明，上图一：

点击转码声明后，得到以下解释：

于是这两个标签就一传十、十传百的在各个网站中流行开来。
有只用no-transform，也有只用no-siteapp，当然也有两个都用的。

究竟用哪个好呢？反正不管咋用，至少现阶段都无法保证100%的不被转码。

<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

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 也可以使用条件注释来引入第三方兼容包。

<!--[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等其他浏览器支持查询。