ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML_HTML/Xhtml_Web ページ制作におけるヘッダー構造
HTML_HTML/Xhtml_Web ページ制作におけるヘッダー構造
- WBOYオリジナル
- 2016-05-16 16:36:431991ブラウズ
以下では、一般的に使用される head 構造と、各タグと要素の意味と使用シナリオを紹介します (この記事はマスターの記事を元に、拡張された要約です)。
padding.me のヘッダー構造
🎜> <メタ>
https://plus. google.com/u/1/105241873904238310190/?rel=author">
http://padding.me/humans.txt" />
http://feeds.feedburner.com/paddingme" />
ドキュメントタイプ
DOCTYPE (ドキュメント タイプ)、この宣言はドキュメントの先頭、html タグの前にあり、このタグはドキュメントが使用する HTML または XHTML 仕様をブラウザに伝えます。
DTD (Document Type Definition) 宣言は で始まり、大文字と小文字は区別されず、先頭にコンテンツはありません (スペースを除く) 他のコンテンツがある場合、ブラウザーは Quirks モードをオンにします。 IEでWebページをレンダリングします。パブリック DTD、名前の形式は「登録 // 組織 // タイプ タグ // 言語」です。「登録」は組織が国際標準化機構 (ISO) に登録されているかどうかを示し、はい、- はいいえを意味します。 「組織」は組織の名前 (W3C など)、「タイプ」は通常 DTD、「ラベル」は指定されたパブリック テキストの説明、つまり参照されるパブリック テキストの一意の説明名です。その後にバージョン番号が続きます。最後の「言語」は、DTD 言語の ISO 639 言語識別子です。たとえば、EN は英語、ZH は中国語を意味します。 XHTML 1.0 では 3 つの DTD タイプを宣言できます。それぞれ厳密バージョン、移行バージョン、フレームベースの HTML ドキュメントを表します。
•
HTML 4.01 strict
http://www.w3.org/TR/html4 /strict.dtd">
•
HTML 4.01 Transitional
http://www.w3.org/TR/html4/loose.dtd">
•
HTML 4.01 フレームセット
http://www.w3.org/TR/html4/frameset.dtd">
•
そして最新の HTML5 では、より簡潔な記述が導入されており、前方互換性と後方互換性があり、使用することが推奨されています。
HTML の doctype には 2 つの主な目的があります。
•書類の有効性を確認します。
これは、このドキュメントがどの DTD に従って記述されているかをユーザー エージェントとバリデータに伝えます。このアクションは受動的であり、ページがロードされるたびにブラウザは DTD をダウンロードせず、ページが手動で検証される場合にのみ有効になります。
•ブラウザのレンダリングモードを決定します
実際の操作では、ドキュメントを読み取るときにどの解析アルゴリズムを使用するかをブラウザに通知します。これが記述されていない場合、ブラウザは独自のルールに従ってコードを解析し、HTML レイアウトに重大な影響を与える可能性があります。ブラウザには HTML ドキュメントを解析する 3 つの方法があります。
◦ 変ではない（標準）モード
◦ 変なモード
◦ 部分的に変な（ほぼ標準）モード
IE ブラウザのドキュメントモード、ブラウザモード、厳密モード、変モード、DOCTYPE タグ、詳細について読み取りモードは利用できますか?標準！ 、ボックスモデル。
文字セット
ドキュメントで使用される文字エンコーディングを宣言します。
HTML5 より前では、Web ページは次のように記述されていました:
これら 2 つは同等です。より具体的には、http://stackoverflow.com/questions/4696499/meta-charset-utf-8-vs-meta-http-equiv-content-type なので、覚えやすい短いものを使用することをお勧めします。
lang 属性
簡体字中国語
繁体字中国語
WebApp 全画面モードを有効にするかどうか
ステータスバーの背景色を設定します
"apple-mobile-web-app-capable" content="yes" の場合にのみ有効です
コンテンツパラメータ:
•default デフォルト値。
・黒 ステータスバーの背景が黒です。
•黒半透明 ステータスバーの背景は黒で半透明です。
デフォルトまたは黒に設定すると、Web ページのコンテンツはステータス バーの下部から始まります。
黒半透明に設定すると、Web コンテンツが画面全体に表示され、上部はステータス バーによってブロックされます。
電話番号として自動的に認識される数字の認識を無効にする
iOS アイコン
rel パラメータ:
apple-touch-icon の画像は自動的に角丸とハイライトに処理されます。
apple-touch-icon-precomposed は、システムが効果を自動的に追加することを禁止し、元のデザインを直接表示します。
iPhone と iTouch、デフォルトは 57x57 ピクセル、
;!-- iPhone と iTouch、デフォルトは 57x57 ピクセル、->
iPad、72x72 ピクセル、オプションですが推奨
!-- iPad、72x72 ピクセル、オプションですが推奨-->
Retina iPhone および Retina iTouch、114x114 ピクセル、オプションですが推奨
Retina iPad、144x144 ピクセル、オプションですが推奨
!-- 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 (標準解像度)
iPad ポートレート 1536x2008 (Retina)
iPad 横向き 1024x748 (標準解像度)
iPad 横長 2048x1496 (Retina)
iPhone および iPod touch の起動画面にはステータス バー領域が含まれています。
iPhone/iPod Touch 縦画面 320x480 (標準解像度)
- iPhone/iPod Touch 縦画面 320x480 (標準解像度) -->
iPhone/iPod Touch 縦画面 640x960 (Retina)
iPhone 5/iPod Touch 5 縦型画面 640x1136 (Retina)
スマート アプリ バナーの追加 (iOS 6 Safari)
Windows 8
Windows 8 タイルの色
Windows 8 タイル アイコン
RSS 購読
!-- RSS 購読を追加します-- >
ファビコン アイコン
favicon の詳細については、https://github.com/audreyr/favicon-cheat-sheet
を参照してください。モバイルメタ
< ;meta name="format-detection" content="telephone=no, email=no" />
< ;meta name="format-detection" content="telphone=no, email=no" />
< ;! -- 360 ブラウザのスピード モード (Webkit) を有効にする -->
< ;meta name= "MobileOptimized" content="320">
;!-- QQ 強制縦画面 -->
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/