ホームページ > 記事 > ウェブフロントエンド > html5_html5 チュートリアル スキルの新しい属性と廃止された属性の概要
HTML5では、多くの新しい要素が追加されたり廃止されたりする一方で、多くの属性も追加されたり廃止されたりしています。
新しい属性
1. フォーム関連の属性
input (type=text)、select、textarea、button の autofocus 属性を指定します。属性を指定することで、画面を開いたときに要素に自動的にフォーカスを取得できます。 input (type=text) と textarea のプレースホルダー属性を指定します。これにより、ユーザーに入力を求め、ユーザーが入力できる内容が表示されます。 入力、出力、選択、テキストエリア、ボタン、フィールドセットのフォーム属性を指定します。どのフォームに属するかを宣言し、フォームを見失わずにページ上の任意の場所に配置します。 input (type=text) および textarea に必須の属性を指定します。この属性は、ユーザーが送信時にチェックし、要素内に入力コンテンツが存在する必要があることを確認することを示します。 入力タグにいくつかの新しい属性を追加します: autocomplete、min、max、multiple、pattern、step。 datalist 要素と組み合わせて使用される list 属性もあります。datalist 要素は autocomplete 属性と組み合わせて使用されます。 multiple 属性を使用すると、アップロード中に複数のファイルを一度にアップロードできます。pattern 属性は、実際には正規表現である入力フィールドのパターンを検証するために使用されます。 step 属性は、入力フィールドの有効な数値間隔を指定します (step="3" の場合、有効な数値は -3、0、3、6 などになります)。step 属性は max と組み合わせて使用できます。および min 属性を使用して、値の正当な範囲を作成します。 formaction、formenctype、formmethod、formnovalidate、formtarget 属性を input 要素と button 要素に追加します。ユーザーは、form 要素の action、enctype、method、novalidate、および target 属性をオーバーライドします。無効な属性を fieldset 要素に追加して、その子要素を無効な状態に設定します。 input、ボタン、フォームに novalidate 属性を追加すると、送信時に実行される関連チェックがキャンセルされ、フォームを無条件に送信できるようになります。2. リンク関連の属性
メディア属性を および 領域に追加します。ターゲット URL が最適化されるメディア/デバイスのタイプを指定します。この属性は、ターゲット URL が特定のデバイス (iPhone など)、音声または印刷メディア用に設計されていることを指定するために使用されます。このプロパティは複数の値を受け入れることができます。 href 属性が存在する場合にのみ使用できます。 エリアにherflang属性とrel属性を追加します。 hreflang 属性は、リンクされたドキュメント内のテキストの言語を指定します。この属性は、href 属性が設定されている場合にのみ使用できます。注: このプロパティは純粋にアドバイスです。 rel 属性は、現在のドキュメントとリンクされたドキュメント/リソースの間の関係を指定します。 rel 属性は、href 属性を使用する場合にのみ使用できます。 リンクにサイズ属性を追加します。 size 属性は、リンクされたリソースのサイズを指定します。この属性は、リンクされたリソースがアイコン (rel="icon") の場合にのみ使用できます。このプロパティは複数の値を受け入れることができます。値はスペースで区切られます。 target 属性を Base 要素に追加するのは、主に a 要素との一貫性を維持するためです。3. その他の属性
reversed 属性を ol に追加します。これは、リストが逆の順序で表示されることを指定します。 charset 属性をメタに追加し、type 属性と label 属性をメニューに追加します。 label はメニューのコースウェア ラベルを定義し、type 属性によりコンテキスト メニュー、ツールバー、リストの 3 つの形式で表示できるようにします。 スコープ付き属性をスタイルに追加します。これにより、ドキュメント全体ではなく、ドキュメントの指定された部分のスタイルを定義できるようになります。 「scoped」属性が使用される場合、指定されたスタイルは、style 要素の親要素とその子にのみ適用されます。 スクリプトの属性を追加または削除します。これは、スクリプトが非同期で実行されるかどうかを定義します。 async 属性は外部スクリプトでのみ機能します (src 属性を使用する場合のみ)。 外部スクリプトを実行するにはいくつかの方法があります。 async="async" の場合: スクリプトはページの残りの部分に対して非同期で実行されます (ページの継続中)。 async が使用されておらず、defer="defer" の場合: ページの解析が終了したときにスクリプトが実行されます。 async も defer も使用されていない場合: スクリプトはブラウザーの直前に読み取られて実行されます。は、引き続きページを HTML 要素として解析します。マニフェストは、オフライン Web アプリケーションの開発時に API と組み合わせて使用され、URL を定義し、この URL 上のドキュメントのキャッシュ情報を記述します。 iframe、sandbox、シームレス、srcdoc に属性を追加します。ページのセキュリティを向上させ、信頼できない Web ページが特定の操作を実行できないようにするために使用されます。廃止された属性
HTML4 の一部の属性は HTML5 では使用されなくなり、他の属性または他のメソッドに置き換えられます。
HTML 4 で使用される属性 | この属性を使用する要素 | HTML 5 の代替手段 |
改訂 | リンク、 | 関連 |
文字セット | リンク、 | リンクされたリソースで HTTP Content-type ヘッダー要素を使用します |
形状、座標 | a | 要素の代わりに area 要素を使用します |
longdesc | img、iframe | a 要素を使用して主要な説明にリンクします |
ターゲット | リンク | 冗長な属性、省略 |
ノレフ | エリア | 冗長な属性、省略 |
プロフィール | 頭 | 冗長な属性、省略 |
バージョン | html | 冗長な属性、省略 |
名前 | 画像 | ID |
スキーム | メタ | 特定のフォームフィールドにのみスキームを使用する |
アーカイブ、chlassid、codebose、codetype、declare、standby | オブジェクト | data および typc 属性クラスを使用してプラグインを呼び出します。これらの属性を使用してパラメータを設定する必要がある場合は、param 属性 | を使用します。
値の型、タイプ | パラメータ | name 属性と value 属性を使用し、MIME タイプを宣言しないでください |
軸、略 | 日、日 | 明確で簡潔なテキストで始まり、その後に詳細なテキストが続く形式を使用します。より詳細なコンテンツを表示するには title 属性を使用してセルのコンテンツを短くすることができます |
スコープ | ち | リンクされたリソースで HTTP Content-type ヘッダー要素を使用します |
整列 | キャプション、入力、凡例、div、h1、h2、h3、h4、h5、h6、p | 代わりに CSS スタイルシートを使用してください |
alink、リンク、テキスト、vlink、背景、bgcolor | 本体 | 代わりに CSS スタイルシートを使用してください |
整列、bgcolor、border、cellpadding、cellspacing、frame、rules、width | テーブル | 代わりに CSS スタイルシートを使用してください |
align、char、charoff、高さ、nowrap、valign | 体、頭、足 | 代わりに CSS スタイルシートを使用してください |
align、bgcolor、char、charoff、高さ、nowrap、valign、width | 日、日 | 代わりに CSS スタイルシートを使用してください |
align、bgcolor、char、charoff、valign | トリ | 代わりに CSS スタイルシートを使用してください |
align、char、charoff、valign、width | コル、コルグループ | 代わりに CSS スタイルシートを使用してください |
align、border、hspace、vspace | オブジェクト | 代わりに CSS スタイルシートを使用してください |
クリア | br | 代わりに CSS スタイルシートを使用してください |
入力、入力 | オル、ウル、リ | 代わりに CSS スタイルシートを使用してください |
和解 | ダウンロード | 代わりに CSS スタイルシートを使用してください |
和解 | メニュー | 代わりに CSS スタイルシートを使用してください |
幅 | 前 | 代わりに CSS スタイルシートを使用してください |
align、hspace、vspace | 画像 | 代わりに CSS スタイルシートを使用してください |
整列、ノーシェード、サイズ、幅 | 時間 | 代わりに CSS スタイルシートを使用してください |
align、フレームボーダー、スクロール、marginheight、marginwidth | iframe | 代わりに CSS スタイルシートを使用してください |
自動送信 | メニュー |