header footer nav 标签

最新推荐文章于 2025-01-08 20:00:00 发布

原创最新推荐文章于 2025-01-08 20:00:00 发布 · 278 阅读

0 ·

CC 4.0 BY-SA版权

HTML5 专栏收录该内容

5 篇文章

订阅专栏

本文介绍并展示了HTML5中header、footer及nav等语义化标签的应用实例，这些标签有助于提升网页结构的清晰度和搜索引擎的友好度。

header footer nav标签的使用：

<!DOCTYPE html>

<html lang="en">
<head>
	<title>XHTML Doctype</title>
	<meta charset="utf-8"/>

	<style>
		h1 {
			margin-top: 0;
			color: red;
		}

		div[role="main"] {
			color: black;
		}
	</style>
</head>
<body>

	<header>
		<h1>My First Website</h1>
		<!-- marker up是为了最好的表达内容的-->
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
				<li><a href="#">Rss</a></li>
			</ul>
		</nav>
	</header>

	<div role="main">
		<p>Here is the main context!</p>
	</div>
	<footer>
		<p>Copyright here</p>
	</footer>

	<h1>Hi there</h1>

<script>
	alert("hi there");
</script>
</body>
</html>