検索

ホームページ >ウェブフロントエンド >H5 チュートリアル >html5の新しいタグとは何ですか? html5の新しいタグアプリケーション

html5の新しいタグとは何ですか? html5の新しいタグアプリケーション

不言
不言オリジナル
2018-08-08 10:26:5011454ブラウズ

html5 はハイパーテキスト マークアップ言語 (HTML) の 5 番目の修正版であるため、いくつかの新しいタグが html5 に追加されています。では、html5 の新しいタグは何でしょうか?これから紹介するのはhtml5で追加された新しいタグをhtmlと比較してご紹介します。

1. HTML5 の新しいタグ

ヘッダー - 紹介コンテンツのコンテナまたは一連のナビゲーション リンクを表すことができます。

Nav - ラベルのコンテンツは主にナビゲーションに使用されます。

記事 - ページ内のメインコンテンツを識別します。ブログを例にとると、各投稿は重要なコンテンツであり、記事を使用して各投稿を識別できます。

セクション - ページ上の重要なセクションをマークするために使用されます。このマークアップは、ドキュメントを章に分割することに似ています。

余談 - ページのメインコンテンツに関連しているが、ページの一部ではないことを示します。多くの場合、関連リンクを示します。

フッター - ヘッダーとは反対に、文書または章のフッターを表します。たとえば、著作権情報がこのタグに配置されます。

従来の div レイアウト

<body>
    <!-- 页头 -->
    <div class=&#39;header&#39;></header> 
    <!-- 导航 -->
    <div class=&#39;nav&#39;></div>
    <!-- 主体内容 -->
    <div class=&#39;main&#39;>
        <!-- 文章 -->
        <div class=&#39;article&#39;>
            <!-- 节 -->
            <div class=&#39;section&#39;></div>
        </div>
        <!-- 边栏 -->
        <div class=&#39;sidebar&#39;></div>
    </div>
    <!-- 页脚 -->
    <div class=&#39;footer&#39;></div></body>

HTML5 の新しいタグを使用してレイアウトを実装

<body>
    <header></header>
    <nav></nav>
    <div>
        <article>
            <section></section>
        </article>
        <aside></aside>
    </div>
    <footer></footer></body>

2. フォームのアプリケーションの強化

HTML 4 では、基本的な入力を処理するためにいくつかの単純なフォーム要素が提供されています。日付と時刻の入力など、特定の種類の入力では、対話型エクスペリエンスはニーズを満たすことができません。したがって、より良い結果を得るには、JavaScript を使用してコンポーネント実装を作成する必要があります。 HTML 5 で改良され、より多くの入力タイプを提供する新しいフォーム要素が追加されました。

(1) 入力の Type 属性の拡張

search - 検索ボックスを表示します。

tel - 電話番号を入力します。パターンと最大長を使用して適切な入力を制限できます。 

<input type=&#39;tel&#39; name=&#39;tel&#39; value="" placeholder="请输入手机号码" pattern=&#39;1[3-8][0-9]{9}&#39; title=&#39;请输入11位手机号&#39;>

url - URL アドレスを入力します。

メール - メールアドレスを入力します。

日付 - 日付を入力します。

色 - 色を入力します。

番号 - 番号を入力します。

range - スライダー入力

(2) 属性による入力フォーム検証

required - 現在の要素を必須としてマークします。

パターン - 正規表現を使用してフォーム入力を検証します。

(3) 入力要素のその他の便利な属性

autofocus - ページが読み込まれると、現在の入力要素に自動的にフォーカスします。

form - 入力要素を特定のフォームフォームに関連付けます。

プレースホルダー - ユーザーに入力を求めるプレースホルダーを入力します。

(4) HTML 5 の新しい要素と特別な属性 contenteditable

progress - 要素は進行状況バーを表します。 

<progress value=&#39;30&#39; max=&#39;100&#39;></progress>

meter - ルーラーを表す要素。最大値 max のデフォルトは 1 です。 

<meter value="3" min="0" max="10">3/10</meter><meter value="0.6">60%</meter>

HTML 5 の特別な属性 contenteditable。これを使用して通常の要素を編集可能にできます。 

<p contenteditable="true">这里的内容式可编辑的</p>

3. audioとvideoの使い方

(1) audio (audioタグ) 

<audio controls>
    <source src="vincent.mp3" />
    <source src="vincent.ogg" />
    您的浏览器不支持 audio 标签</audio>

audio 要素の動作を制御する属性は以下の通りです

controls - この属性は表示するかどうかを制御します標準的なオーディオ空間。

自動再生 - 自動的に再生するかどうか。デフォルトは false。

loop - ループするかどうか。デフォルトは false。

preload - プリロードメソッド。 3 つの状況があります。none はメタデータをプリロードしないことを意味し、auto はオーディオ全体をプリロードすることを意味します。デフォルトの自動。

volum - 音量、0〜1の値

オーディオを再生および一時停止するメソッド

var audio = document.getElementById(&#39;audio&#39;)
audio.play() // 播放audio.pause() // 暂停

(2) video (videoタグ)

currentTimeは再生を開始する時間を制御します

<video width="400" height="300" controls currentTime=&#39;5&#39;>

    <source src="dizzy.mp4#t=5" type="video/mp4" />  <!-- 从 5s 开始 -->
    <source src="dizzy.ogv#t=5,10" type="video/ogg" /> <!-- 从 5s 到 10s -->
    <source src="dizzy.webm#t=,15" type="video/webm"> <!-- 到 15s 结束 -->
    <p>您的浏览器不支持 HTML 5 视频</p></video>

関連記事:

html5の基本タグ(html5ビデオタグ、html5の新しいタグの使い方)_html5のチュートリアルスキル

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

HTML5の新しいタグと属性の紹介

以上がhtml5の新しいタグとは何ですか? html5の新しいタグアプリケーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript html5 正则表达式 html 表单验证 date auto 循环 number input
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML5 の新しいプロトコル: WebSocket プロトコルの例次の記事：HTML5 の新しいプロトコル: WebSocket プロトコルの例

関連記事

続きを見る