HTML媒体标签

定义#

<a> 标签用于创建超链接，用户点击后可跳转到指定 URL。它是 Web 导航的核心元素。

语法/用法#

1
<a href="https://news.cctv.com/" target="_blank">央视网</a>

1
a {
2
    text-decoration: none;
3
}

常见场景#

• 页面导航菜单
• 外部链接跳转
• 页面内锚点跳转：<a href="#section-id">跳转到某节</a>
• 下载链接：<a href="file.pdf" download>下载文件</a>

注意事项#

• href 为必填属性，不填则链接不可点击（仅作锚点占位）
• target="_blank" 存在安全风险（新页面可通过 window.opener 操作原页面），建议搭配 rel="noopener noreferrer"
• 相对路径与绝对路径的选择参考 文件路径表示

定义#

<img> 标签用于在 HTML 页面中嵌入图片。它是一个自闭合标签（空元素），通过 src 属性指定图片源。

语法/用法#

1
<img src="img/1.png" alt="图片描述" width="100%">

常见场景#

• 新闻配图、产品展示图
• 图标、Logo 展示
• 轮播图、相册
• 响应式图片：结合 CSS max-width: 100% 防止图片溢出容器

注意事项#

• alt 属性对 SEO 和可访问性至关重要，应准确描述图片内容
• 仅设置 width 或 height 之一，浏览器会自动按比例缩放另一维度
• 大图片应进行压缩优化，避免影响页面加载速度

定义#

<video> 标签用于在 HTML 页面中嵌入视频内容，支持播放本地或网络视频文件。

语法/用法#

1
<video src="video/news.mp4" controls width="80%"></video>

常见场景#

• 新闻视频、产品演示视频
• 背景视频、宣传片嵌入
• 在线课程视频播放
• 响应式视频：结合 CSS 实现自适应

注意事项#

• 浏览器对视频格式支持不同（MP4、WebM、Ogg），可提供多个源文件：

  1
  <video controls>
  2
    <source src="video.mp4" type="video/mp4">
  3
    <source src="video.webm" type="video/webm">
  4
    您的浏览器不支持 video 标签
  5
  </video>

• autoplay 可能被浏览器阻止，需配合 muted 使用
• 移动端浏览器对自动播放有更严格的限制