4 head设定

4.1 doctype

【强制】doctype使用 HTML5 的 doctype 来启用标准模式。

其中 doctype 建议使用大写的 DOCTYPE； 关于doctype该使用大写还是小写的讨论

示例：

  1. <!DOCTYPE html>

4.2 页面编码

【强制】页面必须明确指定字符编码，让浏览器快速确定适合网页内容的渲染方式。指定字符编码的 meta 必须是 head 的第一个直接子元素。建议使用无 BOM 的 UTF-8 编码；

示例：

  1. <meta charset="UTF-8">

4.3 兼容模式

【建议】PC端启用 IE Edge 模式，并针对360浏览器启用webkit渲染模式；

示例：

  1. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  2. <meta name="renderer" content="webkit">

4.4 引入CSS

【强制】引入 CSS 时必须指明 rel=”stylesheet”；

建议在 head 中引入页面需要的所有 CSS 资源，因为在页面渲染的过程中，新的CSS可能导致元素的样式重新计算和绘制，页面闪烁；

示例：

  1. <link rel="stylesheet" src="global.css">

4.5 引入JavaScript

【建议】JavaScript应当放在页面尾部；出于性能方面的考虑，如非必要，请遵守此条建议；

示例：

  1. <body>
  2.     <!-- a lot of elements -->
  3.     <script src="main.js"></script>
  4. </body>

4.6 favicon

【强制】保证 favicon 可访问；

在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证favicon可访问，避免404，必须遵循以下两种方法之一：

  1. 在 Web Server 根目录放置 favicon.ico 文件;
  2. 使用 link 指定 favicon;

示例：

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

附：工作流中默认的PC端head设定

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="renderer" content="webkit">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <meta name="Keywords" content="多玩游戏">
  9.     <meta name="description" content="多玩游戏">
  10.     <!-- a lot of elements -->
  11. </head>
  12. <body>
  13.     <!-- a lot of elements -->
  14. </body>
  15. </html>

附：工作流中默认的移动端head设定

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  6.     <meta name="format-detection" content="telephone=no,address=no,email=no">
  7.     <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
  8.     <meta name="keywords" content="多玩游戏">
  9.     <meta name="description" content="多玩游戏">
  10.     <!-- a lot of elements -->
  11. </head>
  12. <body>
  13.     <!-- a lot of elements -->
  14. </body>
  15. </html>

注意：当该项目有相关的app在app store中，设置metaapple-itunes-app，如上面最后一条，并填上对应的app-id。详细请看：Promoting Apps with Smart App Banners

更详细的meta属性设置可以参详：https://github.com/hzlzh/cool-head

[⬆]