ホームページ >ウェブフロントエンド >htmlチュートリアル >H5 での新しいタグと属性の使用方法のまとめ

H5 での新しいタグと属性の使用方法のまとめ

php中世界最好的语言オリジナル: 2018-05-07 17:38:312571ブラウズ

今回は、H5 で新しいタグと属性を使用する方法についてまとめました。H5 で新しいタグと属性を使用する際の注意事項について、実際のケースを見てみましょう。

HTML5 構文

HTML の構文の相違点のほとんどは継続します:

<html lang="zh-CN">
<meta charset="utf-8">

文字エンコーディングの先頭が簡潔になり、

は大文字と小文字が区別されなくなり、

が追加されました痩せた値、checked、selected と同様

引用符は省略できますが、コーディング規約に従うと推奨されません

終了文字を省略できるタグと完全に省略できるタグがあります。

タグの追加:

1. 構造タグ

(1) セクション: ドキュメントの構造を表すために h1 ～ h6 で構成され、章、ヘッダー、ページのフッターまたはヘッダーの他の部分、(2) 記事: このヘッダーの中核となるコンテンツを表す特別な独立したブロック、(3) サイド: タグのコンテンツに関連する補助情報、(4) ヘッダー。：あるブロックのヘッダ情報／タイトル、（５）ｈｇｒｏｕｐ：ヘッダ情報／タイトルの補足内容、（６）フッタ：下部情報、（７）ナビゲーションバーの部分情報、（８）図：独立した単位。、写真とコンテンツを含むニュースブロックなど。

2. フォームタグ

(1) 電子メール: メールアドレスを入力する必要があります。 (3) 数値: 値を入力する必要があります。特定の範囲内の値を入力する必要があります。 (5) 日付ピッカー:

日付ピッカー; a.date: 日、月、年を選択します。 b.month: 月、年を選択します。 c.week: 週と年を選択します。 time: 時間 (時と年) を選択します) e.datetime: 時間、日、月、年 (UTC 時間) を選択します f.datetime-local: 時間、日、月、年 (現地時間) を選択します

(6) search: 通常のテキストフィールドを検索します。

(7) color: color

(1) video: ビデオ (2) audio: オーディオ (3) embed: 埋め込みコンテンツ (さまざまなメディアを含む)、 Midi、Wav、AU、MP3、Flash、AIFF など

4. その他の機能ラベル

(1) マーク: マーク (メモをとるためのハイライトのようなもの) (2) progress:

プログレスバー

; (3) 時刻: 検索エンジンで使用されるデータラベル; リリース日9:00更新日< time datetime="2015- 01-23T04:00" pubdate>4:00 (4) ルビと rt: 特定の単語に注釈を付けます ;rp> ブラウザが対応していない場合の表示方法 (5) wbr: 改行が必要なページ幅に達した場合の改行;キャンバス: JS コードを使用して画像描画用のコンテンツを作成します。 (7) 詳細: メニューを展開します。 (10) keygen: 暗号化。新しい属性: js 属性に

が追加されました。

<script defer src=".....js" onload="alert(&#39;a&#39;)"></script>
<script async src=".....js" onload="alert(&#39;b&#39;)"></script>

上記の 2 つの属性がない場合、実行順序は、最初に最初の src をロード (ダウンロード) し、次にその onload を実行し、それから下方向に同期的に実行することになります。 defer 属性は h5 より前にすでに存在しており、遅延ロードに入ります (遅延。実行)、最初に src にファイルのコンテンツをロード (ダウンロード) し、次にページが完全にロードされるまで待機してから、js.async 属性を onload にロードします。これは、src のロード直後に onload を実行します。また、上記の実行シーケンスにより、ページの読み込みが継続されます。アラート表示には、最初に b が表示され、次に a が表示されます

Web ページのタグに小さなアイコンを追加するためのスタイルコード

<link rel="icon" href="url..." type="图片名称" sizes="16*16">

順序付きリスト ol: 開始を追加 (リスト開始)値）、反転（反転または非反転）メニューメニュータイプ属性（3 つのメニュータイプ）インライン CSS スタイル: タグ内でスタイルブロック (スコープ付き) を定義します。これはスタイルタグ内でのみ有効です。インラインフレーム: iframe 要素、新しく追加されました。シームレスボーダーレスボーダーレスから、srcdoc はインラインフレームのコンテンツを定義します

<iframe>新增属性：
<!--seamless定义框架无边框 无边距-->
<!--srcdoc的显示级别比sandbox高-->
<!--sandbox用来规定一个内嵌框架的安全级别-->
<!--sandbox="allow-forms:允许提交表单"-->
<!--sandbox="allow-origin:允许是相同的源"-->
<!--sandbox="allow-scripts：允许执行脚本"-->
<!--sandbox="allow-top-navigation:允许使外面的页面进行跳转"-->

manifest 属性:

ページに必要なオフラインアプリケーションファイルを定義します。通常はタグに配置されます

charset 属性:

メタ属性の 1 つで、ページの文字セットを定義します

sizes 属性:

新しいウィンドウでページが作成されると、href のコンテンツがアドレスのプレフィックスとして追加されます

defer 属性:

script タグ属性。これは、スクリプトがロードされた後にのみ実行されることを意味します (遅延)

async 属性:

script タグ属性。ページがまだ読み込まれていない場合でも (操作中にブラウザは次のコンテンツを解析します)、スクリプトが読み込まれた直後に実行されます。実行)

media 属性:

要素属性: 最適化するデバイスを意味します