一、HTML 布局标签（含 H5 语义化标签）
传统布局多使用div标签，H5 新增语义化标签增强可读性：
核心知识点
header：替代div#header，用于页面头部（如标题、导航）。footer：替代div#footer，用于页面底部（如版权信息）。main：替代div#main，用于主要内容区域。nav：替代div#nav，用于导航区域（如菜单）。section：替代普通div，用于独立区块（如章节）。article：替代普通div，用于独立内容（如文章）。aside：替代普通div，多用于侧边栏或广告位。
代码实例
<!-- 传统div布局 -->
<div id="header">网站标题</div>
<div id="nav">导航菜单</div>
<div id="main">主要内容</div>
<div id="aside">侧边广告</div>
<div id="footer">©2024 版权所有</div>
<!-- H5语义化布局 -->
<header>网站标题</header>
<nav>导航菜单</nav>
<main>主要内容</main>
<aside>侧边广告</aside>
<footer>©2024 版权所有</footer>二、表单（form）及相关元素
表单用于向服务器提交数据，包含核心标签和属性：
核心知识点
-
form 标签属性：
action：服务器地址（如https://www.baidu.com）。method：提交方式（GET默认，推荐POST）。enctype：数据格式（application/x-www-form-urlencoded默认，multipart/form-data用于文件上传）。
-
label 标签 ：行内元素，用于解释表单元素（可选
for属性关联表单元素id）。 -
常见表单元素：
input：通过type改变类型（文本、密码、单选、复选等）。textarea：多行文本输入框。select：下拉列表（配合option和optgroup）。
代码实例
<form action="https://www.baidu.com" method="post" enctype="multipart/form-data">
<!-- 文本输入框 -->
<p>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" placeholder="请输入用户名" required>
</p>
<!-- 密码框 -->
<p>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
</p>
<!-- 单选框（互斥需相同name） -->
<p>
<label>性别:</label>
<input type="radio" name="gender" value="m" checked>男
<input type="radio" name="gender" value="w">女
</p>
<!-- 下拉列表 -->
<p>
<label>学历:</label>
<select name="xl">
<option value="高中">高中</option>
<option value="本科" selected>本科</option>
</select>
</p>
<!-- 复选框 -->
<p>
<label>爱好:</label>
<input type="checkbox" name="hobby" value="游泳">游泳
<input type="checkbox" name="hobby" value="吃饭" checked>吃饭
</p>
<!-- 文件上传（需配合post和multipart/form-data） -->
<p>
<label>上传头像:</label>
<input type="file" name="head_png" accept="image/jpeg/png">
</p>
<!-- 多行文本 -->
<p>
<label>个人简介:</label>
<textarea name="intro" rows="3" cols="30"></textarea>
</p>
<!-- 按钮 -->
<p>
<input type="submit" value="注册">
<input type="reset" value="重置">
</p>
</form>三、多媒体标签
用于在网页中嵌入音频和视频：
核心知识点
audio：音频播放器，属性包括src（路径）、controls（显示控制栏）、loop（循环）。video：视频播放器，属性类似audio，额外支持width/height设置尺寸。
代码实例
<!-- 音频播放器 -->
<audio src="music.mp3" controls loop>
您的浏览器不支持音频播放
</audio>
<!-- 视频播放器 -->
<video src="video.mp4" controls width="500" height="300">
您的浏览器不支持视频播放
</video>四、CSS 基础（层叠样式表）
用于美化网页，包括引入方式、选择器和样式属性：
核心知识点
-
引入方式：
- 行内样式：标签内
style属性（如<p style="color: red;">）。 - 内联样式：
<head>中用<style>标签定义。 - 外联样式：通过
<link>引入外部.css文件。
- 行内样式：标签内
-
选择器：
- 通用选择器：
*（选中所有元素）。 - 标签选择器：标签名（如
p）。 - ID 选择器：
#id值（如#app）。 - 类选择器：
.class值（如.p1）。 - 后代选择器：
选择器1 选择器2（如#app a）。
- 通用选择器：
-
常用样式 ：字体（
font-*）、颜色（color）、背景（background-*）等。
代码实例
<!-- 行内样式 -->
<p style="color: white; background-color: red; font-size: 20px;">行内样式示例</p>
<!-- 内联样式 -->
<style>
/* 通用选择器：初始化样式 */
* {
margin: 0;
padding: 0;
}
/* 类选择器：复用样式 */
.p1 {
width: 500px;
height: 50px;
background-color: red;
color: white;
}
/* 后代选择器：选中#app内的a标签 */
#app a {
color: blue;
text-decoration: none; /* 去掉下划线 */
}
</style>
<!-- 应用内联样式 -->
<p class="p1">类选择器示例1</p>
<p class="p1">类选择器示例2</p>
<div id="app">
<a href="#">后代选择器示例</a>
</div>
<!-- 外联样式引入（需提前创建style.css文件） -->
<link rel="stylesheet" href="style.css" type="text/css">五、其他实用细节
- 超链接
<a>：默认带下划线，可通过text-decoration: none去除。 - 列表（
ul/ol）：默认带符号，可通过list-style: none去除。 - 单选框 / 复选框：需设置
name属性（单选框name相同实现互斥）。 - 文件上传：必须设置
form的method="POST"和enctype="multipart/form-data"。
一、CSS 样式设置题（h1 标签样式）
题目要求
为标题<h1>设置以下样式：
- 字体大小：32px
- 字体颜色：#333
- 字体家族：Arial，sans-serif
- 行高：1.5
- 字体加粗
答案分析
<style>
h1{
font-size: 32px;
color: #333;
font-family: Arial, sans-serif;
line-height: 1.5;
font-weight:600;
}
</style>知识点总结
- 字体大小 ：使用
font-size属性，单位 px - 字体颜色 ：使用
color属性，支持十六进制值（#333） - 字体家族 ：
font-family可指定多个字体，用逗号分隔，优先级从左到右 - 行高 ：
line-height设置行间距，1.5 表示当前字体大小的 1.5 倍 - 字体加粗 ：
font-weight可用数值（400 正常，600-700 加粗）或关键词（bold）
二、CSS 类选择器样式设置
题目要求
为.text-example类设置：
- 字体：Times New Roman（优先），其次 Georgia
- 字体大小：18px
- 行高：1.8
答案分析
<style>
.text-example{
font-family: 'Times New Roman',Georgia;
font-size: 18px;
line-height: 1.8;
}
</style>知识点总结
- 类选择器 ：使用
.类名定义样式，可复用在多个元素 - 字体声明：带空格的字体名称需要用引号包裹（如 'Times New Roman'）
- 字体备选机制：当第一个字体不可用时，自动使用后面的备选字体
- 行高单位：未指定单位时，是相对于当前元素的字体大小的倍数
三、注册页面编写
题目要求
创建包含以下信息的注册页面：
- 用户名、密码、确认密码
- 邮箱、手机号、出生日期
- 用户头像（文件上传）
- 性别（单选）、爱好（多选）
- 个人介绍（多行文本）
答案分析
<table cellspacing="0">
<caption>注册</caption>
<!-- 表单项内容 -->
</table>优点
- 使用表格
<table>进行布局，使表单元素排列整齐 - 正确使用了各种表单控件类型：
- 文本输入框（用户名、手机号）
- 密码框（密码、确认密码）
- 邮箱输入框（type="email"）
- 日期选择框（type="date"）
- 文件上传框（type="file"）
- 单选按钮（性别）
- 复选框（爱好）
- 文本域（个人介绍）
- 为单选按钮设置了相同的
name属性，实现互斥效果 - 使用
checked属性设置默认选中项
可改进点
- 建议使用
<form>标签包裹所有表单项，便于数据提交 - 可添加
required属性实现基本表单验证 - 密码框可添加
placeholder提示文本 - 手机号可使用
type="tel"类型 - 表格布局在响应式设计中不够灵活，可考虑使用 CSS 布局
四、登录页面编写
题目要求
创建包含以下元素的登录页面：
- 用户名输入框
- 密码输入框
- "记住我" 复选框
- 登录按钮
答案分析
<table>
<caption>登录</caption>
<!-- 表单项内容 -->
</table>优点
- 使用表格布局使表单整齐有序
- 正确使用了
<caption>标签设置表单标题 - 使用
colspan="2"使按钮和复选框跨列显示 - 包含了登录功能所需的核心元素
可改进点
- 建议添加
<form>标签，并设置action和method属性 - 输入框可添加
placeholder提示文本 - 登录按钮建议使用
type="submit" - "记住我" 复选框可添加关联的
<label>标签 - 可添加 "忘记密码" 等辅助链接
总结
- CSS 基础语法与选择器使用
- 字体相关样式属性的应用
- 表单元素的正确使用与属性设置
- 基本页面布局能力（表格布局）