练习题答案
一、选择题
- B（解析：
<aside>标签语义为"侧边内容"，用于表示与主要内容相关但非必需的补充信息，如侧边栏、广告、作者简介等；<main>表示主要内容区，<section>表示主题性区块，<article>表示独立文章内容） - D（解析：不同浏览器（如Chrome、Firefox、Safari）的原生表单验证提示样式（如颜色、位置、文字）存在差异，若需统一风格需自定义验证逻辑）
二、填空题
html
复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head> <!-- 文档头，包含元数据 -->
<meta charset="UTF-8">
<title>文档标题</title>
</head>
<body> <!-- 文档体，包含可见内容 -->
<h1>页面内容</h1>
</body>
</html>三、编程题（完整代码及注释）
html
复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户注册 - 我的网站</title>
<style>
/* 基础样式（非必需，仅为优化显示效果） */
body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 20px; }
header, footer { text-align: center; margin: 20px 0; }
main { max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #ddd; border-radius: 8px; }
section { margin-bottom: 25px; }
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input[type="text"], input[type="email"], input[type="password"] {
width: 100%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px;
}
button { background: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; }
button:hover { background: #0056b3; }
.avatar-container { margin-top: 10px; }
.avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; }
</style>
</head>
<body>
<!-- 页面头部：网站名称 -->
<header>
<h1>我的网站</h1>
<p>创建账户，开始您的旅程</p>
</header>
<!-- 页面主要内容：注册表单 -->
<main>
<h2>用户注册</h2>
<form id="registerForm">
<!-- 个人信息区域 -->
<section>
<h3>个人信息</h3>
<div class="form-group">
<label for="username">用户名 *</label>
<!-- 用户名：必填，3-16位字母/数字/下划线 -->
<input type="text" id="username" name="username"
required minlength="3" maxlength="16"
pattern="[A-Za-z0-9_]+"
placeholder="3-16位字母、数字或下划线">
<small>仅支持字母、数字和下划线，3-16位</small>
</div>
<div class="form-group">
<label for="email">邮箱 *</label>
<!-- 邮箱：必填，使用email类型自带格式验证 -->
<input type="email" id="email" name="email"
required placeholder="example@domain.com">
</div>
<div class="form-group">
<label for="password">密码 *</label>
<!-- 密码：必填，至少8位，包含大小写字母和数字 -->
<input type="password" id="password" name="password"
required minlength="8"
pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$"
placeholder="至少8位，包含大小写字母和数字">
<small>密码需包含至少一个大写字母、一个小写字母和一个数字</small>
</div>
</section>
<!-- 头像上传区域 -->
<section>
<h3>头像上传</h3>
<div class="form-group">
<label for="avatar">选择头像图片</label>
<!-- 文件上传：仅允许图片，accept="image/*" -->
<input type="file" id="avatar" name="avatar"
accept="image/*">
<!-- 显示默认头像 -->
<div class="avatar-container">
<img src="default-avatar.png" alt="用户头像" class="avatar">
</div>
</div>
</section>
<!-- 注册按钮 -->
<button type="submit">注册</button>
</form>
</main>
<!-- 页面底部：版权信息 -->
<footer>
<p>© 2025 我的网站 版权所有</p>
</footer>
</body>
</html>代码注释说明：
- 使用
<header>、<main>、<footer>语义化标签构建页面骨架，<section>划分内容区块，符合HTML5结构规范。 - 表单控件应用
required、pattern等HTML5验证属性，无需JavaScript即可实现基础数据校验。 - 头像上传区域通过
<img>标签显示默认图片，alt属性确保无障碍访问；文件上传控件通过accept="image/*"限制仅能选择图片文件。 - 样式部分（
<style>）为可选增强，主要优化表单布局与元素显示效果，实际开发中建议使用外部CSS文件。