前端学习打卡 Day 7： 综合实战案例 | 人气美食推荐馆网页制作
一、学习前言
今天整合前期所有 HTML 基础标签，完成美食主题综合网页实战，页面包含语义化布局、导航锚点、图文、表格、音视频、列表、表单等全部常用知识点，同时重点辨析lang网页语言属性 和UTF-8字符编码，纠正理解误区。
二、页面运行效果
三、页面板块功能讲解
顶部区域包含网页主标题、简介文字、分割线，使用
header语义化标签布局。导航区域利用无序列表 + 锚点链接，点击可快速跳转到页面对应模块，支持平滑滚动。
美食简介区域使用
section、article语义标签，搭配<strong>加粗、<em>斜体、<del>删除线文本修饰标签。美食图鉴区域插入多张图片，设置宽高、悬浮提示、替代文字，练习
img标签完整用法。资讯超链接区域实现新标签页打开外部网址，掌握
a标签target="_blank"属性。美食人气榜单制作带边框表格，练习单元格跨行 rowspan、跨列 colspan合并用法。
音视频播放区域嵌入视频、音频播放器，设置控制器、循环播放，掌握
video、audio、source标签。各类列表演示同时展示有序列表、无序列表、自定义描述列表三种常用列表结构。
留言表单区域包含普通输入框、密码框、单选框、复选框、下拉菜单、多行文本域、提交 / 重置按钮，覆盖所有常用表单控件。
底部版权与回到顶部使用字符实体展示特殊符号，通过锚点链接实现返回页面顶部功能，
footer存放页脚信息。
四、完整带逐行注释源码
<!-- 声明文档类型为HTML5，告诉浏览器用HTML5规则解析页面 --> <!DOCTYPE html> <!-- 网页根标签，lang="zh-CN" 设定网页语言为中文 --> <html lang="zh-CN"> <!-- 头部区域：存放网页配置、元信息、标题，不会显示在页面可视区域 --> <head> <!-- 设置网页字符编码为UTF-8，防止中文乱码 --> <meta charset="UTF-8"> <!-- 适配手机端：宽度跟随设备屏幕，初始缩放比例1.0，禁止默认缩放 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 浏览器标签页显示的网页标题 --> <title>人气美食推荐馆</title> <!-- 内嵌CSS样式标签 --> <style> /* 给整个网页设置锚点跳转平滑滚动，不是瞬间跳转 */ html { scroll-behavior: smooth; } </style> </head> <!-- 网页主体可视区域，所有能看到的内容都写在body里 --> <body> <!-- 语义化头部标签：存放网页标题、头部介绍信息 --> <header> <!-- 一级标题：页面主标题，权重最高 --> <h1 id="top">🍲 人气美食推荐馆</h1> <!-- 段落标签：用于包裹一段文本内容 --> <p> 带你打卡各地特色美食 ♦ 好吃不 <!-- del标签：给文字加删除线，表示作废旧内容 --> <del>踩雷</del> </p> <!-- 水平线标签：生成一条水平分割线，分隔上下区域 --> <hr> </header> <!-- 语义化导航标签：专门存放页面导航菜单 --> <nav> <!-- 无序列表：默认带圆点，用来做导航菜单 --> <ul> <!-- 列表项：无序列表里的每一项内容 --> <!-- a超链接标签：href写#id为锚点，跳转到页面内部对应位置 --> <li><a href="#intro">美食简介</a></li> <li><a href="#food-img">美食图鉴</a></li> <li><a href="#food-table">美食榜单</a></li> <li><a href="#video">美食视频</a></li> <li><a href="#message">美食留言</a></li> </ul> </nav> <!-- 语义化主体标签：包裹网页核心主要内容 --> <main> <!-- 区块标签：用来划分页面独立模块，合理分区布局 --> <section id="intro"> <!-- 二级标题：模块小标题，层级低于h1 --> <h2>📜 美食简介</h2> <!-- 文章语义标签：包裹一段独立完整的文本内容 --> <article> <p>这里为大家整理全国 <!-- strong标签：文本加粗，强调重要内容 --> <strong>热门特色美食</strong> ，涵盖小吃、正餐、甜品。 </p> <p>推荐原则： <!-- em标签：文本斜体，语气强调 --> <em>口碑优先、性价比高</em> </p> <p>更新时间： <!-- ins标签：给文字加下划线，表示新增修改内容 --> <ins>每日实时更新</ins> </p> </article> </section> <!-- 水平分割线，模块之间做分隔 --> <hr> <!-- 图片展示模块 --> <section id="food-img"> <h2>📷 美食图鉴</h2> <!-- img图片标签：引入图片，单标签无需闭合 --> <!-- src：图片路径；alt：图片加载失败时显示的替代文字 --> <!-- title：鼠标悬浮在图片上时显示提示文字；width：设置图片宽度 --> <img src="./images/food1.jpg" alt="麻辣火锅" title="川味麻辣火锅" width="240"> <img src="./images/food2.jpg" alt="烧烤撸串" title="深夜烧烤" width="240"> <img src="./images/food3.jpg" alt="甜品蛋糕" title="奶油甜品" width="240"> </section> <hr> <!-- 外部超链接模块 --> <section> <h2>美食资讯入口</h2> <p>想了解更多美食教程： <!-- a超链接：href放外网地址，target="_blank" 新标签页打开网页 --> <a href="https://www.csdn.net" target="_blank">点击前往学习呦！</a> </p> </section> <!-- 数据表格模块 --> <section id="food-table"> <h2>📊 美食人气榜单</h2> <!-- table表格标签：创建表格 --> <!-- border：给表格加边框；cellpadding：单元格内文字距离边框的间距 --> <!-- cellspacing：单元格之间的间距，设为0合并缝隙 --> <table border="1" cellpadding="8" cellspacing="0"> <!-- tr：表格的行标签 --> <tr> <!-- th：表头单元格，文字默认居中加粗 --> <th>排名</th> <th>美食名称</th> <th>产地</th> <th>推荐指数</th> </tr> <tr> <!-- td：普通单元格，存放表格数据 --> <td>1</td> <td>重庆火锅</td> <!-- rowspan：单元格跨行合并，合并2行 --> <td rowspan="2">重庆</td> <td>⭐⭐⭐⭐⭐</td> </tr> <tr> <td>2</td> <td>重庆小面</td> <td>⭐⭐⭐⭐</td> </tr> <tr> <!-- colspan：单元格跨列合并，合并2列 --> <td colspan="2">3~5名 合集</td> <td>全国多地</td> <td>⭐⭐⭐⭐</td> </tr> </table> </section> <hr> <!-- 音视频播放模块 --> <section id="video"> <h2>🎬 美食制作视频</h2> <!-- video视频标签：嵌入视频 --> <!-- controls：显示播放、暂停、进度条控制面板；width：设置视频宽度 --> <video controls width="345"> <!-- source：指定视频路径和文件类型，兼容不同浏览器 --> <source src="video/food.mp4" type="video/mp4"> <!-- 浏览器不支持视频时显示的提示文字 --> 浏览器不支持视频播放 </video> <h3>美食背景音乐</h3> <!-- audio音频标签：嵌入背景音乐 --> <!-- controls：显示音频控制面板；loop：设置音频循环播放 --> <audio controls loop> <source src="video/12hours.m4a" type="audio/mp4"> <!-- 浏览器不支持音频时显示的提示文字 --> 浏览器不支持音频播放 </section> <hr> <!-- 列表综合演示模块 --> <section> <h3>必吃美食顺序推荐</h3> <!-- 有序列表：默认带数字序号 --> <ol> <li>先吃本地特色正餐</li> <li>再尝街边经典小吃</li> <li>最后打卡甜品饮品</li> </ol> <!-- 描述列表：用于术语+解释的结构 --> <dl> <!-- 描述术语：要解释的名词 --> <dt>火锅</dt> <!-- 描述解释：对上面术语的说明 --> <dd>热辣过瘾，适合多人聚餐</dd> <dt>烧烤</dt> <dd>夜宵首选，烟火气十足</dd> </dl> </section> <hr> <!-- 表单模块：用于用户输入、提交数据 --> <section id="message"> <h2>📝 美食留言推荐</h2> <!-- form表单容器：包裹所有表单控件，action提交地址，method提交方式 --> <form action="" method="get"> 昵称： <!-- input单行输入框：type="text" 普通文本输入 --> <!-- placeholder：输入框内灰色提示文字 --> <input type="text" placeholder="输入你的昵称"><br><br> 密码： <!-- type="password" 密码框，输入内容自动隐藏黑点 --> <input type="password" placeholder="设置访问密码"><br><br> 性别： <!-- type="radio" 单选框，name相同为同一组，只能选一个 --> <input type="radio" name="sex">男 <input type="radio" name="sex">女<br><br> 喜欢的菜系： <!-- type="checkbox" 复选框，可多选 --> <input type="checkbox">川菜 <input type="checkbox">粤菜 <input type="checkbox">湘菜<br><br> 口味偏好： <!-- select下拉菜单标签 --> <select> <!-- option：下拉菜单每一个选项 --> <option>香辣</option> <option>清淡</option> <option>酸甜</option> </select><br><br> 你的美食推荐：<br> <!-- textarea多行文本域：可输入多行文字 --> <!-- rows：显示行数；cols：显示列数 --> <textarea rows="4" cols="40" placeholder="写下你想推荐的美食..."></textarea><br><br> <!-- button按钮：type="submit" 点击提交表单数据 --> <button type="submit">提交推荐</button> <!-- type="reset" 点击重置所有表单内容到初始状态 --> <button type="reset">清空重写</button> </form> </section> <hr> <!-- 字符实体：网页特殊符号，无法直接打出来，用实体代替 --> <!-- ©版权符号 <小于号 >大于号 &和号 --> <p>版权 © 2026 美食推荐网页 | HTML标签演示:<body> & <html></p> <!-- 锚点链接：跳转到id="top"的位置，回到页面顶部 --> <p><a href="#top">返回顶部 ↑</a></p> </main> <!-- 语义化页脚标签：存放版权、底部信息 --> <footer> <!-- align="center" 设置文字水平居中 --> <p align="center">前端学习Day1~Day6 综合实战案例 - 美食主题</p> </footer> </body> </html>五、重点知识点：lang 与 UTF-8 辨析
<html lang="zh-CN">作用：声明网页主体为中文，给浏览器、翻译功能、搜索引擎识别页面语言。如果改为lang="en"网页设为英文，但页面实际写中文：浏览器会误判为英文页面，自动把现有中文再翻译一遍，导致语句怪异不通顺。<meta charset="UTF-8">作用：统一字符编码，只负责保证中文、符号、表情永不乱码。和lang互不干扰：
lang只管语言标识UTF-8只管文字不乱码
六、今日学习小结
- 综合案例串联 HTML 所有常用标签与语义化布局；
- 熟练掌握锚点、表格合并、音视频、表单全套用法；
- 彻底分清
lang语言声明 和UTF-8字符编码的不同作用； - 结合页面截图 + 带注释代码，直观理解每部分标签对应页面效果。