HTML5 の新しい要素とタグの概要

私はいつも h5 の新しいタグに関する筆記試験の問題に遭遇するので、情報を確認して要約しました:

1.form 関連:

(1) form 属性: HTML5 では、フォーム要素をフォームの外に配置できます。ターゲット フォームを指すように form 属性を要素に追加するだけです (form 属性値をターゲット フォーム ID に設定します)。

(2) Formaction 属性: HTML5 は、さまざまなサーバー アドレスへの送信を容易にするために、送信ボタン (ボタン、送信、画像など) に formaction 属性を追加します。

<input formaction="new.html" type="submit" value="提交到new.html">

(3) formmethod 属性: 使い方はformactionと同じです。

(4) プレースホルダー属性: テキストボックスが未入力状態のときに使用されるテキストプロンプト。

(5) autofocus 属性: この属性を持つことができるのは、ページ上の 1 つのコントロールのみです。この属性には値はありません。直接記述するだけです。

<input name="username" autofocus type="text" id="username">

(6) list 属性: 単一行のテキスト ボックスに使用されます。この属性の値は、特定の datalist 要素の ID です。この属性を追加した後の単一行のテキスト ボックスは、選択ボックス (select) に似ています。ただし、この要素をサポートしていないブラウザでのエラーを避けるために、通常は CSS を使用して表示されないように設定します。

order:<input list="list" name="order" autofocus type="text" id="order">
            <datalist id="list" style="display:none">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            </datalist>

(7) autocomplete 属性: HTML5 は、ブラウザーがフィールドへの入力を予測できるようにし、誰にでも見られるセキュリティ リスクを回避します。この属性には 3 つの値があります: 「on」、「off」、または「」 (指定されていない場合)。

(8) 入力要素の種類:

検索: テキスト テキスト ボックスに似ており、検索に使用されます。

電話番号: テキスト テキスト ボックスに似て、電話に使用されます。 url 形式のアドレス;

メール: テキスト テキスト ボックスと同様、メール形式のアドレスに使用されます。

範囲: 範囲内の値のみを入力できます。範囲を設定するには min および max 属性を使用します。

color: カラー テキスト ボックス、「#000000」形式のテキスト;

ファイル: ファイル選択テキスト ボックス、HTML5 の multiple 属性を使用して複数の選択を行うことができます。

datetime、date、month、week、time、datetime-local さまざまな日付と時刻を入力するためのテキスト ボックス;

出力: さまざまな種類の出力を定義します。

(9) フォーム検証関連:

自動検証 (追加によって実現)要素に対応する属性 検証要件)

必須属性: この属性を持つ要素は、コンテンツが空の場合は送信できず、対応するプロンプトが表示されます。

パターン属性: この属性を持つ要素の場合、コンテンツが空でない場合、コンテンツはパターン値と照合されます。照合が失敗した場合はパスせず、プロンプトが表示されます。

Min属性とmax属性：値型と日付型の入力要素に対する特殊な属性で、入力範囲を制限します。

ステップ属性: 要素の値が増加または減少するステップを制御します。たとえば、1 ～ 100 の数値を入力し、ステップが 5 の場合、入力できるのは 1、6、11... のみです。

表示検証（要素に属性を付加して自動検証するほか、HTML5ではselect要素やtextareaを含むフォーム要素や入力要素（input）にcheckValidityメソッドがあり、このメソッドを呼び出すことで手動で検証することができます。checkValidityメソッドブール値で始まるフォームは検証結果を返します)

function check(){
        var email=document.getElementById("email");
        if(email.checkValidity()){
        alert("email格式正确");
        }else{
        alert("email格式不正确");
        }
        }

検証のキャンセル (フォーム検証のキャンセルにはフォームの novalidate と送信の formnovalidate という 2 つの属性があります)

//用于form的novalidate
        <form novalidate>
        <input type="text" name="name" id="name" required>
        <input type="submit" name="button" id="button" value="提交">
        </form>

        //用于submit的formnovalidate
        <form>
        <input type="text" name="name" id="name" required>
        <input type="submit" orfmnovalidate name="button" id="button" value="提交">
        </form>

カスタム エラー: HTML5 では、検証されていないフォーム ブラウザーははデフォルトのプロンプトですが、JavaScript を介してカスタム エラー プロンプトも提供します。 (自分で関数を作成し、クリックしたときにそれを呼び出す必要があると思います)。

2. 強化されたページ要素

(1) Figure 要素: Figure は、1 つの Figure に 1 つの figcaption のみを含めることができる組み合わせ要素です。

        <figure>
        <img src="/static/imghw/default1.png"  data-src="logo.png"  class="lazy"   alt="HTML5 の新しい要素とタグの概要">
        <figcaption>标志</figcaption>
        </figure>

(2) 詳細要素: 詳細は、画面上のローカル領域を拡大または縮小するための Javascript の代替手段を提供します。

        <details>
        <summary>点击我查看细节</summary>
        <p>我是细节内容。</p>
        </details>

(3) マーク要素: マーク要素は、ページを強調表示する必要があるか、部分を強調表示する必要があることを示します。

(4) Progress 要素: 通常、進行状況の value 属性と max 属性を設定できます。Value は実行された内容を表し、max は有効な浮動小数点のみを表します。値は 0 より大きく、最大値以下である必要があります。進行状況に対してこれら 2 つの属性を設定しない場合、動的表示は進行中となり、進行状況は不確かになります。

(5) メーター要素: 度量衡を定義します。 (上限値と下限値を定義する値は色分けされます)。

　　　high:定义度量的值位于哪个点，被界定为高的值。
low:定义度量的值位于哪个点，被界定为低的值。
max:定义最大值。默认值是 1。
min:定义最小值。默认值是 0。
optimum:定义什么样的度量值是最佳的值,如果该值高于 "high" 属性，则意味着值越高越好。如果该值低于 "low" 属性的值，则意味着值越低越好。
value:定义度量的值。

（6）改良的ol列表：在HTML5中为ol元素添加了start属性和reversed属性。

　　start：表示列表序号从几开始。

　　reversed：表示列表序号为倒序。

（7） 改良的dl列表：dl是专门用来定义术语的列表，在HTML5中为dt增加了名字dfn。

        <dl>
        <dt>术语1</dt>
        <dd>描述...</dd>
        <dt><dfn>名字</dfn>术语2</dt>
        <dd>描述...</dd>
        </dl>

(8)cite:用于表示作者。

(9)small:用于标识“小型文本”。

(10)

标签:定义外部的内容。

(11)

标签:定义 article 以外的内容。aside 的内容应该与 article 的内容相关。aside可以用于网站页尾一排排的广告或者链接，一竖排为一个aside。也可以用于博客侧栏。

（12）

（13） 标签：定义图形（是为了客户端矢量图形而设计的）。

（14） 标签：定义命令按钮，比如单选按钮、复选框或按钮。

（15） 标签:定义嵌入的内容，比如插件。

（16）

 标签：定义 section 或 document 的页脚。

（17）

 标签：定义 section 或 document 的页眉。
（18）

 标签：用于对网页或区段（section）的标题进行组合。

（19）

 标签：用于对网页或区段（section）的标题进行组合。

（20）

 标签：定义导航链接的部分。

（21）

 标签：定义不同类型的输出，比如脚本的输出。

（22） 标签：在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。

（23） 标签：定义字符（中文注音或字符）的解释或发音。

（24） 标签：定义 ruby 注释（中文注音或字符）。

（25）

 标签：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
（26） 标签：为媒介元素（比如

（27）

 标签：details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。

（28） 标签：定义日期或时间，或者两者。

（29）

 (30) 

标签：定义对话（会话）dialog元素表示几个人之间的对话。