本笔记记于2021年，摘自MDN HTML板块
1.搜索引擎也读取图像的文件名并把它们计入SEO
2.![]()
有时被称之为替换元素，因为这样的元素的内容和尺寸由外部资源（像是一个图片或视频文件）所定义，而不是元素自身
3.需要备选文本(alt添加描述文字)
- 用户有视力障碍，通过屏幕阅读器来浏览网页
- 图片的路径或文件名拼错
- 浏览器不支持该图片类型
某些用户仍在使用纯文本的浏览器，例如Lynx，这些浏览器会把图片替换为描述文本 - 想提供一些文字描述来给搜索引擎使用，例如搜索引擎可能会将图片的文字描述和查询条件进行匹配
- 用户关闭的图片显示以减少数据的传输
4.使用
为图片提供一个语义容器，在标题和图片之间建立清晰的关联
5.video视频
当中的一些属性如下:
- src：同
src属性指向想要嵌入网页当中的视频资源，他们的使用方式完全相同 - controls：用户必须能够控制视频和音频的回放功能
可以使用controls来包含浏览器提供的控件界面，同时也可以使用合适的 JavaScript API创建自己的界面
界面中至少要包含开始、停止以及调整音量的功能
标签内的内容
叫做后备内容
当浏览器不支持 标签的时候，就会显示这段内容，能够对旧的浏览器提供回退内容
可以提供一个指向这个视频文件的链接，从而使用户至少可以访问到这个文件，而不会局限于浏览器的支持
音频播放器将会直接播放音频文件，例如 MP3 和 Ogg 文件
新的特性：
width，height，设置的尺寸没有保持视频原始长宽比，那么视频边框将会拉伸，而未被视频内容填充的部分，将会显示默认的背景颜色
- autoplay，这个属性会使音频和视频内容立即播放，即使页面的其他部分还没有加载完全
- loop，这个属性可以让音频或者视频文件循环播放
- muted，这个属性会导致媒体播放时，默认关闭声音
- poster，指向了一个图像的URL，这个图像会在视频播放前显示
通常用于粗略的预览或者广告 - preload，这个属性被用来缓冲较大的文件，有3个值可选：
"none" ：不缓冲
"auto" ：页面加载后缓存媒体文件
"metadata" ：仅缓冲文件的元数据
6.audio音频（
-
标签不支持width/height属性 — 由于其并没有视觉部件，也就没有可以设置width/height的内容 - 同时也不支持 poster 属性 — 同样，没有视觉部件
- 任何时候，都可以在 Javascript 中调用
load()方法来重置媒体
如果有多个由 - 可以监控媒体元素中的音频轨道，当音轨被添加或删除时，可以通过监听相关事件来侦测到
具体来说，通过监听AudioTrackList对象的addtrack事件（即HTMLMediaElement.audioTracks对象），可以及时对音轨的增加做出响应
const mediaElem = document.querySelector("video");
mediaElem.audioTracks.onaddtrack = function(event) {
audioTrackAdded(event.track);
}
WebVTT 是一个格式，用来编写文本文件，这个文本文件包含了众多的字符串，这些字符串会带有一些元数据，它们可以用来描述这个字符串将会在视频中显示的时间，甚至可以用来描述这些字符串的样式以及定位信息
- subtitles
- 通过添加翻译字幕，来帮助那些听不懂外国语言的人们理解音频当中的内容
- captions
- 同步翻译对白，或是描述一些有重要信息的声音，来帮助那些不能听音频的人们理解音频中的内容
- timed descriptions
- 将文字转换为音频，用于服务那些有视觉障碍的人
让其与 HTML 媒体一起显示，需要做如下工作：
1). 以 .vtt 后缀名保存文件
2). 用 标签链接 .vtt 文件， 标签需放在 或 ，同时需要放在所有
使用 kind属性来指明是哪一种类型，如 subtitles 、 captions 、 descriptions
然后，使用 srclang来告诉浏览器是用什么语言来编写的 subtitles
文本轨道会使网站更容易被搜索引擎抓取到 SEO， 由于搜索引擎的文本抓取能力非常强大，使用文本轨道甚至可以让搜索引擎通过视频的内容直接链接
7.其他嵌入技术
在网页中嵌入各种内容类型的元素：
标签之间包含备选内容，如果浏览器不支持