HTML5网页制作与前端开发（AI协同）课件 模块1-5 HTML5基础与标签 构建Web世界的基石 -CSS动画-以创意呈现流动的画卷_第1页
HTML5网页制作与前端开发（AI协同）课件 模块1-5 HTML5基础与标签 构建Web世界的基石 -CSS动画-以创意呈现流动的画卷_第2页
HTML5网页制作与前端开发（AI协同）课件 模块1-5 HTML5基础与标签 构建Web世界的基石 -CSS动画-以创意呈现流动的画卷_第3页
HTML5网页制作与前端开发（AI协同）课件 模块1-5 HTML5基础与标签 构建Web世界的基石 -CSS动画-以创意呈现流动的画卷_第4页
HTML5网页制作与前端开发（AI协同）课件 模块1-5 HTML5基础与标签 构建Web世界的基石 -CSS动画-以创意呈现流动的画卷_第5页
已阅读5页，还剩261页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

零号任务磨刀不误砍柴工——配置Web开发环境与AI助手任务说明01本任务将搭建一个高效的开发环境。通过精心配置代码编辑器、扩展插件和AI助手（如“通义灵码”），打造一个使用起来得心应手的开发工具链，具体要求如下。（1）安装适合开发的代码编辑器——VisualStudioCode。（2）为代码编辑器添加有助于HTML5开发的扩展。（3）调整代码编辑器的基本设置，优化开发体验。（4）使用AI助手生成志愿服务队招新页面示例。（5）在你搭建的环境中运行志愿服务队招新页面，确保运行一切正常。零号任务任务说明知识准备0201开发与调试的核心工具：浏览器03插件与快捷键02代码编辑器目录1.开发与调试的核心工具：浏览器知识准备

在HTML5开发中，浏览器不仅是用来查看页面的工具，更是开发和调试的必备利器。以下是两款广泛使用的浏览器：（1）MicrosoftEdge：Edge基于Chromium引擎，具备快速的加载速度和良好的兼容性。它与Windows系统深度整合，适合Windows用户进行前端开发和测试。（2）GoogleChrome：Chrome是广受欢迎的浏览器，内置的开发者工具如元素检查、控制台和网络调试功能强大，适合前端开发者进行代码调试和性能优化。建议：开发HTML5项目时，推荐同时使用Edge和Chrome浏览器进行测试。以这种双浏览器测试策略能帮助我们及早发现兼容性问题。2.代码编辑器VisualStudioCode知识准备

VSCode是开源代码编辑器，支持多平台，因其丰富的插件和语言支持，成为开发者首选工具之一。安装建议：推荐将VSCode安装在非系统盘，以免影响系统性能。在安装过程中勾选“附加任务”选项，确保VSCode与操作系统的命令行工具和快捷方式集成。3.插件与快捷键VSCode的插件生态系统可以帮助开发者适应各种开发需求。选择合适的插件可大幅提高工作效率。让我们通过安装中文语言包插件的例子，来说明VSCode插件的安装过程，具体步骤如下：知识准备注意：虽然插件可以大幅增强VSCode的功能，但安装过多插件可能导致编辑器运行缓慢。建议仅安装必需的插件，并定期清理不再使用的扩展。一些对HTML开发有帮助的插件如下：VSCode插件与插件介绍视图知识准备快捷键设置快捷键设置是提升开发效率的关键手段。VSCode允许根据个人习惯自由配置快捷键或调整默认设置。修改快捷键：在菜单栏依次单击“文件”>“首选项”>“键盘快捷方式”，即可查看并自定义快捷键。设置常用快捷键：为常用操作（如“打开文件夹”“保存文件”“运行任务”）分配更高效的键位组合。搜索快捷键：不确定某功能的快捷键时，可使用快捷键界面顶部的搜索框快速查找。导入/导出快捷键配置：VSCode支持导入或导出快捷键配置，方便在多台设备间同步使用。任务实现03任务实现询问AI助手：任务实现启动本地服务器：在VSCode中，右击HTML文件编辑区域，选择OpenwithLiveServer，或直接单击界面右下角的GoLive按钮。修改并查看效果谢谢大家汇报人：xxx时间：2026汇报人：xxx时间：2026一号任务脉络分明——构建志愿者服务队招新页面01任务说明任务说明一号任务有了得力的工具，现在让我们开始构建第一个真实的HTML页面。在本任务中，你将创建一个生动的志愿服务队招新页面。通过巧妙运用HTML元素和语义化标签，打造结构清晰、内容丰富的页面。具体要求如下。（1）使用VSCode创建HTML文件，并通过Emmet插件生成基础HTML模板。（2）在页面中添加标题、段落、水平分割线、无序列表和页脚信息等内容。（3）合理组织页面内容，逐步构建结构，确保页面元素逻辑清晰、层次分明。知识准备0201HTML基本概念03文本内容标签02网页语义化设计原则目录04表格标签1.HTML基本概念知识准备什么是HTML？HTML定义了页面的结构和内容，使得浏览器能够正确解析和显示网页。HTML可视为页面的“骨架”，负责文字、图片、视频等内容的排列和显示。标签与元素的定义标签是HTML元素的标识符，用于指示浏览器如何解释和展示内容。标签使用尖括号“<>”包裹，通常包含开始和结束标签。【例】段落示例<p>这是一个段落。</p>标签与元素的特殊情况空元素是指其内没有内容或结束标签，这些元素通常在开始标签中关闭。常见的空元素<br>：插入换行<hr>：插入水平分割线<img>：嵌入图片<input>：定义输入字段<link>：定义文档与外部资源的关系HTML文档基本结构HTML文档由一系列嵌套的元素组成，这些元素定义了Web文档的结构和内容。元素与标签HTML元素是页面的构建块，用于定义文档的结构、内容和功能。一个元素通常由一对标签及其包裹的内容组成。1.HTML基本概念知识准备一个基本的HTML文档包含以下部分:<!DOCTYPEhtml>声明：告诉浏览器这是一个HTML5文档。<metacharset="UTF-8">：定义文档的字符编码。<html>元素：根元素，包含整个页面的内容。<head>元素：包含文档的元数据，如标题、字符编码等（不在页面中显示）。<title>：设置浏览器标签页显示的标题。<body>元素：包含所有可见的页面内容，如文本、图像、链接等。在VSCode中，输入英文“!”并按下“Tab”或“Enter”键，即可快速生成一个基本的HTML模板(如图)。这是VSCode自带的Emmet插件提供的展开缩写功能，支持多种快捷操作。2.网页语义化设计原则知识准备语义化设计是HTML5的核心理念。选择标签时应基于内容含义而非视觉效果，以确保网页内容既对人类用户友好，也便于机器理解和处理。核心原则语义化设计价值内容优先选择标签应基于内容实际含义，如使用<strong>表达重要性，而非仅为视觉效果。这提高了代码意义并助于搜索引擎理解内容重要程度。结构清晰合理标签嵌套能准确表达内容关系，如同文档大纲般呈现层级关系，提升可访问性和可维护性。兼容性使用HTML5新标签时需考虑不同浏览器和设备支持情况，为关键内容提供降级方案。易维护语义化HTML结构应自描述，即使无样式也能展现清晰结构和功能，便于维护和团队协作。提升网页的可访问性，让更多用户受益改善搜索引擎优化效果，提高网站的可见度简化代码维护工作，提高开发效率增强文档的可读性，便于团队协作3.文本内容标签：基础文本标签知识准备在HTML中，“语义化”是指使用恰当的HTML元素来表达内容的结构和含义，而不仅仅是展示效果。一个语义化的HTML文档，能够清晰地传达以下的信息。内容的类型（如标题、段落、列表等）内容的重要程度（如主标题与副标题的区分）内容之间的关系（如章节的从属关系）基础文本标签标题标签<h1>到<h6>列表标签<ul>、<ol>、<li>段落标签<p>文本样式标签<strong><small><em><mark><del>3.文本内容标签：扩展文本标签知识准备HTML5提供一系列具有特定语义的文本标签，这些标签不仅用于展示效果，更重要的是明确地传达内容的结构和含义，以提升文档的可访问性、可维护性和搜索引擎优化效果。利用AI助手提问：向网页或插件中的AI助手提问“请详细介绍HTML5扩展文本标签，包括它们的语义用途、适用场景和示例代码。请按照文本格式化、引用类和其他实用标签分类说明，并提供具体的使用建议。”如右图所示4.表格标签知识准备在语义化HTML设计中，表格标签用于展示行列数据，是HTML中展示结构化数据的重要工具。它使数据更有条理，便于搜索引擎和屏幕阅读器理解。注意：表格仅用于展示数据，不要用作页面布局。表格标签表格的基础构成单元格控制语义化的表格结构表格设计规范表格的基本结构由一系列具有特定语义的标签组成，每个标签都有其明确的用途。<table>：表格容器，定义整个表格的范围。<tr>：（tablerow）定义一行单元格的集合。<td>：（tabledata）包含表格的实际数据。<th>：（tableheader）用于定义列或行的标题。基本表格结构示例：<tableborder="1">

<tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>19</td> </tr></table>4.表格标签知识准备在语义化HTML设计中，表格标签用于展示行列数据，是HTML中展示结构化数据的重要工具。它使数据更有条理，便于搜索引擎和屏幕阅读器理解。注意：表格仅用于展示数据，不要用作页面布局。表格标签表格的基础构成单元格控制语义化的表格结构表格设计规范表格支持通过属性实现单元格的横向和纵向合并，合并单元格时应注意保持数据的逻辑关系。colspan：指定单元格横向合并的列数。rowspan：指定单元格纵向合并的行数。4.表格标签：语义化的表格结构知识准备为更好地表达表格的语义结构，HTML提供一系列专门的结构化标签，以便从根本上提升表格的可读性和可访问性。表格标题表格的主要结构区域列的组织结构列组容器<colgroup>用于设定一组列的共同属性，它必须出现在<caption>之后，其他内容之前。列定义标签<col>作为<colgroup>的子元素，通过span属性可以指定连续的列数。这种结构设计有助于统一管理列的样式和属性。表格标题使用<caption>标签定义，它应紧随<table>标签之后。一个语义化的标题能清晰地表明表格的用途。<table><caption>2024年第一学期期末考试成绩单</caption> <!--表格其他内容--></table>表格一般分为表头、主体和底部三个结构区域，使表格内容的逻辑层次更加清晰。每个区域由特定标签定义。

表头区域<thead>：包含表格的列标题信息，表头内的单元格使用<th>标签定义，通常是表格的第一个结构部分。<thead> <tr>

<th>课程名称</th>

<th>成绩</th>

<th>学分</th> </tr></thead>

主体区域<tbody>：包含表格的主要数据内容，是表格的核心部分，可以包含多个<tr>行，具体单元格使用<td>标签存放数据。<tbody>

<tr>

<td>Web前端开发</td>

<td>92</td>

<td>3.0</td>

</tr></tbody>

底部区域<tfoot>：通常用于展示汇总或统计信息，如总计、平均分等。位置固定：无论<tfoot>在代码中的位置如何，浏览器都会将其渲染到表格的最底部。<tfoot>

<tr>

<td>平均分</td>

<td>89.5</td>

<td>总学分：12.0</td>

</tr></tfoot>4.表格标签知识准备在语义化HTML设计中，表格标签用于展示行列数据，是HTML中展示结构化数据的重要工具。它使数据更有条理，便于搜索引擎和屏幕阅读器理解。注意：表格仅用于展示数据，不要用作页面布局。表格标签表格的基础构成单元格控制语义化的表格结构表格设计规范①结构完整性规范表格必须包含完整的<table>标签结构，并使用<caption>标签声明表格标题。应通过<thead>、<tbody>和<tfoot>标签明确划分表格的不同功能区域。数据之间应具有明确的行列关系和逻辑关联性，避免出现空单元格。②语义化规范表头内容必须使用<th>标签，数据单元格则使用<td>标签。在需要时，应适当使用“colspan”和“rowspan”属性进行单元格合并。任务实现03任务实现创建HTML文件并生成基础模板添加内容元素组织页面内容查看效果使用VSCode创建一个HTML文档，例如demo02.html，然后进行下列操作。输入英文的“!”后按Tab键，一键生成基本的HTML文档结构。将文档语言属性<htmllang="en">改为<htmllang="zh">。为页面设置标题，如<title>郁金香志愿服务队招新</title>。标题：在<body>标签内添加主标题和副标题。段落文本：插入介绍性文本。水平分割线：使用<hr>标签添加页面的分割线，便于结构分层。无序列表：包含常规活动和社会实践等内容。页脚信息：使用<small>标签添加版权信息。主要内容分为“关于我们”“我们的使命”“加入我们”3个部分，用副标题标签<h2>来划分。使用适当的标签强调重要信息，如使用<strong>标签突出关键词。保存后，使用LiveServer或直接用浏览器打开编辑好的HTML文档，查看页面效果。任务实现<h1>欢迎加入郁金香志愿服务队！</h1><p>又是一年一度的开学季，初入校园的大家，是否感到一丝迷茫？别担心，穿着红色马甲的学长学姐会为你指明方向！</p><hr/><h2>关于我们</h2><p>郁金香志愿服务队成立于2012年，隶属于深圳XX职业技术大学计算机与软件学院。我们的目标是用<strong>爱心服务社会</strong>。</p><h3>常规活动</h3><ul> <li><strong>大运地铁志愿者：</strong>向路人指路，维护秩序。</li> <li><strong>爱子乐志愿者：</strong>整理阅读馆书籍，传播知识。</li> <li><strong>书香志愿者：</strong>提供良好的学习环境。</li> <li><strong>进社区：</strong>为社区小朋友传播人文、科学知识。</li></ul><h3>精彩社会实践回顾</h3><ul> <li><strong>暑期社会实践：</strong>追寻先辈足迹，传承丝路精神。</li> <li><strong>IT助农帮扶团：</strong>精准识别扶贫对象，推动科技助农。</li></ul><h2>我们的使命</h2><p><strong>帮助他人，服务社会。</strong></p><p>志愿者们将以无私奉献、团结友爱的精神，为每位需要帮助的人传递爱与关怀。</p><hr/><h2>加入我们</h2><p>经过十年的努力，郁金香志愿服务队获得多项荣誉。优秀的你，难道不心动吗？</p><h3>你能获得的</h3><ul> <li><strong>丰富的经验：</strong>参与多样化的活动。</li> <li><strong>结交新朋友：</strong>与志同道合的伙伴共同成长。</li></ul><p>这里将是你的新起点、新舞台，我们在<strong>郁金香志愿服务队</strong>等你！</p><small>©2024郁金香志愿服务队。保留所有权利。</small>谢谢大家汇报人：xxx时间：2026汇报人：xxx时间：2026二号任务如鱼得水——使用交互式语义化标签让访问更自然01任务说明任务说明二号任务文字是传递信息的基础，图像和视频则能够通过视觉效果增强内容的表现力。在本任务中，你将学习如何恰到好处地在页面中融入多媒体元素，就像画家在画布上调配色彩一样，通过创建更加丰富、多样化的页面内容把静态的志愿服务队招新页面变成一个富有吸引力的互动平台。具体要求如下。（1）在“关于我们”部分下方添加两张图片展示团队工作日常。设置每张图片的宽度与高度。为每张图片添加说明（替换文本与鼠标指针悬停提示文本）。（2）在“加入我们”标题下方插入团队文化视频。视频尺寸：宽为600像素，高为400像素。添加基本播放控件（播放、暂停、全屏等）。设置MP4格式类型描述。知识准备0201多媒体标签03相对路径与绝对路径02HTML5常见标签属性目录1.多媒体标签：图像展示知识准备

<img>标签

作用：用来插入图片，是一个自闭合标签。基本用法：

基本属性src：定义图像文件的路径或URL。这是<img>标签中必需的属性，否则图像不会显示。width和height：设定图像的宽度和高度，帮助浏览器快速计算布局，避免加载时页面抖动。title：提供鼠标悬停时显示的提示文本，增强用户体验。loading：控制图像加载时机；设置.为lazy实现延迟加载，提高页面加载速度。【例1-2-1】使用<img>标签。<imgsrc="./img/小鹅.jpg"alt="小鹅"width="300"height="400"title="点击查看详情"loading="lazy">1.多媒体标签：多媒体播放器与媒体资源管理知识准备1234<audio>标签用于在Web页面中嵌入和播放音频内容常用的属性如下。src：指定文件的URL或路径。controls：显示默认的播放控件（如播放/暂停按钮、进度条等）。autoplay：设置音频在页面加载后自动播放。loop：媒体文件播放结束后自动重新开始。muted：设置媒体文件默认静音。width：定义音频播放器的宽度；由于音频播放器通常不需要高度，因此没有height属性。preload：控制音频文件何时应该被加载，其属性值有以下几种。

none：不预加载音频。

metadata：只预加载足以显示播放时长的信息。

auto：预加载整个音频文件。1.多媒体标签：多媒体播放器与媒体资源管理知识准备1234<video>标签

用于在Web页面中嵌入和播放视频内容。<audio>和<video>标签共享一些属性，包括controls（用于显示播放控件）、autoplay（使媒体文件自动播放）、loop（循环播放媒体文件）、muted（默认静音）以及preload（定义页面加载时是否预加载视频内容）。其他特定属性如下。width和height：定义视频播放器的尺寸。poster：定义视频开始播放前显示的图像路径。1.多媒体标签：多媒体播放器与媒体资源管理知识准备1234<source>标签在实际应用中，为保证多媒体文件能在不同浏览器和设备上播放，我们通常会提供多种格式的文件。这时，就需要使用<source>标签来为<audio>或<video>提供多个文件格式选项。常用的属性如下。src：定义媒体文件的路径。type：定义媒体文件的MIME（MultipurposeInternetMailExtensions，多用途互联网邮件扩展）类型，如：audio/mpeg（MP3音频）、audio/wav（WAV音频）、video/quicktime（QuickTime视频）等以通知浏览器媒体文件的格式。1.多媒体标签：多媒体播放器与媒体资源管理知识准备1234<track>标签用于向<video>或<audio>添加字幕、章节标记等文本轨道。常用的属性如下。src：定义字幕或章节文件路径。srclang：定义轨道语言。label：定义轨道的标题或描述。kind：定义轨道类型，如subtitles，表示字幕。default：指示浏览器自动启用此轨道。1.多媒体标签：嵌入内容知识准备<embed>和<object>标签用于在页面中嵌入外部资源<embed>主要用于嵌入插件内容<object>则用于嵌入可执行文件或应用程序

不过，<iframe>因其更好的安全性和灵活性，已成为嵌入外部内容的主流选择。随着HTML5标准的广泛应用，这两个标签的使用频率已大幅降低。现代Web开发更倾向于使用HTML5原生的<video>和<audio>标签来实现多媒体功能，它们提供了更好的安全性、跨平台兼容性和用户体验。2.HTML5常见标签属性知识准备属性说明属性值/类型class定义一个或多个类名字符串id定义唯一的标识符，用于CSS选择器或JavaScript引用字符串title显示工具提示信息字符串style内联样式定义字符串（CSS样式规则）tabindex指定元素的tab顺序整数lang定义元素语言字符串（CSS样式规则）contenteditable表示该元素的内容是否可编辑true/false或者省略为truedraggable表示元素是否可拖拽true/falsespellcheck表示是否启用拼写检查true/falsetranslate表示是否应翻译该元素的内容yes/nohidden隐藏元素无值（仅存在即有效）(1)属性与属性值的写法(2)全局属性属性通常包含在开始标签的尖括号内，属性名称和属性值之间用等号（=）分隔，而属性值通常用英文双引号（""）引起来。当一个HTML标签上有多个属性时，需要用空格来隔开。如<imgsrc="image.jpg"alt="描述信息">。HTML5中定义的全局属性（GlobalAttribute）也被称为通用属性，它们可以被应用到所有HTML元素上。这些属性提供了与特定文档类型无关的功能。常见的全局属性如表所示。3.相对路径与绝对路径知识准备在HTML5中，相对路径与绝对路径的本质意义在于提供一种机制，使得文档能够准确地引用到所需的资源，如图片、样式表、脚本或其他页面。相对路径是相对于当前文件的位置来指定其他文件的位置。用法（相对于当前目录）如下。①当前目录：./或直接文件名<imgsrc="./image.jpg"alt="图片">或<imgsrc="image.jpg"alt="图片">②上一级目录：../<imgsrc="../image.jpg"alt="图片">③同级目录：../其他目录/访问与当前目录同级的其他目录。<imgsrc="../images/image.jpg"alt="图片">④多级目录：../../多次使用../每个“../”表示回退一级目录。<imgsrc="../../images/image.jpg"alt="图片">⑤子目录：子目录/文件名访问当前目录下的子目录及其他目录。<imgsrc="images/image.jpg"alt="图片">相对路径的特点：较为灵活，根据当前文件的位置自动调整。绝对路径分为物理绝对路径、网络绝对路径两种。物理绝对路径：指计算机磁盘的真实位置（一般带有真实盘符），如“D:/HTML/HTML/绝对路径.html”。网络绝对路径：指网络中的完整的地址，例如百度官方网址路径：“/”。绝对路径的特点：不依赖于当前文件的位置，在任何环境中指向相同的目标位置。任务实现03任务实现在网页中添加多媒体元素的过程：任务实现具体页面效果具体示例代码：谢谢大家汇报人：xxx时间：2026技能补强各司其职——动静分离与图床资源优化汇报人：xxx时间：202601技能知识技能知识技能补强二号任务中的图像与多媒体元素引用的资源文件都存放在本地文件（本地服务器）中，这种方式在项目初期阶段能够快速满足开发需求，但在后续开发过程中，随着多媒体内容的增加，使用这种方式会带来带宽消耗大、存储空间有限以及维护成本增高等问题。特别是当访问量上升时，服务器压力增大会导致加载速度变慢。由此需要探索更为高效且稳定的解决方案，下面将介绍新的概念——动静分离原则，以及如何通过图床来优化图片资源文件处理。动静分离原则技能知识动静分离是服务器架构中的重要优化技术，核心理念是将静态资源（图片、CSS、JavaScript文件等）与动态内容【服务器端脚本生成的页面内容、API（ApplicationProgramInterface,应用程序接口）响应等】分开处理。这种策略能显著提升应用的性能和可伸缩性。动静分离的核心优势：提高加载速度

静态资源可被缓存在CDN（ContentDeliveryNetwork,内容分发网络）或用户浏览器中，减少重复下载操作，大幅提升加载速度。服务器减压

静态资源请求不占用服务器计算资源，使服务器能专注处理动态内容，减轻服务器整体负担。保护隐私

可为图片设置访问权限，保障个人隐私安全。增强安全性

分离处理模式能更好地保护网站，有效防止敏感信息泄露。CDN技术技能知识CDN通过全球分布的服务器节点缓存网站静态资源，使用户能从距离最近的节点（而非远程主服务器）获取内容显著提升了访问速度和用户体验。现代图床服务通常集成DNS（DomainNameService,域名系统）和CDN技术，进一步优化图片加载速度和可靠性，是动静分离原则的实际应用。想要深入理解CDN技术原理，建议探索以下问题。。CDN如何通过地理分布节点提升内容传输速度？相比源服务器直接传输，CDN为何能有效减少资源加载时间?本书后续将介绍CSS、JavaScript等前端技术。如果对“CDN”“服务器”“API请求”等专业概念有疑问，可随时查阅专业文档或使用AI助手获取详细解释。图床服务的优势与应用场景技能知识(1)图床是专门用于存储和管理图片的网络服务或平台，能高效管理和分发图片资源。这种专业化的存储方式让网页图片管理具有多重优势。(2)图床服务的企业级与个人化应用：主要用途描述分享图片通过图床链接分享图片，无须考虑服务器带宽或存储限制。节省资源显著减轻原始服务器存储和传输图片的压力。图片管理提供专业工具帮助用户管理图片，包括创建相册、搜索图片、编辑图片等功能。保护隐私可设置图片访问权限，有效保护个人隐私。技能实践02技能实践1.应用图床服务要掌握图床服务的实际应用，可以向AI助手提出以下具体问题，获取详细操作指南。“如何使用免费、免登录的图床服务上传图片并获取外部链接？请提供一个完整的HTML页面示例，其中包含一个图片展示区域，只需替换图片链接地址即可直接使用。”如果发现生成的操作指南过于简略，可以进一步追加请求：“请提供更详细的上传步骤和代码说明”，以获取更全面的技术指导。2.从简易到专业免费图床服务的使用流程通常相对简单，适合初学者和临时需求。这类服务一般提供直观的上传界面，完成几步操作即可获取图片链接，便于在网页中嵌入使用。若有更专业的需求，如构建企业级图床系统，可以考虑使用阿里云对象存储服务（ObjectStorageService，OSS）等专业云存储平台。这类平台提供更强大的功能和更高的稳定性，但同时也需要进行更专业的配置。在这种情况下，同样可以借助AI助手获取更具针对性的专业建议和配置指南，包括权限设置、域名绑定、CDN加速配置等高级功能的实现方法。无论选择哪种方案，图床服务都能有效优化网页图片资源管理，提升网站性能和用户体验。思考与练习一、填空题1.HTML文档的基本结构由______声明、______根元素、______元信息区和______内容区组成。2.在HTML标签中，______到______标签用于定义不同级别的标题，数字越大，标题级别越低。3.为了提供图片的替代文本，应在图片标签中使用______属性，当图片无法显示时，浏览器会显示该属性中的文本。4.在HTML5中，______属性用于为音频和视频元素显示播放控件，而______属性则使媒体在页面加载后自动播放。5.使用______引用资源文件时，路径是相对于当前文档的位置，而使用______则是从根目录或完整URL开始定位资源。二、判断题1.在HTML5中，<video>标签需要结束标签，而<img>标签是自闭合标签，不需要结束标签。（）2.HTML5提供的语义化标签如<strong>和<em>在视觉效果上与<b>和<i>相同，但前者有明确的语义用途。（）3.在构建表格时，必须使用<thead>、<tbody>和<tfoot>标签来划分表格的不同区域，否则表格无法正常显示。（）4.当使用相对路径引用资源时，“../”表示回退到父级目录，而“./”或直接文件名表示当前目录。（）5.使用图床服务存储图片可以减轻网站服务器负担，但会降低图片加载速度。（）三、选择题1.在HTML5中，以下哪个标签是自闭合标签？（）A.<div>

B.<p>

C.<hr>

D.<h1>2.以下哪种元素组合最适合表示网页中的重要警告信息？（）A.<em>警告内容</em>

B.<strong>警告内容</strong>

C.<mark>警告内容</mark>

D.<small>警告内容</small>3.在HTML表格中，要实现一个单元格横跨两列，应使用哪个属性？（）A.rowspan="2"

B.colspan="2"

C.span="2"

D.width="2"4.要在HTML页面中插入一个可循环播放的视频，以下代码中正确的是？（）A.<videosrc="video.mp4"autoplay></video>

B.<videosrc="video.mp4"loop></video>C.<videosrc="video.mp4"controlsloop></video>

D.<videosrc="video.mp4"muted></video>5.以下关于动静分离原则的描述，错误的是？（）A.动静分离可以提高网站加载速度

B.静态资源通常包括图片、CSS和JavaScript文件

C.CDN技术常用于加速静态资源的分发

D.动静分离会增加服务器的计算负担请同学们注意

：填空题重点考查HTML文档结构、标签属性及路径引用规范；判断题聚焦标签语法特性与语义功能；选择题侧重元素应用场景及属性实践。一、填空题<!DOCTYPE><html><head><body><h1><h6>altcontrolautoplay相对路径绝对路径二、判断题√√×（（表格可以正常显示，但使用这些标签有助于结构和可访问性））√×（图床通常通过CDN加速，可能提高加载速度）三、选择题CBBCD谢谢大家汇报人：xxx时间：2026零号任务各就各位——确定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>提供文字说明。（）三、选择题1.HTML5文档类型声明的正确形式是：（

）A.<!DOCTYPEhtml5> B.<!DOCTYPEhtml> C.<!DOCTYPEHTML5> D.<!DOCTYPEhtml5.1>2.以下哪一个标签用于定义网页的头部区域，通常包含标题、导航菜单等内容？（

）A.<footer> B.<main> C.<header> D.<section>3.在HTML5中，哪个标签用于表示可以展开的内容块？（

）A.<details> B.<article> C.<nav> D.<section>4.使用

<mark>标签时，通常是为了：（

）A.使文本突出显示

B.创建进度条

C.显示图片

D.提供链接跳转5.在HTML5表单中，<inputtype="email">的作用是：（

）A.验证输入的电子邮件格式

B.提供电子邮件链接

C.输入电话号码

D.输入搜索关键词请同学们注意

：填空题的考查重点为深入理解HTML5语义化标签的规范用法及其字符编码设置；判断题的核心在于分析HTML5标签功能与属性的核心特性；选择题的关键则是判别标签的实际应用场景及标准化语法。一、填空题UTF-8navsectionprogressfile二、判断题√×（<footer>用于定义页脚，主要内容区域用<main>）√√×（<figure>通常包含媒体内容，如图片、图表）三、选择题BCAAA谢谢大家汇报人：xxx时间：2026零号任务一叶知秋——从开发者工具认识样式汇报人：xxx时间：2026任务说明01本模块需要对模块1、模块2完成的页面进一步优化，在本任务中，需要根据一致性原则首先完成页面结构的优化和基础样式的添加，具体如下。 （1）检查并优化HTML文档结构，确保所有标签使用正确，嵌套合理，符合语义化标准。 （2）为页面中的关键元素添加合适的id和类名。 （3）使用元素选择器、类选择器和id选择器为页面元素添加基础样式。 （4）使用浏览器开发者工具的“元素”视图检查和验证样式是否正确应用。零号任务任务说明知识准备0201层叠样式表CSS02开发者工具目录1.CSS核心原理知识准备CSS是一种用于描述HTML或XML文档呈现方式的样式表语言，“多个样式可以应用到同一个元素上，而且有一定的优先级。CSS的规则主要由两个部分组成：①选择器（Selector）：选择器用于指定你想要设置样式的HTML元素，例如p选择所有段落，.class选择特定类，#id选择特定id的元素。②声明块（DeclarationBlock）：用花括号“{}”包围，包含一个或多个声明。每个声明都是一个“属性:值”对，用来定义元素的具体样式。属性和值之间用冒号“:”分隔，每个声明后面以分号“;”结束。示例：1.CSS核心原理知识准备CSS选择器是CSS规则的一部分，用于“选择”要应用样式的HTML元素。常见的CSS选择器如下：元素选择器：直接使用HTML标签名类选择器：使用点号（.）前缀ID选择器：使用井号(#)前缀属性选择器：根据元素的属性或属性值来选择元素伪类选择器：用于定义元素的特殊状态通用选择器：通用选择器“*”用于匹配页面中所有的元素，朝阳用来进行全局样式的初始化或重置p{ color:blue; }#mainTitle{ color:green; font-size:24px; text-align:center; }.read-more:hover{ background-color:#2c5ea3; }.highlight{ border:2pxsolidred;//添加一个2像素宽的红色实线边框 }[title]{ color:red; }*{box-sizing:border-box; margin:0; padding:0;}1.CSS核心原理知识准备思考浏览器会优先执行哪个选择器的样式？是什么机制决定了这种顺序？CSS继承是指某些样式属性会自动从父元素传递给子元素的机制。这使得我们可以在父元素上定义一些通用样式，而不必为每个子元素重复定义这些样式。【例】继承父级元素的颜色和字体样式这个样式不仅会应用到<div>元素，还会被<div>内的所有文本元素继承，除非这些元素有自己的特定样式覆盖。1.CSS核心原理知识准备层叠规则：当多个规则应用于同一个元素时，浏览器如何决定应用哪个规则1）CSS层叠顺序优先级从最低到最高的4个主要层次：2）当存在多个规则且优先级相同时，浏览器会按照以下顺序来决定应用哪个规则

规则的特异性（Specificity）：选择器越具体，优先级越高。

规则的出现顺序：如果两个规则具有相同的特异性，那么后出现的规则优先级高。浏览器默认样式：浏览器提供的默认样式普通样式表：开发者编写的普通样式表!important声明：带有!important声明的样式用户代理样式表：用户自定义的样式表1.CSS核心原理知识准备CSS优先级规则：用于确定多个可能应用于同一HTML元素的CSS规则中，选择器都有权重值，权重值越大，优先级越高，并且权重值会叠加，决定最终应用的样式。权重的计算是根据选择器的类型和数量来确定的。在同一类型的选择器中，选择器的数量越多，权重值越高。①当权重值相等时，后定义的样式表的优先级要高于先定义的样式表。②在同一组属性设置中标有!important规则的优先级最高。

内联样式表的权重值最高，值为1000id选择器的权重值为100类选择器、属性选择器和伪类的权值为10元素选择器的权重值为1通配符选择器的权重值为02.开发者工具知识准备“元素”面板浏览器开发者工具中的“元素”面板是前端开发中最常用的工具之一，它帮助开发者检查和修改页面的HTML代码和CSS代码DOM是HTML文档的一种表示方式。页面中每个部分（如标签、文本等）都是树的一个节点：

a)根节点：树的顶端是一个根节点，对应于<html>标签。它是整个HTML文档的起点，包含所有其他元素。

b)分支和子节点：从根节点开始，向下延伸出多个分支，每个分支代表一个子元素。

c)叶子节点：指没有任何子元素的节点，处于树结构的最底层。2.开发者工具知识准备“元素”面板浏览器开发者工具中的“元素”面板是前端开发中最常用的工具之一，它帮助开发者检查和修改页面的HTML代码和CSS代码③”元素”面板主要部分a)HTML结构视图：展示当前页面的DOM树结构，即页面上所有HTML元素的层次关系：查看元素、编辑元素、查找元素。b)CSS样式面板：显示选中元素所应用的所有CSS规则及其优先级。包含的功能有：查看样式、编辑样式、添加新样式、调试样式。c)计算样式：显示浏览器最终应用到选中元素上的所有CSS属性和值。包含的功能有：查看计算样式、调试样式冲突。2.开发者工具知识准备“控制台”面板是前端开发者进行调试和测试代码的重要工具。它不仅可以输出错误信息和警告，还允许开发者直接运行代码来测试功能、查询DOM节点、修改页面状态等，下面是该面板常见的用途。①查看错误和警告 “控制台”面板会显示代码执行过程中产生的错误和警告信息，这些信息对于找出代码中的bug非常有用。开发者可以通过错误信息了解问题的具体位置和出现原因，从而更快地解决问题。②DOM操作 DOM操作是指通过编程手段对页面元素进行创建、修改、删除等操作的过程。通过前面的内容我们知道，任何页面元素都可以看作一个节点。在“控制台”面板中，可以通过代码进行DOM操作，比如选择特定的元素、修改元素的内容或属性等。任务实现03任务实现01页面结构调整：打开模块1完成的页面并且在开发者工具中查看页面结构是否合理。此时会发现页面缺乏一些更具有语义性的标签。（1）整体布局控制 ①增加<main>标签包裹主要内容并添加类名main-content。 ②将原来的<h1>、<p>和<hr/>标签移动到<main>标签内部。 ③添加内容块到<main>标签内部。 （2）主要部分的分块 ①对“关于我们”“我们的使命”“加入我们”内容块使用<section>标签进行分块。 ②分别为每个部分添加类名section，便于后续样式化。 （3）页脚内容包裹 ①将<small>标签改为<p>标签，内容不变。 ②使用<footer>标签来包裹页脚内容（包含两个<p>标签）。02类名命名：给元素添加相关的类名便于分组处理，合理的类名设计能够提高代码的可维护性和可扩展性。层级关系标签类名<main>标签下的段落中<p>highlight-text在<main>标签内的第一个<section>标签中<div>gallery<ul>listactivity-list在<main>标签内的第一个<section>标签中的<div>标签内<img>gallery-image在<main>标签内的第一个<section>标签中的<ul>标签的每个<li>元素内每个<span>highlight-text在<main>标签内的第二个<section>标签中<p>highlight-text在<main>标签内的第三个<section>标签中<ul>listbenefit-list在<main>标签内的第三个<section>标签中的<ul>标签的每个<li>元素内每个<span>highlight-text在<footer>标签内的段落中的链接元素中<a>link任务实现03在<head>标签内插入<style>标签后，在内部添加如下样式任务实现谢谢大家汇报人：xxx时间：2026一号任务万紫千红——用CSS统一色彩管理汇报人：xxx时间：2026任务说明01本任务将实现页面的统一色彩管理，具体任务如下。 （1）定义并合理运用全局变量，确保其在项目中的有效性和一致性。 （2）为自定义的类添加样式，并在适当的地方引用全局变量，以此增强样式的统一性和组件的复用性。一号任务任务说明知识准备0201现代CSS特性03全局属性目录02CSS变量04文字排版与过渡效果06颜色搭配与设计05透明度07CSS命名规范1.

现代CSS特性知识准备现代CSS特性是指近年来随着Web标准和技术的发展，CSS中引入的一系列新功能和改进。主要包括CSS变量、Flexbox和Grid布局、文字排版与过渡效果、透明度控制、命名规范和模块化管理，这些特性提升了CSS的灵活性、可维护性和响应性。本模块先介绍部分特性，后续模块再介绍Flexbox和Grid布局等。2.CSS变量CSS变量也被称为自定义属性（CustomProperties），允许存储一个值并在整个文档中重复使用，有如下特点。

允许设置颜色或尺寸等值，在多个地方使用在一处更改变量值，影响所有引用了该变量的地方类似于编程中的变量，便于统一管理和修改样式3.使用:root定义全局属性知识准备:ROOT：是一种伪类（可以询问AI助手什么是伪类），代表文档的根元素，在HTML中就是<html>元素。通过:root定义的CSS变量可以被整个文档中的任何元素访问。在:root中定义变量就像是给整个网站设置了一个共享的“工具箱”，里面装着颜色、尺寸等常用值。【例】CSS变量定义主要字体大小和次要颜色这种做法能最大程度提高CSS的代码复用性，实现样式统一管理的需求。4.文字排版与过渡效果知识准备文字排版：文字排版涉及字体的选择、大小、行距、字间距等属性的设置，如表所示，以确保文本的可读性和美观性。类型属性描述示例属性值字体和字形font-family指定字体族'Arial'、sans-serif、'TimesNewRoman'、seriffont-size设置字体大小16px、1em、1remfont-weight设置字体粗细Normal、bold、100、200font-style设置字体样式，如斜体Normal、italic、obliqueline-height设置行高1.5、1.2em、20px文本对齐和方向text-align设置文本的水平对齐方式Left、right、center、justifytext-indent设置首行缩进2em、10pxdirection设置文本的方向Ltr、rtl文本装饰和阴影text-decoration设置文本的下划线、删除线等装饰效果none、underline、overline、line-throughtext-shadow添加文本阴影2px2px4pxrgba(0000.5)字间距和行间距letter-spacing设置字符之间的间距2px、0.1emword-spacing设置单词之间的间距4px、0.2em这套文字排版样式用body选择器实现，针对HTML文档主体设置样式；因<body>标签包含几乎所有可见元素，无更具体规则时，body样式可满足全局文字排版需求。现代CSS有字体控制、文本变换等高级排版技术，能提升文本可读性与视觉吸引力，还支持可访问性和响应式设计，确保文本在不同设备良好显示，更多信息可通过AI助手了解。4.文字排版与过渡效果知识准备hover效果通过:hover伪类来定义超链接（或任何其他元素）在鼠标指针悬停时的样式效果。超链接的hover效果是指当鼠标指针悬停在链接上时发生的样式变化，可以是颜色改变、下划线消失等。【例】定义鼠标指针悬停时超链接的样式规则5.透明度及其应用知识准备透明度可以用来创建半透明或完全透明的效果，从而增强网页的设计感、提升用户体验。涉及的CSS属性主要包括opacity属性、rgba和hsla颜色值。4.文字排版与过渡效果参数描述取值范围red红色分量0~255green绿色分量0~255blue蓝色分量0~255alpha透明度0.0~1.0参数描述取值范围hue色调0~360saturation饱和度0%~100%lightness亮度0%~100%alpha透明度0.0~1.01）opacity属性用于设置一个元素的整体透明度。它的取值范围是0到1，其中0表示完全透明，1表示完全不透明。2）rgba和hsla颜色值，允许为颜色添加透明度通道。控制颜色的透明程度，就像是在画布上叠加一层半透明的颜色。这两个颜色值都可以用来设置任何接受颜色值的CSS属性，如color、background-color、border-color等。Rgba和hsla的参数如下表：5.透明度及其应用知识准备透明度的应用3种透明度属性或属性值的适用场景不同，分别如下。

Opacity属性适用于设置整个元素的透明度，尤其适用于hover效果和背景遮罩。

rgba

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论