目次
HTML5新增的结构标签
HTML5 で追加されたその他の要素
ホームページ ウェブフロントエンド htmlチュートリアル HTML5の新タグと廃止タグ_html/css_WEB-ITnose

HTML5の新タグと廃止タグ_html/css_WEB-ITnose

Jun 21, 2016 am 08:59 AM

HTML5新增的结构标签

  • section元素表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用,表示文档结构。例:HTML5中
    ……
    ;HTML4中
    ……
  • article 要素 は、コンテキストに関係のないページ上の独立したコンテンツの一部を表します。たとえば、記事です。
  • aside要素 は、article要素の内容に加えて、article要素の内容に関連する補助情報を表します。
  • ヘッダー要素 は、ページまたはページ全体のコンテンツ ブロックのタイトルを表します。
  • hgroup 要素 は、ページ全体またはページ内のコンテンツ ブロックの タイトル をグループ化することを意味します。
  • フッター要素 は、ページ全体またはページ内のコンテンツ ブロックのフッターを表します。通常、作成者の名前、作成日、作成者の連絡先情報が含まれます。
  • nav 要素 は、ページのナビゲーション リンク部分を表します。
  • 図要素

    はストリーム コンテンツの独立した部分を表し、通常はドキュメントのメイン ストリーム コンテンツ内の独立した単位を表します。 figcaption 要素を使用して、Figure 要素のグループにキャプションを追加します。例:
    PRC

    中華人民共和国は 1949 年に誕生しました

    HTML4 は、多くの場合

    中華人民共和国は 1949 年に誕生しました

HTML5 で追加されたその他の要素

  • video 要素 はビデオを定義します。ムービークリップや他のビデオストリームと同様です。例: HTML4 の記述:
  • audio 要素 はオーディオを定義します。音楽やその他のオーディオ ストリームなど。例: html4 での記述:
  • embed 要素 は、コンテンツ (さまざまなメディアを含む) を埋め込むために使用されます。形式は、Midi、Wav、AIFF、AU、MP3、フラッシュなどです。例: HTML4 のコード例
  • マーク要素 は主に、強調表示または強調表示する必要があるテキストをユーザーに視覚的に提示するために使用されます。一般的なアプリケーションの検索結果では、検索キーワードが強調表示されます。 HTML5<マーク>;HTML4
  • progress 要素 は、実行中のプロセスを表します。progress 要素を使用すると、JavaScript で時間のかかる関数のプロセスを表示できます。待ってください…、お待ちください。
  • 時間要素 は、日付または時刻、またはその両方を同時に表します。
  • ルビ要素 はルビコメント(ふりがなまたは文字)を定義します。 および タグとともに使用されます。 Ruby 要素は、1 つ以上の文字 (説明/発音が必要) とその情報を提供する rt 要素、およびブラウザが「ruby」要素をサポートしていない場合に表示される内容を定義するオプションの rp 要素で構成されます。 。 (ㄏㄢˋ)
  • rt 要素 は、文字 (中国語のピンインまたは文字) の解釈または発音を定義します。
  • rp 要素 は、ruby 要素をサポートしていないブラウザで表示されるコンテンツを定義するために、ruby コメントで使用されます。
  • wbr 要素 はソフト改行を表します。 br 要素との違い: br 要素は、ここで改行する必要があることを示します。wbr 要素は、ブラウザ ウィンドウまたは親要素が広い場合 (改行の必要がない場合)、改行されないことを示します。途切れていますが、幅が足りない場合は自動的にここで折り返されます。
  • キャンバス要素 は、グラフやその他の画像などのグラフィックスを定義します。 要素は単なるグラフィック コンテナ (キャンバス) であり、グラフィックを描画するにはスクリプトを使用する必要があります。
  • コマンド要素 - 効果はないようです。ラジオ ボタン、チェックボックス、ボタンなどのコマンド ボタンの問題のある表現のサポートはありますか。

    コマンド要素は、メニュー要素内にある場合にのみ表示されます。それ以外の場合、この要素は表示されませんが、キーボード ショートカットを指定するために使用できます。 。

    <メニュー>

    Click Me!

  • 詳細タグは現在 Chrome でのみサポートされています。詳細タグ

    は詳細を記述するために使用されます。文書または文書の特定の部分。

    は概要タグとともに使用でき、詳細のタイトルを定義できます。タイトルが表示され、ユーザーがタイトルをクリックすると詳細が表示されます。 summary は、details の最初の子要素である必要があります。

  • データリスト

    タグ

    オプションのリストを定義します。この要素を input 要素と組み合わせて使用​​して、入力の可能な値を定義します。データリストとそのオプションは表示されません。これは単なる有効な入力値のリストです。 input 要素の list 属性を使用してデータリストをバインドします。

  • datagrid タグ 使い方は?

    オプションのデータのリストを定義します。データグリッドはツリーリストとして表示されます。

    multiple 属性を true に設定すると、リスト内で複数の項目を選択できます。

  • keygen タグの使用方法

    タグは、フォームで使用されるキー ペア ジェネレーター フィールドを指定します。

    フォームが送信されると、秘密キーはローカルに保存され、公開キーはサーバーに送信されます。

    ユーザー名:

    暗号化:

  • 出力タグ

    は、スクリプトの出力など、さまざまなタイプの出力を定義します。
  • source タグ タグは、メディア要素 (
  • メニュータグ はメニューリストを定義します。フォーム コントロールをリストする場合は、このラベルを使用します。ナビゲーションとの違いに注意してください。メニューは特にフォーム コントロールに使用されます。
  • 🎜>
  • HTML5 新しい入力タグ

      email には電子メールを入力する必要があります
    • url には URL アドレスを入力する必要があります
    • 数値は数値を入力する必要があります
    • 範囲には特定の範囲内の値を入力する必要があります
    • 日付ピッカー (日付ピッカー) には、日付と時刻を選択するための複数の新しい入力タイプがあります: 日付 - 日、月、年を選択します。 月 - 月、年、週を選択します。 - 週と年の時刻を選択します - 時間 (時と分) を選択します datetime - 時間、日、月、年 (UTC 時間) を選択します datetime-local - 時間、日、月、年 (現地時間) を選択します
    • search は、通常のテキスト フィールドとして表示されるフィールドの検索に使用されます。
    • color
    HTML5 で廃止された要素

    1. css で置き換えることができる要素、basefont、big、center、font、s、strike、tt、u。これらの要素は純粋に画面表示のためのものであり、HTML5 では画面表示機能を CSS に組み込んで統合編集することを推奨しています。

    2. フレームを使用しなくなります。

    フレームセット、フレーム、フレームなし。 HTML5ではframeフレームをサポートせず、iframeフレームのみをサポートするか、ページに合わせた複数のページで構成されるサーバー側フォーマットを使用し、上記3つのタグを削除してください。

    3. 一部のブラウザでのみサポートされている要素

    アプレット、bgsound、blink、marquee およびその他のタグ。

    4. その他の廃止要素

    rbを廃止し、ルビに置き換えます。

    頭字語は非推奨となり、代わりに abbr を使用してください。

    dir を廃止し、代わりに ul を使用します。

    isindex を廃止し、フォームと入力の組み合わせに置き換えます

    リストを廃止し、pre に置き換えます

    xmp を廃止し、代わりにコードを使用します

    廃止nextid を使用し、guids

    を使用します。 plaintex を廃止し、代わりに「text/plian」(書式設定されていないテキスト) MIME タイプを使用します。

    =========================================== == ===============

    非常に多くの新しいタグや要素を見ると、HTML5 は本当に来るのだろうか?圧倒的な量の関連情報やチュートリアル、HTML5 や CSS3 について話題になり、主要なブラウザ メーカーが html5 のサポートを発表したことは、本当に html5 の時代が到来したことを感じさせます。それで、私のプロジェクトで安全に使用できますか?まだ。 IE9 は html5 をサポートすると主張していますが、IE8 はそれをまったくサポートしていません。 2006 年と 2007 年の古いメルセデス ベンツの携帯電話の前に座って、XP システムとインストールされた IE8 を使って Web を巡回している人が今でもたくさんいます。また、新しい携帯電話を購入した懐かしいおじいちゃんやおばあちゃんもいます。純正の Win7 がないので、D バージョンの XP に置き換えます。 Html5shiv が利用できるようになりましたが、IE8 では一部の新しい HTML タグのサポートが制限されており、新しいタグは少数のみです。私はどの新しいテクノロジーを使用するかを選択できますが、貴社の製品のユーザーにブラウザのインス​​トールを要求することはできません (Iron Boss 向けに何かを作らない限り、春節の旅行チケットはここでのみ販売されており、チケットを購入するには IE10 をインストールする必要があります...) )。実際、asp.net2 で書かれたものと同じくらい強力であれば、何かを作成するのに必ずしも新しいテクノロジが必要というわけではありません。

    40 の重要な HTML5 面接の質問と回答 http://www.linuxidc.com/Linux/2015-12/126824.htm

    HTML5 および CSS3 の基本チュートリアル (第 8 版) 中国語高-定義 PDF http://www.linuxidc.com/Linux/2015-12/125734.htm

    HTML5 地理位置情報 (HTML5 Geolocation) の原理と応用 http://www.linuxidc.com/ Linux/2012- 07/65129.htm

    すぐに学習して使用できる HTML5 モバイル開発 (デュアル カラー) PDF+ ソース コード http://www.linuxidc.com/Linux/2013-09/90351.htm

    HTML5 入門学習ノート http://www.linuxidc.com/Linux/2013-09/90089.htm

    HTML5 モバイル Web 開発ノート http://www.linuxidc.com/Linux/2013-09 /90088.htm

    HTML5 開発におけるローカル ストレージのセキュリティ リスク http://www.linuxidc.com/Linux/2013-06/86486.htm

    《HTML5 および CSS3 権威ガイド》およびサポートするソース コード http://www.linuxidc.com/Linux/2013-02/79950.htm

    HTML5 に関する 10 の興味深い予測 http://www.linuxidc.com/ Linux/2013-02/ 79917.htm

    HTML5 および CSS3 実践ガイド PDF http://www.linuxidc.com/Linux/2013-02/79910.htm

    この記事は永久に更新されたリンク アドレス : http://www.linuxidc.com/Linux/2016-01/127516.htm

    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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; datalist&gt;の目的は何ですか 要素? &lt; datalist&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

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

    &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; meter&gt;の目的は何ですか 要素? &lt; meter&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

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

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

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

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

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

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

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

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

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

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

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

    See all articles