HTML5 志愿者招募网页制作教程 - 代码示例 - 常规

<p>以下是一个简单的 HTML5 志愿者招募网页的代码示例：</p>
<!DOCTYPE html>
<html>
<head>
	<title>志愿者招募</title>
	<meta charset='UTF-8'>
	<meta name='viewport' content='width=device-width, initial-scale=1.0'>
	<style>
		body {
			font-family: Arial, sans-serif;
			margin: 0;
			padding: 0;
		}
		header {
			background-color: #333;
			color: #fff;
			padding: 10px;
			text-align: center;
		}
		h1 {
			margin: 0;
		}
		section {
			padding: 20px;
		}
		form {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		input[type='text'], input[type='email'], textarea {
			width: 100%;
			padding: 10px;
			margin-bottom: 10px;
			border: none;
			border-radius: 5px;
			box-sizing: border-box;
		}
		input[type='submit'] {
			background-color: #333;
			color: #fff;
			border: none;
			border-radius: 5px;
			padding: 10px 20px;
			cursor: pointer;
			transition: background-color 0.3s ease-in-out;
		}
		input[type='submit']:hover {
			background-color: #444;
		}
	</style>
</head>
<body>
	<header>
		<h1>志愿者招募</h1>
	</header>
	<section>
		<h2>我们需要您的帮助！</h2>
		<p>如果您热爱社会公益、喜欢帮助他人，那么请考虑成为我们的志愿者！</p>
		<form method='post' action='submit-form.php'>
			<label for='name'>姓名：</label>
			<input type='text' id='name' name='name' required>
			<label for='email'>邮箱：</label>
			<input type='email' id='email' name='email' required>
			<label for='phone'>电话：</label>
			<input type='text' id='phone' name='phone' required>
			<label for='message'>留言：</label>
			<textarea id='message' name='message' required></textarea>
			<input type='submit' value='提交申请'>
		</form>
	</section>
</body>
</html>
<p>在这个示例中，我们使用了 HTML5 的一些新特性，如语义化标签（如 <header> 和 <section>）和表单验证（通过 required 属性实现）。我们还使用了一些 CSS 样式来美化页面，如设置背景颜色、字体、边距和圆角等。最后，我们在 <form> 标签中定义了一个简单的联系表单，并在 <input type='submit'> 按钮上添加了一个简单的过渡效果。</p>