検索

H5 と従来の HTML の違い

May 23, 2017 pm 01:36 PM
htmlhtml5

この記事では、HTML5 学習ノートで HTML5 と従来の HTML の違いに関する関連情報を主に紹介します。必要な方は参照してください 1. HTML5 構文の変更点
このナレッジポイントで言及されている変更点は、 HTML4 に基づく変更点 定義された変更点は主に次のとおりです:
1. HTML5 のファイル拡張子 (.html または .htm) とコンテンツ タイプ (text/html) は変更されません。
2. HTML5 では、バージョン宣言は意図的に使用されず、1 つのドキュメントが HTML のすべてのバージョンに適用されます。
3. HTML5 以降、ファイルの文字エンコーディングには UTF-8 を使用することが推奨されます。
4.HTML5 は、以前の HTML バージョンとの最大限の互換性を保証します。
互換性を確保するために、HTML5では要素から始める必要があります。要素のタグは省略できます。具体的には、要素のタグは、「終了タグは記述不可」、「終了タグは省略可能」、「開始タグと終了タグは省略可能」の3種類に分類される。
• 終了タグ要素は記述できません: area、base、br、col....
• 終了タグは省略可能: li、dt、dd、p、rt...
• 開始タグと終了 すべてタグは省略可能です: html、head、body...
II.新しい構造要素
•section要素は、章、ヘッダー、フッター、またはページの他の部分など、ページ内のコンテンツブロックを表します。ページ;
•article 要素は、ブログの記事や新聞の記事など、ページ上の独立したコンテンツを表します。
•aside 要素は、article 要素の補助的なコンテンツを表します。 Combination 以外の、article 要素のコンテンツに関する情報
• footer 要素は、ページ全体またはページ内のコンテンツブロックのフッターを表します。一般的に、作成者の名前、作成日、作成者の連絡先情報が含まれます。
•nav 要素はページの
navigation
link 部分を表し、一般に、ドキュメントのメイン フロー コンテンツ内の独立した単位。figcaption 要素を使用して、Figure 要素グループ にタイトルを追加します。 2. その他の新しい要素

• オーディオ要素定義 audio
(音楽やその他のオーディオ ストリームなど)。
•embed 要素は各要素を挿入するために使用されます。マルチメディア の一種で、形式は Midi、Wav、AU、MP3 などです。
•mark 要素は強調表示する必要があるテキストを視覚的に表示するために使用されます。典型的なアプリケーションは 検索 の結果にあります。 検索キーワードはユーザーに対して強調表示されます。
• progress 要素は実行中のプロセスを表します • ルビ要素はルビを表します コメント
(中国語の発音表記または文字) )
•rt要素は文字(中国語の発音表記や文字)の説明や発音を表します •rp要素はRubyのコメント内で使用され、Ruby要素をサポートしていないブラウザで表示される内容を定義します。 •wbr 要素はソフト改行を表し、幅が十分でない場合はここで積極的に折り返されます

canvas
要素はグラフやその他の画像などのグラフィックを表します
•cammand 要素はコマンド ボタンを表します
ラジオボタンチェックボックス、ボタンなど•details要素は、ユーザーが必要とし、取得できる詳細情報を表します•datagrid要素は、ツリー形式で表示されるオプションのデータのリストを表しますlist
key
gen 要素は、キーの生成を表します
•output 要素は、スクリプトの出力など、さまざまなタイプの出力を表します •source 要素は、メディア要素 (•menu 要素はメニュー リストを表します

3. 新しい input 要素

email
タイプは、E-
main アドレスを入力する必要があるテキスト入力ボックスを表します•url タイプはテキストを表しますURL アドレスを入力する必要がある入力ボックス•number タイプは、数値を入力する必要があるテキスト入力ボックスを表します。ボックス
range
タイプは、特定の範囲内の数値を入力する必要があるテキスト入力ボックスを表します。 HTML5 には、日付と時刻を選択するための複数の新しい入力テキスト ボックスがあります:
date - 日、月、年を選択します
•month —— 月と年を選択します
•week ——週と年を選択します
time ——時間 (時と分) を選択します
•datetime ——時間、日、月、年 (UTC 時間) を選択します
•datetime.local ——時刻、日、月、年(現地時間)を選択
3. 要素を廃止
1. CSSで置き換えられる要素
• Basefontの場合、big、center、font、s、 Strike、 tt、uなどの要素は、その機能が純粋に画面表示サービスのためのものであり、HTML5では統一編集のために画面表示機能をCSSスタイルシートに置くことが推奨されているため、これらの要素は廃止されました
2. Frameは使用されなくなりました。
•frame
set要素、frame要素、noframes要素については、Webページの使いやすさに悪影響を与えるため、HTML5ではifのみサポートされなくなりました。 rameフレームをサポート、もしくはサーバー側でページを構成する複合ページの形で上記3つの要素を同時に廃止します。
3. 一部のブラウザでのみサポートされている要素
• アプレット、bgsound、blink、marquee などの要素については、一部のブラウザのみがサポートしているため、特に bgsound 要素と marquee 要素は Internet Explorer でのみサポートされています。そのため、HTML 5 では非推奨になりました。アプレット要素は ernedd 要素または
object 要素に置き換えることができ、bgsound 要素は audio 要素に置き換えることができ、マーキーは JavaScriptprogramming
に置き換えることができます。その他の廃止された要素: 4. •rb要素を廃止し、代わりにruby要素を使用します
•頭字語要素を廃止し、abbr要素に置き換えます
•dir要素を廃止し、ul要素に置き換えます
•isindex要素を廃止し、form要素とform要素の組み合わせに置き換えますinput 要素
•listing 要素を廃止し、pre 要素を使用します。 置換
• xmp 要素を破棄し、code 要素に置き換えます
• nextid 要素を破棄し、GUIDS に置き換えます
• プレーンテキスト要素を破棄し、「text/」要素に置き換えますplian" MIME タイプ

4. 属性 を追加し、属性を非推奨にする
1. 新しい属性
1. フォーム関連の属性

• 新しい autofocus 属性により、画面が開かれたときに要素が自動的にフォーカスを取得できるようになります。属性の指定。
• ユーザー入力プロンプトを処理する新しいプレースホルダー属性。ユーザーにコンテンツの入力を促します。
• 追加された form 属性は、それが属するフォームを宣言し、フォーム内ではなくページ上の任意の場所に配置します。 ;
•ユーザーが送信するときにチェックされることを示す
required 属性を追加しました。
2. リンク関連の属性
•を追加します。ターゲット URL が最適化されるメディア/デバイスのタイプを指定します。href 属性が存在する場合にのみ使用できます。

要素との一貫性を維持するために、hreflang 属性を追加します。 3. その他の属性
• リストが逆の順序で表示されることを指定する属性 reverend • スクリプトが非同期で実行されるかどうかを定義する async 属性を追加します

2.
• CSS スタイル シートで置き換えられるすべての属性が廃止されました。 • ターゲット、プロ ファイル
、バージョンなどの冗長な属性が廃止されました。

5.グローバル属性
HTML5 には、「グローバル属性」という新しい概念があります。いわゆるグローバル属性は、1 属性で使用できる属性です。要素内のコンテンツを編集し、マウス フォーカスを取得します。属性はブール値であり、true または false として指定できます。また、この属性には非表示の継承
状態もあり、true の場合は編集が許可されます。 , falseの場合は編集不可、指定されていない場合はinherit
2.designMode属性
•この属性はページ全体が編集可能かどうかを決定するために使用されます。属性には「on」と「off」の 2 つがあります。属性が「on」の場合は編集でき、「off」の場合は編集できません。
3. 隠し属性•すべての要素は、input 要素の hidden 要素と同様の hidden 属性を使用できます。その機能は、要素をレンダリングしないようにブラウザに通知し、要素を非表示にすることです。属性値はブール値で、true の場合は非表示になり、false の場合は表示されます。
4. スペルチェック属性
• この属性は、input 要素 (type=text) と textarea の 2 つのテキスト入力ボックスに対して HTML 5 によって提供される新しい属性で、主にユーザーの入力内容のスペルと文法をチェックします。属性値はブール値です。記述方法は次のとおりです。
="true" >
form 属性の詳細な説明
フォーム内の従属要素はフォーム内に記述する必要がありますが、HTML5 ではページ上のどこにでも記述でき、その要素のフォーム属性をフォーム ユニットの ID として指定することができます。要素が指定された形式に属することを宣言します。

コードは次のとおりです:

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title>form属性</title> 
</head> 
<body> 
<form action="" id="testform"> 
<input type="text" name="" /> 
</form> 
<textarea form="testform" name="" cols="30" rows="10"></textarea> 
</body> 
</html>


input要素はフォーム内に記述されており、それにform属性を設定する必要はありません。 textarea要素はフォームの外に記述されていますが、フォームに従属しているため、textarea要素のform属性にはフォームのidが設定されます。
これの利点は、ページ上の要素にスタイルを追加する必要がある場合、スタイルがさまざまな形で散在しなくなるため、より便利に追加できることです。

【関連する推奨事項】

1. HTML5 の無料ビデオチュートリアル

2. H5 で仮想キーボードを作成するときに入力ボックスがブロックされた場合はどうすればよいですか?

3.

HTML5 を使用して WeChat で全画面再生を実装する方法の詳細な説明

4.

H5 の新しいタグによるブラウザーの互換性の問題の詳細な説明

5. H5 の使用方法の概要ウェブページを作成します

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

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
H5コード:Web開発者向けのベストプラクティスH5コード:Web開発者向けのベストプラクティスApr 16, 2025 am 12:14 AM

H5コードのベストプラクティスには以下が含まれます。1。正しいDoctype宣言と文字エンコーディングを使用します。 2。セマンティックタグを使用します。 3。HTTPリクエストを削減します。 4.非同期負荷を使用します。 5。画像を最適化します。これらのプラクティスは、Webページの効率、保守性、ユーザーエクスペリエンスを向上させることができます。

H5:Web標準とテクノロジーの進化H5:Web標準とテクノロジーの進化Apr 15, 2025 am 12:12 AM

Web標準とテクノロジーは、これまでにHTML4、CSS2、および単純なJavaScriptから進化し、重要な開発を受けてきました。 1)HTML5は、CanvasやWebstorageなどのAPIを導入し、Webアプリケーションの複雑さと互換性を高めます。 2)CSS3はアニメーション関数とトランジション関数を追加して、ページをより効果的にします。 3)JavaScriptは、矢印関数やクラスなど、node.jsおよびES6の最新の構文を通じて開発効率とコードの読みやすさを向上させます。これらの変更により、パフォーマンスの最適化とWebアプリケーションのベストプラクティスの開発が促進されました。

H5はHTML5の速記ですか?詳細の調査H5はHTML5の速記ですか?詳細の調査Apr 14, 2025 am 12:05 AM

H5はHTML5の略語だけでなく、より広い最新のWeb開発テクノロジーエコシステムを表しています。1。H5にはHTML5、CSS3、JavaScript、および関連するAPIおよびテクノロジーが含まれます。 2.より豊かでインタラクティブでスムーズなユーザーエクスペリエンスを提供し、複数のデバイスでシームレスに実行できます。 3. H5テクノロジースタックを使用して、レスポンシブWebページと複雑なインタラクティブ機能を作成できます。

H5およびHTML5:Web開発で一般的に使用される用語H5およびHTML5:Web開発で一般的に使用される用語Apr 13, 2025 am 12:01 AM

H5とHTML5は、同じこと、つまりHTML5を参照します。 HTML5はHTMLの5番目のバージョンであり、セマンティックタグ、マルチメディアサポート、キャンバスとグラフィックス、オフラインストレージ、ローカルストレージなどの新しい機能をもたらし、Webページの表現力と互換性を向上させます。

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 11, 2025 am 12:11 AM

H5開発で習得する必要があるツールとフレームワークには、Vue.JS、React、Webpackが含まれます。 1.Vue.jsは、ユーザーインターフェイスの構築に適しており、コンポーネント開発をサポートします。 2.複雑なアプリケーションに適した仮想DOMを介したページレンダリングを最適化します。 3.Webpackは、モジュールのパッケージングに使用され、リソースの読み込みを最適化します。

HTML5の遺産:現在のH5の理解HTML5の遺産:現在のH5の理解Apr 10, 2025 am 09:28 AM

html5hassificlytransformdedwebdeveverment byintroducingsingingelements、endincemultimediasupport、およびrequrovingperformance.1)itmadewebsitesmoreaccessibleandseo-frendlywithsemantelementslike、and.2)

H5コード:アクセシビリティとセマンティックHTMLH5コード:アクセシビリティとセマンティックHTMLApr 09, 2025 am 12:05 AM

H5は、セマンティック要素とARIA属性を介して、WebページのアクセシビリティとSEO効果を改善します。 1.使用などを使用して、コンテンツ構造を整理し、SEOを改善します。 2。ARIA-LabelなどのARIA属性はアクセシビリティを強化し、支援技術ユーザーは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衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

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

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

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

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

メモ帳++7.3.1

メモ帳++7.3.1

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