HTML 属性
了解如何使用属性为元素添加额外信息
HTML 属性 是 CoddyKit 上的免费 HTML for Kids 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML for Kids 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML for Kids 课程共包含 4 节课。
多媒体：添加视频和音频
欢迎来到下一课！今天，我们将学习如何向网页添加视频和音频。多媒体可以让页面更具互动性，也更有趣！
为什么要添加多媒体？
视频和音频可以让您的网页：
- 更具吸引力
- 内容丰富且有趣
- 更具互动性
让我们学习如何使用 HTML 添加它们吧！
添加视频
视频使用 <video> 标签添加。您可以使用 src 属性指定视频文件。
示例：
在此示例中：
src：指定视频文件。controls：添加播放、暂停和音量控制功能。width：设置视频宽度。
<video src="example.mp4" controls width="400"></video>
添加多种视频格式
并非所有浏览器都支持相同的视频格式。您可以使用 <source> 标签添加多个来源。
示例：
<video controls width="400">
<source src="example.mp4" type="video/mp4">
<source src="example.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
添加音频
音频使用 <audio> 标签添加。您可以使用 src 属性指定音频文件。
在此示例中：
src：指定音频文件。controls：添加播放、暂停和音量控制功能。
<audio src="example.mp3" controls></audio>
添加多种音频格式
与视频类似，您可以添加多个音频来源，以便更好地兼容不同浏览器。
示例：
<audio controls>
<source src="example.mp3" type="audio/mpeg">
<source src="example.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
自动播放和循环播放
您可以添加 autoplay 和 loop 属性，让视频和音频自动播放或循环播放。
示例：
注意：出于用户体验方面的考虑，某些浏览器可能会禁用自动播放。
<audio src="example.mp3" autoplay loop></audio>
嵌入 YouTube 视频
您可以使用 <iframe> 标签在网页中嵌入 YouTube 视频。
示例：
将 example 替换为视频的唯一 ID。
<iframe width="560" height="315" src="https://www.youtube.com/embed/example" frameborder="0" allowfullscreen></iframe>
做得很好！
恭喜您！您已经学会了如何向网页添加视频、音频，甚至嵌入 YouTube 视频。多媒体可以让内容更加生动并吸引人。在下一课中，我们将深入学习使用 CSS 设置样式，让网页看起来更加出色。准备好探索设计的世界吧！
常见问题解答
「HTML 属性」课时是免费的吗？
是的 — 「HTML 属性」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML for Kids 课程的其余内容，请升级到 CoddyKit PRO。 HTML for Kids 课程共包含 4 节课。
「HTML 属性」这节课中我会学到什么？
了解如何使用属性为元素添加额外信息 你通过在浏览器中直接运行的动手代码来练习 HTML for Kids，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML for Kids 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML for Kids 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「HTML 属性」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML for Kids 课中编写并运行代码吗？
能。每节 HTML for Kids 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 表格：整理数据
- 表单：收集用户输入
- HTML 属性
- 多媒体：添加视频和音频