整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
這里是云端源想IT，幫你輕松學(xué)IT”
嗨~ 今天的你過得還好嗎？
世界微塵里
吾寧愛與憎
- 2024.03.18 -
在互聯(lián)網(wǎng)的世界中，表單是用戶與網(wǎng)站進行互動的重要橋梁。無論是注冊新賬號、提交反饋、還是在線購物，表單都扮演著至關(guān)重要的角色。在網(wǎng)頁中，我們需要跟用戶進行交互，收集用戶資料，此時就需要用到表單標(biāo)簽。
HTML提供了一系列的表單標(biāo)簽，使得開發(fā)者能夠輕松地創(chuàng)建出功能豐富的表單。今天我們就來深入探討這些標(biāo)簽，了解它們的作用以及如何使用它們來構(gòu)建一個有效的用戶界面。
在HTML中，一個完整的表單通常由表單域、表單控件（表單元素）和提示信息三個部分構(gòu)成。
表單域
表單控件
這些是用戶與表單交云的各種元素，如<input>（用于創(chuàng)建不同類型的輸入字段）、<textarea>（用于多行文本輸入）、<button>（用于提交表單或執(zhí)行其他操作）、<select>和<option>（用于創(chuàng)建下拉列表）等。
提示信息
這些信息通常通過<label>標(biāo)簽提供，它為表單控件提供了描述性文本，有助于提高可訪問性。<label>標(biāo)簽通常與<input>標(biāo)簽一起使用，并且可以通過for屬性與<input>標(biāo)簽的id屬性關(guān)聯(lián)起來。
這三個部分共同構(gòu)成了一個完整的HTML表單，使得用戶可以輸入數(shù)據(jù)，并通過點擊提交按鈕將這些數(shù)據(jù)發(fā)送到Web服務(wù)器進行處理。
在表單域中可以定義各種表單元素，這些表單元素就是允許用戶在表單中輸入或者選擇的內(nèi)容控件。下面就來介紹HTML中常用的表單元素。
1、<form>標(biāo)簽：基礎(chǔ)容器
作用：定義一個表單區(qū)域，用戶可以在其中輸入數(shù)據(jù)進行提交。
<form action="submit.php" method="post">其中action屬性指定了數(shù)據(jù)提交到的服務(wù)器端腳本地址，method屬性定義了數(shù)據(jù)提交的方式（通常為GET或POST）。
2、<input>標(biāo)簽：數(shù)據(jù)輸入
<input>標(biāo)簽是一個單標(biāo)簽，用于收集用戶信息。允許用戶輸入文本、數(shù)字、密碼等。
<input type="text" name="username" placeholder="請輸入用戶名">type屬性決定了輸入類型，name屬性定義了數(shù)據(jù)的鍵名，placeholder屬性提供了輸入框內(nèi)的提示文本。
<input>標(biāo)簽的屬性
下面舉個例子來說明：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
用戶名：<input type="text" value="請輸入用戶名"><br>
密碼：<input type="password"><br>
性別：男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"><br>
愛好：吃飯<input type="checkbox"> 睡覺<input type="checkbox"> 打豆豆<input type="checkbox"><br>
<input type="submit" value="免費注冊">
<input type="reset" value="重新填寫">
<input type="button" value="獲取短信驗證碼"><br>
上傳頭像：<input type="file">
</form>
</body>
</html>3、<label>標(biāo)簽：關(guān)聯(lián)說明
它與輸入字段如文本框、單選按鈕、復(fù)選框等關(guān)聯(lián)起來，以改善網(wǎng)頁的可用性和可訪問性。<label>標(biāo)簽有兩種常見的用法：
1）包裹方式：
在這種用法中，<label>標(biāo)簽直接包裹住關(guān)聯(lián)的表單元素。例如：
<label>用戶名：<input type="text" name="username"></label>這樣做的好處是用戶點擊標(biāo)簽文本時，關(guān)聯(lián)的輸入字段會自動獲取焦點，從而提供更好的用戶體驗。
2）使用for屬性關(guān)聯(lián)：
在這種用法中，<label>標(biāo)簽通過for屬性與目標(biāo)表單元素建立關(guān)聯(lián)，for屬性的值應(yīng)與目標(biāo)元素的id屬性相匹配。例如：
<label for="username">用戶名：</label><input type="text" id="username" name="username">這樣做的優(yōu)勢是單擊標(biāo)簽時，相關(guān)的表單元素會自動選中（獲取焦點），從而提高可用性和可訪問性。
4、<select>和<option>標(biāo)簽：下拉選擇
在頁面中，如果有多個選項讓用戶選擇，并且想要節(jié)約頁面空間時，我們可以使用標(biāo)簽控件定義下拉列表。
注意點：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
籍貫：
<select>
<option>山東</option>
<option>北京</option>
<option>西安</option>
<option selected="selected">火星</option>
</select>
</form>
</body>
</html>5、<textarea>標(biāo)簽：多行文本輸入
當(dāng)用戶輸入內(nèi)容較多的情況下，我們可以用表單元素標(biāo)簽替代文本框標(biāo)簽。
<textarea name="message" rows="5" cols="30">默認文本</textarea>rows和cols屬性分別定義了文本區(qū)域的行數(shù)和列數(shù)。
代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
今日反饋：
<textarea>請在此輸入內(nèi)容</textarea>
</form>
</body>
</html>6、<button>標(biāo)簽：按鈕控件
創(chuàng)建一個可點擊的按鈕，通常用于提交或重置表單。它允許用戶放置文本或其他內(nèi)聯(lián)元素（如<i>、<b>、<strong>、<br>、<img>等），這使得它比普通的<input type="button">具有更豐富的內(nèi)容和更強的功能。
<button type="submit">提交</button>type屬性為submit時表示這是一個提交按鈕。
7、<fieldset>和<legend>標(biāo)簽：分組和標(biāo)題
通常用于在HTML表單中對相關(guān)元素進行分組，并提供一個標(biāo)題來描述這個組的內(nèi)容。
<fieldset>標(biāo)簽：該標(biāo)簽用于在表單中創(chuàng)建一組相關(guān)的表單控件。它可以將表單元素邏輯分組，并且通常在視覺上通過圍繞這些元素繪制一個邊框來區(qū)分不同的組。這種分組有助于提高表單的可讀性和易用性。
<legend>標(biāo)簽：它總是與<fieldset>標(biāo)簽一起使用。<legend>標(biāo)簽定義了<fieldset>元素的標(biāo)題，這個標(biāo)題通常會出現(xiàn)在瀏覽器渲染的字段集的邊框上方。<legend>標(biāo)簽使得用戶更容易理解每個分組的目的和內(nèi)容。
代碼示例：
<form>
<fieldset>
<legend>個人信息</legend>
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">郵箱：</label>
<input type="email" id="email" name="email"><br><br>
</fieldset>
<fieldset>
<legend>興趣愛好</legend>
<input type="checkbox" id="hobby1" name="hobby1" value="music">
<label for="hobby1">音樂</label><br>
<input type="checkbox" id="hobby2" name="hobby2" value="sports">
<label for="hobby2">運動</label><br>
<input type="checkbox" id="hobby3" name="hobby3" value="reading">
<label for="hobby3">閱讀</label><br>
</fieldset>
<input type="submit" value="提交">
</form>在這個示例中，我們使用了兩個<fieldset>元素來組織表單的不同部分。第一個<fieldset>包含姓名和郵箱字段，而第二個<fieldset>包含三個復(fù)選框，用于選擇用戶的興趣愛好。每個<fieldset>都有一個<legend>元素，用于提供標(biāo)題。這樣，用戶在填寫表單時可以更清晰地了解每個部分的內(nèi)容。
想要快速入門前端開發(fā)嗎？推薦一個前端開發(fā)基礎(chǔ)課程，這個老師講的特別好，零基礎(chǔ)學(xué)習(xí)無壓力，知識點結(jié)合代碼，邊學(xué)邊練，可以免費試看試學(xué)，還有各種輔助工具和資料，非常適合新手！點這里前往學(xué)習(xí)哦！云端源想
8、<datalist>標(biāo)簽：預(yù)定義選項列表
<datalist>標(biāo)簽是HTML5中引入的一個新元素，它允許開發(fā)者為輸入字段提供預(yù)定義的選項列表。當(dāng)用戶在輸入字段中輸入時，瀏覽器會顯示一個下拉菜單，其中包含與用戶輸入匹配的預(yù)定義選項。
使用<datalist>標(biāo)簽可以提供更好的用戶體驗，因為它可以幫助用戶選擇正確的選項，而不必手動輸入整個選項。此外，<datalist>還可以與<input>元素的list屬性結(jié)合使用，以將預(yù)定義的選項列表與特定的輸入字段關(guān)聯(lián)起來。
下面是一個使用<datalist>標(biāo)簽的代碼示例：
<form>
<label for="color">選擇你喜歡的顏色：</label>
<input type="text" id="color" name="color" list="colorOptions">
<datalist id="colorOptions">
<option value="紅色">
<option value="藍色">
<option value="綠色">
<option value="黃色">
<option value="紫色">
</datalist>
<input type="submit" value="提交">
</form>9、<output>標(biāo)簽：計算結(jié)果輸出
<output>標(biāo)簽是HTML5中引入的一個新元素，它用于顯示計算結(jié)果或輸出。該標(biāo)簽通常與JavaScript代碼結(jié)合使用，通過將計算結(jié)果賦值給<output>元素的value屬性來顯示結(jié)果。
<output>標(biāo)簽可以用于各種類型的計算和輸出，例如數(shù)學(xué)運算、字符串處理、數(shù)組操作等。它可以與<input>元素一起使用，以實時更新計算結(jié)果。
下面是一個使用<output>標(biāo)簽的示例：
<form>
<label for="num1">數(shù)字1：</label>
<input type="number" id="num1" name="num1" oninput="calculate()"><br><br>
<label for="num2">數(shù)字2：</label>
<input type="number" id="num2" name="num2" oninput="calculate()"><br><br>
<label for="result">結(jié)果：</label>
<output id="result"></output>
</form>
<script>
function calculate() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var result = num1 + num2;
document.getElementById("result").value = result;
}
</script>10、<progress>標(biāo)簽：任務(wù)進度展示
<progress>標(biāo)簽是HTML5中用于表示任務(wù)完成進度的一個新元素。它通過value屬性和max屬性來表示進度，其中value表示當(dāng)前完成的值，而max定義任務(wù)的總量或最大值。
示例：
<!DOCTYPE html>
<html>
<head>
<title>Progress Example</title>
</head>
<body>
<h1>File Download</h1>
<progress id="fileDownload" value="0" max="100"></progress>
<br>
<button onclick="startDownload()">Start Download</button>
<script>
function startDownload() {
var progress = document.getElementById("fileDownload");
for (var i = 0; i <= 100; i++) {
setTimeout(function() {
progress.value = i;
}, i * 10);
}
}
</script>
</body>
</html>在上面的示例中，我們創(chuàng)建了一個名為"fileDownload"的<progress>元素，并設(shè)置了初始值為0，最大值為100。我們還添加了一個按鈕，當(dāng)用戶點擊該按鈕時，會觸發(fā)名為"startDownload"的JavaScript函數(shù)。這個函數(shù)模擬了一個文件下載過程，通過循環(huán)逐步增加<progress>元素的value屬性值，從而顯示下載進度。
11、<meter>標(biāo)簽：度量衡指示器
<meter>標(biāo)簽在HTML中用于表示度量衡指示器，它定義了一個已知范圍內(nèi)的標(biāo)量測量值或分?jǐn)?shù)值，通常用于顯示磁盤使用情況、查詢結(jié)果的相關(guān)性等。例如：
<p>CPU 使用率： <meter value="0.6" min="0" max="1"></meter> 60%</p>
<p>內(nèi)存使用率： <meter value="0.4" min="0" max="1"></meter> 40%</p>在這個示例中，我們使用了兩個<meter>標(biāo)簽來分別顯示CPU和內(nèi)存的使用率。value屬性表示當(dāng)前的測量值，min和max屬性分別定義了測量范圍的最小值和最大值。通過這些屬性，<meter>標(biāo)簽?zāi)軌蚯逦仫@示出資源的使用情況。
需要注意的是，<meter>標(biāo)簽不應(yīng)該用來表示進度條，對于進度條的表示，應(yīng)該使用<progress>標(biāo)簽。
12、<details>和<summary>標(biāo)簽：詳細信息展示
<details>和<summary>標(biāo)簽是HTML5中新增的兩個元素，用于創(chuàng)建可折疊的詳細信息區(qū)域。
<details>標(biāo)簽定義了一個可以展開或折疊的容器，其中包含一些額外的信息。它通常與<summary>標(biāo)簽一起使用，<summary>標(biāo)簽定義了<details>元素的標(biāo)題，當(dāng)用戶點擊該標(biāo)題時，<details>元素的內(nèi)容會展開或折疊。
示例：
<details>
<summary>點擊查看詳細信息</summary>
<p>這里是一些額外的信息，用戶可以點擊標(biāo)題來展開或折疊這些信息。</p>
</details>在這個示例中，我們使用了<details>標(biāo)簽來創(chuàng)建一個可折疊的容器，并在其中添加了一個<summary>標(biāo)簽作為標(biāo)題。當(dāng)用戶點擊這個標(biāo)題時，容器的內(nèi)容會展開或折疊。
總結(jié)：
HTML表單標(biāo)簽是構(gòu)建動態(tài)網(wǎng)頁的基石，它們使得用戶能夠與網(wǎng)站進行有效的交互。
通過合理地使用這些標(biāo)簽，開發(fā)者可以創(chuàng)建出既美觀又功能強大的表單，從而提升用戶體驗和網(wǎng)站的可用性。所以說，掌握這些標(biāo)簽的使用，對于前端開發(fā)者來說是至關(guān)重要的。
我們下期再見！
END
文案編輯|云端學(xué)長
文案配圖|云端學(xué)長
內(nèi)容由：云端源想分享
CSS樣式是表現(xiàn)。就像網(wǎng)頁的外衣。比如，標(biāo)題字體、顏色變化，或為標(biāo)題加入背景圖片、邊框等。所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)。
JavaScript是用來實現(xiàn)網(wǎng)頁上的特效效果。如：鼠標(biāo)滑過彈出下拉菜單。或鼠標(biāo)滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這么理解，有動畫的，有交互的一般都是用JavaScript來實現(xiàn)的。
1、tml的固定結(jié)構(gòu)
一個HTML文件是有自己固定的結(jié)構(gòu)的。
<html>
<head>...</head>
<body>...</body>
</html>代碼講解：
<html></html>稱為根標(biāo)簽，所有的網(wǎng)頁標(biāo)簽都在<html></html>中。
<head>標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。
頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標(biāo)簽，頭部標(biāo)簽在下一小節(jié)中會有詳細介紹。
在<body>和</body>標(biāo)簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容，如<h1>、<p>、<a>、<img>等網(wǎng)頁內(nèi)容標(biāo)簽，在這里的標(biāo)簽中的內(nèi)容會在瀏覽器中顯示出來。
我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費獲取。
2、<head>標(biāo)簽的作用
文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示給讀者。
下面這些標(biāo)簽可用在 head 部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
3、<title>標(biāo)簽
在<title>和</title>標(biāo)簽之間的文字內(nèi)容是網(wǎng)頁的標(biāo)題信息，它會出現(xiàn)在瀏覽器的標(biāo)題欄中。網(wǎng)頁的title標(biāo)簽用。網(wǎng)頁制作學(xué)習(xí)交流群，四九四零六，四九三四。
于告訴用戶和搜索引擎這個網(wǎng)頁的主要內(nèi)容是什么，搜索引擎可以通過網(wǎng)頁標(biāo)題，迅速的判斷出網(wǎng)頁的主題。每個網(wǎng)頁的內(nèi)容都是不同的，每個網(wǎng)頁都應(yīng)該有一個獨
一無二的title。例如：
<head>
<title>hello world</title>
</head>
<title>標(biāo)簽的內(nèi)容“hello world”會在瀏覽器中的標(biāo)題欄上顯示出來，
4、標(biāo)簽的用途
我們學(xué)習(xí)網(wǎng)頁制作時，常常會聽到一個詞，語義化。那么什么叫做語義化呢，說的通俗點就是：明白每個標(biāo)簽的用途（在什么情況下使用此標(biāo)簽合理）比如，網(wǎng)頁上
的文章的標(biāo)題就可以用標(biāo)題標(biāo)簽，網(wǎng)頁上的各個欄目的欄目名稱也可以使用標(biāo)題標(biāo)簽。
文章中內(nèi)容的段落就得放在段落標(biāo)簽中，在文章中有想強調(diào)的文本，就可以使
用 em 標(biāo)簽表示強調(diào)等等。講了這么多語義化，但是語義化可以給我們帶來什么樣的好處呢？
① 更容易被搜索引擎收錄。
②.更容易讓屏幕閱讀器讀出網(wǎng)頁內(nèi)容。
家好，我是Echa。
三天前小編也發(fā)布了一篇關(guān)于CSS優(yōu)秀在線工具大全：48個高顏值的CSS在線工具大全，對不太會寫CSS3對小伙伴們來說，那簡直就是雪中送炭。部分粉絲們還特意私信小編表示感謝。
不過有一部分粉絲們私信小編說，2022年關(guān)于CSS官方又都更新了哪些新的知識點？其實小編也是在之前文章陸續(xù)有發(fā)布，只是新關(guān)注的粉絲們不知道，這個小編也不怪你們。咱們就一起回顧回顧。
2022 年 CSS 新增了很多特性，例如容器查詢、父選擇器、子網(wǎng)格、級聯(lián)層、新視口單位等，多項期待已久的功能已集成到常青瀏覽器（自動升級到最新版本的瀏覽器，包括 Chrome、Edge、Firefox 和 Safari）中。下面就來看看 2022 年 CSS 新增的 10 個實用功能吧！
下面來看看和 CSS 顏色相關(guān)的一些更新。CSS 工作組有兩個新規(guī)范將改變我們在 Web 上使用顏色的方式：CSS Color Module Level 4（候選推薦）和 CSS Color Module Level 5（工作草案）。兩者仍處于實驗階段，截至 2022 年 12 月，只有 Safari 已實現(xiàn)。
CSS Color Module Level 4 引入了顏色函數(shù)的新語法，例如rgb()和hsl()。新語法省略了逗號，依靠空格來分隔顏色空間的每個通道。它還支持可選的 alpha 參數(shù)，從而不再需要額外的顏色函數(shù)，例如rgba()和hsla()。逗號分隔的形式現(xiàn)在被規(guī)范稱為“遺留語法”。
/* 遺留語法 */
background-color: hsl(270, 50%, 40%);
color: hsla(0, 0%, 100%, 50%);
/* 新語法 */
background-color: hsl(270 50% 40%);
color: hsl(0 0% 100% / 50%);
新的顏色規(guī)范為網(wǎng)絡(luò)添加了大量新的顏色空間：
這只是新增的顏色空間的一部分，其中一些色彩空間，比如 Display P3，提供了比 sRGB 空間更寬的色域，這意味著我們將可以使用更多顏色，并且這些顏色將比一直使用的顏色更鮮艷。
CSS Color Module Level 5 通過引入相對顏色語法進一步增強了顏色函數(shù)。。此語法可以基于另一種顏色定義新顏色。可以通過首先使用 from 關(guān)鍵字定義原色，然后像往常一樣在顏色函數(shù)中指定新顏色的通道來使用它。
當(dāng)提供原始顏色時，可以訪問“通道關(guān)鍵字”，允許引用顏色空間中的每個通道。關(guān)鍵字根據(jù)使用的顏色函數(shù)而變化。對于 rgb()，有 r、g 和 b 通道關(guān)鍵字；對于 oklch()，將擁有 l、c 和 h 關(guān)鍵字。對于每個顏色函數(shù)，還有一個 alpha 通道關(guān)鍵字，它是原始顏色的 alpha 通道。
可以在 calc() 表達式中使用這些通道關(guān)鍵字來修改原始顏色：
/* 去色處理 */
rgb(from tomato calc(r - 20) calc(g - 20) calc(b - 20));
/* 半透明處理 */
rgb(from tomato r g b / 50%)
/* 在 oklch 中使顏色變暗 */
oklch(from tomato calc(l - 0.1) c h);
除此之外，還可以跨顏色空間定義相對顏色。當(dāng)使用一個空間中最初定義的顏色并使用不同的顏色空間定義新顏色時，瀏覽器將首先將原始顏色轉(zhuǎn)換為新的顏色空間。
下面使用 Oklch 通過將色調(diào)旋轉(zhuǎn) 120°（? 圈）來定義基于 sRGB 中定義的原色的二次色：
--primary: #005f73;
--secondary: oklch(from var(--primary) l c calc(h + 120));
CSS Color Module Level 5 規(guī)范還引入了一個 color-mix() 函數(shù)，允許在不同的顏色空間中混合顏色。
color-mix(in lch, purple 50%, plum 50%)
上面代碼中，會產(chǎn)生 50-50 的紫色和紫紅色混合。
新增的 CSS 視口單元用于處理帶有動態(tài)工具欄的移動視口。
要想調(diào)整與視口一樣大的尺寸，可以使用現(xiàn)有的視口單位 vw 和 vh：
下面元素的寬度為 100vw，高度為 100vh，它將完全覆蓋整個視口：
除了 vh 和 vw，還有：
這些單位在瀏覽器中都得到了很好的支持。雖然這些單位在桌面瀏覽器上運行良好，但在移動瀏覽器上就會存在一些問題，視口大小受動態(tài)工具欄存在與否的影響。這些是用戶界面，例如地址欄和標(biāo)簽欄等。盡管視口大小可以更改，但 vw 和 vh 大小不會。因此，尺寸為 100vh 高的元素會從視口中溢出。
當(dāng)向下滾動時，這些動態(tài)工具欄將縮回。在這種狀態(tài)下，尺寸為 100vh 高的元素將覆蓋整個視口。
為了解決這個問題，CSS 工作組規(guī)定了視口的各種狀態(tài)：
新視口也有指定的單位：
除非調(diào)整視口本身的大小，否則這些視口百分比單位的大小是固定的。
除了大視口和小視口之外，還有一個動態(tài)視口，動態(tài)考慮了瀏覽器 UI：
它的單位帶有 dv 前綴：dvw、dvh、dvi、dvb、dvmin 和 dvmax。它們的尺寸在對應(yīng)的 lv* 和 sv* 之間。
瀏覽器對這些單位的支持情況如下：
參考：https://web.dev/viewport-units/
CSS 容器查詢是一種超越與視口相關(guān)的媒體查詢的方法，而可以根據(jù)元素所在的容器修改元素的行為，不僅是依賴視口大小來更改元素的樣式。
想要使用容器查詢，首先需要在容器上定義 container-type
main {
container-type: inline-size;
}
還可以使用 container-name 來命名容器，如果有多層容器，這將很有用，這樣就可以更明確地了解哪些查詢會影響元素。type 和 name 都可以使用簡寫的 container 屬性來定義，其中 name在前，并通過正斜杠與 type 分隔。
.main {
container: main / inline-size;
}
然后就可以使用@container開始查詢了。一旦滿足該條件，CSS 將應(yīng)用于該容器內(nèi)的元素。
最后來看一個實際的應(yīng)用：
<main class="container">
<article>...</article>
<article>...</article>
<article>...</article>
</main>
現(xiàn)在就可以設(shè)置一個容器查詢來更改文章樣式及其任何后代的樣式，這將基于 main 的寬度，因為它是容器元素。
article {
padding: 1rem;
font-size: 1rem;
}
@container (min-width: 60ch) {
article {
padding: 2rem;
font-size: 1.25rem;
}
}
這樣，當(dāng)文章的寬度小于 60ch 時，就會采用更小的 padding 和 font-size 值。
瀏覽器對容器查詢的支持情況如下：
在 2022 年 2 月/3 月，所有現(xiàn)代瀏覽器都發(fā)布了 Cascade Layers（級聯(lián)層），可以用來控制選擇器如何交互，而不管它們的特殊性或代碼順序。下面來看一個例子：
@layer default, theme, state;
@layer default {
button {
background: rebeccapurple;
color: white;
}
}
@layer state {
:disabled {
background: dimgray;
}
}
@layer theme {
button.danger {
background: maroon;
}
button.info {
background: darkslateblue;
}
#call-to-action {
background: mediumvioletred;
}
}
@layer 聲明了一個_級聯(lián)層_，同一層內(nèi)的規(guī)則將級聯(lián)在一起，這給予了開發(fā)者對層疊機制的更多控制。
上面例子中定義了多個級聯(lián)層，當(dāng)一個聲明中具有多個級聯(lián)層時，后定義的級聯(lián)層具有更高的優(yōu)先級。因此上面例子中，state 層具有更高的優(yōu)先級，即使 theme 樣式中具有更高的特定性（權(quán)重）并且在代碼中出現(xiàn)得更晚。
我們還可以嵌套圖層：
@layer reset, framework, components, utilities;
@layer components {
@layer default, theme, state;
@layer state {
/* components.state 層 */
:disabled { background: dimgray; }
}
}
@layer components.state {
/* components.state 層 */
:focus-visible { outline: thin dashed hotpink; }
}
層按照每個層名稱首次出現(xiàn)在代碼庫中的順序堆疊，后面的層名稱優(yōu)先于前面的層。這意味著可以允許它們隱式堆疊：
@layer low { /* 最低層 */ }
@layer medium { /* 中間層 */ }
@layer high { /* 最高層 */ }
或者可以像上面例子一樣，按順序引入層名稱來明確定義層順序：
@layer low, medium, high;
瀏覽器對級聯(lián)層的支持情況如下：
可以看到，目前主流瀏覽器都支持 CSS 級聯(lián)層功能。
:has()選擇器可以檢查父元素中是否存在特定的元素。例如，如果一個卡片組件中有圖片，就給它添加一個display:flex。這以前在 CSS 中是無法實現(xiàn)的，但是新的 :has() 選擇器就可以幫助我們選擇包含特定元素的父元素。
在CSS中，我們無法根據(jù)元素中是否存在特定的元素來設(shè)置父元素的樣式，要想實現(xiàn)這一點，就必須創(chuàng)建CSS類，并根據(jù)需要進行類的切換。來看下面的例子：
這里我們有兩種卡片：包含圖片和不包含圖片。在CSS中需要這樣做：
/* 有圖片的卡片 */
.card {
display: flex;
align-items: center;
gap: 1rem;
}
/* 沒有圖片的卡片 */
.card-plain {
display: block;
border-top: 3px solid #7c93e9;
}
<!-- 有圖片的卡片 -->
<div class="card">
<div class="card-image">
<img src="awameh.jpg" alt="">
</div>
<div class="card-content">
卡片內(nèi)容
</div>
</div>
<!-- 沒有圖片的卡片 -->
<div class="card card-plain">
<div class="card-content">
卡片內(nèi)容
</div>
</div>
這里創(chuàng)建了一個類card-plain，專門用于沒有圖片的卡片，在沒有圖片時就不需要flex布局。如果使用 CSS 中的父選擇器 :has 就不需要再寫這個類，只需要使用它來檢查卡片中是否包含.card-image即可：
.card:has(.card-image) {
display: flex;
align-items: center;
}
根據(jù) CSS 規(guī)范，:has() 選擇器可以檢查父元素是否包含至少一個元素，或者一個條件，例如輸入是否獲取到焦點。
:has() 選擇器不僅可以檢查父元素是否包含特定的子元素，還可以檢查一個元素后面是否跟有另一個元素：
.card h2:has(+ p) { }
這將檢查 <h2> 元素是否直接跟在 <p> 元素之后。
我們也可以將它與表單元素一起使用來檢查輸入是否獲取到了焦點：
form:has(input:focused) {
background-color: lightgrey;
}
瀏覽器對 :has() 的支持情況如下：
可以看到，最新版的 Chrome、Edge、Safari 都已經(jīng)支持了 :has() 選擇器，而 Firfox 目前還不支持
:focus-visible 是一個現(xiàn)代CSS 焦點選擇器。今年 3 月，Safari 15.4 發(fā)布了 :focus-visible 偽類，不久之后，它成為常青瀏覽器中使用的默認元素焦點行為。
當(dāng)元素匹配:focus偽類并且客戶端的啟發(fā)式引擎決定焦點應(yīng)當(dāng)可見 (在這種情況下很多瀏覽器默認顯示“焦點框”。) 時，:focus-visible 偽類將生效。
注意：Firefox 需要通過較舊的前綴偽類 :-moz-focusring 來支持類似的功能。
下面來看一個例子，:focus-visible 選擇器利用客戶端的行為決定是否匹配。當(dāng)使用鼠標(biāo)點擊控件和用鍵盤 tab 切換控件時會有所不同。
<input value="默認樣式s"><br>
<button>默認樣式</button><br>
<input class="focus-only" value=":focus"><br>
<button class="focus-only">:focus</button><br>
<input class="focus-visible-only" value=":focus-visible"><br>
<button class="focus-visible-only">:focus-visible</button>
.focus-only:focus {
outline: 2px solid black;
}
.focus-visible-only:focus-visible {
outline: 4px dashed darkorange;
}
效果如下：
這段代碼的表現(xiàn)如下：
使用這個偽類，就可以有效地根據(jù)用戶的輸入方式 (鼠標(biāo) or 鍵盤) 來展示不同形式的焦點。
瀏覽器對 :focus-visible 的支持情況如下：
可以看到，目前主流瀏覽器都已經(jīng)支持 :focus-visible。
color-scheme 是一個 CSS 屬性，當(dāng)用戶選擇系統(tǒng)配色方案時（系統(tǒng)配色方案的常見選擇是“深色模式”和“淺色模式”），操作系統(tǒng)會對用戶界面進行調(diào)整。這包括表單控件、滾動條和 CSS 系統(tǒng)顏色的使用值。
:root {
color-scheme: light dark;
}
當(dāng)把上面的代碼復(fù)制到樣式表中，頁面就會根據(jù)操作系統(tǒng)的設(shè)置的暗/亮模式來顯示不同的樣式：
可以看到，當(dāng)切換系統(tǒng)配色模式時，文字顏色，背景顏色，以及表單（滾動條、選擇下拉框、單選框、復(fù)選框、輸入框等）樣式都發(fā)生了變化，這樣就省去了我們很多兩種模式下的樣式定義工作。
通常，屬性的值是以下幾種：
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
其中：
需要注意，當(dāng)light和right都有時，需要light在前，right在后。要想將整個頁面配置為用戶的配色方案首選項，就可以像上面一樣，在 :root 元素上指定 color-scheme。
我們甚至可以僅在 HTML 中就可以獲得深色模式：
<head>
<meta name="color-scheme" content="light dark" />
</head>
瀏覽器對 color-scheme 的支持情況如下：
accent-color 屬性可以在不改變?yōu)g覽器默認表單組件基本樣式的前提下重置組件的顏色。該屬性目前支持以下 HTML 控件元素：
下面來看一個例子：
<form>
<label>
<input type="radio" name="radios" checked>
單選選中
</label>
<label>
<input type="radio" name="radios">
單選未選中
</label>
<label>
<input type="checkbox" checked>
多選選中
</label>
<label>
<input type="checkbox">
多選未選中
</label>
<label>
<input type="range">
范圍
</label>
<label>
<progress max="100" value="80">80%</progress>
進度條
</label>
</form>
:root {
accent-color: firebrick;
}
[type="radio"],
[type="checkbox"] {
font-size: inherit;
width: 0.75em;
height: 0.75em;
}
progress,
[type="range"] {
font-size: inherit;
width: 10ch;
}
效果如下：
可以看到，這些表單元素都變成我們定義的顏色。
需要注意，如果給表單元素設(shè)置了自定義樣式，那 accent-color 就可能會失效。例如，將進度條的 border 設(shè)置為藍色：
progress {
border: blue;
}
樣式會是下面這樣，其并不符合預(yù)期（進度條邊框為藍色），出現(xiàn)了意料之外的效果。所以，如果使用了 accent-color 定義表單樣式，就要盡量避免再給表單元素自定義其他樣式：
瀏覽器對 accent-color 的支持情況如下：
2022 年 8 月，Chromium 完成了使用單個 rotate, scale, translate 屬性來對 CSS 變換進行更細粒度的控制。
要想在 CSS 中使用變換，需要使用 transform 屬性，該屬性接受一個或多個 <transform-function>：
.target {
transform: translateX(50%) rotate(30deg) scale(1.2);
}
在上面的代碼中，目標(biāo)元素會在 X 軸上平移 50%，旋轉(zhuǎn) 30 度，最后放大到 120%。雖然這樣 transform 屬性可以正常工作，但當(dāng)想要單獨更改這些值中的任何一個時，就會比較麻煩。
比如，想要在鼠標(biāo)懸浮時更改 scale 的大小，就需要將 transform 屬性中的所有函數(shù)都復(fù)制一遍，即使它們的值保持不變。
.target:hover {
transform: translateX(50%) rotate(30deg) scale(2);
}
而在 Chrome 104 中，就可以使用rotate, scale, translate 屬性來單獨定義變換的這些部分。使用這些屬性來重寫前面的變換示例：
.target {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
這樣，如果想在某些情況下單獨修改每個屬性時，就不需要再復(fù)制其他沒有變化的屬性。
原始的 CSS 變換屬性和新屬性之間的一個主要區(qū)別是應(yīng)用聲明的變換順序：
這意味著以下兩端代碼的執(zhí)行結(jié)果是一樣的：
.transform-individual {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
.transform-individual-alt {
rotate: 30deg;
translate: 50% 0;
scale: 1.2;
}
在這兩種情況下，目標(biāo)元素都會首先在 X 軸上平移 50%，然后旋轉(zhuǎn) 30 度，最后縮放 1.2。
如果其中一個單獨的變換屬性與 transform 屬性一起聲明，則首先應(yīng)用單獨的變換（rotate, scale, translate），最后應(yīng)用 transform。
瀏覽器對 rotate, scale, translate 的支持情況如下：
subgrid 允許元素在行軸或列軸上繼承其父元素的網(wǎng)格，主要解決當(dāng)網(wǎng)格嵌套網(wǎng)格時，子網(wǎng)格的位置和軌道不能和父網(wǎng)格對齊的問題。使用子網(wǎng)格時，需要讓 grid-template-columns 和 grid-template-rows 屬性的值使用 subgrid 關(guān)鍵字。
下面來看一個例子，有一個嵌套網(wǎng)格，它正在為行和列創(chuàng)建自己的軌道。這些軌道是獨立的，因此不會與父網(wǎng)格上的軌道對齊。
<div class="grid">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="subgrid">
<div class="child"></div>
<div class="child"></div>
</div>
</div>
.subgrid {
grid-column: auto / span 3;
display: grid;
gap: 10px;
grid-template-columns: 1fr 1fr;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-auto-rows: minmax(100px, auto);
max-width: 800px;
margin: 2em auto;
gap: 10px;
padding: 10px;
background-color: rgba(255,255,255,.8);
}
.grid > div {
background-color: #2B3745;
padding: 10px;
}
.subgrid > div {
background-color: #D9D9E5;
}
上面代碼的效果如下：
下面將 grid-template-columns 的軌道列表替換為 subgrid 關(guān)鍵字。嵌套網(wǎng)格的列軌道現(xiàn)在與父級上的列軌道對齊。
.subgrid {
grid-template-columns: subgrid;
}
更改完之后的效果如下：
只要父級本身就是一個網(wǎng)格，就可以繼續(xù)將子網(wǎng)格繼承到子級中。以下示例顯示了三個網(wǎng)格，每個網(wǎng)格都嵌套在另一個網(wǎng)格中，并繼承了其父級的軌道。子項指示哪個網(wǎng)格是它們的父項。
<div class="one">
<div class="child">Parent one</div>
<div class="two">
<div class="child">Parent two</div>
<div class="three">
<div class="child">Parent three</div>
</div>
</div>
</div>
.one {
display: grid;
grid-template-columns: repeat(8,1fr);
max-width: 800px;
margin: 2em auto;
gap: 10px;
padding: 10px;
background-color: rgba(255,255,255,.8);
}
.two {
grid-column: 2 / 8;
grid-row: 2 ;
display: grid;
grid-template-columns: subgrid;
border: 2px solid #96060A;
}
.three {
display: grid;
grid-column: 2 / 6;
grid-row: 2;
grid-template-columns: subgrid;
border: 2px solid #1C2E01;
}
.child {
background-color: #2B3745;
padding: 10px;
color: #fff;
}
使用 Firefox DevTools 突出顯示每個網(wǎng)格，突出顯示外部網(wǎng)格顯示子網(wǎng)格和網(wǎng)格項如何與該網(wǎng)格對齊：
瀏覽器對子網(wǎng)格的支持情況如下：
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
