一、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 基础语法与选择器使用
- 字体相关样式属性的应用
- 表单元素的正确使用与属性设置
- 基本页面布局能力（表格布局）
技术支持高速串行数据传输，支持1080p/60Hz高分辨率传输)
 ——通用端口)
=＞UAC+STM32 ADC+PWM实现录音和播放)
)
)
