，

等 　　

---

：水平分割线（块级元素，默认自带上下间距 + 浅灰色线条） 　　
：强制换行（行内元素，无自带间距） 　　：图片标签，属性有src（后面带图片路径），alt（当图片无法显示时文字提示），前两个都是必填属性，还有title（鼠标悬浮在图片上时显示的提示文本），width和height设置图片宽高，一般只写一个这样可以实现自动等比例缩放 　　：超链接，属性href(必填，跳转的目标地址)，target（属性值有两个_self和_blank分别表示在本页面跳转和跳转到一个新页面） 　　/:加粗文本，表示重要内容，推荐用strong更有语义 　　/:斜体，表示强调内容，推荐使用em更有语义 　　/:删除线条，表示已删除 / 废弃内容，推荐使用del更有语义 　　/:下划线文本，表示新增 / 插入内容，推荐使用ins更有语义 　　:高亮文本，表示需要突出的内容（默认黄色背景） 　　:行内 “容器” 标签，无默认样式，用来包裹小段文本（方便单独设置样式） 　　:下标文本 　　:上标文本 　　table：表格核心容器，包裹所有表格内容的根容器（所有表格标签必须写在内部才生效），常用属性有border，width，height，一般放在css里面统一设置更便捷 　　thead：表格表头区域（通常放列标题，一个表格只能有 1 个） 　　tbody：表格主体区域（放数据内容，一个表格至少有 1 个，可写多个） 　　tfoot：表格尾部区域（放汇总信息，如合计行，一个表格只能有 1 个），不常用 　　tr：代表一行，必须放在//里面，不能单独使用 　　td：代表单元格，必须在//里面，不能单独使用 　　th：代表表头单元格，默认加粗 + 水平居中 + 垂直居中，必须放在//里面，不能单独使用补充：单元格合并属性 　　：跨列合并（当前单元格占列的宽度，是数字）。 　　：跨行合并（当前单元格占行的高度，是数字）。 　　注意：即使不写//，浏览器也会自动把内容包裹在里，但建议手动写（增强结构语义）。 　　案例代码： 　　

第四节：表格标签

　　

我的游戏清单

　　

【游戏基础信息表】

　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　

游戏名称	游戏类型	游玩时长	评分10分	游玩状态
光·遇	治愈冒险	280小时	9.6	偶尔玩
植物大战僵尸	塔防休闲	150小时	9.4	通关多遍
消消乐	消除闯关	320小时	9.0	日常打卡
贪吃蛇大作战	休闲竞技	80小时	8.7	偶尔娱乐
球球大作战	休闲竞技	120小时	8.9	朋友组队

　　

【游戏设备适配表】

　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　

游戏名称	电脑	手机	主机
光·遇	✅	✅	❌
植物大战僵尸	✅	✅	❌
消消乐	❌	✅	❌
贪吃蛇大作战	❌	✅	❌
球球大作战	❌	✅	❌

　　效果图： 　　1.form：包裹所有表单元素，是表单的 “总容器”，负责把内部元素的信息提交到后端 　　2.核心表单控件（按使用频率排序）(1)input：单行输入 / 选择控件（核心标签） 　　作用：实现单行文本、数字、单选、复选等交互，必须配合 属性使用。 　　必写属性：type和name（控件的 “标识名”，后端通过这个名字识别数据）补充：以下是type的一些属性值（左边是常用的属性值，右边则用的比较少） 　　注意：单选 / 复选按钮，同一组的 必须一致（比如性别单选的两个按钮， 都写 ，才能实现 “互斥选择”） 　　选写属性（常用）： 　　value：控件的 “默认值”（比如 value）；单选 / 复选按钮必须写 value（后端通过 value 区分选了哪一个）。 　　placeholder：输入框的提示文字（比如 placeholder）。 　　required：标记为 “必填项”，不填就无法提交。 　　pattern：正则校验（如手机号 ） 　　min/max：数字 / 日期范围限制(2)+：下拉框 　　示例： 　　所在城市： 　　 　　--请选择省份-- 北京 上海 　　（3）：多行文本域 　　示例： 　　（4）button：按钮操作（提交表单、重置内容、自定义点击事件） 　　常用属性：type（决定按钮功能） 　　(5)label：标签关联（提升交互体验） 　　核心作用：点击文字可选中对应控件 　　关联方式： 　　推荐：用 + 关联（控件必须写 ， 的 值和 一致）： 　　简化：把控件包在 里：此时可以省略 和 ，点击文字自动触发控件： 　　注意： 仅关联行内控件（input/select），禁止嵌套块级元素（如 ）。 　　案例：源代码以及效果图 　　<h2>第五节：表单标签</h2> 　　<form action="http://localhost:3000" method="post" enctype="multipart/form-data"> 　　<h3>【1. 基础信息区】</h3> 　　<label for="name"> 　　您的昵称: 　　<input type="text" name="username" id="name" placeholder="请输入您的昵称" required> 　　</label><br> 　　<label for="phone"> 　　联系电话： 　　<input type="tel" name="phone" id="phone" placeholder="请输11位手机号" pattern="d{11}" required> 　　</label><br> 　　<label for="email"> 　　联系邮箱： 　　<input type="email" name="email" id="email" placeholder="请输入您的邮箱" required> 　　</label><br> 　　<label for="date"> 　　出生日期： 　　<input type="date" name="date" id="date"> 　　</label><br> 　　<label for="city">所在城市：</label> 　　<select name="localcity" id="city" required> 　　<option value="" disabled selected>--请选择省份--</option> 　　<option value="beijing">北京</option> 　　<option value="shanghai">上海</option> 　　<option value="guangdong">广东</option> 　　<option value="shenzhen">深圳</option> 　　<option value="hanzhou">杭州</option> 　　<option value="jiangsu">江苏</option> 　　<option value="chengdu">成都</option> 　　</select> 　　<h3>【2. 烘焙能力区】</h3> 　　烘焙经验： 　　<label><input type="radio" name="experience" value="新手一年内">新手一年内</label> 　　<label><input type="radio" name="experience" value="进阶1-3年">进阶1-3年</label> 　　<label><input type="radio" name="experience" value="资深3年以上">资深3年以上</label> 　　<br> 　　擅长品类： 　　<label><input type="checkbox" name="category" value="蛋糕">蛋糕</label> 　　<label><input type="checkbox" name="category" value="饼干">饼干</label> 　　<label><input type="checkbox" name="category" value="泡芙">泡芙</label> 　　<label><input type="checkbox" name="category" value="面包">面包</label> 　　<label><input type="checkbox" name="category" value="挞类">挞类</label> 　　<label><input type="checkbox" name="category" value="其他">其他</label> 　　<br> 　　<label for="brand"> 　　烤箱品牌： 　　<input type="text" name="brand" id="brand" placeholder="如：长帝、美的、海尔"> 　　</label><br> 　　<label for="temperature">烤箱温度（℃）：</label> 　　<input type="number" name="temperature" id="temperature" min="100" max="250" placeholder="100-250"> 　　<h3>【3. 食谱核心信息区】</h3> 　　<label for="foodname"> 　　食谱名称： 　　<input type="text" name="foodname" id="foodname" placeholder="如：原味戚风蛋糕" required> 　　</label><br> 　　<label for="foodtype">食谱类型： </label><br> 　　<select name="foodtype" id="foodtype"> 　　<option value="" disabled selected>--请选择食谱类型--</option> 　　<option value="戚风蛋糕">戚风蛋糕</option> 　　<option value="曲奇饼干">曲奇饼干</option> 　　<option value="奶油泡芙">奶油泡芙</option> 　　<option value="可颂面包">可颂面包</option> 　　<option value="芋泥拿破仑">芋泥拿破仑</option> 　　</select> 　　制作难度： 　　<label><input type="radio" name="difficulty" value="简单" checked>简单</label> 　　<label><input type="radio" name="difficulty" value="中等">中等</label> 　　<label><input type="radio" name="difficulty" value="困难">困难</label> 　　<br> 　　<label for="time"> 　　制作时长（分钟）： 　　<input type="number" name="time" id="time" min="10" max="180" placeholder="10-180" required> 　　</label><br> 　　<label for="cnumber">成品份数：</label><br> 　　<select name="cnumber" id="cnumber"> 　　<option value="1份">1份</option> 　　<option value="2-4份">2-4份</option> 　　<option value="4-8份">4-8份</option> 　　<option value="8份以上">8份以上</option> 　　</select> 　　所需材料： 　　<label for="ingredients">所需食材（详细）：</label> 　　<textarea name="ingredients" id="ingredients" placeholder="示例： 　　1.低精面粉80g 　　2.鸡蛋3个 　　3.细砂糖60g 　　4.牛奶150ml"> 　　
　　 　　成品图上传： 　　 　　
　　提交 　　重置 　　无默认行为 　　 　　效果图： 　　1.错题本1：HTML 标签嵌套与路径规范错误 　　错误点及核心原理 　　1.标签嵌套语法错误 　　标签嵌套规则：1.块级元素（//）可嵌套行内元素（/），但不能嵌套其他块级；- 行内元素（/）不能嵌套块级元素；2. 标签：用于包裹单一段落，自动分段且有默认间距 　　2.图片路径不规范 　　使用本地绝对路径绝对路径仅在本地生效，若代码部署到服务器 / 其他电脑，路径会失效；且 Windows 路径的在 HTML 中需转义为，否则可能解析错误 　　补充知识点： 　　1. 路径规则：绝对路径：（仅本机有效） 　　2.相对路径：../css/style.css（基于当前文件位置，通用）-->需要用../回到上一级，直到和css平级再开始找目标文件 　　修改只需要把p标签的块级元素和p标签移除即可，就不再粘贴代码了~ 　　的核心作用是「关联表单控件」，通过+匹配即可，嵌套块级元素（）冗余且不符合规范 　　标签正确用法： 　　1. 关联方式： + 控件； 　　2. 交互价值：点击 label 文字可选中对应控件； 　　3. 禁止嵌套块级元素（/等） 　　以下是修改之后的代码： 　　 　　--请选择省份-- 　　北京 　　上海 　　广东 　　深圳 　　杭州 　　江苏 　　成都 　　 　　错误1：手机号用，无格式校验 　　比更语义化，适配移动端数字键盘，手机号加校验 　　修改后的代码：将type改成了tel，加了正则校验pattern="d{11}"，还加了required必填属性 　　错误2：数字输入框（烤箱温度 / 制作时长）无限制 　　修改方法：数字输入框加范围 　　补充知识点：HTML5 表单验证属性： 　　require：必填 　　pattern="d{11}"：正则校验（11 位数字） 　　min/max：数字范围 　　accept：文件类型限制 　　input语义化类型 　　tel（手机号） 　　email（邮箱） 　　number（数字） 　　file（文件）

魔菇视视应用