ホームページ ウェブフロントエンド H5 チュートリアル Web時代の変化とhtml5とhtml4_html5のチュートリアルスキルの違い

Web時代の変化とhtml5とhtml4_html5のチュートリアルスキルの違い

May 16, 2016 pm 03:46 PM
html5 違い

HTML5 は HTML 標準の次のバージョンです。 Web サイトを構築するために HTML5 を利用するプログラマーが増えています。 HTML4 と HTML5 を同時に使用する場合は、HTML4 から HTML5 に移行するよりも、HTML5 を使用して最初から構築する方がはるかに便利であることがわかります。 HTML5 は HTML4 を完全に覆すものではありませんが、依然として多くの類似点がありますが、いくつかの重要な違いもあります。次に、この記事を通して html5 と html4 の違いを学びましょう
HTML5 の新しい構造タグ
以前の HTML ページでは、基本的に誰もが Div CSS レイアウト方法を使用していました。検索エンジンがページのコンテンツをクロールするとき、Div の 1 つのコンテンツが記事コンテンツ コンテナ、ナビゲーション モジュール コンテナ、または作成者によって導入されたコンテナなどであると推測することしかできません。言い換えれば、HTML 文書全体の構造が明確に定義されていないということは、この問題を解決するために、HTML5 では、ヘッダー、フッター、ナビゲーション、記事コンテンツ、および構造に関連するその他の構造要素タグを特別に追加しているということです。
これらの新しいタグについて説明する前に、まず通常のページのレイアウトを見てみましょう:


上の図で、通常のページにヘッダー、ナビゲーション、記事コンテンツ、付属の右側のサイドバー、および下部モジュールが含まれることが非常にはっきりとわかります。これはクラスを通じて行われます。異なる CSS を通じて区別され、処理されます。スタイル。しかし、相対的に言えば、クラスは普遍的な標準仕様ではなく、検索エンジンは特定の部分の機能を推測することしかできません。また、このページ プログラムを視覚障害者に読ませた場合、文書の構造と内容はあまり明確ではありません。 HTML5 新しいタグによってもたらされる新しいレイアウトは次のとおりです:


Web 時代の変化
前世代の HTML 標準: HTML 4.01 と XHTML 1.0 は 10 年以上前にリリースされており、Webサイドアプリケーション また、地球を揺るがす変化も経験しました。さらに、Web フロントエンドには統一された普遍的なインターネット標準が存在しません。さまざまなブラウザー間には非互換性が多すぎるため、これらのブラウザーの互換性を維持するには多大な時間が浪費されます。さらに、以前のマルチメディア操作やアニメーションなどはすべてサードパーティのプラグインのサポートを必要とし、マルチプラットフォームの互換性の問題を引き起こしていましたが、これらはすべて HTML5 の標準となり、サーバーの違いやブラウジングの問題は根本的に解決されます。サードパーティのプラグインの問題によって、Web アプリケーションがより標準的で、より汎用性が高く、デバイスに依存しないものになっています。
h5 は 2010 年に正式にリリースされて以来、主要なブラウザーに歓迎され、サポートされてきました。現在、業界は h5 への移行を進めており、h5 の時代が間もなく到来します。
HTML5 は革命的な変更ではなく、単なる発展的な変更です。さらに、以前の多くの HTML4 標準と互換性があり、最新の HTML5 標準を通じて作成されたすべての Web アプリケーションは、古いバージョンのブラウザでも簡単に実行できます。 HTML5 標準には、オーディオとビデオ、ローカル ストレージ、ソケット通信、アニメーションなどの多くの実用的な機能が統合されていますが、これらは以前のアプリケーション開発で Web 側が役に立たないと感じた後でのみ真剣に受け止められ、アップグレードされたものだと私は考えています。関連する経験をお持ちであれば、それは非常に感動的なものとなるでしょう。
HTML5 の目標は、いくつかの新しいタグと新しい機能を通じて、よりシンプルで独立した標準の汎用 Web アプリケーションを開発するための標準を提供することです。
新しい標準は、ブラウザの互換性、不明確な文書構造、Web アプリケーションの機能制限という 3 つの主要な問題を解決します。
HTML4 と HTML5 の違い
1. 表示効果のみを目的とした一部の古い HTML4 タグをキャンセルします。

では、完全に CSS に置き換えられています。
その他のキャンセルされた属性: 頭字語、アプレット、ベースフォント、ビッグ、センター、ディレクトリ、フォント、フレーム、フレームセット、isindex、noframes、ストライク、tt。
2. いくつかの新しい要素を追加しました
例: よりインテリジェントなフォーム タグ: 日付、電子メール、URL など。より合理的なタグ: セクション、ビデオ、進行状況、ナビ、メーター、時間、脇、キャンバスなど。 。
3. 新しいグローバル属性: contentEditable designMode 隠しスペルチェック タブインデックス
4. マーキング方法: ファイル タイプ宣言 () は 1 種類のみです: 。
文字エンコーディングを指定します
5. 新しい JS API
6. 互換性を保証します
タグ要素​​を省略できます
終了タグの書き込みを許可しません:たとえば、 area Base br
は、li dt
などの終了タグを省略できます。 html head
など、すべてのタグを省略できます。 コード例は次のとおりです。

コードをコピーします
コードは次のとおりです:



html5

...





    111111

    22222


    <余談>...

    ...


    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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衣類リムーバー

    Video Face Swap

    Video Face Swap

    完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

    ホットツール

    メモ帳++7.3.1

    メモ帳++7.3.1

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

    SublimeText3 中国語版

    SublimeText3 中国語版

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

    ゼンドスタジオ 13.0.1

    ゼンドスタジオ 13.0.1

    強力な PHP 統合開発環境

    ドリームウィーバー CS6

    ドリームウィーバー CS6

    ビジュアル Web 開発ツール

    SublimeText3 Mac版

    SublimeText3 Mac版

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

    H5は何を参照していますか?コンテキストの探索 H5は何を参照していますか?コンテキストの探索 Apr 12, 2025 am 12:03 AM

    H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1)html5introduceSnewelementsandapisforrich、dynamicwebapplications.2)Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3)semanticelementsimprovecontentstructurendseo.4)H5'srespo

    H5とミニプログラムとアプリの違い H5とミニプログラムとアプリの違い Apr 06, 2025 am 10:42 AM

    H5。ミニプログラムとアプリの主な違いは次のとおりです。技術アーキテクチャ:H5はWebテクノロジーに基づいており、ミニプログラムとアプリは独立したアプリケーションです。経験と機能:H5は軽量で使いやすく、機能が限られています。ミニプログラムは軽量で、インタラクティブが良好です。アプリは強力で、スムーズな経験があります。互換性:H5はクロスプラットフォーム互換性があり、アプレットとアプリはプラットフォームによって制限されています。開発コスト:H5には、開発コストが低く、中程度のミニプログラム、最高のアプリがあります。適用可能なシナリオ:H5は情報表示に適しており、アプレットは軽量アプリケーションに適しており、アプリは複雑な機能に適しています。

    Routerフォルダーの下のindex.jsファイルでvue.use(vuerouter)を呼び出す必要があるのはなぜですか? Routerフォルダーの下のindex.jsファイルでvue.use(vuerouter)を呼び出す必要があるのはなぜですか? Apr 05, 2025 pm 01:03 PM

    Vueアプリケーションを開発するときに、ルーターフォルダーの下にindex.jsファイルにvuerouterを登録する必要性があるため、ルーティング構成で問題が発生することがよくあります。特別...

    PSのエクスポートPDFのパスワード保護を設定する方法 PSのエクスポートPDFのパスワード保護を設定する方法 Apr 06, 2025 pm 04:45 PM

    Photoshopでパスワードで保護されたPDFをエクスポート:画像ファイルを開きます。 [ファイル]&gtをクリックします。 「エクスポート」&gt; 「PDFとしてのエクスポート」。 「セキュリティ」オプションを設定し、同じパスワードを2回入力します。 [エクスポート]をクリックして、PDFファイルを生成します。

    H5はHTML5と同じですか? H5はHTML5と同じですか? Apr 08, 2025 am 12:16 AM

    「H5」と「HTML5」はほとんどの場合同じですが、特定の特定のシナリオでは異なる意味を持つ可能性があります。 1。「HTML5」は、新しいタグとAPIを含むW3C定義標準です。 2。 "H5"は通常、HTML5の略語ですが、モバイル開発では、HTML5に基づくフレームワークを参照する場合があります。これらの違いを理解することは、プロジェクトでこれらの用語を正確に使用するのに役立ちます。

    XPathを使用して、JavaScriptの指定されたDOMノードから検索する方法は? XPathを使用して、JavaScriptの指定されたDOMノードから検索する方法は? Apr 04, 2025 pm 11:15 PM

    JavaScriptのDOMノードの下でのXpath検索方法の詳細な説明、XPath式に基づいてDOMツリーから特定のノードを見つける必要があることがよくあります。あなたがする必要があるなら...

    console.logの出力結果の違い:同じ変数が異なる印刷方法を持っているが、結果が異なるのはなぜですか? console.logの出力結果の違い:同じ変数が異なる印刷方法を持っているが、結果が異なるのはなぜですか? Apr 04, 2025 am 11:48 AM

    Console.log出力の違いについての詳細な議論は、この記事のログ出力で、Console.log関数の出力結果がコードの一部である理由を分析します。コードスニペットにはURLパラメーターの解像度が含まれます...

    H5とはどういう意味ですか? H5とはどういう意味ですか? Apr 04, 2025 am 12:10 AM

    H5はHTML5の略語であり、HTMLの5番目のバージョンです。 H5は、Webページの構造とセマンティクスを強化し、ビデオ、オーディオ、キャンバス描画、ジオロケーションAPIなどの新しい機能を導入し、Webページ開発をより豊かで効率的にします。

    See all articles