コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ ウェブフロントエンド フロントエンドQ&A html5の新しいタグとは何ですか？

html5の新しいタグとは何ですか？

青灯夜游
青灯夜游
Nov 23, 2022 pm 06:55 PM
html5

HTML5 の新しいタグ: キャンバス、オーディオ、ビデオ、ソース、埋め込み、トラック、データリスト、keygen、出力、記事、脇、bdi、nav、マーク、rt、rp、ruby、time、wbr など。 。 Canvas タグはグラフィックスを定義でき、audio タグはオーディオ コンテンツを定義でき、ビデオはビデオを定義でき、ソースはマルチメディア リソースを定義でき、embed は埋め込みコンテンツを定義できます。

html5の新しいタグとは何ですか？

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

HTML5 は、2014 年に W3C によってカスタマイズされた HTML の最新バージョンです。ブラウザネイティブ機能の強化により、ブラウザプラグイン（Flashなど）アプリケーションが削減され、ユーザーエクスペリエンスの満足度が向上し、開発がより便利になります。 HTML は 1.0 から 5.0 にかけて、単一のテキスト表示機能から、画像とテキストによるマルチメディア表示機能へと大きな変化を遂げ、長年の改良を経て、多くの機能が非常に重要なマークアップ言語に発展しました。

html5 の新しいタグ

HTML5 では、いくつかの新しい構造タグ、マルチメディア タグ、フォーム タグが追加されています。以下に紹介させていただきます。

新しい要素

##タグ説明 タグは、グラフやその他の画像などのグラフィックを定義します。このタグは、JavaScript 描画 API

新しいマルチメディア要素

タグ#に基づいています。 <オーディオ>##<ビデオ>ビデオ (ビデオまたはムービー) を定義しますマルチメディア リソースを定義します<ビデオ><オーディオ> ##プラグインなどの埋め込みコンテンツを定義します。
##説明
オーディオ コンテンツの定義
##<ソース>
#新しいフォーム要素

##タグ説明

#オプション リストを定義します。この要素を input 要素と組み合わせて使用​​して、入力の可能な値を定義します。 フォームに使用するキー ペア ジェネレーター フィールドを指定します。 <出力>スクリプト出力など、さまざまなタイプの出力を定義します。

新しい意味要素と構造要素

##タグ説明 <記事>ページの独立したコンテンツ領域を定義します。 ページのサイドバーのコンテンツを定義します。 親要素のテキスト方向設定とは独立してテキストを設定できます。 ラジオ ボタン、チェック ボックス、ボタンなどのコマンド ボタンを定義します < 詳細>ドキュメントまたはドキュメントの特定の部分の詳細を説明するために使用します##<ダイアログ>##< Figure> は、ストリーミング コンテンツ (画像、チャート、写真、コードなど) とは独立して指定されます。
要素のタイトルを定義します
セクションまたはドキュメントのフッターを定義します。 ドキュメントのヘッダー領域を定義します##トークンを使用してテキストを定義します。 度量衡を定義します。最大値と最小値がわかっている測定にのみ使用してください。 ナビゲーション リンクを定義する部分。 あらゆる種類のタスクの進捗状況を定義します。 ルビコメント(中国語のふりがなまたは文字)を定義します。 文字 (中国語の表音または文字) の解釈または発音を定義します。 は、ruby 要素をサポートしていないブラウザによって表示されるコンテンツを定義するために、ruby コメントで使用されます。
ドキュメント内のセクション (セクション、セクション) を定義します。 日付または時刻を定義します。 テキスト内の改行を追加するのが適切な場所を指定します。

html5 タグの使用例

(1) ナビゲーション リンクの定義


これも意味のあるタグです。このタグをどこかに追加するとナビゲーション スタイルが作成されるというわけではありません。これらは意味があるだけです。メニュー タグ

  • タグと一緒に

    html コード: 

    <header>
    <p>这是一个header部分</p>
    <nav>    <!--导航链接标签-->
        <ul>    <!--配合ul使用-->
            <li>首页</li>
            <li>关于</li>
            <li>产品</li>
            <li>联系</li>
        </ul>
    </nav>
</header>

    css コード: 

    /*定义nav的高和颜色*/ 
nav{
    height:30px;
    background-color:#F33;
    margin-top:100px;}
/*正常设置li的样式*/
li{
    list-style:none;
    float:left;
    width:100px;
    height:30px;
}

    このように、メニュー レイアウトの前に p のみを使用できます。は

    (2) 記事タグを定義します

    記事ブロックを使用できますタグは記事を書くときに使用するので、セクションセクションに記事を書く場合はこのタグを使用します。

    html コード: 

    <article><!--文章块p-->
　　<h2>文章标题</h2><!--标题-->
　　<p>文章内容文章内容文章内容文章内容文章内容文章内容
　　<br>
　　文章内容文章内容文章内容文章内容文章内容文章内容<br>
　　文章内容文章内容文章内容</p>
</article>　

    css と併用できます。スタイル: 

    article{
	background-color:#F33;
	width:500px;
	text-align:center;  /*水平居中*/  
	margin:0px auto;
}

    この方法で記事を書くことができます

    (3) メディア コンテンツのグループとそのタイトルを定義します<図>

    #A.このタグは、対応するタグ
    と組み合わせて使用​​できますが、タイトル 

    <figure>
    <figcaption>标题</figcaption><!--配套-->
    <p>标题内容</p>
</figure>

    B は
    。
    と組み合わせて使用​​することもできます。
    はタイトルの書き込みに使用され、
    はコンテンツの書き込みに使用されます。表示効果は次のとおりです。 use

    <figure>
    <dt>标题1</dt>
    <dd>标题内容</dd>
</figure>

    (4) ダイアログ ボックスまたはウィンドウを定義する

    この中で dd タグと dt タグを使用することもできます。タグ、ダイアログ ボックスのタイトルと内容、ダイアログ ボックスの最初の属性は open であり、このタグの互換性はあまり良くありません

    <dialog open>
          <dt>1问题</dt>
          <dd>1答案</dd>
          <dt>2问题</dt>
          <dd>2答案</dd>
</dialog>

    (5) コマンドのリストまたはメニューを定義します

    A。このタグは li

    <menu>
         <li>定义列表</li>
         <li>定义列表</li>
         <li>定义列表</li>
</menu>

    B と一緒に使用できます。 

    <menu type="context" id="cai">
            <!--label是右键后显示的菜单项，onclick是选中菜单后执行的代码--> 
            <menuitem label="菜单一" onclick="alert(&#39;这是菜单一&#39;)" icon="右键单击显示的图片"></menuitem>
                   
</menu>
    <span contextmenu="cai">单击我试试</span>
    を使用して、右クリック (Firefox とのみ互換)

    Union (ユーザーがポップアップ メニューから呼び出せるコマンド/メニュー項目を定義) タグに独自のコンテンツを追加できます。

    右クリックすると、目的のメニュー項目が表示されます

    #メニュー項目をクリックすると、コンテンツがポップアップ表示されます

    ##(6) タイトルグループ

    一般的に使用するタイトル

    のいくつかの組み合わせを記述することができます
    <hgroup><!--标题组-->
        <h3>标题</h3>
        <h3>标题1</h3>
        <h3>标题2</h3>
        <h3>标题3</h3>
</hgroup>

    #(7) 小さなテキストを定義する

    このタグは実際には他の太字のタグと似ています

    <small>法律条文</small>
<small>联系我们</small>
<small>客户意见</small>

    ( 8) 要素の詳細を定義します

    内部のコンテンツはタイトルタグとコンテンツタグで使用できます

    <details>
        <dt>问题</dt>
        <dd>解答</dd>
        <dt>问题</dt>
        <dd>解答</dd>
        <dt>问题</dt>
        <dd>解答</dd>
</details>　　
    詳細をクリックしてタイトルとコンテンツを表示します

    (9) ルビコメントの定義

    知らない単語が出てきたらこの Annotate Pinyin を使用できますが、一部の互換性はあまり良くありません。その時点で変更できます

    <ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>
<!--<rp>是能够兼容的时候让括号不可见，不能兼容的时候让括号可见，rt是进行这是的内容-->
    #(10) 事前定義された範囲内の測定値を定義します

    min="" max="" value="" low="" high="" という複数の属性値があります。low と high は範囲です。値の範囲を超えると、異なる効果が表示されます。 

    <meter min="0" max="10" value="4" low="2" high="7">

    値の値が範囲を超えた後

    <meter min="0" max="10" value="8" low="2" high="7">

    (11) 進捗状況のラベルbar

    ##
    <progress id="jindu" max="100" value="0"></progress>进度条

    最大値は進行状況バーの長さで、value は表示される進行状況です。これを使用して動的な進行状況バーを作成します

    <progress id="jindu" max="100" value="0"></progress>进度条
<script>
    var pro = document.getElementById("jindu");
    setInterval(function(){ pro.value+=1;},1000);    //间隔1秒它的值加1
</script>
    プログレスバーはこうやって完成させることができますよね?jsだけで書くより断然いいですよブラウザごとに表現が違います

    プログラミング関連の知識について詳しくは、プログラミング学習をご覧ください。 ！

    • ダイアログ ボックスを定義する、プロンプト ボックスなど
    タグには、詳細要素のタイトルが含まれます
    #

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

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

    ホットAIツール

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Undresser.AI Undress

    Undresser.AI Undress

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

    AI Clothes Remover

    AI Clothes Remover

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

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    Video Face Swap

    Video Face Swap

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

    もっと見る

    人気の記事

    Instagramでなりすましアカウントを報告する方法
    3週間前 By 下次还敢
    WhatsApp Businessでアウェイメッセージを設定する方法
    1 か月前 By 下次还敢
    設定でChatGptパーソナリティを変更する方法（皮肉、ロボット、リスナー、オタク）
    2週間前 By DDD
    2025年のベスト123moviesの代替品（無料および法的ストリーミングオプション）
    4週間前 By DDD
    ネオンアビスでエリスと戦う方法
    2週間前 By Jack chen
    もっと見る

    ホットツール

    メモ帳++7.3.1

    メモ帳++7.3.1

    使いやすく無料のコードエディター

    SublimeText3 中国語版

    SublimeText3 中国語版

    中国語版、とても使いやすい

    ゼンドスタジオ 13.0.1

    ゼンドスタジオ 13.0.1

    強力な PHP 統合開発環境

    ドリームウィーバー CS6

    ドリームウィーバー CS6

    ビジュアル Web 開発ツール

    SublimeText3 Mac版

    SublimeText3 Mac版

    神レベルのコード編集ソフト（SublimeText3）

    もっと見る

    ホットトピック

    PHP チュートリアル
    1592
    276
    もっと見る
    Related knowledge
    html5の脇の要素は何ですか？ html5の脇の要素は何ですか？ Aug 12, 2025 pm 04:37 PM

    そのためには、継続的に関連することができるようになりました

    HTML5の読み取り属性は何ですか？ HTML5の読み取り属性は何ですか？ Aug 08, 2025 am 11:55 AM

    thereadonlyattributionhtml5makesforminputsnon-edable whilestallowingsubmissionanduser interaction; 1. itappliestoanttribute;

    シンプルなHTML5 Webページを作成する方法 シンプルなHTML5 Webページを作成する方法 Aug 12, 2025 am 11:51 AM

    シンプルなHTML5 Webページを作成するには、最初に宣言ドキュメントタイプを使用してから、キャラクターのエンコード、ビューポート、タイトルを設定する基本構造を構築する必要があります。 .htmlファイルとして保存し、サーバーサポートなしで表示するためにブラウザで直接開きます。これは、完全かつ効果的なHTML5ページの基礎です。

    HTML5のDraggable属性は何ですか HTML5のDraggable属性は何ですか Aug 12, 2025 am 09:50 AM

    thedraggableattribute inhtml5は、 "true"、 "fals"、oranemptystring（sameas "true"）を使用して、hallanelementcanbedraggedを使用しています

    HTML5でカスタムチェックボックスを作成する方法 HTML5でカスタムチェックボックスを作成する方法 Aug 16, 2025 am 07:05 AM

    カスタムチェックボックスを作成するには、最初にラベル付きのHTML構造を使用して、アクセシビリティを確保する必要があります。 2。CSSを介してデフォルトのチェックボックスを非表示にしますが、その機能を保持します。 3.擬似要素と擬似クラスを使用して、カスタムチェックマーク要素に選択された状態を描画します。 4.ホバー、フォーカス、選択スタイルを追加して、インタラクティブなフィードバックを強化します。 5.キーボードナビゲーションとスクリーンリーダーをサポートするためにネイティブの入力を存在させ、最終的に美しくアクセスしやすいカスタムチェックボックスを実現します。

    HTML5でSVGをどのように使用しますか？ HTML5でSVGをどのように使用しますか？ Aug 11, 2025 pm 01:30 PM

    useinlinesvforfullololololololoverStylinginteractivitywithcssandjavascript、italforsmalliconsordynamicgraphics.2.usetheTagtogtoembededexternalsvgfilesは、antercivityisivitiveisivitiveisivitivitiationsを使用して、保証されている、保証

    HTML5の定義リストは何ですか？ HTML5の定義リストは何ですか？ Aug 20, 2025 pm 02:01 PM

    adefinitionlistinhtml5iscreatedusingtheelementtogroupterms（）を使用して、itheirdefinitions（）を使用して、maultipleteReadedefinitionormtohavemultipledefinitionsを許可します

    HTML5でオートフォーカス属性をどのように使用しますか？ HTML5でオートフォーカス属性をどのように使用しますか？ Aug 14, 2025 pm 06:47 PM

    theautofocusattributealoutoMatically focusesapageLoads.2.itisAbooleAnattribute、sonovalueisneedededededededededetag.3.onlyonelementperementperpageshoulduseittoavoiduluidunpredicablebehavior.4.

    See all articles