頭


HEAD

ドキュメントタイプ

各ブラウザで一貫したパフォーマンスを保証するために、各 HTML ページの最初の行に標準モード宣言を追加します。 

<!DOCTYPE html>

言語属性

なぜ通常書く lang="zh-CN" の代わりに lang="zh-cmn-Hans" を使用するのでしょうか? Zhihu のディスカッションを参照してください: Web ページの先頭にあるステートメントは次のとおりです。 lang="zh" または lang="zh-cn" を使用しますか? 

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

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

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

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

文字エンコーディング

  • ファイル形式として BOM フリーの utf-8 エンコーディングを使用します。
  • 文字エンコーディングを指定するメタは、head の最初の直接の子要素である必要があります
<html>
  <head>
    <meta charset="utf-8">
    ......
  </head>
  <body>
    ......
  </body>
</html>

IE 互換モード

最新バージョンの IE および Chrome カーネルの使用を優先します

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

SEO 最適化

<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: 通常、ツールバーを除く、ブラウザ ウィンドウのコンテンツ領域のサイズを指します。タブなど;viewport: 一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容；
  • width: 浏览器宽度，输出设备中的页面可见区域宽度；
  • device-width: 设备分辨率宽度，输出设备的屏幕可见宽度；
  • initial-scale: 初始缩放比例；
  • maximum-scale
    • width: ブラウザの幅、出力デバイスでのページの表示領域の幅

device-width: デバイスの解像度。 width、出力デバイスの画面の表示幅

initial-scale: 初期スケーリング;

    maximum-scale: 最大スケーリング。モバイル デバイスの場合、表示領域の幅と初期スケーリングを設定します。 
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">
    • iOS アイコン
apple-touch-icon の画像は自動的に角が丸くなりハイライトされます。

apple-touch-icon-precommpoced はシステムが自動的にエフェクトを追加することを禁止し、元のデザインを直接表示します。 favicon

favicon が指定されていない場合、ほとんどのブラウザは Web サーバーのルート ディレクトリにある favicon.ico を要求します。ファビコンにアクセスできることを確認し、404 を回避するには、次の 2 つの方法のいずれかに従う必要があります:
  • Web サーバーのルート ディレクトリに favicon.ico ファイルを配置します。
  • リンクを使用してファビコンを指定します。 

<!-- 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">

HEADテンプレート
<link rel="shortcut icon" href="path/to/favicon.ico">
🎜