検索

ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5 メタタグの応用例を説明する _html5 チュートリアル スキル

HTML5 メタタグの応用例を説明する _html5 チュートリアル スキル

WBOY
WBOYオリジナル
2016-05-16 15:46:071914ブラウズ

HTML 4.01 と HTML 5 のメタタグの使用における主な違い:

HTML 5 では、scheme 属性はサポートされなくなりました。

HTML 5 には、文字セットの定義を簡単にする新しい charset 属性があります。

HTML 4.01 では、次のように記述する必要があります:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ http-equiv="コンテンツタイプ" コンテンツ="text/html=ISO-8859-1">

HTML 5 では、これで十分です:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ charset="ISO-8859-1 ">

例

検索エンジンのキーワードを定義します:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ 名前="キーワード" コンテンツ="HTML、CSS、XML、XHTML、JavaScript" />

ページの説明を定義します:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ 名前="説明" コンテンツ=「無料の Web テクノロジー チュートリアル。」 />

定義ページの最新バージョン:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ 名前="改訂" コンテンツ=「David、2008/8/8/」 />

5 秒ごとにページを更新します:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ http-equiv="リフレッシュ" コンテンツ="5" />

属性
2015128114639927.png (639×396)

標準プロパティ

class、contenteditable、contextmenu、dir、draggable、id、inquired、lang、ref、registrationmark、tabindex、template、title 詳しい説明については、「HTML 5 の標準プロパティ」を参照してください。

イベントのプロパティ

onbort、onbeforeunload、onblur、onchange、onclick、oncontextmenu、ondblclick、ondrag、ondragend、ondragenter、ondragleave、ondragover、ondragstart、ondrop、onerror、onfocus、onkeydown、onkeypress、onkeyup、onload、onmessage、onmousedown、onmousemove、onmouseover 、onmouseout、onmouseup、onmousewheel、onresize、onscroll、onselect、onsubmit、onunload の詳細については、HTML 5 のイベント属性を参照してください。

例

ドキュメントの説明

XML/HTML コードコンテンツをクリップボードにコピー
  1. <html>
  2. <頭>
  3. <メタ http-equiv=" Content-Type" content="text/html" />
  4. <メタ 名前="著者" コンテンツ="w3school.com.cn">
  5. <メタ 名前="改訂" コンテンツ=「デビッド・ヤン、8/1/07」>
  6. <メタ 名前="ジェネレーター" コンテンツ=「Dreamweaver 8.0en」>
  7. 頭>
  8. <ボディ>
  9. <p>このドキュメントのメタ属性は、作成者と編集ソフトウェアを識別します。 p>
  10. ボディ>
  11. html>

Meta 要素内の情報は HTML ドキュメントを説明します。

ドキュメントのキーワード

XML/HTML コードコンテンツをクリップボードにコピー
  1. <html>
  2. <頭>
  3. <メタ http-equiv=" Content-Type" content="text/html; />
  4. <メタ 名前="説明" コンテンツ=「HTML サンプル」>
  5. <メタ 名前=「キーワード」 コンテンツ="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">
  6. 頭>
  7. <ボディ>
  8. <p> 本書のメタ プロパティでは、この文書とその関連リンクについて説明しています。 p>
  9. ボディ>
  10. html>

メタ要素内の情報は、文書の関連付けを説明することができます。

重定向

XML/HTML コード复制コンテンツ到剪贴板
  1. <html>
  2. <頭>
  3. <メタ http-equiv=" Content-Type" content="text/html; />
  4. <メタ http-equiv="更新" コンテンツ="5;url=http://www.w3school.com.cn">
  5. 頭>
  6. <ボディ>
  7. <p>
  8. 对不起。我们すでに搬家了。 >="http://www.w3school.com.cn"> http://www.w3school.com.cn a> p>
  9. <p>
    10. は 5 秒以内に新しい場所に再配置されます。
  10. p> <p>
    11. 如果超过 5 秒後您仍然看到本メッセージ，请点击上面
  11. p> ボディ>
  12. html>
  13. この例は、ネットワークが変更された場合に、ユーザーを別の場所に移動させます。 モバイル フロント エンドの公開には、Webkit に関連する HTML5 の一部のフレームが追加されており、ブラウザによる HTML コードの解析が容易になり、モバイル Web フロント エンドの表示がより適切になります。 XML/HTML コード
    14. 复制コンテンツ到剪贴板
  1. >
  2. <頭>
  4. <meta charset='utf- 8'>
    6. " X-ua 互換 "
  6. コンテンツ = " IE = Edge, Chrome = 1 "/& gt; 🎜> <メタ
  7. 名前="説明"
  8. content=「150 文字以内」/> <メタ
  9. 名前=「キーワード」
  10. コンテンツ=""/> <メタ
  11. 名前="著者"
  12. 内容="名前、メールアドレス@gmail.com"/> <メタ
  13. 名前=「ロボット」
  14. コンテンツ="インデックス、フォロー"/>
  15. <メタ 名前="ビューポート" コンテンツ="初期スケール = 1、最大スケール = 3、最小スケール = 1、ユーザー スケーラブル = いいえ">
  19. <メタ 名前="apple- mobile-web-app-title" content="title">
  21. <メタ 名前="apple- mobile-web-app-capable" コンテンツ="はい"/>
  24. <メタ 名前="apple- itunes-app" content="app-id=myAppStoreID、affiliate-data=myAffiliateData、app-argument=myURL">
  26. <メタ 名前="apple- mobile-web-app-status-bar-style" content="black"/>
  28. <メタ name="format-検出" コンテンツ="電話 = いいえ、メール = いいえ"/>
  31. <メタ 名前="レンダラー" コンテンツ=「ウェブキット」>
    33. " " >
  33. " キャッシュ制御" コンテンツ="no-siteapp" /> ;
  35. <メタ 名前=「ハンドヘルドフレンドリー」 コンテンツ="true">
    37. <
  37. メタ 名前="MobileOptimized" コンテンツ="320">
    39. <
  39. メタ 名前="画面-向き" コンテンツ="ポートレート">
    41. <
  41. メタ 名前="x5-向き" コンテンツ="ポートレート">
    43. <
  43. メタ 名前="full-画面" 内容="はい">
  45. <メタ 名前="x5-全画面" コンテンツ="true">
  47. <メタ 名前="ブラウザモード" コンテンツ=「アプリケーション」>
  49. <メタ 名前="x5-ページモード" コンテンツ="アプリ">
  51. <メタ name="msapplication-タップハイライト「 コンテンツ=「いいえ」>
  53. <リンク rel="apple- touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
  55. <リンク rel="apple- touch-icon-precomowned" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
  60. <リンク rel="apple- touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
  62. <リンク rel="apple- touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
  64. <リンク rel="apple- touch-startup-image" サイズ="1024x748" href="/Default-Portrait-1024x748.png"/>
  66. <リンク rel="apple- touch-startup-image" サイズ="2048x1496" href="/splash-screen-2048x1496.png"/>
  69. <リンク rel="apple- touch-startup-image" href="/splash-screen-320x480.png"/> ;
  71. <リンク rel="apple- touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
  73. <リンク rel="apple- touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
  78. <メタ name="msapplication- TileColor" content="#000"/>
  80. <メタ name="msapplication- TileImage" content="icon.png"/>
  83. <リンク rel=「代替」 タイプ="アプリケーション/RSS XML" タイトル="RSS" href="/rss.xml"/ >
  85. <リンク rel=" ショートカット アイコン" type="image/ico" href="/favicon.ico"/>
  90. <メタ プロパティ="og: type" content="type" />
  91. <メタ プロパティ="og: url" コンテンツ="URL アドレス" />
  92. <メタ プロパティ="og: title" content="title" />
  93. <メタ プロパティ="og:画像" コンテンツ="画像" />
  94. <メタ プロパティ="og:説明" 内容="説明" />
  97. <タイトル>タイトルタイトル>
  98. 頭>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML5 は QR コードのスキャンと解析を実装します _html5 チュートリアルのスキル次の記事：HTML5 は QR コードのスキャンと解析を実装します _html5 チュートリアルのスキル

関連記事

続きを見る