本筆記記于2021年，摘自MDN HTML板塊
1.搜索引擎也讀取圖像的文件名并把它們計(jì)入SEO
2.<img>和<video>
有時(shí)被稱之為替換元素，因?yàn)檫@樣的元素的內(nèi)容和尺寸由外部資源（像是一個(gè)圖片或視頻文件）所定義，而不是元素自身
3.需要備選文本(alt添加描述文字)
- 用戶有視力障礙弄捕，通過屏幕閱讀器來瀏覽網(wǎng)頁
- 圖片的路徑或文件名拼錯(cuò)
- 瀏覽器不支持該圖片類型
某些用戶仍在使用純文本的瀏覽器，例如Lynx，這些瀏覽器會(huì)把圖片替換為描述文本 - 想提供一些文字描述來給搜索引擎使用妥曲，例如搜索引擎可能會(huì)將圖片的文字描述和查詢條件進(jìn)行匹配
- 用戶關(guān)閉的圖片顯示以減少數(shù)據(jù)的傳輸
4.使用 <figure>和<figcaption>
為圖片提供一個(gè)語義容器，在標(biāo)題和圖片之間建立清晰的關(guān)聯(lián)
5.video視頻
當(dāng)中的一些屬性如下:
- src：同
<img>標(biāo)簽使用方式相同钦购，src屬性指向想要嵌入網(wǎng)頁當(dāng)中的視頻資源檐盟，他們的使用方式完全相同 - controls：用戶必須能夠控制視頻和音頻的回放功能
可以使用controls來包含瀏覽器提供的控件界面，同時(shí)也可以使用合適的 JavaScript API創(chuàng)建自己的界面
界面中至少要包含開始押桃、停止以及調(diào)整音量的功能
<video> 標(biāo)簽內(nèi)的內(nèi)容
叫做后備內(nèi)容
當(dāng)瀏覽器不支持 <video> 標(biāo)簽的時(shí)候葵萎，就會(huì)顯示這段內(nèi)容，能夠?qū)εf的瀏覽器提供回退內(nèi)容
可以提供一個(gè)指向這個(gè)視頻文件的鏈接怨规，從而使用戶至少可以訪問到這個(gè)文件陌宿，而不會(huì)局限于瀏覽器的支持
音頻播放器將會(huì)直接播放音頻文件，例如 MP3 和 Ogg 文件
新的特性：
width波丰，height壳坪，設(shè)置的尺寸沒有保持視頻原始長寬比，那么視頻邊框?qū)?huì)拉伸掰烟，而未被視頻內(nèi)容填充的部分爽蝴，將會(huì)顯示默認(rèn)的背景顏色
- autoplay，這個(gè)屬性會(huì)使音頻和視頻內(nèi)容立即播放纫骑，即使頁面的其他部分還沒有加載完全
- loop蝎亚，這個(gè)屬性可以讓音頻或者視頻文件循環(huán)播放
- muted，這個(gè)屬性會(huì)導(dǎo)致媒體播放時(shí)先馆，默認(rèn)關(guān)閉聲音
- poster发框，指向了一個(gè)圖像的URL，這個(gè)圖像會(huì)在視頻播放前顯示
通常用于粗略的預(yù)覽或者廣告 - preload煤墙，這個(gè)屬性被用來緩沖較大的文件梅惯，有3個(gè)值可選：
"none" ：不緩沖
"auto" ：頁面加載后緩存媒體文件
"metadata" ：僅緩沖文件的元數(shù)據(jù)
6.audio音頻（<audio>標(biāo)簽支持所有<video> 標(biāo)簽擁有的特性 ）
-
<audio>標(biāo)簽不支持width/height屬性 — 由于其并沒有視覺部件宪拥，也就沒有可以設(shè)置width/height的內(nèi)容 - 同時(shí)也不支持 poster 屬性 — 同樣，沒有視覺部件
- 任何時(shí)候铣减，都可以在 Javascript 中調(diào)用
load()方法來重置媒體
如果有多個(gè)由<source>標(biāo)簽指定的媒體來源她君，瀏覽器會(huì)從選擇媒體來源開始重新加載媒體 - 可以監(jiān)控媒體元素中的音頻軌道，當(dāng)音軌被添加或刪除時(shí)葫哗，可以通過監(jiān)聽相關(guān)事件來偵測到
具體來說缔刹，通過監(jiān)聽AudioTrackList對(duì)象的addtrack事件（即HTMLMediaElement.audioTracks對(duì)象），可以及時(shí)對(duì)音軌的增加做出響應(yīng)
const mediaElem = document.querySelector("video");
mediaElem.audioTracks.onaddtrack = function(event) {
audioTrackAdded(event.track);
}
WebVTT 是一個(gè)格式劣针，用來編寫文本文件校镐，這個(gè)文本文件包含了眾多的字符串，這些字符串會(huì)帶有一些元數(shù)據(jù)酿秸，它們可以用來描述這個(gè)字符串將會(huì)在視頻中顯示的時(shí)間灭翔，甚至可以用來描述這些字符串的樣式以及定位信息
<dl>
<dt>subtitles</dt>
<dd>通過添加翻譯字幕，來幫助那些聽不懂外國語言的人們理解音頻當(dāng)中的內(nèi)容</dd>
<dt>captions</dt>
<dd>同步翻譯對(duì)白辣苏，或是描述一些有重要信息的聲音肝箱，來幫助那些不能聽音頻的人們理解音頻中的內(nèi)容</dd>
<dt>timed descriptions</dt>
<dd>將文字轉(zhuǎn)換為音頻，用于服務(wù)那些有視覺障礙的人</dd>
</dl>
<video controls>
<source src="example.mp4" type="video/mp4">
<source src="example.webm" type="video/webm">
<track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>
讓其與 HTML 媒體一起顯示稀蟋，需要做如下工作：
1). 以 .vtt 后綴名保存文件
2). 用 <track>標(biāo)簽鏈接 .vtt 文件煌张， <track> 標(biāo)簽需放在 <audio> 或 <video> 標(biāo)簽當(dāng)中，同時(shí)需要放在所有 <source> 標(biāo)簽之后
使用 kind屬性來指明是哪一種類型退客，如 subtitles 骏融、 captions 、 descriptions
然后萌狂，使用 srclang來告訴瀏覽器是用什么語言來編寫的 subtitles
文本軌道會(huì)使網(wǎng)站更容易被搜索引擎抓取到 SEO档玻， 由于搜索引擎的文本抓取能力非常強(qiáng)大，使用文本軌道甚至可以讓搜索引擎通過視頻的內(nèi)容直接鏈接
7.其他嵌入技術(shù)
在網(wǎng)頁中嵌入各種內(nèi)容類型的元素：
<iframe>茫藏，用于嵌入其他網(wǎng)頁
<embed> 误趴，<object> ，兩個(gè)元素則允許嵌入PDF务傲，SVG凉当，甚至Flash
iframe基本要素：
allowfullscreen，全屏模式（稍微超出本文的范圍）
frameborder售葡，如果設(shè)置為1看杭，則會(huì)告訴瀏覽器在此框架和其他框架之間繪制邊框，這是默認(rèn)行為
0刪除邊框
不推薦這樣設(shè)置挟伙，因?yàn)樵贑SS中可以更好地實(shí)現(xiàn)相同的效果
border``: none;
src楼雹，指向要嵌入文檔的URL路徑
width，height，指定iframe的寬度和高度
備選內(nèi)容：在<iframe></iframe>標(biāo)簽之間包含備選內(nèi)容烘豹，如果瀏覽器不支持<iframe>瓜贾，將會(huì)顯示備選內(nèi)容，這種情況下携悯，我們已經(jīng)添加了一個(gè)到該頁面的鏈接
現(xiàn)在幾乎不可能遇到任何不支持<iframe>的瀏覽器
sandbox，該屬性需要在已經(jīng)支持其他<iframe>功能（例如IE 10及更高版本）但稍微更現(xiàn)代的瀏覽器上才能工作筷笨，該屬性可以提高安全性設(shè)置
不應(yīng)該同時(shí)添加allow-scripts和allow-same-origin到sandbox屬性中-在這種情況下憔鬼，嵌入式內(nèi)容可以繞過阻止站點(diǎn)執(zhí)行腳本的同源安全策略，并使用JavaScript完全關(guān)閉沙盒
HTTPS
HTTPS減少了遠(yuǎn)程內(nèi)容在傳輸過程中被篡改的機(jī)會(huì)胃夏，
HTTPS防止嵌入式內(nèi)容訪問父文檔中的內(nèi)容轴或，反之亦然
插件是一種對(duì)瀏覽器原生無法讀取的內(nèi)容提供訪問權(quán)限的軟件
8.矢量圖
矢量圖形在很多情況下非常有用 — 它們擁有較小的文件尺寸，卻高度可縮放仰禀，所以它們不會(huì)在鏡頭拉近或者放大圖像時(shí)像素化
位圖和矢量圖:
- 位圖使用像素網(wǎng)格來定義 — 一個(gè)位圖文件精確得包含了每個(gè)像素的位置和它的色彩信息
流行的位圖格式包括 Bitmap (.bmp), PNG (.png), JPEG (.jpg), and GIF (.gif.) - 矢量圖使用算法來定義 — 一個(gè)矢量圖文件包含了圖形和路徑的定義照雁，電腦可以根據(jù)這些定義計(jì)算出當(dāng)它們在屏幕上渲染時(shí)應(yīng)該呈現(xiàn)的樣子
SVG格式可以讓我們創(chuàng)造用于 Web 的精彩的矢量圖形
矢量圖形相較于同樣的位圖，通常擁有更小的體積答恶，因?yàn)樗鼈儍H需儲(chǔ)存少量的算法饺蚊，而不是逐個(gè)儲(chǔ)存每個(gè)像素的信息
svg是什么
SVG是用于描述矢量圖像的XML語言
SVG用于標(biāo)記圖形，而不是內(nèi)容
9.響應(yīng)式圖片
ＰぁＮ酆簟！需要反復(fù)查閱實(shí)踐
我們可以使用img兩個(gè)新的屬性——srcset和 sizes——來提供更多額外的資源圖像和提示包竹，幫助瀏覽器選擇正確的一個(gè)資源
<img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
<picture>讓我們能繼續(xù)滿足老式瀏覽器的需要
