HTML5 の新しい要素
html
html5
HTML Tutorial
HTML Properties
HTML tags
HTML5 は HTML 4.01 バージョンからの新しいアップグレードであり、多くの新機能、高度な機能、ページビューの向上、および増大する技術的ニーズに合わせたその他の多くの改良点が含まれています。 HTML5 で最も使用され、必要とされる要素は、
HTML5 の新しい要素トップ 10
HTML5 は、ドキュメントのレイアウトを強化するための新しい要素を提供します。
1. <記事>
要素は、ドキュメント、セクション、または Web サイト内の別の構造を含むページの一部を指定し、広く配布または使用することが推奨されます。これは、グループ投稿、日記や日刊紙のレポート、オンライン ニュースレターへの投稿、顧客から送られたコメント、またはその他の物質を含まないオブジェクトである可能性があります。
例:
<!DOCTYPE html> <html> <head> <title>Article Element</title> </head> <body> <article> <h2>EDUCBA</h2> <p>EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p> </article> </body> </html>
ログイン後にコピー
出力:
- 上記のコードを .html 拡張子を付けてファイルに保存します。
- ブラウザで HTML ファイルを実行すると、下の画像に示す出力が表示されます。
2.
要素は、カテゴリ、地図、画像、コード記事などの個々のコンテンツを示します。
例:
<!DOCTYPE html> <html> <head> <title>Figure Element</title> </head> <body> <p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p> <figure> <img src="educba.png"/> </figure> </body> </html>
ログイン後にコピー
出力:
上記のコードは、以下の画像に示すような出力を生成します。
3. <図キャプション>
要素は画像の説明を追加します。
例:
<!DOCTYPE html> <html> <head> <title>Figure Caption Element</title> </head> <body> <p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p> <figure> <img src="educba.png"/> <figcaption>EDUCBA (Corporate Bridge Consultancy Pvt Ltd)</figcaption> </figure> </body> </html>
ログイン後にコピー
出力:
上記のコードは、下の画像に示すような結果を表示します。
4. <ヘッダー>
要素は、ドキュメントまたはページ上のセクションのヘッダーを指定します。 1 つのドキュメントに複数のヘッダーを定義できます。
例:
<!DOCTYPE html> <html> <head> <title>Header Element</title> </head> <body> <article> <header> <h1>Header One</h1> <h2>Header Two</h2> <h3>Header Three</h3> </header> <p>The content of the document goes here...</p> </article> </body> </html>
ログイン後にコピー
出力:
上記のコードは、下の画像に示すような結果を表示します。
5. <フッター>
要素では、作成者情報、著作権情報、連絡先、関連ドキュメントへのリンク、サイトマップなどの情報を指定します。
例:
<!DOCTYPE html> <html> <head> <title>Footer Element</title> </head> <body> <footer> <p>Copyright © 2019 www.educba.com</p> <p>Contact: <a href="mailto:[email protected]">[email protected]</a> </footer> </body> </html>
ログイン後にコピー
出力:
上記のコードは、下の画像に示すような結果を表示します。
6. <メイン>
要素は、ドキュメントの主要な情報、つまり重要な情報を表示するために使用されます。
例:
<!DOCTYPE html> <html> <head> <title>Main Element</title> </head> <body> <header> <p>Header information</> </header> <main> <p>Main Information</p> <article> <h2>EDUCBA</h2> <p>EDUCBA is a leading global provider of skill based education...</p> </article> </main> <footer> <p>Footer Information</> </footer> </body> </html>
ログイン後にコピー
出力:
上記のコードは、以下の画像に示すような出力を生成します。
7. <マーク>
<マーク>要素は、文書上の特定のテキストにユーザーを引き付ける背景色でテキストを強調表示またはマークします。
例:
<!DOCTYPE html> <html> <head> <title>Mark Element</title> </head> <body> <article> <p><mark>EDUCBA</mark> is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p> </article> </body> </html>
ログイン後にコピー
出力:
上記のコードは、下の画像に示すような結果を表示します。
8. <ナビ>
要素は、ページ上のナビゲーション リンクを指定するために使用されます。これらのリンクは、ドキュメント内の他のページへの接続を提供します。
例:
<!DOCTYPE html> <html> <head> <title>Nav Element</title> </head> <body> <header> <nav> <a href="#">HTML</a> | <a href="#">CSS</a> | <a href="#">JAVA</a> | <a href="#">PHP</a> | <a href="#">PYTHON</a> </nav> </header> </body> </html>
ログイン後にコピー
出力:
上記のコードは、以下の画像に示すような出力を生成します。
9. <セクション>
要素は、ドキュメントのスタンドアロン セクションまたは特定の領域を定義します。
例:
<!DOCTYPE html> <html> <head> <title>Section Element</title> </head> <body> <article> <h2> Main Article </h2> <p>Content of the main header will be displayed here...</p> <section> <h2>Section One</h2> <p>Content of the first section will be displayed...</p> </section> <section> <h2>Section Two</h2> <p>Content of the second section will be displayed...</p> </section> </article> </body> </html>
ログイン後にコピー
出力:
上記のコードは、下の画像に示すような結果を表示します。
10.
The tag which provides the text that can be displayed or hidden when the user clicks the heading.
Example:
<!DOCTYPE html> <html> <head> <title>Summary Element</title> </head> <body> <details> <summary> EDUCBA - Corporate Bridge Consultancy Pvt Ltd </summary> <p>It is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</p> </details> </body> </html>
ログイン後にコピー
Output:
When you run the above code, it will display the result as shown below,
As shown in the image, click on the heading, and it will display the hidden text shown below the image,
Conclusion
So far, we have seen how new HTML5 elements are useful for various website creation tasks. These new elements read the document in a more accurate & standard way and develop more complex and efficient web apps. The new HTML5 elements give some additional extra features to generate interactive websites.
以上がHTML5 の新しい要素の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
Windows11 KB5054979の新しいものと更新の問題を修正する方法
1 か月前
By DDD
KB5055523を修正する方法Windows 11にインストールできませんか？
3週間前
By DDD
KB5055518を修正する方法Windows 10にインストールできませんか？
3週間前
By DDD
R.E.P.O.のすべての敵とモンスターの強度レベル
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ブループリンス：地下室への行き方
3週間前
By DDD
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Java チュートリアル
1653
14
1653
14
CakePHP チュートリアル
1413
52
1413
52
Laravel チュートリアル
1304
25
1304
25
PHP チュートリアル
1251
29
1251
29
C# チュートリアル
1224
24
1224
24
HTMLの表の境界線
Sep 04, 2024 pm 04:49 PM
HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。
HTML のネストされたテーブル
Sep 04, 2024 pm 04:49 PM
これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。
HTML 左マージン
Sep 04, 2024 pm 04:48 PM
HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。
HTML テーブルのレイアウト
Sep 04, 2024 pm 04:54 PM
HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。
HTML入力プレースホルダー
Sep 04, 2024 pm 04:54 PM
HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。
HTML の onclick ボタン
Sep 04, 2024 pm 04:49 PM
HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。
HTML 内のテキストの移動
Sep 04, 2024 pm 04:45 PM
HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。
