HTML5構造：最初のHTML5テンプレートを作成する方法
この記事では、最も一般的に使用されるHTML5構造を紹介します。これにより、HTML5に追加されたばかりのいくつかのHTMLタグの意味を理解できます。
HTML5で書かれたいくつかのウェブサイトを参照すると、 header 、 nav 、 section 、 footerなどのタグが表示されます。これらのタグは以前は存在しませんでしたが、HTML5が誕生したため、人々はほとんど使用しています。英語がわかれば、各カードの意味が一目でわかります。
始める前に、ウェブサイトでいくつかの一般的な位置を紹介したいと思います。
1.典型的なWebページのHTML構造
各ウェブサイトには異なるインターフェースがあります。ただし、UIに関しては、次のようないくつかの位置が必要です。
HTML5がない場合、各位置はdivタグを使用して囲み、IDまたはクラスを使用してそれらの位置を宣言します。
<body> <div id="header"> HEADER </div> <div id="menu"> MENU </div> <div id="main"> <div id="content"> MAIN CONTENT </div> <div id="sidebar"> MAIN SIDEBAR </div> </div> <div id="footer"> FOOTER </div> </body>ただし、HTML5が表示される場合は異なります。個別のタグを使用し、各位置に対応するタグがあります。これは意味の観点からですが、性質の観点からは、これらのタグはdivタグと同じであり、名前が異なるだけです。
それでは、この構造をHTML5に変換する方法を見てみましょう。
2.最も一般的なHTML5構造
HTML5はかなりかっこいいです、タグはそれが意図されているものに正しい名前を持っています。たとえば、 headerタグはヘッダー位置で使用され、 footerタグはフッター位置で使用されます。
上記のインターフェース用に作成したHTML5パーツが表示されます。
<!doctype html> <html lang="vi"> <head> <meta charset="utf-8" /> <title>Chương Trình HTML Đầu Tiên</title> </head> <body> <header> <h1>Phần header</h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Serie</a></li> <li><a href="#">Tutorial</a></li> <li><a href="#">Ebook</a></li> </ul> </nav> <section> <section> Phần nội dung chính trang web </section> <aside> Phần bên phía sidebar </aside> </section> <footer> Copyright 2014 By web888.vn </footer> </body> </html>これは、HTML5で作成されたテンプレートの標準構造です。 HTML5ライティングコミュニティ全体ではなく、自分自身で話します。
最初の行<!doctype html>を検討します。これは、テンプレートがHTML5で作成されている場合に必要な宣言です。次は<html lang="vi">セクションです。わかりやすくするために、htmlタグにもlangを入れる必要があります。
下のheadセクションは物議を醸すものではありませんよね？これはウェブサイトの情報宣言です。
<head> <meta charset="utf-8" /> <title>Chương Trình HTML Đầu Tiên</title> </head> bodyの部分で最も重要です、体の部分で私は次のタグを使用します：
headerタグは、Webサイトのヘッダー全体を含めるために使用されます。以前にdivタグを使用したことがある場合、HTMl5では代わりにこのタグを使用します。
<header> <h1>Phần header</h1> </header> Navタグ。このタグは、メニューなどのナビゲーションパーツを含めるためによく使用されます。
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Serie</a></li> <li><a href="#">Tutorial</a></li> <li><a href="#">Ebook</a></li> </ul> sectionタグは、Webサイトのメインコンテンツを格納するために使用されるタグです。 HTML5を使用しない場合は、 div#contentタグを使用してHTML5を囲むことができます。
このセクションでは、2つの位置に分けています。1つ目はWebサイトのメインコンテンツで、2つ目はサイドバーです。
<section> <section> Phần nội dung chính trang web </section> <aside> Phần bên phía sidebar </aside> </section> asideのタグ、このタグは、 left-sidebar 、 right-sidebarバーなどのサイドバーフレームを含めるためによく使用されます。
<aside> Phần bên phía sidebar </aside>最後のタグはfooterタグです。divを宣言してフォーマットする代わりに、フッタータグを使用してラップします。
<footer> Copyright 2014 By web888.vn </footer>ご覧のとおり、これらのHTML5標準タグを使用する場合、どの部分がヘッダーで、どの部分がフッターであるかについてコメントする必要はありません。非常に直感的で更新が簡単です。
実行すると、html5テンプレートの結果は次のようになります。
ああ、なぜインターフェースはとても角質に見えるのですか？その理由は、インターフェイスの装飾にCSSを使用していないためです。これは、HTML5タグには独自の名前がありますが、基本的に通常のdivタグと同じであることを示しています。
3.結論
そこで、Webページによく見られるHTML5構造を紹介しました。 article、svg、..などの他の多くのHTMLタグがまだあります。これについては、次の記事で学習します。
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
