HTMLとHTML5の違いについて話しましょう

今日誰かが私に質問しました。あなたは html5 と html のどちらをよく使いますか?うーん...実は、私は普段Webページを書くときに、この2つを特に区別していません。違いについて話さなければならない場合、明らかな違いは以下に挙げたものです。より深い理解については、HTML5 はマークアップ言語の範囲をはるかに超えており、その背後には一連のテクノロジーがあります。 Xiaobaiの研究はあまりにも浅いので、あまり多くを話すことはできません。 >.<

1. ドキュメント タイプの宣言が異なります

html:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

html5: ドキュメントの宣言は比較的単純で、プログラマーにとって読みやすいものです。そして急速に発展します。

2. セマンティック構造の観点から

#html: 構造的なセマンティック タグはありません (平たく言えば、読みにくく、不便です)どこに行くかは教えてくれません) どこが頭で、どこが尾なのか)

html5: 多くのセマンティック タグが追加されました。

により、コード構造が明確になり、コードの読みやすさが向上します。

以下は、HTML5 のセマンティック タグの一部です:

< title>: 短く、説明的で、ユニーク (検索エンジンのランキングが向上します)

: h1~h6 の階層見出し。ページ情報の階層関係を作成するために使用されます。

: ヘッダーには通常、Web サイトのロゴ、メイン ナビゲーション、サイト全体のリンク、検索ボックスが含まれます。

は、ページ内の一連の紹介コンテンツまたはナビゲーション コンテンツをマークするのにも適しています。

: ナビゲーションをマークします。ドキュメント内の重要なリンク グループにのみ使用されます。

: ページのメイン コンテンツ。ページ上で 1 回のみ使用できます。 Web アプリケーションの場合は、その主要な機能を囲みます。

: ドキュメント、ページ、アプリケーション、または独立したコンテナを表します。

: 同様のテーマを持つグループ コンテンツ、Web サイトのホームページなどは、紹介、ニュース項目、連絡先情報などのセクションに分けることができます。

: 引用、サイドバー、記事へのリンクのセット、広告、フレンドリー リンク、関連製品リストなどを含むサイドバー列を指定します。

: フッターは、親が本文の場合のみ、ページ全体のフッターになります。

: 詳細を指定し、免責事項、注釈、署名、著作権を入力します。

は短いフレーズにのみ適しており、「利用規約」や「プライバシー ポリシー」などの長い法的記述をマークするために使用しないでください。

: コンテンツの重要性を示します。

: コンテンツの重要なポイントをマークします (主に段落テキストのセマンティクスを改善するために使用されます)。

: 読者に思い出させるためにテキスト (黄色) を強調表示します。

HTML5 では、em は強調を表す唯一の要素ですが、strong は重要性を表します。

: 実用的な目的で読者に思い出させるためのテキストブロックであり、追加の重要性は伝えません

:他のテキストの別のテキスト = =|||この翻訳は実際には...

: 図を作成します (デフォルトは約 40px の余白です)。

: 図のタイトルは、図に埋め込まれる最初または最後の要素でなければなりません。

: 本のタイトル、曲名、映画など、コンサート、コンサート、仕様書、新聞、または法的文書など

は、ソース自体を参照するためにのみ使用され、ソースからの引用には使用されません。

: 引用符で囲まれたテキスト。デフォルトでは新しい行に表示されます。

: 短い引用符 (ブラウザ間で問題が発生するため、使用は避けてください)。

blockquoto 要素と q 要素で cite 属性 (cite 要素ではありません!) を使用できます。これは検索エンジン自動化ツールに役立ちます。 cite=“URL” はソースアドレスを引用します。

: 時間をマークします。 datetime 属性は特定の形式に従います。この属性を省略した場合、テキスト コンテンツは正当な日付または時刻形式である必要があります。関連性がなくなった時間には s のタグが付けられます。

: 略語について説明します。 title 属性を使用してフルネームを指定します。これは最初にのみ使用する場合は問題ありません。

abbr[title]{ border-bottom:1px dotted #000; }

: 定義用語要素は、定義の隣になければなりません。 be in 説明リストの dl 要素で使用されます。

: 著者、個人、または組織の連絡先情報 (電子メール アドレス、連絡先ページへのリンク)。

如果提供整個頁面的作者聯絡訊息，一般放在頁面層級footer裡。不能包含文件或文件等其他內容。

：移除的內容。

：新增的內容。

少有的既可以包圍區塊級，又可以包圍片語內容的元素。

：標記代碼。包含範例程式碼或檔案名稱（< >）

：預先格式化文字。保留文字固有的換行和空格。

3.html5的繪圖功能

1）canvas

在HTML5以前，web前端開發者無法在HTML頁面上動態地繪製圖片1）HTM5新增了一個元素，相當於一個畫布.但它本身不具備繪圖能力，必須使用腳本來完成實際的繪圖任務。運用getContext方法可以傳回一個對象，該對象提供了繪畫的屬性和方法。

• 步驟1:得到DOM物件

• 步驟2:呼叫Canvas物件的getContext()方法得到CanvasRederingContext2D物件（getContext方法裡面傳一個參數：”2d”）

• 步驟3:呼叫CanvasRederingContext2D完成畫圖

2）SVG：可伸縮向量圖形，用於定義網路的基於向量的圖形。

感謝大家的閱讀，希望大家收益多多。

本文轉自：https://blog.csdn.net/yezi__6/article/details/82881729

推薦教學：《HTML教學》

以上がHTMLとHTML5の違いについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。