东月的文档站

Appearance

Return to top
On this page

图像标签

html
<img
  src="图像URL"
  alt="图像无法显示时的替代文本"
  title="鼠标悬停时显示的文本"
/>
  • src：图片路径（必须属性）
  • alt：替换文本
  • title：提示文本
  • width / height：设置宽高

超链接

基本语法

html
<a href="链接目标" target="打开方式">文本或图像</a>

核心属性

属性说明
href链接目标的 URL（必须）
target_self（当前窗口）/ _blank（新窗口）

常见链接类型

外部链接（必须带 http:// 或 https://）：

html
<a href="http://www.baidu.com">百度</a>

内部链接：

html
<a href="/about.html">关于我们</a>

下载链接：

html
<a href="files/document.pdf" download>下载文档</a>

空链接（占位测试用）：

html
<a href="#">空链接</a>

图片链接：

html
<a href="http://example.com">
  <img src="image.jpg" alt="描述" />
</a>

锚点链接（页面内跳转）：

html
<h2 id="two">第二部分</h2>
<a href="#two">跳到第二部分</a>

注意事项

  • 外部链接必须写全协议，否则会被识别为相对路径
  • 使用 target="_blank" 时建议加 rel="noopener noreferrer" 防止安全风险

视频

html
<video src="movie.mp4" controls width="600">
  您的浏览器不支持 video 标签。
</video>

多格式兼容写法：

html
<video controls width="600" poster="cover.jpg">
  <source src="movie.mp4"  type="video/mp4">
  <source src="movie.webm" type="video/webm">
  您的浏览器不支持 HTML5 视频。
</video>

常用属性：

属性说明
controls显示播放控件
autoplay自动播放（需配合 muted）
loop循环播放
muted静音
poster预览图
width / height播放器宽高

音频

html
<audio src="music.mp3" controls>
  您的浏览器不支持 audio 标签。
</audio>

多格式兼容：

html
<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
</audio>

常见音频格式：MP3（兼容性最广）、Ogg、WAV、AAC。

Track 字幕

html
<video controls width="700">
  <source src="video.mp4" type="video/mp4">
  <track src="subs-zh.vtt" kind="subtitles" srclang="zh-CN" label="中文" default>
  <track src="subs-en.vtt" kind="subtitles" srclang="en" label="English">
</video>

核心属性：

属性说明
src.vtt 文件 URL
kindsubtitles / captions / descriptions / chapters / metadata
srclang语言代码（如 zh-CN）
label轨道标题
default默认启用

WebVTT 文件示例（.vtt）：

WEBVTT
00:00:00.000 --> 00:00:03.500
欢迎收看本教程
00:00:04.000 --> 00:00:07.200
今天我们来学习 HTML 的 track 标签

媒体通用注意事项

  • 多数浏览器不允许带声音自动播放，除非设置 muted
  • 为最大兼容性，建议同时提供 MP4/MP3 和 WebM/Ogg 版本
  • 可通过 JavaScript 控制播放：video.play() / video.pause()