検索
ホームページウェブフロントエンドH5 チュートリアルWeb時代の変化とhtml5とhtml4_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 までご連絡ください。
    H5とHTML5の接続:類似性と相違点H5とHTML5の接続:類似性と相違点Apr 24, 2025 am 12:01 AM

    H5とHTML5は異なる概念です。HTML5は、新しい要素とAPIを含むHTMLのバージョンです。 H5は、HTML5に基づくモバイルアプリケーション開発フレームワークです。 HTML5はブラウザを介してコードを解析およびレンダリングしますが、H5アプリケーションはコンテナを実行し、JavaScriptを介してネイティブコードと対話する必要があります。

    H5コードの構成要素:キー要素とその目的H5コードの構成要素:キー要素とその目的Apr 23, 2025 am 12:09 AM

    HTML5の重要な要素には、最新のWebページの構築に使用される、、,,,,などが含まれます。 1.ヘッドコンテンツを定義します。2。リンクをナビゲートするために使用されます。3。独立した記事のコンテンツを表します。4。ページコンテンツを整理します。5。サイドバーコンテンツを表示します。

    HTML5およびH5:一般的な使用法の理解HTML5およびH5:一般的な使用法の理解Apr 22, 2025 am 12:01 AM

    HTML5とHTML5の略語であるHTML5とH5の間に違いはありません。 1.HTML5はHTMLの5番目のバージョンであり、Webページのマルチメディア関数とインタラクティブ機能を強化します。 2.H5は、HTML5ベースのモバイルWebページまたはアプリケーションを参照するためによく使用され、さまざまなモバイルデバイスに適しています。

    HTML5:現代のウェブのビルディングブロック(H5)HTML5:現代のウェブのビルディングブロック(H5)Apr 21, 2025 am 12:05 AM

    HTML5は、W3Cによって標準化されたHyperText Markup言語の最新バージョンです。 HTML5は、新しいセマンティックタグ、マルチメディアサポート、フォームの強化、Web構造の改善、ユーザーエクスペリエンス、SEO効果を導入します。 HTML5は、Webページ構造をより明確にし、SEO効果をより良くするために、、、、、、などの新しいセマンティックタグを導入します。 HTML5はマルチメディア要素をサポートしており、サードパーティのプラグインは不要で、ユーザーエクスペリエンスと読み込み速度が向上します。 HTML5はフォーム関数を強化し、ユーザーエクスペリエンスを向上させ、フォーム検証効率を向上させるなどの新しい入力タイプを導入します。

    H5コード:クリーンで効率的なHTML5の書き込みH5コード:クリーンで効率的なHTML5の書き込みApr 20, 2025 am 12:06 AM

    クリーンで効率的なHTML5コードを書き込む方法は?答えは、タグのセマンティック、構造化されたコード、パフォーマンスの最適化、一般的な間違いを回避することにより、一般的な間違いを避けることです。 1.コードの読みやすさとSEO効果を改善するには、セマンティックタグなどを使用します。 2。適切なインデントとコメントを使用して、コードを構造化して読みやすいままにします。 3.不必要なタグを減らし、CDNを使用してコードを圧縮することにより、パフォーマンスを最適化します。 4.タグが閉じていないなどの一般的な間違いを避け、コードの有効性を確認してください。

    H5:ウェブ上のユーザーエクスペリエンスをどのように強化するかH5:ウェブ上のユーザーエクスペリエンスをどのように強化するかApr 19, 2025 am 12:08 AM

    H5は、マルチメディアサポート、オフラインストレージ、パフォーマンスの最適化により、Webユーザーエクスペリエンスを向上させます。 1)マルチメディアサポート:H5と要素は、開発を簡素化し、ユーザーエクスペリエンスを向上させます。 2)オフラインストレージ:WebStorageとIndexEdDBは、エクスペリエンスを改善するためにオフラインで使用できるようにします。 3)パフォーマンスの最適化:ウェブワーカーと要素は、パフォーマンスを最適化して帯域幅の消費を削減します。

    H5コードの分解:タグ、要素、属性H5コードの分解:タグ、要素、属性Apr 18, 2025 am 12:06 AM

    HTML5コードは、タグ、要素、属性で構成されています。1。タグはコンテンツタイプを定義し、などの角度ブラケットに囲まれています。 2。要素は、startタグ、内容、および内容などのエンドタグで構成されています。 3。属性は、開始タグのキー値のペアを定義し、ような関数を強化します。これらは、Web構造を構築するための基本ユニットです。

    H5コードの理解:HTML5の基礎H5コードの理解:HTML5の基礎Apr 17, 2025 am 12:08 AM

    HTML5は、最新のWebページを構築するための重要なテクノロジーであり、多くの新しい要素と機能を提供します。 1。HTML5は、Webページの構造とSEOを強化するなどのセマンティック要素を導入します。 2。プラグインなしのマルチメディア要素と埋め込みメディアをサポートします。 3.フォームは、新しい入力タイプと検証プロパティを強化し、検証プロセスを簡素化します。 4.オフラインおよびローカルストレージ機能を提供して、Webページのパフォーマンスとユーザーエクスペリエンスを向上させます。

    See all articles

    ホット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 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

    ホットツール

    Safe Exam Browser

    Safe Exam Browser

    Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

    AtomエディタMac版ダウンロード

    AtomエディタMac版ダウンロード

    最も人気のあるオープンソースエディター

    SAP NetWeaver Server Adapter for Eclipse

    SAP NetWeaver Server Adapter for Eclipse

    Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

    SublimeText3 中国語版

    SublimeText3 中国語版

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

    SecLists

    SecLists

    SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。