html5の新しいタグとは何ですか? html5の新しいタグアプリケーション-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

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

不言

Aug 08, 2018 am 10:26 AM

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 サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

H5：Webコンテンツとデザインの未来May 01, 2025 am 12:12 AM

H5（HTML5）は、新しい要素とAPIを介してWebコンテンツと設計を改善します。 1）H5はセマンティックタグ付けとマルチメディアサポートを強化します。 2）キャンバスとSVGを導入し、Webデザインを濃縮します。 3）H5は、新しいタグとAPIを介してHTML機能を拡張することにより機能します。 4）基本的な使用には、それを使用したグラフィックの作成が含まれ、高度な使用法にはwebstorageapiが含まれます。 5）開発者は、ブラウザの互換性とパフォーマンスの最適化に注意を払う必要があります。

H5：Web開発の新機能と機能Apr 29, 2025 am 12:07 AM

H5は多くの新しい機能と機能をもたらし、Webページのインタラクティブ性と開発効率を大幅に改善します。 1。SEOの強化などのセマンティックタグ。 2.マルチメディアサポートは、オーディオとビデオの再生とタグを簡素化します。 3. Canvas Drawingは、動的なグラフィックスの描画ツールを提供します。 4.ローカルストレージは、LocalStorageとSessionStorageを介してデータストレージを簡素化します。 5. Geolocation APIは、ロケーションベースのサービスの開発を促進します。

H5：HTML5の重要な改善Apr 28, 2025 am 12:26 AM

HTML5は5つの重要な改善をもたらします。1。セマンティックタグにより、コードの明確性とSEO効果が向上します。 2.マルチメディアサポートは、ビデオとオーディオの埋め込みを簡素化します。 3。フォームエンハンスメントは、検証を簡素化します。 4.オフラインおよびローカルストレージにより、ユーザーエクスペリエンスが向上します。 5。キャンバスとグラフィック機能は、Webページの視覚化を強化します。

HTML5：標準とWeb開発への影響Apr 27, 2025 am 12:12 AM

HTML5のコア機能には、セマンティックタグ、マルチメディアサポート、オフラインストレージ、ローカルストレージ、フォームエンハンスメントが含まれます。 1。コードの読みやすさとSEO効果を改善するためのセマンティックタグなど。 2.ラベルでマルチメディアの埋め込みを簡素化します。 3。アプリケーションキャッシュやLocalStorageなどのオフラインストレージとローカルストレージは、ネットワークのない操作とデータストレージをサポートします。 4.フォームエンハンスメントでは、処理と検証を簡素化するための新しい入力タイプと検証プロパティを導入します。

H5コードの例：実用的なアプリケーションとチュートリアルApr 25, 2025 am 12:10 AM

H5は、さまざまな新機能と機能を提供し、フロントエンド開発の機能を大幅に向上させます。 1.マルチメディアサポート：メディアを埋め込んで要素を埋め込み、プラグインは必要ありません。 2。キャンバス：要素を使用して、2Dグラフィックとアニメーションを動的にレンダリングします。 3。ローカルストレージ：ユーザーエクスペリエンスを改善するために、ローカルストレージとセッションストレージを介して永続的なデータストレージを実装します。

H5とHTML5の接続：類似性と相違点Apr 24, 2025 am 12:01 AM

H5とHTML5は異なる概念です。HTML5は、新しい要素とAPIを含むHTMLのバージョンです。 H5は、HTML5に基づくモバイルアプリケーション開発フレームワークです。 HTML5はブラウザを介してコードを解析およびレンダリングしますが、H5アプリケーションはコンテナを実行し、JavaScriptを介してネイティブコードと対話する必要があります。

H5コードの構成要素：キー要素とその目的Apr 23, 2025 am 12:09 AM

HTML5の重要な要素には、最新のWebページの構築に使用される、、,,,,などが含まれます。 1.ヘッドコンテンツを定義します。2。リンクをナビゲートするために使用されます。3。独立した記事のコンテンツを表します。4。ページコンテンツを整理します。5。サイドバーコンテンツを表示します。

HTML5およびH5：一般的な使用法の理解Apr 22, 2025 am 12:01 AM

HTML5とHTML5の略語であるHTML5とH5の間に違いはありません。 1.HTML5はHTMLの5番目のバージョンであり、Webページのマルチメディア関数とインタラクティブ機能を強化します。 2.H5は、HTML5ベースのモバイルWebページまたはアプリケーションを参照するためによく使用され、さまざまなモバイルデバイスに適しています。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コードプロンプト機能はサポートされていません

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。