HEAD


HEAD

Document type

Add a standard mode declaration to the first line of each HTML page to ensure that every browser Have consistent performance in the device. 

<!DOCTYPE html>

Language attribute

Why use lang="zh-cmn-Hans" instead of the lang="zh-CN" we usually write? Please refer to the discussion on Zhihu: web page Should the header declaration be lang="zh" or lang="zh-cn"? 

<!-- 中文 -->
<html lang="zh-Hans">

<!-- 简体中文 -->
<html lang="zh-cmn-Hans">

<!-- 繁体中文 -->
<html lang="zh-cmn-Hant">

<!-- English -->
<html lang="en">

Character encoding

  • Use utf-8 encoding without BOM as the file format;
  • The meta that specifies the character encoding must be the first direct child of head Element;
<html>
  <head>
    <meta charset="utf-8">
    ......
  </head>
  <body>
    ......
  </body>
</html>

IE Compatibility Mode

Priority to use the latest version of IE and Chrome kernel

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

SEO Optimization

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- SEO -->
    <title>Style Guide</title>
    <meta name="keywords" content="your keywords">
    <meta name="description" content="your description">
    <meta name="author" content="author,email address">
</head>

viewport

  • viewport: Generally refers to the size of the browser window content area, excluding toolbars, tabs, etc.;
  • width: Browser width, the width of the visible area of ​​the page in the output device;
  • device-width: Device resolution width, the visible width of the screen of the output device;
  • initial-scale: Initial scaling ratio;
  • maximum-scale: Maximum scaling ratio;

is optimized for mobile devices and sets the visible area Width and initial scaling. 

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

iOS icon

  • apple-touch-icon pictures are automatically processed into rounded corners and highlights;
  • apple-touch-icon-precomposed prohibits the system from automatically Add effects and directly display the original design;
<!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">

<!-- iPad，72x72 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-72x72-precomposed.png" sizes="72x72">

<!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" sizes="114x114">

<!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" sizes="144x144">

favicon

When the favicon is not specified, most browsers will request favicon.ico in the root directory of the Web Server. In order to ensure that the favicon is accessible and avoid 404, one of the following two methods must be followed:

  • Place the favicon.ico file in the root directory of the Web Server;
  • Use link to specify the favicon;
<link rel="shortcut icon" href="path/to/favicon.ico">

HEAD Template

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Style Guide</title>
    <meta name="description" content="不超过150个字符">
    <meta name="keywords" content="">
    <meta name="author" content="name, email@gmail.com">

    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- iOS 图标 -->
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">

    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
    <link rel="shortcut icon" href="path/to/favicon.ico">
</head>