H5新しいラベルとフォームのプロパティ

A、H5新しい構造タグ(意味のあるDIV)

ヘッド1.header定義されたページ

ページのナビゲーションセクションは2.nav定義されています

3.sectionは、ページの領域を定義します

ページの4.footer定義された下

5.articleカスタムページの記事

6.asideは、ページのサイドバーを定義します

組み合わせたページのタイトルを7.hgroup

8.figureは、Webページの要素を結合します

9.figcaptionはフィギュアの組み合わせにキャプションを追加します

10.dialog同様の会話ボックス

例えば:

<dialog open></dialog>

注:セッションのボックスは、デフォルトではオフになって、開いているプロパティを追加する必要があります

二、H5は別のタグを追加します

記号付きテキストを定義する1

構文:<マーク>マーク付きテキスト</マーク>

既知の範囲内のスカラー測定を定義する2又は

语法:<メータ値= "10"分"0"最大= "100"> </メートル>

タスクやプロセスの進捗状況を特定する3

语法:<進捗値= "10"分=最大"0" = "100"> </進捗>

拡張:

)キャンバスまたはキャンバスレンダリングされた画像

b)は、このようなフラッシュとして、定義された外部プラグまたは対話型コンテンツを埋め込みます

定義C)メインコンテンツ本体部

三、H5オーディオとビデオ

1.オーディオ

構文:

<audio controls autoplay loop>
          <source src="1.mp3" type="audio/mp3"/>
          <source src="2.ogg" type="audio/ogg"/>
          <source src="3.wav" type="audio/wav"/>
      您的浏览器版本太低,请升级浏览器!
</audio>

注意:

a)は、オーディオコントロールバーが追加されたコントロール

B)を設定し、音声自動再生自動再生(高バージョンシールド自動再生自動再生)

c)のループループ

注: mp3、wavファイル、OGG:オーディオは、オーディオフォーマットをサポート

2.ビデオ

構文:

<video controls autoplay loop width="数值" height="数值" poster="图片路径">
          <source src="1.mp4" type="video/mp4"/>
          <source src="2.ogg" type="video/ogg"/>
          <source src="3.webm" type="video/webm"/>
          您的浏览器版本太低,请升级浏览器!
</video>

注意:

a)の幅と高さは、ビデオ領域の幅と高さを定義します

ビデオ再生の前に画像をロードするb)のポスター

C)コントロール、自動再生、これらのオーディオ属性を持つループ

注意:ビデオサポートされているビデオフォーマット:MP4(MPEG4)、OGG、WEBM

四、H5新しいフォームタイププロパティ

1.type =「メール」

制限メールボックスユーザー入力タイプ(すなわち、入力記号@含まれている必要があり、および前後の空@することはできません)

2.type =「URL」

、後に空にすることはできません:「HTTP」の入力が含まれている必要があることをURLを入力するようにユーザーを制限します

3.type =「数」

デジタルタイプへのユーザ入力を制限します

例えば:の<input type = "数"値= "1"分= "1"最大= "30"ステップ= "2" />

注:値のデフォルト値を設定し、最小の最小セット、maxの最大値セット、各インクリメントデクリメント値を設定するステップ、デフォルト1

4.type =「範囲」

スライダーのフォームを生成

例えば:の<input type = "範囲"値= "10"分"0"最大= "100" />

5.type =「色」

カラー選択パネルの生成

6.type =「日付」

日付を選択するには、パネルを生産

7.type =「時間」

パネルの選択時間の生成

8.type =「月」

日付選択パネルの生成

9.type =「週」

日付を選択して、今年の最初の数週間です

10.type =「検索」

センス検索フォームを生成

新しいプロパティフォーム5つの新しいH5

必要とされるユーザー入力を制限1.required、空にすることはできません

例えば:の<input type = "text"必要/>

デフォルトのメッセージを追加するための入力ボックスの入力に2.placeholder =「デフォルトのメッセージ」

EG:<種類のINPUT =「テキスト」プレースホルダ=「ユーザー名を入力してください。」/>

入力ブロックのオートフォーカスに3.autofocusページが読み込まれた後、カーソル

例えば:の<input type = "text"オートフォーカス/>

4.pattern =「正規表現」指定された正規表現に一致する内容を入力してください

例えば:の<input type = "text"のパターン= "^ [-ZA-Z0-9] {6,16} $" />

提供される最小増分減少工程に最大設定5.min最大数

ドロップダウンリストのヒントとして指定さ6.listのデータリスト

例えば:

  <input type="search" list="data"/>
     <datalist id="data">
         <option>a</option>
         ...
     </datalist>

拡張:オートコンプリート= "ON | OFF" オートコンプリート、履歴の表示

例えば:

 <input type="text" autocomplete="off" name="username"/>
	 <form autocomplete="on|off"></form>

7. H5のフォーム検証をキャンセル

構文:<form novalidate></form>

公開された94元の記事 ウォン称賛29 ビュー50000 +

おすすめ

転載: blog.csdn.net/weixin_41849462/article/details/98204684