html5とhtml4の違いは何ですか?-フロントエンドQ&A-php.cn

違い: DOCTYPE、html、meta、script、およびその他のタグは HTML5 では簡素化されています。 HTML5 では、header、footer、section、article、nav、hgroup、side、figure などのセマンティックタグが追加され、canvas タグが追加されました。

html5とhtml4の違いは何ですか?

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

#1 HTML5 のマークアップ方法

1.1 コンテンツタイプ (ContentType)

ファイル拡張子とコンテンツタイプは変更されません。つまり、拡張子は「.html」または「.htm」のままで、コンテンツタイプは「text/html」のままです。

1.2 DOCTYPE

HTML4

#HTML5

(大文字と小文字は区別されません)

H5 では、意図的に

バージョン宣言を使用しないでください

、ドキュメントは HTML のすべてのバージョンに適用されます。

さらに、ツールを使用する場合、DOCTYPE 宣言メソッドに SYSTEM 識別子を追加することもできます。宣言メソッドは次のとおりです。 DOCTYPE HTML SYSTEM "about:legacy-compat">(大文字と小文字は区別されません。引用符は一重引用符か二重引用符を区別しません)

1.3 文字エンコーディングの指定

HTML4

meta 要素
を使用して、ファイル内の文字エンコーディングを指定します (ファイルの文字エンコーディングは、

HTML5

を要素に直接追加して文字エンコーディングを指定します。

注: どちらの方法も有効ですが、2 つの方法を同時に混合することはできません。H5 以降では、ファイルの場合、文字コードはUTF-8を推奨します。

#2 HTML5 によって保証される互換性

##2.1 マークされた要素は省略可能

( 1) 終了タグを使用して要素を記述することはできません (つまり、開始タグと終了タグを使用して要素を囲む形式は許可されません。「」の形式のみが許可されます) area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr

(2) 終了タグの要素は次のとおりです。省略可 li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th

(3) マークされた要素はすべて次のとおりです。省略可能（要素を完全に省略できることを意味します）

html, head, body,colgroup, tbody

注: タグを省略しても、要素は暗黙的に存在します。。たとえば、body 要素が省略された場合でも、その要素はドキュメント構造内に存在し、document.body を使用してアクセスできます。

2.2 ブール値を持つ属性

#2.3 引用符を省略します

#(1) 属性値を指定する場合、属性値を引用符で囲む場合は、二重引用符または一重引用符のいずれかを使用できます。 (2) H5 ではこれを踏まえ、属性値に空文字列、「<」、「>」、「=」、シングルクォーテーション、ダブルクォーテーション等の文字が含まれない場合の改良を行っています。、属性値を囲む引用符は省略できます。以下に示すように、

##3. HTML5新規要素と廃止要素

3.1 新しい構成要素

section 要素、article 要素、side 要素、header 要素、footer 要素、nav 要素、図要素、メイン要素

3.2 その他の新要素

video要素、audio要素、embed要素、mark要素、progress要素、meter要素、time要素、ruby要素、rt要素、rp要素、wbr 要素、canvas 要素、command 要素、details 要素、datalist 要素、datagrid 要素、keygen 要素、output 要素、source 要素、menu 要素、dialog 要素

3.3 新しい入力要素タイプ

(1) email: メールアドレスを入力する必要があることを示すテキスト入力ボックス

(2) url: URL アドレスを入力する必要があることを示すテキスト入力ボックス

(3)number:数値を入力する必要があることを示すテキスト入力ボックス

(4)range:一定の範囲内の数値を入力する必要があることを示すテキスト入力ボックス

(5) 日付ピッカー: H5 日付と時刻を選択するための複数の新しい入力テキストボックスがあります

1. 日付: 日、月、年を選択します

2 . Month: 月と年を選択します

3. Week: 週と年を選択します

4. time: 時刻 (時間と分)を選択します

5. datetime : 時刻、日、月、年 (UTC 時間) を選択します

6. datetime-local: 時刻、日、月、年 (現地時間) を選択します

(6) 検索: 使用検索する

(7) 電話番号: 電話専用

(8) color: 色の選択テキストボックス。選択された値は「#000000」形式のテキストです。

3.4 廃止された要素

(1) CSS

で置き換えられる要素:basefont、big、center、font、s、 Strike 、 tt 、 u およびその他の要素

#s および Strike 要素は del 要素に置き換えることができ、 tt 要素は CSS font-famliy 属性に置き換えることができます。

(2) フレームフレームワークを使用しなくなりました。

フレームセット、フレーム、noframes など。

フレームフレームは Web ページの使いやすさに悪影響を与えるため、H5 はフレームフレームをサポートせず、iframe フレームまたはサーバーによって作成された複数のページで構成される複合ページのみをサポートします。要素は廃止される。

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

アプレット、bgsound、blink、marquee、その他の要素など。

アプレット要素は embed 要素または object 要素に置き換えることができ、bsground 要素は audio 要素に置き換えることができ、マーキーは JavaScript プログラミングに置き換えることができます。

(4) その他廃止される要素

1. rb 要素、ruby 要素に置き換えられます

2. acronym 要素、abbr 要素に置き換えられます

3. dir 要素は、ul 要素に置き換えられます。

4. isindex 要素は、form 要素と input 要素の組み合わせに置き換えられます。

5. Listing. 要素は、 pre 要素

6. xmp 要素、code 要素に置き換えられます

7. nextid 要素、GUIDS 要素に置き換えられます

8. プレーンテキスト要素、「text/plain」MIMEL を使用します代わりに「

html ビデオチュートリアル

」と入力してください推奨チュートリアル: 「html ビデオチュートリアル

」

4. グローバル属性

いわゆるグローバル属性は、任意の要素で使用できる属性を参照します。

4.1 contentEditable 属性

(1) メイン関数

ユーザーが要素内のコンテンツを編集できるようにするため、要素は取得できる必要があります。マウスフォーカス要素を定義し、マウスをクリックした後にユーザーにキャレットを提供し、要素内のコンテンツを順番に編集するようユーザーに促します。

(2) 値

この属性はブール属性です。 true または false に指定できます。

(3) 非表示の継承状態

この属性が指定されていない場合は、継承状態によって決まります。要素の親要素が編集可能な場合、要素は編集可能です。

(4) isContentEditable 属性

要素が編集可能な場合、この属性の値は true になり、それ以外の場合は false になります。

4.2 designMode属性

(1) 関数

は、ページ全体が編集可能かどうかを指定するために使用されます。ページ内で contentEditable 属性を持つ要素が編集可能になります。

(2) 値

この属性には、「on」(ページは編集可能) と「off」(ページは編集不可能) の 2 つの値があります。

(3) この属性は Javascript スクリプトでのみ編集および変更できます

document.designMode = " on ";

(4) ブラウザのサポート

1.IE8: セキュリティ上の理由から、この属性を使用してページの編集状態に入ることができません。

2.IE9: この属性を使用してページを編集状態にできるようにします。

3.Chorme3 と Safari: を使用します。インラインフレームのやり方は、インラインフレームを編集可能です。

4.Firefox および Opera: この属性を使用してページを編集状態にできるようにします。

4.3 hidden 属性

(1) 機能

要素を表示しないようにブラウザに通知し、要素を非表示にします。 ###

(2) Value

ブール属性。true または false。

4.4 スペルチェック属性

スペルチェック属性は、input 要素 (type=text) と textarea の 2 つのテキスト入力ボックスに対して H5 によって提供される新しい属性です。

(1) 関数

ユーザーが入力したテキストコンテンツのスペルチェックと文法チェックを実行します。

(2) 値

ブール値、trueまたは false 。

(3) 注

1. 属性値は true または false として宣言する必要があります。

2. 要素の readOnly 属性またはdisabled属性が true に設定されている場合、スペルチェックは実行されません。

(4) ブラウザのサポート

現在、IE に加えて、Firefox、Chrome、Safari、Opera などのブラウザはすべてこの属性をサポートしています。

4.5 tabindex 属性

各コントロールの tabindex は、どのコントロールがアクセスされるかを示します。 (Tab キーをタップします)

(1) コントロールの移動順序はページ上の要素の位置によって決定されるようになりました。そのため、これは必要なくなりました。

(2) 別の機能

デフォルトでは、キーを押してフォーカスを取得できるのは link 要素と form 要素のみです。この属性を他の要素で使用すると、その要素もフォーカスを取得します。要素の tabindex 値を負の値 (通常は -1) に設定した後、プログラムで要素にフォーカスを取得できるようにすると、Tab キーが押されても要素はフォーカスを取得しなくなります。

プログラミング関連の知識について詳しくは、プログラミングビデオをご覧ください。！

以上がhtml5とhtml4の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。