HTML 零基础教程：图像与视频嵌入指南

静态的文本网页缺乏吸引力。通过 HTML 引入图像和视频，是让您的网站变得生动有趣的关键！本教程将介绍如何使用 <img> 标签嵌入图片，以及如何使用 video 标签嵌入视频文件。

一、 图像的嵌入：<img> 标签

<img> 标签是 HTML 中用于在网页上嵌入图像的元素。请注意，<img> 是一个空标签（Self-closing Tag），它没有闭合标签，所有信息都通过属性定义。

1. 核心属性

src图像源。 指定图像文件的路径（URL）。src="logo.png"

alt替代文本。 当图像无法显示时（例如网络错误或用户使用屏幕阅读器）显示的描述文字。alt="网站标志"

width宽度。 定义图像的显示宽度（通常以像素 px 为单位）。width="300"

height高度。 定义图像的显示高度（通常以像素 px 为单位）。height="200"

2. src 属性的路径设置（本地或 CDN）

图像的路径设置与链接的路径设置类似：

• 本地图片（相对路径）： 如果您的图片文件存放在网站服务器上。

  • 示例： src="images/banner.jpg" ( 图片在 images 文件夹内 )

• 网络图片（绝对路径）： 如果图片托管在图床或内容分发网络（CDN）上。

  • 示例： src="https://cdn.example.com/photo/2025/photo1.jpg"

3. 示例代码

<img src="images/sunset.jpg" alt="一张美丽的日落照片" width="600" height="400">

<img src="https://example.com/logo.png" alt="公司 Logo" title="点击查看大图">

💡 重要提示：alt 属性 alt 文本对于 SEO（搜索引擎优化）和无障碍访问至关重要。请始终为您的图像添加有意义的描述。

二、 视频的嵌入：<video> 标签

要在 HTML5 网页中嵌入视频文件，我们使用 <video> 标签。这是一种比传统 Flash 播放器更现代、更兼容的方式。

1. 核心属性

controls显示播放器控件。 添加播放 / 暂停、音量、进度条等控件。controlssrc视频源。 直接指定视频文件路径（或 URL）。

src="video/intro.mp4"autoplay自动播放。 视频加载完成后自动播放（注意：许多浏览器会限制自动播放）。

autoplayloop循环播放。 视频播放结束后自动从头开始。

loopmuted静音。 视频播放时默认静音（常与 autoplay 搭配使用）。

mutedposter封面图。 视频未加载或播放前显示的图片。poster="cover.jpg"

2. 多源格式兼容（推荐）

为了确保视频能在不同浏览器中正常播放（因为不同浏览器支持的视频格式不同），我们通常不直接在 <video> 标签中使用 src，而是使用 <source> 子标签来提供多种格式的视频文件。

• 常用视频格式：

  • .mp4 (MPEG-4, H.264) - 兼容性最好。

  • .webm - 优秀的开源格式。

3. 示例代码

<video width="800" controls poster="images/video_cover.jpg">
    <source src="video/intro_hd.mp4" type="video/mp4">
    
    <source src="video/intro_hd.webm" type="video/webm">
    
    您的浏览器不支持 HTML5 video 标签，请升级或更换浏览器。
</video>

总结与实践建议

• 图像： 始终使用 <img> 标签，并确保 alt 属性不为空。

• 视频： 使用 <video> 标签，务必添加 controls 属性，否则用户将无法控制播放。