一加Ace2 Pro官宣：普及16G內存 引領24G
一加官方今天繼續為本月發布的新機一加Ace2 Pro帶來預熱，公布了內存方面的信息。“淘汰 8GB ，12GB 起步，16GB 普及，24GB 引領，還有呢？#一加Ace2Pro#，2023 年 8 月，敬請期待。”同時
隨在JavaScript日益成為Web開發的基石，CSS不斷擴展其功能邊界的同時，HTML，雖然表面上似乎保持著穩定的步伐，實際上卻蘊含著巨大的潛力和待發掘的寶藏。為了深入探索HTML的當前狀態與未來趨勢，近期國外博主進行 了 State of HTML 2023 的詳盡調查，并公布了引人注目的調查報告。
這份報告聚焦于一系列新興的 HTML 特性，其廣泛的應用和強大的功能令人眼前一亮。本文將不會詳細展開整個調查報告，而是聚焦并介紹這些實用的 HTML 特性，帶你領略 HTML 的無限可能！
查看 State of HTML 2023 調查報告：https://2023.stateofhtml.com/
調查中包含的 HTML 功能和其他瀏覽器 API 使用率如下：
srcset和sizes屬性用于實現響應式圖像。這兩個屬性允許你提供多個不同尺寸或分辨率的圖像文件，瀏覽器將根據設備的像素密度、視口寬度和其他因素選擇最合適的圖像進行加載。
srcset屬性允許指定一組圖像源，每個源都帶有一個描述符（通常是像素密度描述符x或寬度描述符w）。瀏覽器會根據這些描述符和當前設備的特性（如像素密度或視口寬度）來選擇最合適的圖像。例如：
<img src="small.jpg" alt="Responsive Image" srcset="medium.jpg 1000w, large.jpg 2000w" sizes="(max-width: 600px) 50vw, 100vw">在這個例子中，srcset屬性指定了兩個額外的圖像源：medium.jpg和large.jpg。1000w和2000w是寬度描述符，表示這些圖像的寬度。瀏覽器將使用這些信息和sizes屬性來確定應該加載哪個圖像。
sizes屬性為瀏覽器提供了關于圖像預期顯示尺寸的信息。這個屬性通常與媒體查詢一起使用，以指定不同視口寬度下圖像的尺寸。瀏覽器會使用這些信息來選擇與srcset屬性中定義的圖像源相匹配的圖像。
在上面的例子中，sizes屬性定義了兩個尺寸條件：
在上面的示例中，瀏覽器會執行以下步驟來選擇要加載的圖像：
例如，如果視口寬度為 800 像素，瀏覽器將選擇large.jpg圖像進行加載，因為它的寬度描述符（2000w）與圖像的預期尺寸最為匹配。如果視口寬度為 400 像素，瀏覽器可能會選擇medium.jpg圖像進行加載。如果瀏覽器不支持srcset和sizes屬性，它將回退到使用src屬性中指定的圖像（即small.jpg）。
FormData API 提供了一種表示表單數據的鍵值對集合的方式，并且可以輕松地使用該對象通過JavaScript 發送表單數據。
以下是如何使用FormData API的基本步驟：
// 創建一個空的FormData對象 const formData = new FormData(); // 使用HTML表單元素const formData = new FormData(document.getElementById('myForm'));formData.append('username', 'John'); formData.append('password', '123456');// 使用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 屬性主要用于 <form>、<input>、<select> 和 <textarea> 元素。這個屬性用于控制瀏覽器是否應該自動完成表單字段。它基于用戶之前輸入過的值來提供自動完成功能。autocomplete 屬性有兩個可能的值：
對于 <input> 元素，autocomplete 屬性特別適用于 text、search、url、telephone、email、password、date、month、week、time、datetime-local、number、range、color 等類型。
例如，如果想禁用一個文本輸入框的自動完成功能，你可以這樣寫：
<input type="text" name="username" autocomplete="off">另外，對于密碼字段，有一個特殊的值 new-password，當設置為這個值時，瀏覽器將不會為密碼字段提供基于之前密碼的自動完成建議。這通常用于新密碼的輸入字段，以防止瀏覽器自動填充舊密碼。
<details> 和 <summary> 是 HTML5 中引入的兩個元素，它們通常一起使用，用于創建用戶可以打開和關閉的交互式小部件，以顯示或隱藏額外的詳細信息。
<details> <summary>點擊這里查看更多信息</summary> <p>這是隱藏的詳細信息。</p> </details>在這個示例中，用戶會看到“點擊這里查看更多信息”這樣的文本。當他們點擊這個文本時，會顯示出 <p> 標簽中的隱藏內容“這是隱藏的詳細信息。”。當用戶再次點擊標題時，隱藏的內容會再次被隱藏起來。
這種交互方式使得 <details> 和 <summary> 元素在需要顯示額外信息但又不想一開始就顯示所有信息的場景下非常有用。例如，在網頁上展示用戶協議、隱私政策、幫助文檔等長篇內容時，可以使用這兩個元素來創建一個可展開的面板，讓用戶選擇是否查看這些詳細信息。
HTML 自定義元素是 Web 組件（Web Components）的一部分，它允許定義新的 HTML 元素及其行為。通過自定義元素，可以創建可復用的、封裝好的組件，這些組件可以在多個項目中重用，或者通過其他開發者共享。
自定義元素的定義通常使用 class 擴展 HTMLElement、HTMLUnknownElement 或其他 HTML 內置元素類。然后，需要調用 customElements.define() 方法來注冊這個新元素。
下面是一個簡單的例子，展示如何定義一個名為 my-custom-element 的自定義元素：
class MyCustomElement extends HTMLElement { constructor() { // 必須首先調用 super 方法 super(); // 元素的功能代碼... this.innerHTML = `<p>Hello, I'm a custom element!</p>`; } // 可以添加其他方法或屬性... } // 注冊自定義元素 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>注意：
<link> 標簽的 rel 屬性值中與資源加載優先級相關的屬性包括：
<link rel="prefetch" ><link rel="prefetch" href="path/to/next-page.html"><link rel="dns-prefetch" ><link rel="modulepreload" href="path/to/module.js">CSP 全稱為 Content Security Policy，表示**內容安全策略，**它是一個額外的安全層，用于幫助檢測和緩解某些類型的攻擊，包括跨站腳本（XSS）和數據注入攻擊。這些攻擊主要用于實現數據竊取、網站破壞或惡意軟件分發。
CSP的工作原理是允許網站管理員發送一個Content-Security-Policy HTTP頭部，這個頭部包含一份策略，策略規定了瀏覽器如何處理網頁的資源。例如，管理員可以設置一個策略，只允許瀏覽器加載同源的腳本，這樣即使黑客注入了一個惡意腳本，瀏覽器也不會執行它。
CSP不僅可以通過HTTP頭部來設置，也可以在HTML文檔中用標簽來設置。當HTTP頭部和標簽同時定義了CSP時，通常會優先采用HTTP頭部的設置。
CSP策略的內容可以包括但不限于：
CSP本質上是一種白名單機制，開發者可以明確告訴瀏覽器哪些外部資源可以加載和執行，以及可以從哪些URL加載這些資源。通過CSP，開發者可以限制哪些資源（如JavaScript、CSS、圖像等）可以被加載，從哪些URL加載，從而提高網站的安全性。
CSP最初被設計用來減少跨站點腳本攻擊（XSS），但后續版本還可以防止其他形式的攻擊，如點擊劫持。CSP已成為現代瀏覽器保護網站和Web應用免受多種類型攻擊的重要工具之一。
<template> 標簽用于定義可復制的模板結構，<template> 標簽中的內容不會在頁面加載時直接呈現。其用法如下：
<template id="my-template"> <h1>Hello, world!</h1> <p>This is my template.</p> </template><template> 標簽提供了一種在 HTML 文檔中直接定義模板的方式，這些模板可以在需要時被復制和插入到文檔的其他位置。這使得創建動態的、交互式的網頁變得更加容易和高效。同時，由于 <template> 標簽中的內容在頁面加載時不會呈現，因此也不會對頁面的初始渲染造成任何影響。
<dialog> 是一個語義化雙標簽，用于表示一個對話框或其他交互式組件。這個標簽可以創建一個交互式的模態對話框，即用戶不能與打開對話框的頁面進行交互，直到對話框關閉。模態對話框通常會帶有一個半透明的背景遮罩層。
<dialog> 標簽的基本用法如下：
<dialog id="myDialog"> <p>這是一個對話框。</p> <button id="closeButton">關閉</button> </dialog>Shadow DOM 是一種瀏覽器提供的技術，它允許將一個獨立的 DOM（文檔對象模型）子樹附加到一個元素上，并將其與外部 DOM 隔離開來。這樣可以確保子樹中的元素和樣式不會影響到外部 DOM，同時也可以為子樹中的元素提供獨立的樣式和事件處理機制。
Shadow DOM 是 Web 組件技術的核心部分，旨在將組件的結構、樣式和行為封裝在一個獨立的、隔離的 DOM 樹中，從而與主文檔的 DOM 樹相互隔離。這種封裝性使得開發者可以創建可復用、獨立和高度封裝的組件，對于構建復雜的 Web 應用和在大型項目中使用組件化開發非常有價值。
Shadow DOM 的工作原理是，當一個元素被附加了 Shadow DOM 后，瀏覽器會創建一個獨立的 DOM 子樹，并將其附加到該元素上。這個子樹中的元素和樣式將被隔離在 Shadow DOM 中，不會影響到外部 DOM。同時，Shadow DOM 中的元素也可以通過特定的機制與外部 DOM 進行通信。
在 Web Components 的上下文中，slot="slot_name" 是一種用于內容分發或內容投影的機制。它允許將內容從父元素（即宿主元素）傳遞到子元素（通常是自定義元素）的特定位置。
具體來說，當在自定義元素內部使用 <slot> 標簽時，可以為其指定一個 name 屬性。然后，在父元素中，可以使用帶有 slot 屬性的元素來指定哪些內容應該被投影到這個命名的 <slot> 中。
<!-- 自定義元素 my-component 的模板 --> <template id="my-component-template"> <div> <h2>標題</h2> <slot name="content"></slot> <!-- 命名的 slot --> <p>這是一個自定義組件的底部內容。</p> </div> </template> <!-- 使用自定義元素并傳遞內容 --> <my-component> <p slot="content">這是一些被投影到 content slot 的內容。</p> <!-- 注意：沒有指定 slot 的內容不會被投影到任何 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"> 元素的內容會被投影到 <slot name="content"></slot> 的位置。注意，只有帶有 slot="content" 屬性的元素才會被投影到該位置。沒有指定 slot 屬性的內容在這種情況下會被忽略。
<datalist> 用于為 <input> 元素提供預定義的選項列表。<datalist> 元素與 <input> 元素的 list 屬性配合使用，當用戶開始在 <input> 框中鍵入時，瀏覽器會基于 <datalist> 中定義的 <option> 元素來提供自動完成建議。
<datalist> 元素本身并不顯示任何內容，它只是一個包含 <option> 元素的容器，這些 <option> 元素定義了可能的輸入值。然后，通過 <input> 元素的 list 屬性，將 <input> 元素與 <datalist> 元素關聯起來。
<label for="browsers">選擇一個瀏覽器：</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>在這個例子中，<input> 元素有一個 list 屬性，其值為 browser-list，這與 <datalist> 元素的 id 屬性相匹配。因此，當用戶在 <input> 框中鍵入時，瀏覽器會顯示一個下拉列表，其中包含 <datalist> 元素中定義的瀏覽器名稱選項。
HTML媒體捕獲是HTML表單的一個擴展，它允許用戶通過一個文件上傳控件方便地訪問設備的媒體捕獲功能，如照相機、麥克風等。這個API通過元素的capture屬性來實現，可以直接從設備的攝像頭或麥克風獲取媒體數據。它的使用非常簡單，只需要在元素中設置capture屬性為"camera"或"microphone"即可。
HTML媒體捕獲的API使得開發者能夠更容易地獲取用戶的媒體輸入，并將其集成到Web應用中。例如，可以使用這個API來創建一個簡單的照片上傳功能，讓用戶能夠直接從他們的設備攝像頭拍攝照片并上傳到網站。同樣，也可以用于音頻錄制或視頻錄制等場景。
<input type="file" accept="image/*" capture="camera">在這個例子中，<input type="file" accept="image/*" capture="camera"> 是一個帶有 capture 屬性的文件輸入控件。accept="image/*" 表示該控件只接受圖片文件，而 capture="camera" 則指示瀏覽器使用設備的攝像頭來捕獲照片。
controlslist 是 <video> 和 <audio> 元素的一個屬性，它允許開發者更細致地控制視頻或音頻播放器的默認控件的顯示與隱藏。通過 controlslist 屬性，你可以指定哪些控件應該被顯示或隱藏。
這個屬性接受一系列的值，每個值對應一個控件。下面是一些可能的值：
可以通過組合這些值來定義你想要的控件列表。例如，如果你想要隱藏下載、全屏和遠程播放按鈕，可以將 controlslist 屬性的值設置為 "nodownload nofullscreen noremoteplayback"。
<video src="example.mp4" controls controlslist="nodownload nofullscreen"> </video>Web Share API 是一個允許網頁調用操作系統的分享接口的API，它實質上是 Web App 與本機的應用交換信息的一種方式。通過使用 Web Share API，網頁可以將文本、鏈接甚至文件分享到設備上安裝的其他應用。
if (navigator.share) { navigator.share({ title: '分享的標題', text: '這是一段分享的文本描述', url: 'https://example.com/share' // 要分享的鏈接 }) .then(() => console.log('分享成功！')) .catch(error => console.log('分享失敗：', error)); } else { console.log('當前瀏覽器不支持 Web Share API'); }<search>元素是一個用于封裝與搜索或過濾操作相關的表單控件和內容的容器。它允許開發者在語義上標識這些內容為搜索或過濾功能，而不是用來展示搜索結果。搜索結果應作為頁面主要內容的一部分展示，而搜索建議等輔助功能可以包含在<search> 元素中。這個元素僅支持全局屬性，不包含特定的屬性。
<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** **屬性主要用于 HTMLIFrameElement，表示給瀏覽器的提示，即瀏覽器應該如何優先獲取iframe文檔相對于其他iframe文檔。
fetchPriority 屬性值包括：
此外，fetchPriority屬性還可以用于<img>元素和<link rel="preload">元素，以調整圖片或資源的加載優先級。例如，如果你有一個在CSS文件中非常重要的圖片，需要高優先級加載，可以這樣設置：
<link rel="preload" href="./important-source.png" as="image" fetchPriority="high" />或者，如果想降低圖片的請求優先級，可以這樣設置：
<img src="example.png" fetchPriority="low" />文件系統訪問 API（File System Access API）是一種Web API，它允許網頁上的JavaScript代碼請求用戶選擇本地文件或目錄，并對其進行讀取和寫入操作。這個API的引入是為了增強Web應用與本地文件系統的交互能力，同時保持用戶的安全和隱私。
<button onclick="handleFiles()">選擇文件并讀取</button> <pre id="output"></pre> <script> async function handleFiles() { try { // 顯示文件選擇器并請求用戶選擇一個文件 const [handle] = await window.showOpenFilePicker(); // 創建一個文件系統文件句柄的引用 const file = await handle.getFile(); // 讀取文件內容 const reader = new TextDecoder().decode(await file.arrayBuffer()); // 在頁面上顯示文件內容 document.getElementById('output').textContent = reader; } catch (err) { console.error('Error:', err); } } </script>inert 是一個實驗性的屬性，旨在使元素及其后代變得非交互，并且對于輔助技術（如屏幕閱讀器）而言是不可見的。這個屬性最初是作為 Web Components 的一部分被提出的，但也可以用于任何 HTML 元素。
<div id=app inert class=loading> ...</div>Popover API 是一種內置的彈框能力，它提供了一種標準、一致、靈活的機制，用于在其他頁面內容之上顯示彈出窗口內容。Popover API 現在已全面支持各種主流瀏覽器。
Popover API 具有多種特性，包括：
在創建彈出式窗口時，只需要一個用于觸發彈出式窗口的按鈕以及一個要觸發的元素。首先，在要作為彈出式窗口的元素上設置 popover 屬性。然后，在彈出式窗口元素上添加一個唯一的 id。最后，將按鈕的 popovertarget 設置為彈出式窗口元素的 id 的值，以將按鈕連接到彈出式窗口。
<button popovertarget="mypopover">Toggle the popover</button><div id="mypopover" popover>Popover content</div>File Handling API 允許已安裝的 Progressive Web App（PWA）向操作系統注冊文件處理程序。注冊后，用戶可以直接點擊一個文件，然后使用已安裝的PWA來打開它。這對于那些與文件交互的PWA程序，如圖像編輯器、集成開發環境（IDE）、文本編輯器等，特別有用。
為了實現這個功能，你要更新 web app manifest，添加一個file_handlers數組。這個數組應包含有關你的PWA可以處理的文件類型的詳細信息。需要指定以下信息：
Launch Handler API 允許控制網頁應用的啟動方式。具體來說，這個API可以控制應用程序是在現有窗口打開，還是在新窗口中打開，以及是否將所選窗口導向至啟動網址。
目前，它主要包含一個 client_mode 字段，用于控制應用程序是在現有Web應用客戶端中啟動，還是在新客戶端中啟動。
"launch_handler": { "client_mode": "focus-existing"}"launch_handler": { "client_mode": ["focus-existing", "auto"]}HTML Modules 允許開發者通過 JavaScript 的 import 語句導入 HTML 文件，并直接訪問其內部的元素以及 JavaScript 導出。
<script type="module"> import { TabList } from "./tablist.html" with { type: 'html' }; customElements.define("tab-list", TabList);</script><script> 標簽 blocking 屬性明確指示在獲取腳本時應該阻塞某些操作。需要被阻塞的操作必須是一個由以下列出的阻塞標記組成的、由空格分隔的列表。當屬性值為 render 時，將阻塞屏幕上的內容渲染。使用 blocking="render" 指定資源（如腳本、樣式表等）應在加載完成前阻塞渲染。
<script blocking="render" async src="async-script.js"></script>ElementInternals API 是 Web Components 規范中的一部分，特別是與自定義元素（Custom Elements）的表單相關功能有關。這個 API 提供了一種方式，使得自定義元素（特別是那些作為表單控件的自定義元素）可以暴露它們的內部狀態給表單處理邏輯，同時保持與原生表單元素的兼容性和互操作性。
ElementInternals 接口允許自定義元素內部實現一些標準表單控件的行為，如驗證、報告有效性、設置默認值等，而無需手動模擬這些行為。
以下是一些 ElementInternals API 的主要特性和用途：
使用 focusgroup 屬性，可以通過鍵盤上的箭頭鍵，在一組可聚焦元素之間實現鍵盤焦點導航。
<div focusgroup="wrap horizontal"> <!-- 子元素 --> </div>Window Controls Overlay API 允許安裝在桌面操作系統上的漸進式應用隱藏默認的窗口標題欄，并在應用窗口的整個區域上疊加自定義內容，從而將最大化、最小化和關閉等控制按鈕融入一個疊加層中，實現更加自定義和一體化的界面設計。
Badging API 定義了一個 API，允許已安裝的 web 應用設置應用程序徽章。這些徽章通常顯示在設備主屏幕或應用程序停靠欄上的應用圖標旁邊。
Badging API 提供了一種方法，讓 web 開發者可以為文檔或應用程序設置徽章，徽章可以在不顯示更打擾的通知的情況下，通知用戶狀態的變化。一個常見的使用場景是，具有消息功能的應用程序可能會使用徽章來在應用程序圖標上顯示有新消息到來。
這個 API 只在安全的上下文（HTTPS）中可用，并且可以在 Web Worker 內使用。通過 Badging API，用戶代理可以解釋并以與其他 UI 部分相匹配的方式顯示徽章，從而提供了一種更優雅的方式來表示狀態。
CustomElementRegistry 是一個對象，它提供了向 HTML/DOM 添加具有自定義邏輯的自己元素的方法。這個對象的主要作用是給頁面注冊一個自定義標簽，并獲取已注冊的 Custom Elements 的相關信息。
CustomElementRegistry 對象包含了一些方法，如 define()，可以用來注冊新的自定義元素。你可以通過 window.customElements 屬性來獲取 CustomElementRegistry 對象的實例。
本文鏈接：http://www.tebozhan.com/showinfo-26-89231-0.htmlHTML，無限可能！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： Python 代碼格式化的十個工具與技巧
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號