HTML ヘッド構造

HTML ヘッド構造

以下では、よく使われるヘッド構造と、各タグや要素の意味や使用シーンを紹介します（この記事は、Yisi Da Shenの記事を基にして、拡張要約したものです）。

padding.me のヘッド構造

コードをコピー
コードは次のとおりです。

<!DOCTYPE HTML>
<html lang="zh-cmn-Hans">
<ヘッド>
<メタ文字セット="utf-8">
<meta name="viewport" content="width=デバイス幅、user-scalable=yes">
<meta name="keywords" content="PaddingMe、フロントエンド、フロントエンド、フロントエンド エンジニア、Web 開発エンジニア、HTML、CSS、JavaScript、HTML5、CSS3、git、Github">
<meta name="description" content="PaddingMe - 彼はフロントエンド開発者です。">
<meta name="ロボット" content="インデックス、フォロー">
<meta name="author" content="PaddingMe,[email protected]"></p> <p> <meta name="renderer" content="webkit">
<meta http-equiv="X-UA-compatible" content="IE=Edge,chrome=1">
<meta></p> <p> <meta http-equiv="Cache-Control" content="no-siteapp"></p> <p> <title>PaddingMe</title>
<link rel="ショートカットアイコン" type="image/x-icon" href="../favicon.ico"></p> <p> <link rel="author" href="<a href="https://plus.google.com/u/1/105241873904238310190/?rel=author">https://plus.google.com/u/1/105241873904238310190/?rel=author</a>">
<link type="text/plain" rel="author" href="<a href="http://padding.me/humans.txt">http://padding.me/humans.txt</a>" /></p> <p> <link rel="stylesheet" href="/css/screen.css">
<link rel="スタイルシート" href="/css/font.css">
<link rel="スタイルシート" href="/css/social.css">
<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="<a href="http://feeds.feedburner.com/paddingme">http://feeds.feedburner.com/paddingme</a>" />
</head>

文書タイプ

DOCTYPE (ドキュメント タイプ) の宣言は、ドキュメントの先頭、HTML タグの前にあります。このタグは、ドキュメントがどの HTML または XHTML 仕様を使用しているかをブラウザーに伝えます。

DTD (文書型定義) 宣言は <!DOCTYPE> で始まります。大文字と小文字は区別されません。その前には何もありません。他のコンテンツ (スペースを除く) がある場合、ブラウザーは Quirks モードをオンにして、IE で Web ページをレンダリングします。パブリック DTD、名前の形式は「registered//organization//type tag//language」です。「registered」は組織が国際標準化機構 (ISO) に登録されているかどうかを示します。+ は登録されている、- は登録されていないことを示します。 「組織」は W3C などの組織の名前です。「タイプ」は通常 DTD です。「タグ」は指定されたパブリック テキストの説明、つまり参照されるパブリック テキストの一意の説明名であり、その後にバージョン番号が続く場合があります。最後に、「language」は、英語の場合は EN、中国語の場合は ZH など、DTD 言語の ISO 639 言語識別子です。 XHTML 1.0 では 3 種類の DTD を宣言できます。それぞれ、厳密バージョン、移行バージョン、フレームベースの HTML ドキュメントを表します。
•
HTML 4.01 厳密
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

•
HTML 4.01 移行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

•
HTML 4.01 フレームセット
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 フレームセット//EN" "http://www.w3.org/TR/html4/frameset.dtd">

•
最新の HTML5 では、より簡潔な記述方法が導入されており、前方互換性と後方互換性があり、使用が推奨されています。
<!doctypehtml>

HTML の doctype には主に 2 つの目的があります。
•書類の有効性を確認します。
これは、ドキュメントがどの DTD で記述されたかをユーザー エージェントとバリデータに伝えます。このアクションは受動的です。ブラウザはページがロードされるたびに DTD をダウンロードして有効性をチェックしません。ページが手動で検証された場合にのみ有効になります。
• ブラウザのレンダリングモードを決定します
実際の操作では、ドキュメントの読み取り時に使用する解析アルゴリズムをブラウザに指示します。記述されていない場合、ブラウザは独自のルールに従ってコードを解析するため、HTML レイアウトに重大な影響を与える可能性があります。ブラウザが HTML ドキュメントを解析する方法は 3 つあります。

◦非癖（標準）モード
◦Quirksモード
◦ いくつかの奇妙な（ほぼ標準的な）モード
IEブラウザのドキュメントモード、ブラウザモード、厳密モード、互換モード、DOCTYPEタグについて、モードの詳細を読むことはできますか？標準！ 、ボックスモデル。

文字セット

文書で使用される文字エンコーディングを宣言します。

コードをコピー
コードは次のとおりです。

<メタ文字セット='utf-8'>

HTML5 以前は、Web ページは次のように記述されていました。

コードをコピー
コードは次のとおりです。

<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8">

これら 2 つは同等です。詳細は http://stackoverflow.com/questions/4696499/meta-charset-utf-8-vs-meta-http-equiv-content-type で説明されているので、覚えやすい短い方を使用することをお勧めします。

lang属性

中国語（簡体字）
<html lang="zh-cmn-Hans"> <!-- lang 属性を記述するより標準的な方法<http://zhi.hu/XyIa> -->

繁体字中国語
<html lang="zh-cmn-Hant"> <!-- lang 属性を記述するより標準的な方法<http://zhi.hu/XyIa> -->

地域コードが必要になることはめったにありませんが、通常は地域によって中国語の使用法が異なることを強調するために使用されます。次に例を示します。

コードをコピー
コードは次のとおりです。

<p lang="zh-cmn-Hans">
<strong lang="zh-cmn-Hans-CN">パイナップル</strong>と<strong lang="zh-cmn-Hant-TW">パイナップル</strong>は実際には同じ果物です。中国本土と台湾では名前が異なり、シンガポールとマレーシアでも名前が異なります。<strong lang="zh-cmn-Hans-SG">パイナップル</strong>と呼ばれています。
</p>

詳細については、http://zhi.hu/XyIa をご覧ください。

IEとChromeの最新バージョンを優先する


コードをコピー
コードは次のとおりです。

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

360 Google Chrome Frame の使用


コードをコピー
コードは次のとおりです。

<meta name="レンダラー" content="webkit">

このタグを読み取った後、360 Browser はすぐに対応する高速コアに切り替わります。
さらに、保険のために、


コードをコピー
コードは次のとおりです。

<meta http-equiv="X-UA-compatible" content="IE=Edge,chrome=1">

このように記述することで得られる効果は、Google Chrome Frame がインストールされている場合は、ページのレンダリングに GCF が使用されることです。GCF がインストールされていない場合は、IE カーネルの最高バージョンがレンダリングに使用されます。
関連リンク: ブラウザカーネル制御メタタグの説明ドキュメント

Baiduはトランスコーディングを禁止

Baidu Mobileでウェブページを開くと、Baiduはウェブページをトランスコードし、あなたの服を脱がせて犬の皮の絆創膏の広告をあなたに貼り付けることがあります。これを行うには、
<meta http-equiv="キャッシュコントロール" content="サイトアプリなし" />

関連リンク: SiteApp トランスコーディング ステートメント

SEO最適化セクション
•
ページタイトル <title> タグ (head に必須)
<title>あなたのタイトル</title>

•
ページキーワード
<meta name="キーワード" content="キーワード">

•
ページの説明
<meta name="description" content="説明">

•
ウェブページの作成者を定義する
<meta name="author" content="著者,メールアドレス">

•
ウェブページの検索エンジンのインデックス作成方法を定義します。Robotterms は、英語のカンマ「,」で区切られた値のセットで、通常は none、noindex、nofollow、all、index、follow のいずれかの値を持ちます。
<meta name="ロボット" content="インデックス、フォロー">

関連リンク: WEB1038 - タグに無効な値が含まれています

ビューポート

ビューポートを使用すると、モバイル ブラウザーでレイアウトをより適切に表示できます。
通常は書く
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">

width=device-width を指定すると、iPhone 5 のホーム画面にページを追加した後、WebApp のフルスクリーン モードでページを開くと、黒い縁が表示されます (http://bigc.at/ios-webapp-viewport-meta.orz)

コンテンツパラメータ:
•width ビューポートの幅 (値/デバイス幅)
•height ビューポートの高さ (値/デバイスの高さ)
•initial-scale 初期スケーリング比率
•maximum-scale 最大スケーリング比
•最小スケール最小ズーム比
•user-scalable ユーザースケーリングを許可するかどうか（はい/いいえ）
•
minimal-ui iOS 7.1 ベータ 2 の新機能で、ページが読み込まれると上部と下部のステータス バーが最小化されます。これはブール値であり、次のように直接記述できます。
<meta name="viewport" content="width=デバイス幅、初期スケール=1、最小限のUI">

ウェブサイトがレスポンシブでない場合は、initial-scale を使用しないか、スケーリングを無効にしてください。
<meta name="viewport" content="width=デバイス幅、ユーザースケーラブル=はい">

関連リンク: レスポンシブでないビューポート

iOSデバイス

ホーム画面に追加した後のタイトル（iOS 6 の新機能）


コードをコピー
コードは次のとおりです。

<meta name="apple-mobile-web-app-title" content="タイトル"> <!-- ホーム画面に追加した後のタイトル (iOS 6 の新機能) -->

WebApp フルスクリーンモードを有効にするかどうか


コードをコピー
コードは次のとおりです。

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- WebApp フルスクリーン モードを有効にするかどうか -->

ステータスバーの背景色を設定する


コードをコピー
コードは次のとおりです。

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- ステータスバーの背景色を設定します。`"apple-mobile-web-app-capable" content="yes"` の場合にのみ有効です -->

「apple-mobile-web-app-capable」コンテンツが「yes」の場合にのみ機能します

コンテンツパラメータ:
•デフォルトのデフォルト値。
•黒 ステータスバーの背景は黒です。
•black-translucent ステータスバーの背景は黒で半透明です。
デフォルトまたは黒に設定すると、Web ページのコンテンツはステータス バーの下部から始まります。
黒半透明に設定すると、Web ページのコンテンツが画面全体を占め、上部はステータス バーによってブロックされます。

電話番号として番号を自動的に識別しないようにする
<meta name="format-detection" content="telephone=no" /> <!-- 番号を電話番号として自動的に識別しないようにする -->

iOSアイコン

relパラメータ:
アップル タッチ アイコン イメージは、角丸、ハイライト、その他の効果で自動的に処理されます。
apple-touch-icon-precomposed は、システムによる効果の自動追加を禁止し、元のデザインを直接表示します。
iPhoneとiTouch、デフォルト57x57ピクセル、
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone および iTouch、デフォルト 57x57 ピクセル、必須 -->

iPad、72x72ピクセル、オプションだが推奨
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad、72x72 ピクセル、オプションだが推奨 -->

Retina iPhone および Retina iTouch、114 x 114 ピクセル、オプションだが推奨
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone および Retina iTouch、114x114 ピクセル、オプションですが推奨 -->

Retina iPad、144x144 ピクセル、オプションだが推奨
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad、144x144 ピクセル、オプションですが推奨 -->

iOS スプラッシュスクリーン

公式ドキュメント: https://developer.apple.com/library/ios/qa/qa1686/_index.html
参考記事: http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

iPad の起動画面にはステータス バー領域が含まれません。

iPad 縦画面 768 x 1004 (標準解像度)


コードをコピー
コードは次のとおりです。

<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad 縦画面 768 x 1004 (標準解像度) -->

iPad 縦画面 1536x2008 (Retina)


コードをコピー
コードは次のとおりです。

<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad 縦画面 1536x2008 (Retina) -->

iPad 横向き 1024x748 (標準解像度)


コードをコピー
コードは次のとおりです。

<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad 横向き 1024x748 (標準解像度) -->

iPad 横向き 2048x1496 (Retina)


コードをコピー
コードは次のとおりです。

<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad 横長 2048x1496 (Retina) -->

iPhone および iPod touch の起動画面にはステータスバー領域が含まれます。

iPhone/iPod Touch 縦画面 320x480 (標準解像度)
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch 縦画面 320x480 (標準解像度) -->

iPhone/iPod Touch ポートレート 640x960 (Retina)
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch ポートレート 640x960 (Retina) -->

iPhone 5/iPod Touch 5 ポートレート 640x1136 (Retina)
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 ポートレート 640x1136 (Retina) -->

スマート アプリ バナーの追加 (iOS 6 以降 Safari)
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- スマート アプリ バナーを追加 (iOS 6+ Safari) -->

ウィンドウズ8

Windows 8 のタイルの色


コードをコピー
コードは次のとおりです。

<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 タイルの色 -->

Windows 8 タイルアイコン


コードをコピー
コードは次のとおりです。

<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 タイル アイコン -->

RSS購読
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- RSS サブスクリプションを追加 -->

ファビコンアイコン
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- ファビコンアイコンを追加 -->

ファビコンの詳しい紹介については、https://github.com/audreyr/favicon-cheat-sheet を参照してください。

モバイルメタ


コードをコピー
コードは次のとおりです。

<meta name="viewport" content="width=デバイス幅、初期スケール=1、ユーザースケーラブル=いいえ" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="電話番号=いいえ、メールアドレス=いいえ" />
<meta name="viewport" content="width=デバイス幅、初期スケール=1、ユーザースケーラブル=いいえ" />
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- Apple のデフォルトのツールバーとメニューバーを削除します-->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- Apple ツールバーの色を設定します -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- ページ内の数字を電話番号として無視し、メールの認識も無視します-->
<!-- 360 ブラウザの超高速モードを有効にする (Webkit) -->
<meta name="レンダラー" content="webkit">
<!-- 互換モードを使用して IE を回避する -->
<meta http-equiv="X-UA-compatible" content="IE=edge">
<!-- ハンドヘルド デバイス向けに最適化されています。主に、BlackBerry などのビューポートを認識しない古いブラウザー向けです -->
<meta name="HandheldFriendly" content="true">
<!-- Microsoft の古いブラウザ -->
<meta name="モバイル最適化" content="320">
<!-- uc は垂直画面を強制します -->
<meta name="画面の向き" content="縦向き">
<!-- QQ 強制縦画面 -->
<meta name="x5-orientation" content="縦向き">
<!-- UC 強制フルスクリーン -->
<meta name="フルスクリーン" content="はい">
<!-- QQ は全画面を強制します -->
<メタ名="x5-フルスクリーン" コンテンツ="true">
<!-- UC アプリケーション モード -->
<meta name="ブラウザモード" content="アプリケーション">
<!-- QQ アプリケーション モード -->
<meta name="x5-page-mode" content="app">
<!-- Windows Phone をクリックしてもハイライトされない -->
<meta name="msapplication-tap-highlight" content="いいえ">
<!-- モバイル端末に適応 -->

toobug によって共有されました。

その他のメタタグ参照
•HTMLメタタグの完全なリスト
•2013 年にすべての Web ページに必要な 18 個のメタ タグ

参考記事:
•https://github.com/yisibl/blog/issues/1
• https://gist.github.com/paddingme/6182708733917ae36331
• http://amazeui.org/css/
•http://www.douban.com/note/170560091/

<<:  Nginx ルーティング転送とリバースプロキシロケーション構成の実装

>>:  CSS の位​​置属性 (absolute|relative|static|fixed) の概要と応用

推薦する

Windows 10 に MySQL 8.0.19 を zip 形式でインストールする詳細なチュートリアル

目次1.ダウンロード後、インストールしたいディレクトリに解凍します。 2. インストールディレクトリ...

KTLツールはMySQLからMySQLへのデータの同期方法を実現します

ktl ツールを使用して、mysql から mysql にデータを同期します。 1. 新しいジョブス...

React 並行関数エクスペリエンス (フロントエンド並行モード)

React は、開発者が Web およびモバイルベースのアプリケーションを作成するために使用するオ...

純粋な CSS3 でペットの鶏のサンプルコードを実現

最近、CSS3に関する知識や記事をたくさん読んできましたが、CSS3はとても便利に使えると思います。...

ローカル フォルダー内の画像を読み込んで表示するための HTML サンプル コード

一つの目的Html ページでローカル フォルダーを選択すると、フォルダーとそのサブフォルダー内のすべ...

別の種類の「キャンセル」ボタン

「キャンセル」ボタンは必要な操作プロセスの一部ではなく、デザイン上の主要な要素として表示されません...

自動ロック画面機能を実現するjs

1. 使用シナリオこのような要件があるため、システムが開発されました。ユーザーがデスクトップを離れ...

HTML 基本コントロール入門_PowerNode Java アカデミー

<input> タグ<input> タグはユーザー情報を収集するために使用さ...

MySQL データベースの最適化に関する 9 つのヒント

目次1. 最も適切なフィールド属性を選択する2. フィールドをNOT NULLに設定してみる3. サ...

Axiosは繰り返しのリクエストをキャンセル

目次序文1. リクエストをキャンセルする方法2. 重複リクエストの判定方法3. 繰り返しリクエストを...

最初のReactページを作成する方法

目次Rractとは何ですか?背景React スキャフォールディングJSXとは何かRractとは何です...

デザイナーの「職業病」について

デザイナーは世界で最も繊細で感情的な人々だと私はいつも感じています。私がこう言うときに優越感を感じる...

nginx で第 3 レベルドメイン名を設定する方法の例

問題の説明nginx を設定することで、異なるポートを介して異なる Web アプリケーションにアクセ...

jsのディープコピーを理解しましょう

目次js ディープコピーデータ保存方法浅いコピー/深いコピーとは何か一般的なディープコピーの実装1....

MySQLデータクエリが多すぎるとOOMが発生するかどうかについての簡単な議論

目次サーバー層でのフルテーブルスキャンの影響InnoDB におけるフルテーブルスキャンの影響Inno...