HTML，無限可能！
隨在JavaScript日益成為Web開發(fā)的基石，CSS不斷擴(kuò)展其功能邊界的同時(shí)，HTML，雖然表面上似乎保持著穩(wěn)定的步伐，實(shí)際上卻蘊(yùn)含著巨大的潛力和待發(fā)掘的寶藏。為了深入探索HTML的當(dāng)前狀態(tài)與未來趨勢，近期國外博主進(jìn)行 了 State of HTML 2023 的詳盡調(diào)查，并公布了引人注目的調(diào)查報(bào)告。
這份報(bào)告聚焦于一系列新興的 HTML 特性，其廣泛的應(yīng)用和強(qiáng)大的功能令人眼前一亮。本文將不會(huì)詳細(xì)展開整個(gè)調(diào)查報(bào)告，而是聚焦并介紹這些實(shí)用的 HTML 特性，帶你領(lǐng)略 HTML 的無限可能！
查看 State of HTML 2023 調(diào)查報(bào)告：https://2023.stateofhtml.com/
調(diào)查中包含的 HTML 功能和其他瀏覽器 API 使用率如下：
這些特性，你都了解嗎？
位置元素
HTML5 引入的語義化標(biāo)簽（<main>, <nav>, <aside>, <header>, <footer>, <section>）提供了更明確的方式來描述網(wǎng)頁內(nèi)容的結(jié)構(gòu)和含義。
- <main>：表示文檔或應(yīng)用的主體內(nèi)容。它應(yīng)該包含文檔中大部分內(nèi)容，且該內(nèi)容應(yīng)該與文檔的其余部分（如側(cè)邊欄、導(dǎo)航欄、頁腳等）有所區(qū)分。每個(gè)文檔只能有一個(gè)<main>元素，并且它不能被包含在<article>, <aside>, <footer>, <header>, 或 <nav>元素內(nèi)。
- <nav>：表示頁面中的導(dǎo)航鏈接區(qū)域。它通常包含指向文檔中其他部分或網(wǎng)站中其他頁面的鏈接。雖然<nav>元素主要用于鏈接，但它也可以包含描述這些鏈接的標(biāo)題或其他內(nèi)容。
- <aside>：表示與頁面其余部分相關(guān)的補(bǔ)充內(nèi)容，這部分內(nèi)容可以是側(cè)邊欄、廣告、友情鏈接、引述等。<aside>的內(nèi)容應(yīng)該與頁面的主要內(nèi)容分開，但對其有輔助作用。
- <header>：元素表示頁面或頁面某個(gè)區(qū)域的頭部。它通常包含網(wǎng)站的標(biāo)志、標(biāo)題、導(dǎo)航欄或其他引入性內(nèi)容。<header>元素可以包含標(biāo)題、段落、列表、表格、表單等任何元素。
- <footer>：元素表示頁面或頁面某個(gè)區(qū)域的底部。它通常包含版權(quán)信息、聯(lián)系方式、網(wǎng)站地圖鏈接、相關(guān)鏈接等。<footer>元素可以包含頁腳通常包含的元素，如版權(quán)文本、聯(lián)系信息、導(dǎo)航鏈接等。
- <section>：元素表示文檔中的一個(gè)獨(dú)立區(qū)域，比如章節(jié)、頁眉、頁腳或文檔中的其他部分。<section>元素應(yīng)該包含標(biāo)題（<h1>-<h6>元素），但也可以不包含。使用<section>元素可以為內(nèi)容提供上下文，幫助讀者更好地理解文檔的結(jié)構(gòu)。
tabindex 屬性
tabindex 屬性用于指定元素在頁面中的 Tab 鍵焦點(diǎn)順序。通過設(shè)置不同的tabindex屬性值，可以控制元素在使用Tab鍵進(jìn)行導(dǎo)航時(shí)的焦點(diǎn)移動(dòng)順序。
tabindex屬性的值可以是正整數(shù)、0或-1。具體地說：
- 正整數(shù)：指定元素的Tab鍵焦點(diǎn)順序。較小的值將優(yōu)先獲取焦點(diǎn)，相同值的元素將按照它們在DOM樹中的順序獲取焦點(diǎn)。
- 0：將元素添加到Tab鍵焦點(diǎn)順序中，但順序由它們在DOM中出現(xiàn)的位置決定。
- -1：將元素從Tab鍵焦點(diǎn)順序中移除，但仍然可以通過其他方式（如腳本）獲得焦點(diǎn)。
tabindex屬性可以應(yīng)用于所有HTML元素，包括可聚焦的元素（如按鈕、鏈接等）和不可聚焦的元素（如div、span等）。然而，需要注意的是，將tabindex屬性應(yīng)用于不可聚焦的元素可能并不總是符合可訪問性最佳實(shí)踐，因?yàn)檫@樣做可能會(huì)打破用戶的自然導(dǎo)航流程。
一個(gè)常見的例子是自定義的鍵盤導(dǎo)航順序。在HTML中，某些元素（如<button>、<a>、<input>等）默認(rèn)情況下是可以被鍵盤的Tab鍵選中的。但是，如果想要改變這些元素的Tab鍵選中順序，或者讓原本不支持Tab鍵選中的元素（如<div>）也能被選中，就可以使用 tabindex 屬性。
以下是一個(gè)簡單的例子，其中有兩個(gè)按鈕和一個(gè)<div>元素，使用 tabindex 屬性來改變它們的Tab鍵選中順序：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabindex Example</title>
</head>
<body>
<!-- 默認(rèn)情況下，這個(gè)按鈕會(huì)被第一個(gè)Tab鍵選中，因?yàn)樗腄OM順序靠前 -->
<button>Button 1 (Default Tab Order)</button>
<!-- 設(shè)置 tabindex 為 2，所以它會(huì)在 tabindex 為 1 的元素之后被選中 -->
<button tabindex="2">Button 2 (tabindex="2")</button>
<!-- 設(shè)置 tabindex 為 1，所以它會(huì)在默認(rèn)的按鈕之前被選中 -->
<button tabindex="1">Button 3 (tabindex="1")</button>
<!-- 默認(rèn)情況下，div 元素是不能通過Tab鍵選中的，但我們可以設(shè)置 tabindex="0" 使其變得可選 -->
<div tabindex="0" style="border: 1px solid black; padding: 10px; margin: 10px;">
Div Element (tabindex="0") - Now focusable with Tab key
</div>
</body>
</html>在這個(gè)例子中，即使 "Button 3" 在DOM樹中的順序排在最后，但由于它的 tabindex 設(shè)置為1（比 "Button 1" 的默認(rèn)tabindex值小），所以當(dāng)你使用Tab鍵進(jìn)行導(dǎo)航時(shí)，它會(huì)成為第一個(gè)被選中的元素。而 "Button 2" 的 tabindex 設(shè)置為2，所以它在 "Button 1" 和 "Button 3" 之后被選中。最后，<div> 元素由于設(shè)置了 tabindex="0"，也變得可以通過Tab鍵進(jìn)行導(dǎo)航。
loading="lazy"
loading="lazy" 屬性主要用于<img>和<iframe>元素，用于延遲加載圖片或內(nèi)聯(lián)框架（即僅在它們接近視口時(shí)加載）。這有助于減少頁面加載時(shí)的帶寬使用和CPU資源，從而改善頁面性能。
默認(rèn)情況下，當(dāng)瀏覽器加載一個(gè)HTML頁面時(shí)，它會(huì)嘗試立即獲取并加載頁面上所有的圖片和內(nèi)聯(lián)框架。然而，當(dāng)頁面很大或者有很多圖片時(shí)，這可能會(huì)導(dǎo)致性能問題，因?yàn)橛脩艨赡苡肋h(yuǎn)不會(huì)滾動(dòng)到頁面的某些部分，但這些部分的圖片仍然會(huì)被加載。loading="lazy"屬性告訴瀏覽器：“只有在用戶需要時(shí)才加載這個(gè)資源。” 具體來說，當(dāng)圖片或內(nèi)聯(lián)框架在視口外時(shí)，瀏覽器不會(huì)加載它們，但當(dāng)它們即將進(jìn)入視口時(shí)（例如，當(dāng)用戶向下滾動(dòng)頁面時(shí)），瀏覽器會(huì)開始加載它們。
看個(gè)例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazy Loading Example</title>
</head>
<body>
<!-- 使用 loading="lazy" 的圖片 -->
<img src="image1.jpg" alt="Image 1" loading="lazy">
<img src="image2.jpg" alt="Image 2" loading="lazy">
<img src="image3.jpg" alt="Image 3" loading="lazy">
<!-- 假設(shè)這些圖片在頁面的底部，用戶需要滾動(dòng)才能看到它們 -->
<!-- 當(dāng)用戶滾動(dòng)到這些圖片時(shí)，它們才會(huì)開始加載 -->
<!-- 不使用 lazy loading 的圖片（默認(rèn)行為） -->
<!-- 這些圖片在頁面加載時(shí)會(huì)立即開始加載，無論用戶是否需要它們 -->
<img src="always-loaded-image.jpg" alt="Always Loaded Image">
</body>
</html>srcset 和 sizes 屬性
srcset和sizes屬性用于實(shí)現(xiàn)響應(yīng)式圖像。這兩個(gè)屬性允許你提供多個(gè)不同尺寸或分辨率的圖像文件，瀏覽器將根據(jù)設(shè)備的像素密度、視口寬度和其他因素選擇最合適的圖像進(jìn)行加載。
srcset
srcset屬性允許指定一組圖像源，每個(gè)源都帶有一個(gè)描述符（通常是像素密度描述符x或?qū)挾让枋龇鹷）。瀏覽器會(huì)根據(jù)這些描述符和當(dāng)前設(shè)備的特性（如像素密度或視口寬度）來選擇最合適的圖像。例如：
<img src="small.jpg" alt="Responsive Image"
srcset="medium.jpg 1000w, large.jpg 2000w"
sizes="(max-width: 600px) 50vw, 100vw"
>在這個(gè)例子中，srcset屬性指定了兩個(gè)額外的圖像源：medium.jpg和large.jpg。1000w和2000w是寬度描述符，表示這些圖像的寬度。瀏覽器將使用這些信息和sizes屬性來確定應(yīng)該加載哪個(gè)圖像。
sizes
sizes屬性為瀏覽器提供了關(guān)于圖像預(yù)期顯示尺寸的信息。這個(gè)屬性通常與媒體查詢一起使用，以指定不同視口寬度下圖像的尺寸。瀏覽器會(huì)使用這些信息來選擇與srcset屬性中定義的圖像源相匹配的圖像。
在上面的例子中，sizes屬性定義了兩個(gè)尺寸條件：
- 如果視口寬度最大為 600 像素（max-width: 600px），則圖像的寬度為視口寬度的 50%（50vw）。
- 否則，圖像的寬度為視口的 100%（100vw）。
在上面的示例中，瀏覽器會(huì)執(zhí)行以下步驟來選擇要加載的圖像：
- 檢查視口的寬度。
- 根據(jù) sizes 屬性中的媒體查詢確定圖像的預(yù)期尺寸。
- 根據(jù)圖像的預(yù)期尺寸和 srcset 屬性中的描述符選擇一個(gè)最合適的圖像源進(jìn)行加載。
例如，如果視口寬度為 800 像素，瀏覽器將選擇large.jpg圖像進(jìn)行加載，因?yàn)樗膶挾让枋龇?000w）與圖像的預(yù)期尺寸最為匹配。如果視口寬度為 400 像素，瀏覽器可能會(huì)選擇medium.jpg圖像進(jìn)行加載。如果瀏覽器不支持srcset和sizes屬性，它將回退到使用src屬性中指定的圖像（即small.jpg）。
FormData API
FormData API 提供了一種表示表單數(shù)據(jù)的鍵值對集合的方式，并且可以輕松地使用該對象通過JavaScript 發(fā)送表單數(shù)據(jù)。
以下是如何使用FormData API的基本步驟：
- 創(chuàng)建FormData對象：可以使用new FormData()來創(chuàng)建一個(gè)空的FormData對象，或者傳入一個(gè)HTML表單元素（例如<form>）來自動(dòng)獲取表單中的所有數(shù)據(jù)。
// 創(chuàng)建一個(gè)空的FormData對象
const formData = new FormData();
// 使用HTML表單元素
const formData = new FormData(document.getElementById('myForm'));- 添加數(shù)據(jù)：使用append()方法向FormData對象中添加數(shù)據(jù)。該方法接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是鍵名（字段名），第二個(gè)參數(shù)是值。如果指定的鍵名已經(jīng)存在，則新的值將被添加到已存在的值列表中。
formData.append('username', 'John');
formData.append('password', '123456');- 發(fā)送數(shù)據(jù)：在發(fā)送數(shù)據(jù)請求時(shí)，可以將FormData對象作為數(shù)據(jù)參數(shù)傳遞。
// 使用Fetch API
fetch('/submit-form', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch((error) => console.error('Error:', error));autocomplete 屬性
autocomplete 屬性主要用于 <form>、<input>、<select> 和 <textarea> 元素。這個(gè)屬性用于控制瀏覽器是否應(yīng)該自動(dòng)完成表單字段。它基于用戶之前輸入過的值來提供自動(dòng)完成功能。autocomplete 屬性有兩個(gè)可能的值：
- on：這是默認(rèn)值。如果設(shè)置了此值，瀏覽器會(huì)嘗試自動(dòng)完成表單字段。
- off：如果設(shè)置了此值，瀏覽器將不會(huì)為表單字段提供自動(dòng)完成功能。
對于 <input> 元素，autocomplete 屬性特別適用于 text、search、url、telephone、email、password、date、month、week、time、datetime-local、number、range、color 等類型。
例如，如果想禁用一個(gè)文本輸入框的自動(dòng)完成功能，你可以這樣寫：
<input type="text" name="username" autocomplete="off">另外，對于密碼字段，有一個(gè)特殊的值 new-password，當(dāng)設(shè)置為這個(gè)值時(shí)，瀏覽器將不會(huì)為密碼字段提供基于之前密碼的自動(dòng)完成建議。這通常用于新密碼的輸入字段，以防止瀏覽器自動(dòng)填充舊密碼。
和
<details> 和 <summary> 是 HTML5 中引入的兩個(gè)元素，它們通常一起使用，用于創(chuàng)建用戶可以打開和關(guān)閉的交互式小部件，以顯示或隱藏額外的詳細(xì)信息。
- <details> 標(biāo)簽用于定義用戶可見或隱藏的額外細(xì)節(jié)。默認(rèn)情況下，<details> 元素的內(nèi)容是隱藏的，除非設(shè)置了 open 屬性。任何類型的內(nèi)容都可以放在 <details> 標(biāo)簽中。
- <summary> 標(biāo)簽是 <details> 元素的第一個(gè)子元素，并為 <details> 元素定義一個(gè)可見的標(biāo)題。當(dāng)用戶點(diǎn)擊這個(gè)標(biāo)題時(shí)，會(huì)顯示或隱藏 <details> 元素的內(nèi)容。
<details>
<summary>點(diǎn)擊這里查看更多信息</summary>
<p>這是隱藏的詳細(xì)信息。</p>
</details>在這個(gè)示例中，用戶會(huì)看到“點(diǎn)擊這里查看更多信息”這樣的文本。當(dāng)他們點(diǎn)擊這個(gè)文本時(shí)，會(huì)顯示出 <p> 標(biāo)簽中的隱藏內(nèi)容“這是隱藏的詳細(xì)信息?！薄．?dāng)用戶再次點(diǎn)擊標(biāo)題時(shí)，隱藏的內(nèi)容會(huì)再次被隱藏起來。
這種交互方式使得 <details> 和 <summary> 元素在需要顯示額外信息但又不想一開始就顯示所有信息的場景下非常有用。例如，在網(wǎng)頁上展示用戶協(xié)議、隱私政策、幫助文檔等長篇內(nèi)容時(shí)，可以使用這兩個(gè)元素來創(chuàng)建一個(gè)可展開的面板，讓用戶選擇是否查看這些詳細(xì)信息。
自定義元素
HTML 自定義元素是 Web 組件（Web Components）的一部分，它允許定義新的 HTML 元素及其行為。通過自定義元素，可以創(chuàng)建可復(fù)用的、封裝好的組件，這些組件可以在多個(gè)項(xiàng)目中重用，或者通過其他開發(fā)者共享。
定義
自定義元素的定義通常使用 class 擴(kuò)展 HTMLElement、HTMLUnknownElement 或其他 HTML 內(nèi)置元素類。然后，需要調(diào)用 customElements.define() 方法來注冊這個(gè)新元素。
下面是一個(gè)簡單的例子，展示如何定義一個(gè)名為 my-custom-element 的自定義元素：
class MyCustomElement extends HTMLElement {
constructor() {
// 必須首先調(diào)用 super 方法
super();
// 元素的功能代碼...
this.innerHTML = `<p>Hello, I'm a custom element!</p>`;
}
// 可以添加其他方法或?qū)傩?..
}
// 注冊自定義元素
window.customElements.define('my-custom-element', MyCustomElement);使用
一旦注冊了自定義元素，就可以像使用其他 HTML 元素一樣在 HTML 中使用它：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Element Example</title>
<!-- 引入自定義元素的 JavaScript 文件 -->
<script src="my-custom-element.js"></script>
</head>
<body>
<!-- 使用自定義元素 -->
<my-custom-element></my-custom-element>
</body>
</html>注意：
- 自定義元素的名稱必須包含一個(gè)短橫線（-），這是為了避免與現(xiàn)有的和未來的 HTML 元素名稱沖突。
- 在 constructor 中，你必須首先調(diào)用 super() 方法。
- 自定義元素的生命周期回調(diào)（如 connectedCallback、disconnectedCallback、adoptedCallback、attributeChangedCallback）可以在元素的不同階段執(zhí)行特定的操作。
- 自定義元素可以使用 Shadow DOM 來封裝其內(nèi)部結(jié)構(gòu)和樣式，以避免與外部的樣式和腳本沖突。
- 自定義元素可以定義自己的屬性和插槽，以提供更多的功能和靈活性。
資源加載優(yōu)先級
<link> 標(biāo)簽的 rel 屬性值中與資源加載優(yōu)先級相關(guān)的屬性包括：
- prefetch：一種資源提示，告訴瀏覽器在將來可能需要某個(gè)資源，并且希望瀏覽器在空閑時(shí)間預(yù)取它。這可以用于提高頁面加載速度，特別是當(dāng)用戶預(yù)計(jì)會(huì)導(dǎo)航到需要該資源的頁面時(shí)。
<link rel="prefetch" >- preload:一種資源提示，表示瀏覽器應(yīng)該預(yù)加載指定的資源。這通常用于告訴瀏覽器在頁面加載的早期階段就開始下載某些資源，以便在用戶需要時(shí)它們可以更快地可用。通常用于預(yù)取用戶可能會(huì)導(dǎo)航到的下一個(gè)頁面的資源，以便在用戶點(diǎn)擊鏈接時(shí)更快地加載頁面。
<link rel="prefetch" href="path/to/next-page.html">- dns-prefetch：一種鏈接類型，它允許瀏覽器在頁面的其他資源開始加載之前，在后臺執(zhí)行 DNS 查找。這可以加快頁面的后續(xù)加載，特別是當(dāng)頁面中的某些資源位于與頁面不同的域時(shí)。
<link rel="dns-prefetch" >- modulepreload：一種鏈接類型，用于預(yù)加載 ES6 模塊。它告訴瀏覽器在需要該模塊之前就開始下載它，但并不會(huì)立即執(zhí)行。這可以提高模塊的加載速度，尤其是在模塊較大或網(wǎng)絡(luò)條件較差的情況下。
<link rel="modulepreload" href="path/to/module.js">CSP
CSP 全稱為 Content Security Policy，表示**內(nèi)容安全策略，**它是一個(gè)額外的安全層，用于幫助檢測和緩解某些類型的攻擊，包括跨站腳本（XSS）和數(shù)據(jù)注入攻擊。這些攻擊主要用于實(shí)現(xiàn)數(shù)據(jù)竊取、網(wǎng)站破壞或惡意軟件分發(fā)。
CSP的工作原理是允許網(wǎng)站管理員發(fā)送一個(gè)Content-Security-Policy HTTP頭部，這個(gè)頭部包含一份策略，策略規(guī)定了瀏覽器如何處理網(wǎng)頁的資源。例如，管理員可以設(shè)置一個(gè)策略，只允許瀏覽器加載同源的腳本，這樣即使黑客注入了一個(gè)惡意腳本，瀏覽器也不會(huì)執(zhí)行它。
CSP不僅可以通過HTTP頭部來設(shè)置，也可以在HTML文檔中用標(biāo)簽來設(shè)置。當(dāng)HTTP頭部和標(biāo)簽同時(shí)定義了CSP時(shí)，通常會(huì)優(yōu)先采用HTTP頭部的設(shè)置。
CSP策略的內(nèi)容可以包括但不限于：
- script-src：定義針對JavaScript的加載策略。
- style-src：定義針對樣式的加載策略。
- media-src：定義針對多媒體的加載策略，例如音頻標(biāo)簽和視頻標(biāo)簽。
CSP本質(zhì)上是一種白名單機(jī)制，開發(fā)者可以明確告訴瀏覽器哪些外部資源可以加載和執(zhí)行，以及可以從哪些URL加載這些資源。通過CSP，開發(fā)者可以限制哪些資源（如JavaScript、CSS、圖像等）可以被加載，從哪些URL加載，從而提高網(wǎng)站的安全性。
CSP最初被設(shè)計(jì)用來減少跨站點(diǎn)腳本攻擊（XSS），但后續(xù)版本還可以防止其他形式的攻擊，如點(diǎn)擊劫持。CSP已成為現(xiàn)代瀏覽器保護(hù)網(wǎng)站和Web應(yīng)用免受多種類型攻擊的重要工具之一。
<template> 標(biāo)簽用于定義可復(fù)制的模板結(jié)構(gòu)，<template> 標(biāo)簽中的內(nèi)容不會(huì)在頁面加載時(shí)直接呈現(xiàn)。其用法如下：
<template id="my-template">
<h1>Hello, world!</h1>
<p>This is my template.</p>
</template><template> 標(biāo)簽提供了一種在 HTML 文檔中直接定義模板的方式，這些模板可以在需要時(shí)被復(fù)制和插入到文檔的其他位置。這使得創(chuàng)建動(dòng)態(tài)的、交互式的網(wǎng)頁變得更加容易和高效。同時(shí)，由于 <template> 標(biāo)簽中的內(nèi)容在頁面加載時(shí)不會(huì)呈現(xiàn)，因此也不會(huì)對頁面的初始渲染造成任何影響。
<dialog> 是一個(gè)語義化雙標(biāo)簽，用于表示一個(gè)對話框或其他交互式組件。這個(gè)標(biāo)簽可以創(chuàng)建一個(gè)交互式的模態(tài)對話框，即用戶不能與打開對話框的頁面進(jìn)行交互，直到對話框關(guān)閉。模態(tài)對話框通常會(huì)帶有一個(gè)半透明的背景遮罩層。
<dialog> 標(biāo)簽的基本用法如下：
<dialog id="myDialog">
<p>這是一個(gè)對話框。</p>
<button id="closeButton">關(guān)閉</button>
</dialog>Shadow DOM
Shadow DOM 是一種瀏覽器提供的技術(shù)，它允許將一個(gè)獨(dú)立的 DOM（文檔對象模型）子樹附加到一個(gè)元素上，并將其與外部 DOM 隔離開來。這樣可以確保子樹中的元素和樣式不會(huì)影響到外部 DOM，同時(shí)也可以為子樹中的元素提供獨(dú)立的樣式和事件處理機(jī)制。
Shadow DOM 是 Web 組件技術(shù)的核心部分，旨在將組件的結(jié)構(gòu)、樣式和行為封裝在一個(gè)獨(dú)立的、隔離的 DOM 樹中，從而與主文檔的 DOM 樹相互隔離。這種封裝性使得開發(fā)者可以創(chuàng)建可復(fù)用、獨(dú)立和高度封裝的組件，對于構(gòu)建復(fù)雜的 Web 應(yīng)用和在大型項(xiàng)目中使用組件化開發(fā)非常有價(jià)值。
Shadow DOM 的工作原理是，當(dāng)一個(gè)元素被附加了 Shadow DOM 后，瀏覽器會(huì)創(chuàng)建一個(gè)獨(dú)立的 DOM 子樹，并將其附加到該元素上。這個(gè)子樹中的元素和樣式將被隔離在 Shadow DOM 中，不會(huì)影響到外部 DOM。同時(shí)，Shadow DOM 中的元素也可以通過特定的機(jī)制與外部 DOM 進(jìn)行通信。
命名插槽
在 Web Components 的上下文中，slot="slot_name" 是一種用于內(nèi)容分發(fā)或內(nèi)容投影的機(jī)制。它允許將內(nèi)容從父元素（即宿主元素）傳遞到子元素（通常是自定義元素）的特定位置。
具體來說，當(dāng)在自定義元素內(nèi)部使用 <slot> 標(biāo)簽時(shí)，可以為其指定一個(gè) name 屬性。然后，在父元素中，可以使用帶有 slot 屬性的元素來指定哪些內(nèi)容應(yīng)該被投影到這個(gè)命名的 <slot> 中。
<!-- 自定義元素 my-component 的模板 -->
<template id="my-component-template">
<div>
<h2>標(biāo)題</h2>
<slot name="content"></slot> <!-- 命名的 slot -->
<p>這是一個(gè)自定義組件的底部內(nèi)容。</p>
</div>
</template>
<!-- 使用自定義元素并傳遞內(nèi)容 -->
<my-component>
<p slot="content">這是一些被投影到 content slot 的內(nèi)容。</p>
<!-- 注意：沒有指定 slot 的內(nèi)容不會(huì)被投影到任何 slot，而是被忽略 -->
</my-component>
<!-- JavaScript 用于定義自定義元素（簡化版） -->
<script>
class MyComponent extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
const template = document.querySelector('#my-component-template');
shadowRoot.appendChild(template.content.cloneNode(true));
}
}
window.customElements.define('my-component', MyComponent);
</script>在上面的例子中，<p slot="content"> 元素的內(nèi)容會(huì)被投影到 <slot name="content"></slot> 的位置。注意，只有帶有 slot="content" 屬性的元素才會(huì)被投影到該位置。沒有指定 slot 屬性的內(nèi)容在這種情況下會(huì)被忽略。
<datalist> 用于為 <input> 元素提供預(yù)定義的選項(xiàng)列表。<datalist> 元素與 <input> 元素的 list 屬性配合使用，當(dāng)用戶開始在 <input> 框中鍵入時(shí)，瀏覽器會(huì)基于 <datalist> 中定義的 <option> 元素來提供自動(dòng)完成建議。
<datalist> 元素本身并不顯示任何內(nèi)容，它只是一個(gè)包含 <option> 元素的容器，這些 <option> 元素定義了可能的輸入值。然后，通過 <input> 元素的 list 屬性，將 <input> 元素與 <datalist> 元素關(guān)聯(lián)起來。
<label for="browsers">選擇一個(gè)瀏覽器：</label>
<input type="text" id="browsers" name="browsers" list="browser-list">
<datalist id="browser-list">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Opera">
<option value="Internet Explorer">
</datalist>在這個(gè)例子中，<input> 元素有一個(gè) list 屬性，其值為 browser-list，這與 <datalist> 元素的 id 屬性相匹配。因此，當(dāng)用戶在 <input> 框中鍵入時(shí)，瀏覽器會(huì)顯示一個(gè)下拉列表，其中包含 <datalist> 元素中定義的瀏覽器名稱選項(xiàng)。
HTML 媒體捕獲
HTML媒體捕獲是HTML表單的一個(gè)擴(kuò)展，它允許用戶通過一個(gè)文件上傳控件方便地訪問設(shè)備的媒體捕獲功能，如照相機(jī)、麥克風(fēng)等。這個(gè)API通過元素的capture屬性來實(shí)現(xiàn)，可以直接從設(shè)備的攝像頭或麥克風(fēng)獲取媒體數(shù)據(jù)。它的使用非常簡單，只需要在元素中設(shè)置capture屬性為"camera"或"microphone"即可。
HTML媒體捕獲的API使得開發(fā)者能夠更容易地獲取用戶的媒體輸入，并將其集成到Web應(yīng)用中。例如，可以使用這個(gè)API來創(chuàng)建一個(gè)簡單的照片上傳功能，讓用戶能夠直接從他們的設(shè)備攝像頭拍攝照片并上傳到網(wǎng)站。同樣，也可以用于音頻錄制或視頻錄制等場景。
<input type="file" accept="image/*" capture="camera">在這個(gè)例子中，<input type="file" accept="image/*" capture="camera"> 是一個(gè)帶有 capture 屬性的文件輸入控件。accept="image/*" 表示該控件只接受圖片文件，而 capture="camera" 則指示瀏覽器使用設(shè)備的攝像頭來捕獲照片。
controlslist 屬性
controlslist 是 <video> 和 <audio> 元素的一個(gè)屬性，它允許開發(fā)者更細(xì)致地控制視頻或音頻播放器的默認(rèn)控件的顯示與隱藏。通過 controlslist 屬性，你可以指定哪些控件應(yīng)該被顯示或隱藏。
這個(gè)屬性接受一系列的值，每個(gè)值對應(yīng)一個(gè)控件。下面是一些可能的值：
- nodownload：禁止顯示下載按鈕。
- nofullscreen：禁止顯示全屏按鈕。
- noremoteplayback：禁止顯示遠(yuǎn)程播放按鈕（例如，在電視上播放）。
- noplaybackrate：禁止顯示播放速率按鈕（例如，加快或減慢播放速度）。
- nodirection（對于視頻）：禁止顯示方向按鈕（例如，在360度視頻中使用的方向控件）。
可以通過組合這些值來定義你想要的控件列表。例如，如果你想要隱藏下載、全屏和遠(yuǎn)程播放按鈕，可以將 controlslist 屬性的值設(shè)置為 "nodownload nofullscreen noremoteplayback"。
<video src="example.mp4" controls controlslist="nodownload nofullscreen">
</video>Web Share API
Web Share API 是一個(gè)允許網(wǎng)頁調(diào)用操作系統(tǒng)的分享接口的API，它實(shí)質(zhì)上是 Web App 與本機(jī)的應(yīng)用交換信息的一種方式。通過使用 Web Share API，網(wǎng)頁可以將文本、鏈接甚至文件分享到設(shè)備上安裝的其他應(yīng)用。
if (navigator.share) {
navigator.share({
title: '分享的標(biāo)題',
text: '這是一段分享的文本描述',
url: 'https://example.com/share' // 要分享的鏈接
})
.then(() => console.log('分享成功！'))
.catch(error => console.log('分享失?。?, error));
} else {
console.log('當(dāng)前瀏覽器不支持 Web Share API');
}<search>元素是一個(gè)用于封裝與搜索或過濾操作相關(guān)的表單控件和內(nèi)容的容器。它允許開發(fā)者在語義上標(biāo)識這些內(nèi)容為搜索或過濾功能，而不是用來展示搜索結(jié)果。搜索結(jié)果應(yīng)作為頁面主要內(nèi)容的一部分展示，而搜索建議等輔助功能可以包含在<search> 元素中。這個(gè)元素僅支持全局屬性，不包含特定的屬性。
<header>
<h1>Movie website</h1>
<search>
<form action="./search/">
<label for="movie">Find a Movie</label>
<input type="search" id="movie" name="q" />
<button type="submit">Search</button>
</form>
</search>
</header>fetchpriority 屬性
fetchPriority** **屬性主要用于 HTMLIFrameElement，表示給瀏覽器的提示，即瀏覽器應(yīng)該如何優(yōu)先獲取iframe文檔相對于其他iframe文檔。
fetchPriority 屬性值包括：
- high：以相對于其他iframe文檔的高優(yōu)先級獲取iframe文檔。
- low：以相對于其他iframe文檔的低優(yōu)先級獲取iframe文檔。
- auto：默認(rèn)模式，表示不優(yōu)先獲取優(yōu)先級，由瀏覽器決定什么對用戶最有利。
此外，fetchPriority屬性還可以用于<img>元素和<link rel="preload">元素，以調(diào)整圖片或資源的加載優(yōu)先級。例如，如果你有一個(gè)在CSS文件中非常重要的圖片，需要高優(yōu)先級加載，可以這樣設(shè)置：
<link rel="preload" href="./important-source.png" as="image" fetchPriority="high" />或者，如果想降低圖片的請求優(yōu)先級，可以這樣設(shè)置：
<img src="example.png" fetchPriority="low" />File System Access API
文件系統(tǒng)訪問 API（File System Access API）是一種Web API，它允許網(wǎng)頁上的JavaScript代碼請求用戶選擇本地文件或目錄，并對其進(jìn)行讀取和寫入操作。這個(gè)API的引入是為了增強(qiáng)Web應(yīng)用與本地文件系統(tǒng)的交互能力，同時(shí)保持用戶的安全和隱私。
<button onclick="handleFiles()">選擇文件并讀取</button>
<pre id="output"></pre>
<script>
async function handleFiles() {
try {
// 顯示文件選擇器并請求用戶選擇一個(gè)文件
const [handle] = await window.showOpenFilePicker();
// 創(chuàng)建一個(gè)文件系統(tǒng)文件句柄的引用
const file = await handle.getFile();
// 讀取文件內(nèi)容
const reader = new TextDecoder().decode(await file.arrayBuffer());
// 在頁面上顯示文件內(nèi)容
document.getElementById('output').textContent = reader;
} catch (err) {
console.error('Error:', err);
}
}
</script>inert 屬性
inert 是一個(gè)實(shí)驗(yàn)性的屬性，旨在使元素及其后代變得非交互，并且對于輔助技術(shù)（如屏幕閱讀器）而言是不可見的。這個(gè)屬性最初是作為 Web Components 的一部分被提出的，但也可以用于任何 HTML 元素。
<div id=app inert class=loading>
...
</div>Popover API
Popover API 是一種內(nèi)置的彈框能力，它提供了一種標(biāo)準(zhǔn)、一致、靈活的機(jī)制，用于在其他頁面內(nèi)容之上顯示彈出窗口內(nèi)容。Popover API 現(xiàn)在已全面支持各種主流瀏覽器。
Popover API 具有多種特性，包括：
- 彈窗的顯示和隱藏：可以通過設(shè)置屬性（如 popovertarget 和 popovertargetaction）來控制彈窗的顯示和隱藏。例如，hide 可以設(shè)置 popovertarget 為 "none" 以隱藏彈窗，而 show 可以設(shè)置 popovertarget 為 "block" 以顯示彈窗。
- 彈窗的交互性：具有“輕觸關(guān)閉”的功能，即點(diǎn)擊彈窗之外的區(qū)域可以關(guān)閉彈窗。同時(shí)，也可以通過鍵盤操作（如按 esc 鍵）來關(guān)閉彈窗。
- 彈窗的樣式和內(nèi)容：彈出內(nèi)容既可以使用 HTML 屬性進(jìn)行聲明控制，也可以通過 JavaScript 進(jìn)行控制。例如，可以使用 CSS 偽元素（如 ::backdrop）和偽類（如 :popover-open）來改變彈窗的樣式。
在創(chuàng)建彈出式窗口時(shí)，只需要一個(gè)用于觸發(fā)彈出式窗口的按鈕以及一個(gè)要觸發(fā)的元素。首先，在要作為彈出式窗口的元素上設(shè)置 popover 屬性。然后，在彈出式窗口元素上添加一個(gè)唯一的 id。最后，將按鈕的 popovertarget 設(shè)置為彈出式窗口元素的 id 的值，以將按鈕連接到彈出式窗口。
<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>File Handling API
File Handling API 允許已安裝的 Progressive Web App（PWA）向操作系統(tǒng)注冊文件處理程序。注冊后，用戶可以直接點(diǎn)擊一個(gè)文件，然后使用已安裝的PWA來打開它。這對于那些與文件交互的PWA程序，如圖像編輯器、集成開發(fā)環(huán)境（IDE）、文本編輯器等，特別有用。
為了實(shí)現(xiàn)這個(gè)功能，你要更新 web app manifest，添加一個(gè)file_handlers數(shù)組。這個(gè)數(shù)組應(yīng)包含有關(guān)你的PWA可以處理的文件類型的詳細(xì)信息。需要指定以下信息：
- 要打開的URL：當(dāng)用戶點(diǎn)擊一個(gè)文件時(shí)，這個(gè)URL將被調(diào)用，并傳入文件的詳細(xì)信息。
- MIME 類型：你的PWA可以處理的文件的MIME類型。
- 文件類型的圖標(biāo)：用于在文件瀏覽器中顯示該文件類型的圖標(biāo)。
- 啟動(dòng)類型：定義是否應(yīng)在單個(gè)客戶端或多個(gè)客戶端中打開多個(gè)文件。
Launch Handler API
Launch Handler API 允許控制網(wǎng)頁應(yīng)用的啟動(dòng)方式。具體來說，這個(gè)API可以控制應(yīng)用程序是在現(xiàn)有窗口打開，還是在新窗口中打開，以及是否將所選窗口導(dǎo)向至啟動(dòng)網(wǎng)址。
目前，它主要包含一個(gè) client_mode 字段，用于控制應(yīng)用程序是在現(xiàn)有Web應(yīng)用客戶端中啟動(dòng)，還是在新客戶端中啟動(dòng)。
"launch_handler": {
"client_mode": "focus-existing"
}
"launch_handler": {
"client_mode": ["focus-existing", "auto"]
}HTML Modules
HTML Modules 允許開發(fā)者通過 JavaScript 的 import 語句導(dǎo)入 HTML 文件，并直接訪問其內(nèi)部的元素以及 JavaScript 導(dǎo)出。
<script type="module">
import { TabList } from "./tablist.html" with { type: 'html' };
customElements.define("tab-list", TabList);
</script>blocking="render"
<script> 標(biāo)簽 blocking 屬性明確指示在獲取腳本時(shí)應(yīng)該阻塞某些操作。需要被阻塞的操作必須是一個(gè)由以下列出的阻塞標(biāo)記組成的、由空格分隔的列表。當(dāng)屬性值為 render 時(shí)，將阻塞屏幕上的內(nèi)容渲染。使用 blocking="render" 指定資源（如腳本、樣式表等）應(yīng)在加載完成前阻塞渲染。
<script blocking="render" async src="async-script.js"></script>ElementInternals API
ElementInternals API 是 Web Components 規(guī)范中的一部分，特別是與自定義元素（Custom Elements）的表單相關(guān)功能有關(guān)。這個(gè) API 提供了一種方式，使得自定義元素（特別是那些作為表單控件的自定義元素）可以暴露它們的內(nèi)部狀態(tài)給表單處理邏輯，同時(shí)保持與原生表單元素的兼容性和互操作性。
ElementInternals 接口允許自定義元素內(nèi)部實(shí)現(xiàn)一些標(biāo)準(zhǔn)表單控件的行為，如驗(yàn)證、報(bào)告有效性、設(shè)置默認(rèn)值等，而無需手動(dòng)模擬這些行為。
以下是一些 ElementInternals API 的主要特性和用途：
- 表單關(guān)聯(lián)：通過 ElementInternals，自定義元素可以與表單進(jìn)行關(guān)聯(lián)，就像原生表單控件一樣。
- 驗(yàn)證：ElementInternals 提供了設(shè)置和檢查自定義元素驗(yàn)證狀態(tài)的方法，如 setValidity()、checkValidity() 和 reportValidity()。
- 值管理：可以通過 ElementInternals 的 value 和 valueAsNumber 屬性來設(shè)置和獲取自定義元素的值。
- 默認(rèn)值和標(biāo)簽：ElementInternals 允許設(shè)置和獲取默認(rèn)值（defaultValue）以及標(biāo)簽（label），這對于表單控件來說非常有用。
- 表單提交：當(dāng)自定義元素作為表單的一部分被提交時(shí)，ElementInternals 允許控制元素的值是否被包含在提交的數(shù)據(jù)中。
- 錯(cuò)誤消息：通過 setCustomValidity()方法，可以為自定義元素設(shè)置自定義驗(yàn)證錯(cuò)誤消息。
focusgroup 屬性
使用 focusgroup 屬性，可以通過鍵盤上的箭頭鍵，在一組可聚焦元素之間實(shí)現(xiàn)鍵盤焦點(diǎn)導(dǎo)航。
<div focusgroup="wrap horizontal">
<!-- 子元素 -->
</div>Window Controls Overlay API
Window Controls Overlay API 允許安裝在桌面操作系統(tǒng)上的漸進(jìn)式應(yīng)用隱藏默認(rèn)的窗口標(biāo)題欄，并在應(yīng)用窗口的整個(gè)區(qū)域上疊加自定義內(nèi)容，從而將最大化、最小化和關(guān)閉等控制按鈕融入一個(gè)疊加層中，實(shí)現(xiàn)更加自定義和一體化的界面設(shè)計(jì)。
Badging API
Badging API 定義了一個(gè) API，允許已安裝的 web 應(yīng)用設(shè)置應(yīng)用程序徽章。這些徽章通常顯示在設(shè)備主屏幕或應(yīng)用程序?？繖谏系膽?yīng)用圖標(biāo)旁邊。
Badging API 提供了一種方法，讓 web 開發(fā)者可以為文檔或應(yīng)用程序設(shè)置徽章，徽章可以在不顯示更打擾的通知的情況下，通知用戶狀態(tài)的變化。一個(gè)常見的使用場景是，具有消息功能的應(yīng)用程序可能會(huì)使用徽章來在應(yīng)用程序圖標(biāo)上顯示有新消息到來。
這個(gè) API 只在安全的上下文（HTTPS）中可用，并且可以在 Web Worker 內(nèi)使用。通過 Badging API，用戶代理可以解釋并以與其他 UI 部分相匹配的方式顯示徽章，從而提供了一種更優(yōu)雅的方式來表示狀態(tài)。
CustomElementRegistry
CustomElementRegistry 是一個(gè)對象，它提供了向 HTML/DOM 添加具有自定義邏輯的自己元素的方法。這個(gè)對象的主要作用是給頁面注冊一個(gè)自定義標(biāo)簽，并獲取已注冊的 Custom Elements 的相關(guān)信息。
CustomElementRegistry 對象包含了一些方法，如 define()，可以用來注冊新的自定義元素。你可以通過 window.customElements 屬性來獲取 CustomElementRegistry 對象的實(shí)例。
