【03】ヘッダー部のHTML?headタグ記述_html/css_WEB-ITnose?
HTML の先頭部分には、ブラウザによる Web ページのレンダリングや SEO などに関わる多くのタグや要素があり、各ブラウザ カーネルや国内ブラウザ メーカーごとに独自のタグ要素があり、その結果、多様性。モバイルインターネットの時代では、モバイル端末のヘッド構造とメタ要素がさらに重要になります。各タグの意味を理解し、自分のニーズに合った head タグを作成することがこの記事の目的です。よく使われるheadの各タグや要素の意味や利用シーンをまとめて紹介します。
DOCTYPE
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
HTML 4.01 Transitional
HTML 4.01 フレームセット
最新の HTML5 では、より簡潔な記述が導入されており、前方および後方互換性があり、使用することをお勧めします。
HTML における doctype には主に 2 つの目的があります。
· 書類の有効性を確認します。
これは、このドキュメントがどの DTD に従って記述されているかをユーザー エージェントとバリデータに伝えます。このアクションは受動的であり、ページが読み込まれるたびにブラウザは DTD をダウンロードせず、ページが手動で検証される場合にのみ有効になります。
ブラウザのレンダリング モードを決定します
実際の操作では、ドキュメントを読み取るときに使用する解析アルゴリズムをブラウザに通知します。これが記述されていない場合、ブラウザは独自のルールに従ってコードを解析し、HTML レイアウトに重大な影響を与える可能性があります。ブラウザには HTML ドキュメントを解析する 3 つの方法があります。
o 変ではない(標準)モード
o 変なモード
o 部分的に変な(標準に近い)モード IEブラウザのドキュメントモード、ブラウザモード、厳密モード、変モード、DOCTYPEタグについて。
charset
ドキュメントで使用される文字エンコーディングを宣言します。
html5 のように書きますこれ:
これら 2 つは同等です。詳細については、こちらをご覧ください :?vs? (このリンクは stackoverflow に関する質問と回答です) そのため、より短く簡単なメモリを使用することをお勧めします。
lang 属性
簡体字中国語
繁体字中国語
なぜ通常書く lang="zh-CN" ではなく lang="zh-cmn-Hans" なのでしょうか? 順を追って読んでください: ページの先頭のステートメントは lang="zh" または lang にする必要があります。 ="zh-cn"。
最新バージョンの IE と Chrome を優先的に使用してください
360 Google Chrome Frame を使用します
360 ブラウザはこのタグをすぐに読み取ります。対応速度芯。さらに、念のため追加してください
次のように書くことができます。実現される効果は、Google Chrome Frame がインストールされている場合は、GCF がページのレンダリングに使用されます。GCF がインストールされていない場合は、IE カーネルの最新バージョンがレンダリングに使用されます。
関連リンク:
Baidu はトランスコーディングを禁止しています
Baidu 携帯電話で Web ページを開くと、Baidu は Web ページをトランスコードし、衣服を脱ぎ、犬の皮膚絆創膏の広告を体に貼り付けることがあります。
-
SEO 最適化パート
ページのキーワード キーワード
ページの説明コンテンツの説明
Web 著者の著者の定義
Web 検索エンジンのインデックス付け方法を定義します。robotterms はカンマ「,」で区切られた一連の値であり、通常は次の値を持ちます: none、noindex、nofollow、all、index、follow。
関連リンク: WEB1038 - タグに無効な値が含まれています
- viewport
- ビューポートでレイアウトをより良く表示できるようになりますモバイルブラウザ上で。通常は
width=device-width と書くと iPhone 5 が発生します。ホーム画面に追加した後、WebApp 全画面モード (http://bigc.at/ios-webapp-viewport-meta.orz) でページを開くと黒い境界線が表示されます
- content パラメータ:
- ·width ビューポート幅(値/デバイスの幅)
・初期スケール 初期スケーリング
・最大スケール 最大スケーリング
・最小スケール 最小スケーリング
・ユーザースケーリング可能ユーザーズーム (はい/いいえ)
minimal-ui iOS 7.1 beta 2 の新しい属性により、ページの読み込み時に上部と下部のステータス バーを最小化できます。これは次のように直接記述できるブール値です:
ウェブサイトが応答しない場合は、初期スケールを使用しないか、スケーリングを無効にしてください。
関連リンク: 非レスポンシブデザインビューポート
へiPhone 6 および iPhone 6plus に適応させるには、次のように記述する必要があります:
ほとんどの 4.7 ~ 5 インチ Android デバイスのビューポート幅は 360px に設定されていますが、iPhone 6 では 375px です。ほとんどの 5.5 インチ Android マシン (たとえば、 Samsung Note) は 400 です。iPhone 6 plus では 414px です。
iOS デバイス
ホーム画面に追加された (iOS 6 の新機能)
- - - ホーム画面にタイトルを追加 (iOS 6 の新機能) -->
WebApp 全画面モードを有効にするかどうか
"apple-mobile-web-app-capable" content="yes" の場合にのみ有効です。
content パラメータ:
· デフォルトのデフォルト値。
- ・黒 ステータスバーの背景が黒です。
- ・黒半透明 ステータスバーの背景が黒で半透明です。 「デフォルト」または「黒」に設定すると、Web ページのコンテンツはステータス バーの下部から始まります。黒半透明に設定すると、Web ページのコンテンツが画面全体に表示され、上部はステータス バーによってブロックされます。
-- 電話番号としての数字の自動認識を無効にする - ->
iOS アイコン
rel パラメータ: apple-touch-icon 写真は自動的に角丸とハイライトに処理されます。 apple-touch-icon-precomposed は、システムがエフェクトを自動的に追加することを禁止し、元のデザインを直接表示します。 iPhone と iTouch (デフォルトは 57x57 ピクセル) には
- が必要です。 ;!-- iPhone および iTouch、デフォルトは 57x57 ピクセル、必須 -->
iPad、72x72 ピクセル、オプションですが推奨
- < link rel="apple -touch -icon-precomposited" sizes="72x72" href="/apple-touch-icon-72x72-precommposed.png" />
Retina iPad、144x144 ピクセル、オプションですが推奨
IOS アイコンのサイズiPhone 6 Plusでは180×180、iPhone 6では120×120です。 iPhone 6 Plus に適応させるには、この段落を追加する必要があります
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 横長 2048x1496 (Retina)
<リンクrel= "apple-touch-startup-image"sizes="2048x1496" href="/splash-screen-2048x1496.png" />
iPhone および iPod touch の起動画面にはステータス バー領域が含まれています。
iPhone/iPod Touch 縦画面 320x480 (標準解像度)
- /iPod Touch 5 縦画面 640x1136 (網膜) Reen-640x1136 png" />
iPhone 6 の対応画像サイズは 750×1294、iPhone 6 Plus の対応画像サイズは 1242×2148 です。
Windows 8
Windows 8 タイルカラー
name= "msapplication-TileImage" content="icon.png"/> " type="application/rss+xml" title="RSS" href="/rss.xml" /> ;
favicon アイコン
モバイル メタ
- < ;meta name="format-detection" content="telephone=no、email=no"/>
- < "format-detection" content="telphone=no, email=no"/>
- < ;meta http-equiv="X-UA-Practical" content="IE=edge">
< !- - モバイル エンドに適応する -->これは、toobug からの共有の概要です。
その他のメタ タグのリファレンス
· HTML メタ タグの完全なリスト
· 2013 年にすべての Web ページに必要な 18 のメタ タグ
参考記事:
· 一般的に使用される HTML ヘッド タグ
· amazeui cs
ウィズより

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









この記事では、HTML&lt; Progress&gt;について説明します。要素、その目的、スタイリング、および&lt; meter&gt;との違い要素。主な焦点は、&lt; Progress&gt;を使用することです。タスクの完了と&lt; Meter&gt; statiの場合

この記事では、HTML&lt; Datalist&GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

この記事では、html&lt; meter&gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化&lt; Meter&gt; &lt; Progress&gt;およびex

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

この記事では、html5&lt; time&gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

この記事では、&lt; iframe&gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
