H5 セマンティックタグの実際のケース-H5 チュートリアル-php.cn

H5 セマンティックタグの実際のケース

php中世界最好的语言

リリース： 2018-01-10 09:15:11

オリジナル

2648 人が閲覧しました

今回は、H5 セマンティックタグの実践例をお届けします。 H5 セマンティックタグを使用する際の注意事項は何ですか? ここで実際のケースを見てみましょう。

ページレイアウトはhtml5要素に基づいています。したがって、始める前に HTML5 要素についてよく理解し、そのセマンティクスがレイアウトに適合するかどうかを確認することが重要です。

HTML5 の構造

HTML5 コードを記述するときは、単に

タグを html5 の

タグに置き換えないことが非常に重要です。場合によっては、意味的には

要素が適切な選択となります。たとえば、ラッパーまたはコンテナー div

従来の div 要素を置き換えるために使用できる新しいタグの 1 つは、

要素です。

要素には、ページのメインナビゲーションメニュー

をラップするために使用される

要素を配置することもできます。アンカーを含む h1 要素はブログのタイトルです。

最初はページのコンテンツを折り返すために

を使用していましたが、いくつかのドキュメントを読んだ後、これは意味的に 100% 正しくないと感じました。引き続き div 要素を選択します。

div 要素内では、各ブログ投稿が独自の Article 要素でラップされます。

一連のブログの下には、ページ分割された 2 つのリンクがあります。通常、ページネーションリンクの重要性は、

(メインナビゲーションだけでなく複数の場所で使用できます) 要素

と同等ではありません。ただし、このブログレイアウトでは、ページネーションリンクがメインナビゲーションとして扱われます。

要素が改訂される前は、サイドバーに意味的に固有の要素はありませんでした。ただし、構文の問題を心配することなく、side 要素を安全に使用できるようになりました。

この例では、side 要素に複数のセクション要素が含まれています。サイドバーの下部にシンプルな検索ボックスがあります。これにより、HTML5 フォームのいくつかの新機能にアクセスできるようになります。

そのうちの 1 つはプレースホルダー属性です

レイアウトはフッター要素で終わります。この例では、フッター要素の幅がページ全体に広がるように、フッター要素を div コンテナーの外側に配置する必要があります。

header {
	margin: 0 0 98px 0; 
}
	
	header h1 {
		float: left; font-size: 36px;
		font-weight: normal;
	}
	
	header nav {
		float: right; text-align: right;
		padding: 6px 0 0 0;
	}
		header nav ul {
			list-style: none;
		}
			header nav li {
				float: left; font-size: 18px;
				width: 136px; margin: 0 0 0 20px;
			}
			
			header nav li:nth-child(1):before {
				content: "1. ";
				color: #a2a2a2;
			}
			header nav li:nth-child(2):before {
				content: "2. ";
				color: #a2a2a2;
			}
			header nav li:nth-child(3):before {
				content: "3. ";
				color: #a2a2a2;
			}
			header nav li:nth-child(4):before {
				content: "4. ";
				color: #a2a2a2;
			}
			header nav li:nth-child(5):before {
				content: "5. ";
				color: #a2a2a2;
			}
#sidebar {
width: 292px; float: left;
padding: 4px 0 0 0;
}
#sidebar h3 {
font-size: 18px; font-weight: normal;
margin: 0 0 25px 0;
}
#sidebar ul {
list-style: none;
}
#sidebar section {
margin: 0 0 47px 0;
}
#sidebar #about a.more {
display: block; text-align: right;
}
#sidebar #categories {
width: 136px; float: left; 
margin: 0 20px 0 0;
}
#sidebar #social {
width: 136px; float: left; 
}
#footer-container {
	background: rgba(0,0,0,0.2); 
	overflow: hidden;
}
	footer {
		width: 916px; margin: 0 auto; padding: 10px 22px 50px 22px;
	}
	footer #credits {
		list-style: none; float: left; 
		}			
		footer #credits li {
			float: left; margin: 0 6px 0 0;
		}
			footer #credits li.wordpress a {
				display: block; width: 20px; height: 20px;
				background: url(images/credits.png) no-repeat 0 0; text-indent: -9999px;
			}
			footer #credits li.spoongraphics a {
				display: block; width: 25px; height: 20px;
				background: url(images/credits.png) no-repeat -30px 0; text-indent: -9999px;
			}
				
		footer #back-top {
			float: right; font-size: 12px;
		}

ログイン後にコピー

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

H5でドラッグアンドドロップエフェクトを作成する方法

H5を使用してカメラを呼び出す方法

H5と互換性のない古いバージョンのブラウザの処理方法についてそしてC3

以上がH5 セマンティックタグの実際のケースの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。