エッセイ2、HTML5の基本

1はじめに

HTML5ドラフトの前身はWebアプリケーション1.0です。これは2004年にWHATWGによって提案され、2007年にW3Cによって承認され、新しいHTMLワーキングチームが設立されました。
定義：
広義には、リッチなカスタマーサービスソリューションの新世代であり、
狭義には、html4製品の新世代です。

2. HTML5の基本

2.1、意味構造ラベル

1. セクション：ページのコンテンツ領域を表します
2. 記事：コンテキストのない独立したコンテンツの一部を表します
3. 余談：補助記事領域のコンテンツ
4. ヘッダー：コンテンツブロックのタイトルまたはページ内のページ全体を示します
5. フッター：コンテンツブロックの脚注またはページ内のページ全体を示します
6. nav：ページのナビゲーションバー部分を表します
7. 図：独立したストリームコンテンツの一部を表し、figurecaption要素を使用してタイトルを追加します（最初または最後の子要素の位置）
8. main：ページのメインコンテンツを示します（IDには互換性がありません）

2.2、フォームコントロール

新しいコントロール

• datalist：
  入力フィールドのオプションリストを定義します;
  datalist要素は入力フィールドのオプションリストを指定し、リストはdatalistのoption要素によって作成されます。データリストを入力フィールドにバインドする必要がある場合は、入力フィールドのリスト属性をデータリストのIDに参照する必要があります。option要素はvalue属性を設定する必要があります。
  [注：ieおよびSafarブラウザーはサポートしていません]
• keygen：
  キーの生成に使用されるキーペアジェネレーターを定義します;
  keygenはフォームで使用されるキージェネレーターフィールドを指定します。フォームが送信されると、秘密キーがローカルに保存され、公開キーがサーバーに送信されます
• 出力：
  結果の計算と表示に使用されます。
  これは、スクリプトの出力など、さまざまなタイプの出力を定義するセマンティックラベルです
  [注：つまり、サポートされていません]
  例：<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
• progress：
  タスクの進行状況または進行状況をマークするために使用されます（通常はプロセスを示すために使用されます）;
  関連する属性（属性が設定されていない場合、進行状況バーの往復効果があります）：

1. max：タスクに必要な作業量を指定します
2. 値：完了した作業量を指定します
   [注：ieおよびSafarブラウザーではサポートされていません]
   例：<input id="btn" type="button" value="开始下载">
下载进度：<progress id="test" value="0" max="100"></progress>
<script>
var oTimer;
btn.onclick = function(){
if(oTimer){
return;
}
oTimer = setInterval(function(){
test.value++;
if(test.value >= test.max){
clearInterval(oTimer);
}
},50);
}
</script>

• メーター：
  残りの容量または残りの在庫を表示するために使用され、通常はステータスを示します
  [注：ieおよびSafarブラウザーはサポートしていません]
  関連属性

1. form：meter要素が属する1つ以上のフォームを指定します
2. 高：高と見なされる値の範囲を指定します
3. 低：低と見なされる値の範囲を指定します
4. max：指定された範囲の最大値
5. min：指定された範囲の最小値
6. 最適：指定されたメトリックの最適値
7. メトリックの現在の値を指定します（必須）
   [注]：最小は低未満、高未満、最大未満です

従来の制御

入力 <input type="">

• 伝統的なタイプ

1. ボタン：クリック可能なボタンを定義します。単一のデフォルトには動作がありません
2. チェックボックス：チェックボックスを定義します。
   ユーザーが特定の数の選択肢から1つ以上のオプションを選択できるようにします。同じグループのボタンの場合、名前の値は常に
   [注：チェックボックスタイプの入力要素はパディングとボーダーを設定できません（ie10-を除く）]
3. ファイル：入力フィールドを定義し、ファイルをアップロードするための「参照」ボタン
4. hidden：入力非表示タイプを定義して、ユーザーには表示されないがフォームで送信する必要がある追加のデータを追加します
   [注：無効属性は、タイプが非表示の入力要素では使用できません]
5. 画像：画像のフォームとボタンを定義します。
   幅、高さ、src、alt属性を設定できます
6. password：パスワード入力ボックス。
   文字は入力後に非表示になります。通常、一連のドット
7. radio：ラジオボタンを定義し
   、ユーザーが特定の数の選択肢、同じボタンのグループ、同じ名前の値からオプションを選択できるようにします
   [注：ラジオタイプの入力要素はパディングとボーダーを設定できません（ie10-browserを除く）]
8. リセット：リセットボタンを定義します。リセットボタンはフォーム内のすべてのデータをクリアします
9. submit：送信ボタンを定義し、フォームデータをサーバーに送信します
10. text：ユーザーがテキストを入力できる単一行の入力フィールドを定義します

• 新しいタイプ

1. color：パレットの
   type = "color"の入力タイプを定義して、色を選択するためのパレットを作成します。色の値は、URLエンコードされた16進値として送信されます。たとえば、黒は％23000000として送信されます。ここで、％23は＃のURLエンコーディングです
   [注：サファリとIEはこのタイプをサポートしていません]
2. 日付：日、月、年を選択するための入力フィールドを定義します
3. datetime：選択した時刻、日、月、年（UTC時間）の入力フィールドを定義します
4. datetime-local：選択した時刻、日、月、年（現地時間）の入力フィールドを定義します
5. 電子メール：電子メールアドレスを含む入力フィールド
   type = "email" を定義します。入力入力タイプは、意味的な電子メールアドレス入力フィールドを表すために使用され、電子メールフィールドの値は自動的に検証されます。外観は、type = "text"の入力入力と同じです
   タイプに違いはありません。英語のキーボードの電子メールタイプのinput要素は、複数の属性をサポートするために携帯電話で呼び出されます
   [注：IE9ブラウザーとsafariブラウザーはサポートしていません]
6. 月：月と年を選択するための入力フィールドを定義します
7. 数値：数値を含む入力フィールド
   type = "number" を定義します。入力入力タイプはデジタル入力の処理に使用され、数値キーボードは携帯電話で呼び出されます
   [注：IEはこのタイプをサポートしていません]
   関連属性
   a、最大許容最大値
   b、 minは最小値
   cを許可し、stepは有効な数値間隔
   d、valueのデフォルト値を指定します
8. range：特定の範囲の数値を含む入力フィールドを定義します。type
   = "range"の入力入力タイプは、type = "number"の入力タイプと同様に、特定の範囲に含まれる数値入力を処理するために使用されます
   [注：IE9はサポートされていませんこのタイプ]
   関連する属性
   a、maxは最大許容値を
   指定b、minは許容最小値を
   指定c、stepは有効な数値間隔を
   指定d、valueはデフォルト値を指定
   ヒント：minとmaxが設定されていない場合、デフォルト値は0と100
9. search：検索ドメイン
   　を定義する入力入力タイプ> type = "search"はセマンティック検索ボックスを表すために使用され、type = "text"の入力入力タイプと外観に違いはありません。
10. tel：
    セマンティック電話入力フィールドを表す電話番号を含む入力フィールドtype = "tel" を定義します。type= "text"の入力入力タイプと外観に違いはありません。携帯電話で番号が呼び出されます。キーボード
11. 時間：月と年を選択するための入力フィールドを定義します
12. url：URLアドレスを含む入力フィールド
    type = "url" を定義します。入力入力タイプは、セマンティクスでURLアドレスの入力フィールドを表すために使用され、urlフィールドの値は自動的に検証されます。外観は、type = "text"の入力入力タイプと同じです違いなし
    [IE9ブラウザーとSafariブラウザーはサポートしないことに注意]
13. 週：週と年を選択するための入力フィールドを定義します

• 従来の属性

1. alt：alt属性は、画像入力の代替テキストを指定します。その機能は、image要素のalt属性に似ています。これは、ユーザーが何らかの理由で画像を表示できない場合に代替情報を提供します。
   [注：alt属性は、type = "image"の入力要素でのみ使用できます】を使用して
2. size：size属性は、type = "text"または "password"の入力要素に表示される文字数です。その他のタイプの場合、入力フィールドの幅（ピクセル単位）です
   [size属性は視覚的なデザイン属性であるため、推奨されています代わりにCSSを使用してください]
3. src：送信ボタンとしてsrc属性で表示される画像のURL
   [src属性はtype = "image"のinput要素とのみ組み合わせて使用​​できることに注意してください]
4. オン：サポートタグの
   入力タイプタイプはラジオ
   入力タイプタイプはチェックボックス
   チェック属性は、ページが読み込まれたときに事前に選択する必要がある入力要素を指定します。または、ページが読み込まれた後にJavaScriptで設定できます。
5. name：name属性は、サーバーに送信されたフォームデータを識別するため、またはクライアント側のJavaScriptを介してフォームデータを参照するために使用されるinput要素の名前を指定するために使用されます
   [フォームが送信されるとき、name属性が設定されたフォーム要素のみが渡されることに注意してくださいそれらの値
   すべてのフォームコントロールには名前属性があります]
6. type：input要素のタイプを指定するために使用されます
   [input要素がtype属性を設定しない場合、または設定値がブラウザーでサポートされていない場合、入力タイプはtype = "text"になることに注意してください]
7. disabled：disabled属性は、入力要素を無効にする必要があることを指定します。無効化されたフィールドは変更できません。タブボタンを使用してフィールドに切り替えることもできませんが、そのテキストを選択またはコピーすることはできます
   [注1：無効属性は、type = "hidden"の入力要素では使用できません]
   [注2： IE7ブラウザーの場合、直接disableを設定するのではなく、disabled =“ disabled”に設定する必要があります。そうしないと、JavaScriptコントロールを使用する場合は無効になります]
8. readonly：readonly属性は、入力フィールドが読み取り専用であることを指定します。読み取り専用フィールドは変更できませんが、ユーザーはタブボタンを使用してフィールドに切り替えることができ、そのテキストを選択またはコピーすることもでき
   ます。readonly属性は、type = "text"または "password"のinput要素で使用できます
   [注：IE7-ブラウザは、JavaScriptを使用してreadonly属性を制御することをサポートしていません]
9. maxlength：maxlength属性は、入力フィールドの最大長を文字数で指定します
   [注：この属性は、type = "text"またはtype = "password"の
   値を持つinput要素でのみ使用できます]
   value属性は、入力要素の値を設定します。入力タイプが異なると、value属性の使用法が異なります
   。type= "button"、 "reset"、 "submit"は、ボタンに表示されるテキストを定義するために使用されます
   type = "text"、 "password"、 "hidden"が使用されます入力フィールドの初期値を定義する
   type = "checkbox"、 "radio"、 "image"は、入力に関連付けられた値を定義するために使用されます
   [注1：type = "checkbox"または "radio"は、値属性を設定する必要があります]
   [注2： value属性はtype = "file"]のinput要素では使用できません

• 新しい属性

1. autocomplete：autocomplete属性は、個々の要素またはフォーム全体でブラウザのオートコンプリート機能をオンまたはオフにできます。
   ユーザーがフィールドに入力を開始すると、ブラウザには、以前に入力された値に基づいてフィールドに入力されたオプションが表示されます
   。autocomplete属性は、フォーム要素と次のタイプの入力要素に適用されます：テキスト、検索、URL、電話、電子メール、パスワード、日付ピッカー、範囲、色
   [注：IEブラウザーはこの属性をサポートしていません。この属性は、要素に名前属性がある場合にのみ有効です]
2. autofocus：autofocus属性は、ページが読み込まれると、ドメインが自動的にフォーカスを取得することを
   指定します。autofous属性は、ボタン、入力、keygen、select、およびtextarea要素に適用されます
3. novalidate：novalidate属性は、フォームが送信されるときにフォームまたは入力フィールドが検証されないことを指定します
   。novalidate属性は、フォーム要素および次のタイプの入力要素に適用されます：テキスト、検索、URL、電話、電子メール、パスワード、日付ピッカー、範囲、色
   [注：IE9 -ブラウザはサポートしていません]
4. height高
   さ属性は、画像タイプの入力タグの画像の
   高さを指定するために使用されます高さ属性は、画像タイプの入力タグの画像の高さを指定するために使用されます。
5. width
   width属性は、画像タイプの入力タグの画像幅を指定するために使用されます
   [注：この属性は、画像タイプの入力タグにのみ適用されます]
6. min：最小値
7. max：最大
8. ステップ：番号間隔
9. multiple：複数の属性は、ctrlキーを押すことで、入力フィールドで複数の値を選択できることを規定しています。
   この属性は、type = "email"および "file"の入力要素に適しています
   [注：この属性はIE9ブラウザーではサポートされていません]
10. pattern
    は、入力ドメインの検証に使用されるパターンを指定します。
    モデルパターンは正規表現です
    。pattern属性は、次のタイプの入力要素に適用できます：テキスト、検索、url、tel、電子メール、およびパスワード
    [注：IE9ブラウザーとsafariブラウザーはサポートしていません]
    <form action="#">
<input pattern="\d{3}">
<input type="submit">
</form>
11. placeholder
    placeholder属性は、入力フィールドの予期される値を説明するプレースホルダーテキストを提供します。プレースホルダーは、>入力フィールドが空のときに表示され、入力フィールドがフォーカスされると非表示になり
    ます。プレースホルダー属性は、次のタイプの入力要素に適用できます：テキスト、検索、url、tel、> email、パスワード
    [注：IE9ブラウザーサポートされていません]
    　プレースホルダーの色を変更するには、:: placeholder
    例を使用する必要があります::: placeholder {color：green;}
12. 必須の
    必須属性は
    、送信前に入力フィールドに入力する必要があることを指定します（空にすることはできません）必須の属性は、テキスト、検索、URL、電話、電子メール、パスワード、日付ピッカー、番号、チェックボックス、ラジオ、ファイルのタイプの入力要素に適用されます
    [注意：IE9ブラウザーとSafariブラウザーはサポートされていません]
13. form
    属性は、入力フィールドが属する1つ以上のフォームを指定します。フォームのform属性とid
    form属性は、すべての入力タグタイプに適用できる必要があります。複数のフォームを引用符で囲む必要がある場合は、スペースで区切ります
    [注：IEブラウザこの属性はサポートされていません。この属性は、要素に名前属性がある場合にのみ有効です]
    <form id="form" action="#">
<input type="submit">
</form>
<input name="test" form="form">
14. フォームオーバーライド属性：フォームオーバーライド属性を使用すると、フォーム要素の一部の属性設定をオーバーライドできます。その中で、formnovalidateはボタンまたは入力要素に適用され、その他の属性は送信またはリセットボタンまたは入力要素に適用されます
    a、formaction：フォームのアクション属性を書き換えます
    b、formenctype ::絶対数が多い場合はフォームのenctype属性を書き換えます
    c、formmethod：フォームのメソッド属性を書き換える必要はありません
    d、formnovalidate：フォーム
    eのnovalidate属性を書き換えます、formtarget：フォームのターゲット属性を書き換えます

選択する

select要素は、任意の数のoption要素とoptgroup要素を含むドロップダウンリストを定義するために使用されます。
 使用可能な属性：
  1. autofocus>は、ページが読み込まれた後、テキスト領域が自動的にフォーカスを取得することを
  指定します2. disabledは、ドロップダウンリストが無効である
  ことを指定します3.フォームが指定しますテキスト領域が属する1つ以上のフォーム
  4.複数は複数のオプションを選択できることを指定します
  5.名前はドロップダウンリストの名前を指定します
  6.サイズはドロップダウンリストに表示されるオプションの数を指定します
   > [注：サイズは0にできません。デフォルトは1です]
  7. [注：Safariブラウザーは高さを設定できません]

オプション

1. option要素は、ドロップダウンリストのオプションを定義します
2. option要素には2つのアプリケーションシナリオがあり、ドロップダウンリストの選択に加えて、オプションリストのデータリストでも使用できます。
3. サポートされる属性
   disabled：このオプションを最初にロードしたときにこのオプションを無効にする必要があることを指定します
   label：オプション要素コンテンツの代わりにoptgroupを使用するときに使用するラベルを定義します
   [注：firefoxはlabel属性をサポートしていません]
   選択：オプションが初めてリストに表示されることを指定選択された状態
   値として表示：サーバーに送信されるオプション値を定義します
   [注：値の値を設定すると、サーバーは値の値を送信します。それ以外の場合は、オプションの要素コンテンツがサーバーに送信されます]
4. [注：オプションでは、マージン、パディング、境界線などのボックスモデルスタイルを設定できません。]

optgroup

optgroup要素は、オプションを組み合わせるためのオプショングループを定義します
[注：optgroupは、マージン、パディング、ボーダーなどのボックスモデルスタイルを設定できません。]
関連属性
label：オプショングループの説明を指定します（必須）
disabled：オプショングループが無効であることを指定します（オプション）

ボタン

ボタンを定義

1. テキスト、画像、その他のマルチメディアコンテンツをボタン要素内に配置できます
2. 禁止されている要素は画像マッピングです。フォームボタンの動作を妨げるマウスとキーボードのアクションに敏感であるためです。
3. 常にタイプ属性
   IE7を使用します。ブラウザのデフォルトタイプはボタンです------ IE7-ボタン要素間のテキストを送信し、
   他のブラウザのデフォルトタイプは送信です------他のブラウザが送信します値属性の内容

ラベル

1. label要素は、入力要素のラベルを定義し、テキストラベルとフォームコントロール間の関連付けを確立します。ラベル要素のテキストをクリックすると、このコントロールがトリガーされます。テキストが選択されると、ブラウザは自動的にラベルに関連するフォームコントロールにフォーカスを移動します
2. label要素には2つの用途があります。1つはfor属性を使用することで、もう1つはフォームコントロールをラベル内にネストすることです。ただし、IE6ブラウザーはfor属性の使用方法のみを認識します。
   関連する属性
   ：ラベルがバインドされているフォーム要素を指定します。
   フォーム：ラベルフィールドが属する1つ以上のフォームを指定します。
   [注：ラベルのfor属性は、関連する要素のid属性に関連付けられている必要があります同じ】

テキスト

textareaは複数行のテキスト入力コントロールを定義します。テキスト領域は無制限の量のテキストを保持できます
[注：ブラウザーはtextareaのネストのtextareaを許可しません]
[注：IE8ブラウザーの幅と高さの設定にはスクロールバーが含まれません。他のブラウザーの幅と高さの設定スクロールバーを含める]
関連属性

1. name：テキスト領域の名前を指定します
2. value：テキスト領域の値を表します
3. disabled：
   IE7でテキスト領域が無効であることを規定します-ブラウザーはsetAttribute（ 'disabled'、 ''）の書き込みをサポートしていないため、setAttribute（ 'disabled'、 'disabled'）に設定する必要があります
4. readonly：テキスト領域が読み取り専用であることを規定します
   [注：IE7ブラウザーはJavaScriptによる読み取り専用属性の設定をサポートしていません]
5. autofous：ページが読み込まれた後にテキスト領域が自動的にフォーカスを取得するように指定します
   [注：IE9-Browserはこの属性をサポートしていません]
6. 必須：必須のテキスト領域が必要です
   [注：IE9ブラウザーとSafariブラウザーはこの属性をサポートしていません]
7. プレースホルダー：テキスト領域の期待値を説明する短いプロンプトを指定します
   [注：IE9-Browserはこの属性をサポートしていません]
8. maxlength：テキスト領域の最大文字数を指定します
   [注：IE9-Browserはこの属性をサポートしていません]
9. cols：テキスト領域に表示される列の数を指定します
10. rows：テキスト領域に表示される行数を指定します
    [注：colsとrowsを使用してtextareaのサイズを指定できますが、CSSの高さと幅のプロパティを使用するのがより良い方法です]
11. wrap：フォームで送信するときにテキスト領域の
    折り返しを処理する方法を指定します。wrap= "soft"の場合、フォームが送信されても​​、テキストは画面上で折り返されますが、送信されたデータには改行がありません（デフォルト値） ）;そしてwrap = "hard"の場合、フォームが送信されたときに、送信されたデータにテキストの改行が含まれることを意味します％0D％0A

フィールドセット

1 fieldset要素は、フォーム内の関連要素をグループ化してアクセシビリティを向上させるために使用されます。ほとんどのブラウザは、単純な境界線を使用してフィールドセット
関連属性を表示します

1. 無効：無効なフィールドセット
2. form：フィールドセットが属する1つ以上のフォームを指定します
3. name：フィールドセットの名前を指定します

伝説

凡例要素は、フィールドセット要素のタイトルを定義するために使用されます
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>

2.3、マルチメディアラベル

オーディオ

• 音楽プレーヤー
• 関連属性
  autoplay：自動再生
  コントロール：表示コントロール
  ループ：ループ再生
  プリロード：ページが読み込まれると音声が読み込まれ、再生の準備が整います（自動再生が使用されている場合、この属性は無視されます）
  src：再生する音声のURL
  [注：要素はサポートしていませんwma形式でファイルを再生する]

ビデオ

• プレイバック
• 関連属性
  autoplay：自動再生
  コントロール：表示コントロール
  高さ：プレーヤーの高さ
  幅：プレーヤーの幅
  ループ：ループ再生
  プリロード：ページが読み込まれたときにビデオが読み込まれ、再生の準備ができています（自動再生が使用されている場合、この属性は無視されます）
  src：必須動画のURLの
  ポスターを再生：動画のダウンロード時に表示される画像、またはユーザーが再生ボタンをクリックする前に表示される画像を指定します。
  例：
  <video id="test" src="movie.mp4" width="280" height="200" poster="diejia.jpg"></video>

ソース

• ビデオおよびオーディオ
  メディア用のメディアリソースを提供する：メディアリソースのタイプを指定する（ブラウザーはサポートしない）
  src：メディアファイル
  タイプのURLを指定する：メディアリソースのMIMEタイプを指定する
• 一般的なタイプ
  のオーディオ
  audio/ogg
audio/mpeg
  、ビデオ
  video/ogg
video/mp4
video/webm
  など

1. <audio> <source src="audio.ogg" type="audio/ogg"> <source src="audio.mp3" type="audio/mp3"> audio player not available. </audio>
2. <video> <source src="video.webm" type="video/webm; codecs='vp8,vorbis'"> <source src="video.ogg" type="video/ogg; codecs='theora,vorbis'"> <source src="video.mp4"> video player not available. </video>
   ヒント：マルチメディアタグを使用する場合は、ユーザーのブラウザでサポートされていないときに表示できるように、タグの中央に特定のプロンプトコンテンツを含める必要があります