目次
DOCTYPE
charset
lang 属性
最新バージョンの IE と Chrome を優先的に使用してください
360 Google Chrome Frame を使用します
Baidu はトランスコーディングを禁止しています
iOS デバイス
iOS起動画面
Windows 8
モバイル メタ
ホームページ ウェブフロントエンド htmlチュートリアル 【03】ヘッダー部のHTML?headタグ記述_html/css_WEB-ITnose?

【03】ヘッダー部のHTML?headタグ記述_html/css_WEB-ITnose?

Jun 24, 2016 am 11:34 AM

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 最適化パート
ページタイトル <p class="sycode"> </p> <p> </p> <p><title>あなたのタイトル

ページのキーワード キーワード

ページの説明コンテンツの説明

Web 著者の著者の定義

Web 検索エンジンのインデックス付け方法を定義します。robotterms はカンマ「,」で区切られた一連の値であり、通常は次の値を持ちます: none、noindex、nofollow、all、index、follow。

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

    viewport
  1. ビューポートでレイアウトをより良く表示できるようになりますモバイルブラウザ上で。通常は

width=device-width と書くと iPhone 5 が発生します。ホーム画面に追加した後、WebApp 全画面モード (http://bigc.at/ios-webapp-viewport-meta.orz) でページを開くと黒い境界線が表示されます

    content パラメータ:
  1. ·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 パラメータ:

· デフォルトのデフォルト値。

    ・黒 ステータスバーの背景が黒です。
  1. ・黒半透明 ステータスバーの背景が黒で半透明です。 「デフォルト」または「黒」に設定すると、Web ページのコンテンツはステータス バーの下部から始まります。黒半透明に設定すると、Web ページのコンテンツが画面全体に表示され、上部はステータス バーによってブロックされます。
電話番号としての数字の自動認識を無効にする

-- 電話番号としての数字の自動認識を無効にする - ->

iOS アイコン

rel パラメータ: apple-touch-icon 写真は自動的に角丸とハイライトに処理されます。 apple-touch-icon-precomposed は、システムがエフェクトを自動的に追加することを禁止し、元のデザインを直接表示します。 iPhone と iTouch (デフォルトは 57x57 ピクセル) には

  1. が必要です。 ;!-- 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 縦画面 1536x2008 (Retina) - - &gt; gt;

landscapeスクリーン1024x748(標準解像度)

&lt; link rel = "apple-touch-startup-image" sizes = "1024x748" href = "/default Portrait-1024x748.png" /> ;

    iPad 横長 2048x1496 (Retina)

<リンクrel= "apple-touch-startup-image"sizes="2048x1496" href="/splash-screen-2048x1496.png" />

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

iPhone/iPod Touch 縦画面 320x480 (標準解像度)

! - iPhone/iPod Touch Vertical Screen 320x480(標準解像度) - &gt; touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" />

  1. /iPod Touch 5 縦画面 640x1136 (網膜) Reen-640x1136 png" />

    iPhone 6 の対応画像サイズは 750×1294、iPhone 6 Plus の対応画像サイズは 1242×2148 です。

    Windows 8

    Windows 8 タイルカラー

    1. name= "msapplication-TileImage" content="icon.png"/> " type="application/rss+xml" title="RSS" href="/rss.xml" /> ;

    favicon アイコン

    さらに詳しい favicon の紹介は https://github.com/audreyr/favicon-cheat-sheet を参照してください

    モバイル メタ

    1. < ;meta name="format-detection" content="telephone=no、email=no"/>
    2. < "format-detection" content="telphone=no, email=no"/>
    3. < ;meta http-equiv="X-UA-Practical" content="IE=edge">

    < !- - モバイル エンドに適応する -->これは、toobug からの共有の概要です。

    その他のメタ タグのリファレンス

    · HTML メタ タグの完全なリスト

    · 2013 年にすべての Web ページに必要な 18 のメタ タグ

    参考記事:

    · 一般的に使用される HTML ヘッド タグ

    · amazeui cs



    ウィズより



このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

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

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

&lt; Progress&gt;の目的は何ですか 要素? &lt; Progress&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

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

&lt; datalist&gt;の目的は何ですか 要素? &lt; datalist&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

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

&lt; meter&gt;の目的は何ですか 要素? &lt; meter&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

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

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

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

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

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

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

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

HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

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

&lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? &lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

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

See all articles