ホームページ >ウェブフロントエンド >フロントエンドQ&A >htmlとhtml5の違いは何ですか
htmlとhtml5の違いは何ですか
- 醉折花枝作酒筹オリジナル
- 2021-04-07 13:46:567348ブラウズ
違い: 1. ドキュメント宣言に関しては、html コードは非常に長くて覚えにくいですが、html5 の宣言は「8b05045a5be5764f313ed5b9168a17e6」という構文で比較的単純です。 2. HTML には構造的なセマンティック タグがありませんが、HTML5 では多くの新しいセマンティック タグが追加されています。 3. HTML5 は描画できますが、html は描画できません。
このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。
1. ドキュメント タイプの宣言が異なります
html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
html5: ドキュメントの宣言は比較的単純で、プログラマーがすばやく読み取って理解するのに役立ちます。開発する。
<!DOCTYPE html>
2. 意味構造の観点から
html:構造的な意味タグはありません(平たく言えば、読むのに不便です)どこが頭でどこが尾なのかはわかりません）
html5:多くのセマンティック タグを追加しました。
コード構造が明確になり、読みやすさが向上しました。コード。
以下は HTML5 のセマンティック タグの一部です:
1fd589692e180fb978cda37041cfc5e26e916e0f7d1e588d4f442bf645aedb2f: 短く、説明的、ユニーク (検索エンジンのランキングが向上します)
b35601808ee30eac9a0f11ecc3d2c015631de3dd0df8235a13014b55a1414c03: h1~h6 の階層見出し。ページ情報の階層関係を作成するために使用されます。
1aa9e5d373740b65a0cc8f0a02150c53ab946e7546ab66a280dd9c9f9310ecd5: ヘッダーには通常、Web サイトのロゴ、メイン ナビゲーション、サイト全体のリンク、検索ボックスが含まれます。
は、ページ内の一連の紹介コンテンツまたはナビゲーション コンテンツをマークするのにも適しています。
c787b9a589a3ece771e842a6176cf8e944f9630a3d507ae7532760da37622b0f: ナビゲーションをマークします。ドキュメント内の重要なリンク グループにのみ使用されます。
61b85035edf2b42260fdb5632dc5728a07ebbc2b3735b6cb0330715d08d2749e: ページのメイン コンテンツ。ページ上で 1 回のみ使用できます。 Web アプリケーションの場合は、その主要な機能を囲みます。
23c3de37f2f9ebcb477c4a90aac6fffd7618f95bdc39e398f223d37049478af1: ドキュメント、ページ、アプリケーション、または独立したコンテナを表します。
2f8332c8dcfd5c7dec030a070bf652c3c0b207448afa40eb460a025e08ccb153: 同様のテーマを持つコンテンツのグループ。たとえば、Web サイトのトップページは、紹介、ニュース項目、連絡先情報などのセクションに分割できます。
15221ee8cba27fc1d7a26c47a001eb9bb68cffaf0006380b7e39ea0c3d532826: 引用、サイドバー、記事へのリンクのセット、広告、フレンドリー リンク、関連製品リストなどを含むサイドバー列を指定します。
c37f8231a37e88427e62669260f0074d84122da5b51c58ef54d7045814144010: フッターは、親が本文の場合にのみ、ページ全体のフッターになります。
d015d241ae6d34c34210679b5204fe857552a991a706bdbcb00625c14ce34064: 詳細を指定し、免責事項、注釈、署名、著作権を入力します。 「利用規約」や「プライバシー ポリシー」などの長い法的記述ではなく、短いフレーズにのみ使用してください。
8e99a69fbe029cd4e2b854e244eab143128dba7a3a77be0113eb0bea6ea0a5d0: コンテンツの重要性を示します。
907fae80ddef53131f3292ee4f81644bd1c6776b927dc33c5d9114750b586338: コンテンツの重要なポイントをマークします (主に段落テキストのセマンティクスを改善するために使用されます)。
HTML5 では、em は強調を表す唯一の要素であり、strong は重要度を表します。
a4b561c25d9afb9ac8dc4d70affff4190d36329ec37a2cc24d42c7229b69747a: 実用的な目的で読者に思い出させるテキストのブロックであり、追加の重要性は伝えません
: 時間をマークします。 datetime 属性は特定の形式に従います。この属性を省略した場合、テキスト コンテンツは正当な日付または時刻形式である必要があります。関連性がなくなった時間には s のタグが付けられます。
: 略語の説明。 title 属性を使用してフルネームを指定します。これは最初にのみ使用する場合は問題ありません。 <pre class="brush:css;toolbar:false">abbr[title]{
border-bottom:1px dotted #000;
}</pre>
: 定義用語要素は、定義のすぐ隣になければなりませんが、説明リスト dl 要素で使用できます。
: 著者、個人、または組織の連絡先情報 (電子メール アドレス、連絡先ページへのリンク)。ページ全体の作成者の連絡先情報を提供する場合、通常はページレベルのフッターに配置されます。文書やその他のコンテンツを含めることはできません。
: コードをマークします。サンプル コードまたはファイル名が含まれています (6d267e5fab17ea8bc578f9e7e5e1570b )
: フォーマット済みのテキスト。テキスト固有の改行とスペースを保持します。
1) Canvas
HTML5 が登場する前は、Web フロントエンド開発者は HTML ページに動的に画像を描画できませんでした。 HTM5 では、キャンバスに相当する新しい
5ba626b379994d53f7acf72a64f9b69716ab709d6e762724edaacac9390c2909 要素が追加されていますが、絵を描く機能はなく、実際の描画を完了するにはスクリプトを使用する必要があります。絵を描くタスク。 getContext メソッドを使用すると、ペイントのプロパティとメソッドを提供するオブジェクトを返すことができます。 • ステップ 1: 5ba626b379994d53f7acf72a64f9b69716ab709d6e762724edaacac9390c2909DOM オブジェクトを取得する
• ステップ 2: Canvas オブジェクトの getContext() メソッドを呼び出して、CanvasRederingContext2D オブジェクトを取得します (パスgetContext メソッドのパラメーター: "2d")
• ステップ 3: CanvasRederingContext2D を呼び出して描画を完了します
2) SVG: スケーラブル ベクター グラフィックス、Web を定義するために使用されるベクターベースのグラフィックス。
学習ビデオ共有: html ビデオ チュートリアル
以上がhtmlとhtml5の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。