HTML5网页制作与前端开发（AI协同）课件 模块2　HTML5扩展-让正确的标签做正确的事

零号任务各就各位——确定HTML5文档类型和字符编码汇报人：xxx时间：2026任务说明01利用AI助手快速构建一个社团管理网页的骨架，并通过学习和应用HTML5相关知识来优化页面结构，最终设计出一个结构清晰、语义化的页面。具体要求如下。（1）使用AI助手（如通义灵码）生成基础的网页骨架，主要包含<header>、<nav>、<footer>、<main>和<aside>等标签。（2）应用HTML5文档类型和字符编码，确保文档结构的正确性。零号任务任务说明知识准备0201HTML5文档类型声明03语义化标签02字符编码目录1.HTML5文档类型声明知识准备在学习HTML5时，正确认识HTML文档类型是非常重要的第一步，因为它影响着浏览器如何解析和呈现Web内容。HTML5文档类型声明是<!DOCTYPEhtml>。这是一种标准化通用标记语言的文档类型声明，它告诉浏览器该文档使用HTML5标准，从而让浏览器以标准的模式渲染页面。HTML5文档类型的重要性：（1）标准模式：它确保浏览器以标准模式渲染页面，而不是怪异模式（QuirksMode），在怪异模式下，浏览器可能会使用不兼容的渲染引擎，导致页面显示错误。（2）跨浏览器一致性：无论在哪种浏览器或设备上，<!DOCTYPEhtml>都有助于确保Web页面的一致性和准确性。2.字符编码知识准备

字符编码定义了如何表示文本数据。在HTML文档中，使用<metacharset="UTF-8">来指定字符编码。UTF-8是一种广泛使用的字符编码，它可以表示几乎所有的字符，包括各种语言的字符和符号。字符编码的重要性：（3）数据完整性：指定字符编码可以防止文本在传输过程中发生乱码。：（1）国际化：<metacharset="UTF-8">确保网页可以支持世界上几乎所有的字符集，包括中文、日文、韩文、阿拉伯文等。（2）搜索引擎优化：正确的字符编码有助于搜索引擎更好地索引Web内容3.HTML5新增语义化标签

“语义化标签”指的是具有明确含义的HTML标签，这些标签能够清晰地描述其内容的类型和作用。知识准备知识准备（1）<header>标签用于定义一个文档或一个部分的头部区域。页眉可用其定义，通常包含网页的logo、标题、导航菜单等。（2）<nav>标签专用于定义页面中的导航区域，一般放在<header>标签内部。（3）<main>标签用于定义文档的主要内容部分。这部分是页面的核心，通常与子内容无关，并且在文档中应该只出现一次。（4）<footer>标签用于定义文档或一个部分的底部区域，通常包含版权信息、联系方式、相关超链接等。（5）<aside>标签通常用于定义与页面主要内容相关的补充信息。（6）<article>标签用于定义文档中独立的内容块，通常是可以独立阅读的部分。（7）<section>标签用于定义文档中的一个区域，通常是一个主题部分。注：<article>与<section>的区别：一般先用<article>划分出整体区域，再用<section>将整体区域细分。

在HTML5中，<header>、<nav>等标签被统称为“结构性语义标签”。这些标签类似于网页的“骨架”。接下来，我们将分析这4种标签的定义与内容。任务实现03任务实现01在VSCode中打开“通义灵码”插件。任务实现02在“通义灵码”的输入框中输入关键词，例如“请帮我生成一个社团管理网页的基础HTML骨架，包含<nav>、<article>、<section>和<aside>这4种常用的结构型语义化标签”。任务实现研究生成的代码，并考虑网页骨架（如图所示）中各部分适合添加什么内容。03谢谢大家汇报人：xxx时间：2026一号任务各得其所——用语义化标签让网页内容易读、易维护汇报人：xxx时间：202601任务说明任务说明一号任务在零号任务中，我们已经初步了解如何使用语义化标签来构建网页结构，本任务将进一步丰富社团管理网页的内容，重点在于运用更多的语义化标签，以提升网页的可读性和结构性。具体要求如下。（1）使用<figure>标签为图片等提供容器，并通过<figcaption>标签提供图片的说明文字。（2）使用<mark>标签来标记页面中需要突出显示的文字，例如，可以用于高亮显示搜索结果中的关键词。（3）使用<progress>标签来显示任务的完成进度，例如，可以用来展示志愿者时长录入的进度或者社团活动的报名人数进度。知识准备0201<figure>与<figcaption>标签03<progress>标签02<mark>标签目录1.<figure>与<ficaption>标签知识准备<figure>标签用于为图片、图表等视觉内容提供容器，而<figcaption>标签则提供该图片或图表的描述性文字，示例代码如下：这些标签的使用不仅能增强页面的视觉表现力，还能提升图片的语义性，使其内容更加清晰可理解。2.<mark>标签知识准备<mark>标签用于标记文本，使其高亮显示，通常用来表示重要的内容或用户可能关心的信息。示例代码如下：<mark>标签使得关键字、重要信息或相关术语更为显眼，帮助用户快速抓住重点。同时可以增强内容的可读性，特别是在长篇文章中，有助于吸引读者的注意力。它最常用于搜索结果页面，以强调与用户查询相关的部分。3.<progress>标签知识准备<progress>标签用于显示任务的进度。它提供一个可视化的进度条，通常用于显示操作的完成情况。<progress>标签有两个基本属性：value表示当前进度的值，通常是一个数值，表示任务的完成进度；max表示进度的最大值，默认值为1，这个属性表示任务的总量。示例代码如下：任务实现03任务实现01在<figure>标签中添加图片，并在<figcaption>标签中简述图片内容任务实现02使用<mark>标签来高亮显示页面中的重要文本：社团管理网页有一个新闻或通知部分，可以用<mark>标签来标记新闻标题或通知中的关键信息，以便用户能够快速注意到这些内容。任务实现在<aside>区域中，使用<progress>添加一个“最新志愿者活动”栏，清晰地显示每个志愿者活动的志愿者招募进度03任务实现谢谢大家汇报人：xxx时间：2026二号任务如鱼得水——使用交互式语义化标签让访问更自然汇报人：xxx时间：202601任务说明任务说明二号任务一号任务为社团管理网页增加了更多内容，但目前页面的互动性仍有待提升。因此，本任务的目标是增强社团管理网页的交互性和可操作元素，以优化用户体验。具体要求如下。（1）使用<details>和<summary>标签，为网页文案中的每个部分提供额外的背景信息或相关评论区，以让用户自行决定是否查看这些信息。（2）使用HTML5新增的表单内容，在网页的<aside>标签中添加一个志愿者信息收集表，并模拟填写对应的志愿者信息。知识准备0201可选性标签<details>和<summary>03HTML5新增的表单输入属性02HTML5新增的表单输入类型目录1.可选性标签<details>和<summary>知识准备<details>标签用于创建一个可展开的内容块。它通常包含一些额外信息，用户可以通过单击来显示或隐藏这些信息。<summary>标签用于为<details>标签提供一个可见的标题或摘要。用户可以点击此标题以展开和收起<details>中的内容。示例代码：运行效果：注意：<detail>标签可提供额外的信息，以便用户在需要时查阅，而不是一次性显示所有内容。而作为<details>的可操作部分，<summary>标签能让用户查看点击后所展示的内容。2.HTML5新增的表单输入类型知识准备HTML5通过新增的表单输入类型丰富了表单控件的多样性，使得开发者能够根据不同的需求选择更加合适的输入方式，右表展示了常见的新类型：类型解析1email电子邮件用于电子邮件地址输入，自动验证输入格式2url网址用于URL输入，自动验证格式3tel电话用于电话号码输入4search搜索搜索框，适用于站内搜索输入5date日期选择日期6month月选择月份7week周选择周8time时间选择时间9range范围滑动选择数值范围10number数数值输入，支持设置最小值和最大值11color颜色允许用户通过图形界面选择颜色12file文件允许用户选择文件13submit提交用于提交用户输入的数据到服务器2.HTML5新增的表单输入类型知识准备示例代码：运行效果：3.HTML5新增的表单输入属性知识准备（1）autofocus自动对焦属性autofocus属性让页面在加载时某个特定的输入框自动获得焦点，用户无须单击就可以直接开始输入。（2）required必填属性required属性用来声明某个输入字段是必填的，用户必须填写该字段，表单才能提交。3.HTML5新增的表单输入属性知识准备（3）placeholder占位符属性placeholder属性提供了一个提示信息，在输入框为空时显示，指导用户输入正确的内容。（4）pattern模式属性pattern属性允许开发者通过正则表达式来规定输入框的格式，确保用户输入的内容符合预期格式。3.HTML5新增的表单输入属性知识准备（5）min和max最小值和最大值属性min和max属性用于限制输入数值的范围，确保用户输入的值在开发者规定的区间内。（6）multiple多项选择属性multiple属性允许用户在文件选择或其他多选字段中选择多个项目。任务实现03任务实现01在网页的正文部分，使用<details>标签创建一个可展开的内容块，让用户可以通过单击来显示或隐藏这些信息。示例代码：运行效果：任务实现02使用<summary>标签为<details>标签提供一个可见的标题或摘要。示例代码：运行效果：任务实现使用HTML5新增的表单内容，在网页的<aside>标签中添加一个志愿者信息收集表，包括志愿者号（自动获得焦点）、电子邮箱（必填项）、电话号码（格式要求正确）、服务日期、个人资料上传（允许上传多个文件）、提交按钮等内容。03示例代码：运行效果：任务实现谢谢大家汇报人：xxx时间：2026技能补强一目了然——可见性原则汇报人：xxx时间：202601任务说明任务说明技能补强你有没有发现，有些看似简单的网页反而更能获得用户的青睐和广泛的好评。这正是可见性原则在网页设计中的关键作用体现——它通过清晰、及时的反馈帮助用户更好地理解系统的当前状态。可见性原则（VisibilityPrinciple）要求每一个用户操作都能得到明确的响应，页面上的信息层级清晰，能确保用户可以轻松掌握当前所处的位置和操作的反馈。这不仅是网页设计的基础，也是在实际应用中提升用户体验的核心要素。接下来详细剖析可见性原则的具体应用与其对用户体验的深远影响。知识准备02关于可见性原则知识准备(1)可见性原则要求系统向用户提供及时的反馈，使用户清楚地了解系统当前的状态。简而言之，用户的每一个操作都应该有明确的响应，系统的状态变化应该直观地呈现，避免让用户感到迷茫，因此网页设计至少要符合以下4个规定。让用户知道系统在做什么让用户知道系统做了什么让用户知道自己处于系统的什么位置让用户知道自己在做什么关于可见性原则知识准备（2）生活中的可见性原则：“可见性原则”在日常生活中的应用相当广泛，我们举几个实际生活中的例子：电梯楼层指示灯：电梯中的楼层指示灯通过显示当前楼层，用户随时可以知道电梯到达哪个楼层，避免不必要的焦虑。通过清晰的反馈，乘客了解电梯的运行状态。手机电量提示：智能手机通过顶部电池图标显示电量，在低电量时弹出警告。这让用户能提前做好准备，如充电或关闭不必要的应用。交通信号灯：信号灯通过灯光的变化，向司机和行人传递明确的交通信息。这是一种典型的可见性原则，帮助人们及时了解何时该停、走或等待。任务实现03任务实现01可见性原则在实践任务中的体现在前三个任务中，我们设计一个“社团管理”网页，其中有一些设计元素符合我们现在所讨论的可见性原则，例如：（1）导航栏：导航栏效果如图，包含“社团简介”“社团部门”“志愿者活动”等选项，每个选项都有明确的链接页面，便于用户能够快速找到相关内容。这个设计符合可见性原则，因为它帮助用户明确可以访问哪些页面。（2）进度条：侧边栏中的志愿者招募进度使用<progress>标签来显示不同活动的进度，且数值越大，颜色越深。这是一种直观的反馈，能够让用户清楚地看到每个活动的进展，这非常符合可见性原则，因为通过可视化的元素展示了信息状态。（3）表单反馈，亟需升级：当前网页的表单部分缺乏即时反馈，用户提交信息后，页面没有告知提交结果，容易让用户感到困惑。建议添加提交后的确认提示框，或者在表单下方加入实时验证功能，让用户一目了然地知道哪些字段填写正确，哪些需要修改。我们可以利用AI编程助手（如“通义灵码”）生成相应的CSS代码，让表单输入框在没有内容或者填入格式有误的时候出现颜色反馈（通常为红色）或文字提示。如左右两图所示：任务实现02可见性原则的业内最佳实践在网页设计中，许多优秀平台都很好地遵循了可见性原则，通过清晰的视觉反馈（如图2-3-5所示）和明确的状态提示来提升用户体验。接下来将结合具体网页案例，分析这些平台在不同功能和页面中是如何应用可见性原则的（1）淘宝购物车状态反馈：淘宝用户将商品加入购物车时，系统立即显示购物车图标上的数字变化，同时伴有商品添加成功的提示，通常还带有动画效果。这种反馈可以让用户清楚地知道操作已成功执行，而不会产生“是否操作成功”的疑惑。如图中的反馈运用了可见性原则，让用户能立即确认自己的操作得到了系统的响应。任务实现（2）淘宝订单进度反馈：淘宝的订单详情页面直观地展示了订单的处理流程：从“等待付款”到“等待发货”“已发货”“交易成功”“交易关闭”等，如图所示，每一个步骤都有清晰的标识和状态说明，关于如何实现支付功能，我们将在模块8的技能补强中进行讲解和实践。发货之后，通过物流跟踪的实时信息，用户能够轻松地知道商品当前的位置和预计送达时间，消除不必要的担忧。（3）微信、QQ的消息状态提示：微信在消息发送过程中提供了多个状态反馈，比如图2-3-9、图2-3-10和图2-3-12中的“上传中”“你撤回了一条消息”以及“已发送”等。通过这些反馈，用户能够实时了解消息的传送情况，特别是在网络不佳的情况下，微信会显示一个红色的感叹号提示消息发送失败。这种即时的反馈非常符合可见性原则，使用户能够清楚地了解系统状态，并知道如何处理可能出现的问题。思考与练习一、填空题1.在HTML5中，使用<metacharset="（）">来指定字符编码，以确保网页能够正确显示多种语言的字符。2.（）标签通常用于定义网页的导航区域，它能帮助用户快速找到网站的主要内容。3.（）标签用于定义文档中的一个区域，通常是一个主题部分。4.（）标签可以用来表示任务的进度，显示一个可视化的进度条，例如志愿者时长录入的进度。5.在HTML5表单中，<inputtype="（）">允许用户选择文件进行上传。二、判断题1.HTML5文档类型声明<!DOCTYPEhtml>可确保浏览器以标准模式渲染页面。（）2.<footer>标签用来定义网页的主要内容区域。（）3.required属性用于声明某个表单输入框为必填项。（）4.<progress>标签用于表示任务的进度，通常使用value和max属性来指定当前进度和最大值。（）5.<figure>标签为图片等提供容器，并通过<figcaption>提供文字说明。（