検索
ホームページウェブフロントエンドH5 チュートリアルHTML5で珍しいタグを使用するにはどうすればよいですか?

HTML5で珍しいタグを使用するにはどうすればよいですか?

フロントエンド開発者として、他の人のページを閲覧するとき、私はいつも習慣的に彼らのページのソースコードをチェックしますが、自分で書いたページも含め、Web サイトのほとんどのページが最も一般的に使用されるレイアウト要素は、 divpspanuldl です。 ollidtddstrongb、何でもすべてのエフェクトはこれらの要素で構成されています。

すでに 9102 になり、html5 はすでにかなり成熟し、標準になっています。html5 が提供するセマンティック タグをレイアウトに使用してみてはいかがでしょうか。これは私たちがレイアウトを学び始めた頃は上記のタグをよく使っていたからだと個人的には思っていますが、HTML5の新しいタグが出てきた頃はずっとdivレイアウトを使っていて、よく理解できていなかったのかもしれません。これらのタグのアプリケーション シナリオでは、時間が経っても div レイアウトを使用し続けています。

1、fieldset タグ

<fieldset></fieldset> タグはフォーム グループ化タグであり、関連付けられたコンテンツを持つフォームのグループをグループ化できます。

1.1. アプリケーション シナリオ 1 - フォームのグループ化

フォームに入力する必要がある情報が多数ある場合は、 can use<fieldset> タグは、フォームを理解しやすくするために、関連するフォーム項目をグループ化します。フォームが理解しやすいほど、訪問者が正しく入力する可能性が高くなります。 </fieldset>

基本的な使用法とデフォルトの効果:

HTML5で珍しいタグを使用するにはどうすればよいですか?

<fieldset>
  <legend>用户基本信息</legend>
  <div>
    <label for="">用户名</label>
    <input type="text">
  </div>
  <div>
    <label for="">电子邮箱</label>
    <input type="password">
  </div>
  <div>
    <label for="">密 码</label>
    <input type="password">
  </div>
  <div>
    <label for="">确认密码</label>
    <input type="password">
  </div>
</fieldset>

美しいフォーム

HTML5で珍しいタグを使用するにはどうすればよいですか?

##1.2. アプリケーション シナリオ 2 - その他のグループ

HTML5で珍しいタグを使用するにはどうすればよいですか?

1HTML5で珍しいタグを使用するにはどうすればよいですか?

2, figure タグ

は要素の結合に使用されます、一般的に写真、ビデオ、チャート、コードなどに使用されます。

2.1、アプリケーション シナリオ 1 - figure タグは画像と混合されます

HTML5で珍しいタグを使用するにはどうすればよいですか?##

<figure>
  <img  src="/static/imghwm/default1.png"  data-src="search_icon.png"  class="lazy"  / alt="HTML5で珍しいタグを使用するにはどうすればよいですか?" >
  <figcaption> 搜索引擎</figcaption>
</figure>

2.2. アプリケーション シナリオ 2 - figure タグと dt,dd タグを

HTML5で珍しいタグを使用するにはどうすればよいですか?##

<figure>
  <dt>这是标题</dt>
  <dd>这是描述</dd>
</figure>

と組み合わせて使用​​します2.3. アプリケーション シナリオ 3 - figureタグは個別に結合されますfigurecaptionタグは使用されます

figure

タグは単独で結合されますfigurecaption タグを使用すると、次のような特定のコンテンツの説明を実現できます。

<figure>
  <figurecaption>网站问题 一站解决</figurecaption>
  <p>海量节点 + 海外 CDN 加速,助力企业高速、安全触达用户</p>
</figure>
HTML5で珍しいタグを使用するにはどうすればよいですか?3、

section

タグ
タグは、Web サイトまたはアプリケーションのページ上のコンテンツを分割するために使用されます。

セクション要素は通常、コンテンツとタイトルで構成されます

しかし、コンテナーを直接スタイル設定する必要がある場合、またはスクリプトを通じて動作を定義する必要がある場合は、div を使用することをお勧めします。
section 要素はセグメント化またはチャンク化を強調し、コンテンツの一部は複数の段落またはブロックに分割されます。article 要素は独立性を強調し、コンテンツの一部は独立していて完全です。


タイトル コンテンツ領域ブロックがない場合は、セクションを使用しないでください。つまり、セクションには h1 ~ h6 タグが必要です。フォーラムの投稿、コメント リスト、インタラクティブなページ モジュール ウィジェット、雑誌や新聞の記事、国際時事セクション、スポーツ セクション、エンターテイメント セクション、文学セクションなどを表示するために使用されます。セクションのタイトルとその内容が同じカテゴリに属する​​セクションを使用できます。

4, aside

タグ

##

タグは通常、Web サイトの現在のページ、または Web サイトの補助情報部分を示します。

広告、ナビゲーション バー、引用符、現在のページのメイン コンテンツに関連するサイドバーのコメント

、メイン コンテンツとは異なるその他の部分を含めることができます<h2>5、<code>address 标签

<address></address> 元素可以让作者为它最近的 <article> </article>或者  祖先元素提供联系信息。在后一种情况下,它应用于整个文档

  • 当表示一个和联系信息无关的任意的地址时,应使用 

     元素

  • 这个元素不能包含除了联系信息之外的任何信息,比如出版日期
  • 通常<address> </address>元素可以放在当前<section></section>的 <footer></footer> 元素中,如果存在的话

HTML5で珍しいタグを使用するにはどうすればよいですか?

6、menu 标签

<menu></menu>标签可以用来定义页面的菜单

<menu>
  <a href="/">首页<a>
    <a href="/">新闻</a>
    <a href="/">视频<a>
</menu>

7、time 标签

<time></time>标签用来表现时间或日期

<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<!--参数-->
<p>我在 <time datetime="2019-12-16">情人节</time> 有个约会。 </p>
<p>
  <!-- 是否为发布时间 -->
  <time pubdate="true">发布时间</time>
</p>

8、mark 标签

<mark></mark> 标签定义带有记号的文本。出于引用的目的,对与另一个上下文相关的文本进行突出显示

HTML5で珍しいタグを使用するにはどうすればよいですか?

<div>
  <h1 id="美女">美女</h1>
  <p>四大<mark>美女</mark></p>
  <p>杨玉环是<mark>美女</mark></p>
  <p>凤姐也是<mark>美女</mark></p>
</div>

9、details 标签

<details></details>标签允许用户创建一个可展开折叠的元件,让一段文字或标题包含一些隐藏的信息。

一般情况下,<details></details>用来对显示在页面的内容做进一步骤解释。其展现出来的效果和jQuery手风琴插件差不多

HTML5で珍しいタグを使用するにはどうすればよいですか?

<details>
  <!-- 一个details标签中只能有一个summary标签,多余的summary标
  签会被当做正常内容来处理。summary标签用来作为details标签的标
  题,它必须和details标签使用,离开details标签单独使用没有任何意义 -->
  <summary>什么是html?</summary>
  <p>HTML称为超文本标记语言,是一种标识性的语言。</p>
</details>

10、meter 标签

<meter></meter>标签用来定义已知范围或分数值内的标量测量,meter标签的效果很像进度条,但是它不作为进度条来使用。如果要表示进度条,通常使用progress标签。

HTML5で珍しいタグを使用するにはどうすればよいですか?

<h2 id="">66%</h2>
<meter value="66" high="100" low="0" max="100" min="0"></meter>

11、ruby 标签

<ruby></ruby>标签是使用来定义ruby注释(中文注音或字符),如果在东亚使用,显示的是东亚字符的发音。
<ruby></ruby>标签通常和<rt></rt>标签和<rp></rp>标签一起使用,<rt></rt>标签用来提供注释信息(如:拼音),<rp></rp>标签用来定义浏览器不支持ruby标签时所显示的内容。

1HTML5で珍しいタグを使用するにはどうすればよいですか?

<ruby   style="max-width:90%">
  李
  <rp>(</rp>
  <rt style="font-size: 22px;">li</rt>
  <rp>)</rp>
</ruby>

12、blockquote 标签

<blockquote></blockquote>用于对长文本的引用,用来定义一段引语,默认效果标签内的内容会自动有缩进;
如这篇文章的开头就用了<blockquote></blockquote>标签

HTML5で珍しいタグを使用するにはどうすればよいですか?

以上がHTML5で珍しいタグを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事はsegmentfaultで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
H5とHTML5の接続:類似性と相違点H5とHTML5の接続:類似性と相違点Apr 24, 2025 am 12:01 AM

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

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

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

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

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

HTML5:現代のウェブのビルディングブロック(H5)HTML5:現代のウェブのビルディングブロック(H5)Apr 21, 2025 am 12:05 AM

HTML5は、W3Cによって標準化されたHyperText Markup言語の最新バージョンです。 HTML5は、新しいセマンティックタグ、マルチメディアサポート、フォームの強化、Web構造の改善、ユーザーエクスペリエンス、SEO効果を導入します。 HTML5は、Webページ構造をより明確にし、SEO効果をより良くするために、、、、、、などの新しいセマンティックタグを導入します。 HTML5はマルチメディア要素をサポートしており、サードパーティのプラグインは不要で、ユーザーエクスペリエンスと読み込み速度が向上します。 HTML5はフォーム関数を強化し、ユーザーエクスペリエンスを向上させ、フォーム検証効率を向上させるなどの新しい入力タイプを導入します。

H5コード:クリーンで効率的なHTML5の書き込みH5コード:クリーンで効率的なHTML5の書き込みApr 20, 2025 am 12:06 AM

クリーンで効率的なHTML5コードを書き込む方法は?答えは、タグのセマンティック、構造化されたコード、パフォーマンスの最適化、一般的な間違いを回避することにより、一般的な間違いを避けることです。 1.コードの読みやすさとSEO効果を改善するには、セマンティックタグなどを使用します。 2。適切なインデントとコメントを使用して、コードを構造化して読みやすいままにします。 3.不必要なタグを減らし、CDNを使用してコードを圧縮することにより、パフォーマンスを最適化します。 4.タグが閉じていないなどの一般的な間違いを避け、コードの有効性を確認してください。

H5:ウェブ上のユーザーエクスペリエンスをどのように強化するかH5:ウェブ上のユーザーエクスペリエンスをどのように強化するかApr 19, 2025 am 12:08 AM

H5は、マルチメディアサポート、オフラインストレージ、パフォーマンスの最適化により、Webユーザーエクスペリエンスを向上させます。 1)マルチメディアサポート:H5と要素は、開発を簡素化し、ユーザーエクスペリエンスを向上させます。 2)オフラインストレージ:WebStorageとIndexEdDBは、エクスペリエンスを改善するためにオフラインで使用できるようにします。 3)パフォーマンスの最適化:ウェブワーカーと要素は、パフォーマンスを最適化して帯域幅の消費を削減します。

H5コードの分解:タグ、要素、属性H5コードの分解:タグ、要素、属性Apr 18, 2025 am 12:06 AM

HTML5コードは、タグ、要素、属性で構成されています。1。タグはコンテンツタイプを定義し、などの角度ブラケットに囲まれています。 2。要素は、startタグ、内容、および内容などのエンドタグで構成されています。 3。属性は、開始タグのキー値のペアを定義し、ような関数を強化します。これらは、Web構造を構築するための基本ユニットです。

H5コードの理解:HTML5の基礎H5コードの理解:HTML5の基礎Apr 17, 2025 am 12:08 AM

HTML5は、最新のWebページを構築するための重要なテクノロジーであり、多くの新しい要素と機能を提供します。 1。HTML5は、Webページの構造とSEOを強化するなどのセマンティック要素を導入します。 2。プラグインなしのマルチメディア要素と埋め込みメディアをサポートします。 3.フォームは、新しい入力タイプと検証プロパティを強化し、検証プロセスを簡素化します。 4.オフラインおよびローカルストレージ機能を提供して、Webページのパフォーマンスとユーザーエクスペリエンスを向上させます。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

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

ホットツール

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

EditPlus 中国語クラック版

EditPlus 中国語クラック版

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

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)