HTML 网页导航栏代码示例 - 简洁易懂 - 常规

以下是一个简单的网页导航栏的代码示例：

<!DOCTYPE html>
<html>
<head>
	<title>My Navigation Bar</title>
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		nav {
			background-color: #333;
			overflow: hidden;
		}
		nav a {
			float: left;
			display: block;
			color: white;
			text-align: center;
			padding: 14px 16px;
			text-decoration: none;
		}
		nav a:hover {
			background-color: #ddd;
			color: black;
		}
		.active {
			background-color: #4CAF50;
			color: white;
		}
	</style>
</head>
<body>
	<nav>
		<a class='active' href='#'>Home</a>
		<a href='#'>About</a>
		<a href='#'>Contact</a>
		<a href='#'>Blog</a>
		<a href='#'>Portfolio</a>
	</nav>
</body>
</html>

解释：

<!DOCTYPE html>声明这是一个HTML5文档。
<html>标签包含整个HTML文档。
<head>标签包含文档的元数据，例如标题和样式表。
<title>标签定义文档标题。
<style>标签用于定义文档的样式。
body元素是文档的主体部分。
nav标签定义网页导航栏。
a标签定义导航栏中的链接。
float: left属性使链接在导航栏中左对齐。
text-decoration: none属性去掉链接的下划线。
:hover伪类表示当鼠标悬停在链接上时发生的事件。
class='active'属性用于表示当前活动的链接。
background-color属性定义元素的背景色。
color属性定义元素的文本颜色。
padding属性定义元素内部的填充（上、右、下、左）。

你可以根据自己的需求修改样式和链接。