https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure
https://developer.mozilla.org/zh-CN/docs/learn/HTML/Introduction_to_HTML/%E6%96%87%E4%BB%B6%E5%92%8C%E7%BD%91%E7%AB%99%E7%BB%93%E6%9E%84
1. HTML 中的图片
语法：
<img src="图片路径" alt=" 替换图片的文字描述" >
其他属性：
- title 提示文字
- width
- height
- 不应该使用HTML属性来改变图片的大小。
尺寸设定太大，图片看起来会模糊；太小，会在下载远远大于你需要的图片时浪费带宽。 - 在把图片放到你的网站页面之前，你应该使用图形编辑器使图片的尺寸正确。
- 需要改变图片的尺寸，应该使用CSS而不是HTML。
给图片加标题
使用 figure ， figcaption
<figure>
<img src="images/dinosaur.jpg" alt=" this is a dinosaur"
width="200"
height="171"
title="曼彻斯特大学博物馆展出的一只霸王龙的化石"
>
<figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>
figure 里可以是除一张图片外的其他独立内容单元，如 多张图片，音视频，一段代码，方程，表格等
CSS 背景图片
使用 css 把图片嵌入到网站设置成背景图片
为所有的段落设置一个背景图片 ：
p {
background-image: url("images/dinosaur.jpg")
}
音频和视频
用到的标签： <audio> <video>
<video>
语法
<video src="视频资源来源" controls>
当浏览器不支持 <video> 标签的时候，就会显示这段内容，不如 一个指向该视频的链接
</video>
controls 添加浏览器的播放控件
也可以自己创建播放界面，界面中至少要包含开始、停止以及调整音量的功能。
举例：
<video src="rabbit.webm" controls >
<p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
使用多个播放源以提高兼容性
<video controls>
<source src="rabbit320.mp4 " type = "video/mp4" >
<source src=" rabbit320.webm" type="video/webm">
</video>
- 每个
<source>标签页含有一个type属性，这个属性是可选的，但是建议你添加上这个属性 - type 包含了视频文件的 MIME types ，同时浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。
- 如果你没有添加
type属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，这样会消耗掉大量的时间和资源。
容器格式 Media container formats (file types)
定义了构成媒体文件的音频轨道和视频轨道的储存结构，
其中还包含描述这个媒体文件的元数据，以及用于编码的编码译码器等等。
常见的媒体容器格式
MPEG-4 (MP4)
QuickTime Movie (MOV),
Wavefile Audio File Format (WAV).
MP3, Ogg, WebM （Web Media）, AVI
一个格式为 WebM 的电影包含视频轨道，音频轨道和文本轨道
- 为了编解码器（codec）编码媒体，容器中的音频和视频轨道以适合的格式保存。
- 音频轨道和视频轨道使用不同的格式。
- 每个音频轨道都使用音频编解码器进行编码，而视频轨道则使用视频编解码器进行编码。
- 不同的浏览器支持不同的视频和音频格式，以及不同的容器格式（如MP3、MP4和WebM，这些格式又可以包含不同类型的视频和音频）
其他 video 属性
<video controls width="400" height="400"
loop muted preload="auto"
poster="poster.png">
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>
-
width height
设置视频的尺寸，也可以用 CSS 来控制 -
autoplay
自动播放，不建议在网站上使用 -
loop
循环播放，不建议使用 -
muted
静音播放，默认关闭声音 -
poster
指向了一个图像的URL， 这个图像会在视频播放前显示。（类似专辑封面）
不能同时加 autoplay ， 否则就看不到poster的效果了 -
preload
预加载，这个属性被用来缓冲较大的文件，有 3 个值可选 ：
- none 不缓冲
- auto 页面加载后缓存媒体文件
-metadata 仅缓冲文件的元数据
audio
audio 标签与video 标签的使用方式几乎完全相同。
<audio>
<>
<source src="viper.ogg" type="audio/ogg">
<source src="viper.mp3" type= "audio/mp3">
</audio>
audio 因为没有视觉部件，所以不支持跟视觉部件相关的属性， weight ，height ， poster， 其他的video 属性都支持。
显示音轨文本
WebVTT 格式，用 <track> 标签
WebVTT 用来编写文本文件，该文件包含众多字符串，字符串会带一些元数据，描述该字符串在视频中显示的时间，或字符串定位信息和样式。
常见的样式有：
-
subtitles
添加翻译字幕 -
captions
同步翻译对白，或描述一些重要声音 -
timed descriptions
将文字转换为音频
让webVVT 文件和 HTML 媒体一起显示，需要做的工作：
- 以 .vtt 后缀名保存文件
- 用 track 标签链接 .vtt 文件
track 标签需放在 audio ， video 标签当中 ， 且在所有 source标签之后 。
用 kind 属性指明是哪一种类型，如 subtitles ， captions ， descriptions
使用 srclang 来告诉浏览器你是用什么语言来编写的subtitles。
<video>
<source src="example.mp4" type="video/mp4">
<source src ="example.webm" type="video/webm">
<track kind="subtitles" src="subtitles.vvt" srclang="de">
</video>
网友评论