1-2 如鱼得水-使用交互式语义化标签让访问更自然

汇报人：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="图片">相对路径的特点：较为灵活，根据当前文件的位置自动调整。绝对路径分为物理绝对路径、网络绝对路径两种。物理绝对路径：指计算机磁盘的真实位置（一般带有真实盘符），