分享 15 個 HTML 新特性，大多數(shù)人可能不知道，建議盡早使用上
在過去的幾年里，前端開發(fā)發(fā)生了革命性的變化，變得更高效、更快，當(dāng)然也更大。 SPA 框架的引入使 Web 開發(fā)發(fā)生了重大變化。更多繁重的工作轉(zhuǎn)移到了前端，需要處理更多的事情，例如動態(tài) UI、路由、狀態(tài)管理等。因此，程序員習(xí)慣于使用新方法和第三方來減輕一些繁重的工作。當(dāng)然，它有它的優(yōu)點，但也有缺點，讓我們變得更懶惰。但是如果我告訴你，在前端的這段時間里，你可能錯過了一些基本功能，而不是使用它們，而是使用第三方包甚至更糟糕的是，自定義樣式來實現(xiàn)基本的東西？是的，當(dāng)然，讓我們從 HTML 中您可能不知道的 15 個功能的基礎(chǔ)開始，它們將幫助您輕松實現(xiàn)友好的 UI。事不宜遲，我們開始學(xué)習(xí)吧！
1、內(nèi)容可編輯屬性
contenteditable 是可以在元素上設(shè)置以使內(nèi)容可編輯的屬性。它適用于 DIV、P、UL 等元素。您需要這樣 <element contenteditable=”true|false”> 設(shè)置它。
<h2> Earth 616 superheroes </h2>
<ul class="content-editable" contenteditable="true">
<li> 1. Iron Man</li>
<li> 2. Captain America</li>
<li> 3. Black Panther</li>
</ul>
2、詳情標(biāo)簽（Details）
<details> 標(biāo)簽向用戶提供按需詳細信息。默認(rèn)情況下，小部件是折疊的。打開時，它會展開并顯示其中的內(nèi)容。
<summary> 標(biāo)簽與 <details> 一起使用實現(xiàn)一個可以折疊打開標(biāo)題及詳情內(nèi)容。
<details>
<summary>Click here to see more from Earth 616</summary>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Location</th>
<th>Job</th>
</tr>
<tr>
<td>1</td>
<td>John Doe</td>
<td>Earth</td>
<td>Human</td>
</tr>
</table>
</details>
3、Datalist 標(biāo)簽
<datalist> 標(biāo)記指定預(yù)定義選項列表并提供自動完成功能。
<label for=”superhero”>In case of emergency, which superhero would you call?:</label>
<input list=”superheroes” name=”superhero” id=”superhero”>
<datalist id=”superheroes”>
<option value=”Iron Man”>
<option value=”Captain America”>
<option value=”Black Panther”>
<option value=”Thor”>
<option value=”Spider Man”>
</datalist>
4、Range 屬性
范圍輸入類型的表單類似于滑塊范圍選擇器。
<head>
<script>
function changeValue(event) {
let value = event.target.value;
let output = document.getElementById('output');
output.value = value;
}
</script>
</head>
<body>
<form method="post">
<input
type="range"
name="range"
min="0"
max="100"
step="1"
value=""
onchange="changeValue(event)"/>
</form>
<div class="range">
<output id="output" name="result"> </output>
</div>
</body>
5、Meter 標(biāo)簽
<meter> 標(biāo)簽定義了定義范圍內(nèi)的標(biāo)量測量值或分?jǐn)?shù)值
<label for="home">Cloud storage</label>
<meter id="home" value="0.4">40%</meter><br>
<label for="root">Internal storage</label>
<meter id="root" value="0.6">60%</meter><br>
6、 Progress 標(biāo)簽
<progress> 標(biāo)簽表示任務(wù)的進度。
<label for="home">6/10 tasks done</label>
<progress value="60" max="100" id="home"></progress>
7、顏色選擇器
一個簡單的顏色選擇器。
<p id="colorPicker">Color Picker!</p>
<input type="color" onchange="showColor(event)">
8、標(biāo)記內(nèi)容標(biāo)簽
使用 <mark> 標(biāo)記突出顯示任何文本內(nèi)容。
<p>Did you know that <mark>not all heroes wear capes.</mark></p>
9、塊引用和引用
如果您要包含來自不同來源的內(nèi)容，您絕對應(yīng)該引用該來源。
<figure>
<blockquote>
<p>It's an imperfect world, but its the only one we've got.</p>
</blockquote>
<figcaption>--TONY STARK, <cite>IRON MAN</cite></figcaption>
</figure>
10、縮寫標(biāo)簽（Abbreviation）
“abbr”是abbreviation的簡稱！這里的想法是，如果您使用標(biāo)題（例如“Mr.”）或首字母縮略詞（例如“SHIELD”），abbr 標(biāo)簽會準(zhǔn)確指示該縮寫的含義。
<p>Agent Phil Coulson leads a team of highly skilled agents from the
global law-enforcement organisation known as
<abbr title="Strategic Homeland Intervention, Enforcement,
and Logistics Division">SHIELD</abbr>.
</p>
11、 and
實際上有一個標(biāo)記用于帶刪除線的文本，另一個標(biāo)記表示替換文本。
<p><del>Iron Man</del>
<ins>Captain America</ins>
is ehmmm.. yea the captain!</p>
12、Output 標(biāo)簽
<output> 標(biāo)簽表示計算的結(jié)果。通常，此元素定義一個區(qū)域，該區(qū)域?qū)⒂糜陲@示某些計算的文本輸出。
<form notallow="x.value=parseInt(a.value) * parseInt(b.value)">
<input type="number" id="a" value="0">
* <input type="number" id="b" value="0">
= <output name="x" for="a b"></output>
</form>
13、Hidden 屬性
在隱藏元素方面，我們都嘗試過不同的方法，比如使用 opacity:0, visibility:hidden, height:0; width:0, display:none 在我們的 CSS 文件中。每一個都有自己的用例，適用于不同的布局。另一個與它們類似的選項是隱藏的 HTML 屬性。如果一個元素在其上指定了隱藏，它將被隱藏。我碰巧有用于存儲值的隱藏輸入，所以如果您也需要它，請不要吃驚。
<div hidden>...</div>14、Time 標(biāo)簽
<time> 標(biāo)記定義特定時間（或日期時間）。
該元素的 datetime 屬性用于將時間轉(zhuǎn)換為機器可讀的格式，以便瀏覽器可以提供通過用戶日歷添加日期提醒，搜索引擎可以產(chǎn)生更智能的搜索結(jié)果。
<p>The next assemble meeting is postponed on
<time datetime="2022-12-01">2022-12-01</time>.</p>
15、Audio 標(biāo)簽
<audio> 標(biāo)簽將定義一種聲音，該標(biāo)簽可以與三個支持的文件一起使用。它們是 MP3、WAV 和 OGG。然后瀏覽器將選擇它支持的第一個。
<audio controls>
<source src=”introduction.ogg” type=”audio/ogg”>
<source src=”introduction.mp3” type=”audio/mpeg”>
Your browser does not support this audio
</audio>結(jié)束
好了，今天的分享就到這里，通過本文的學(xué)習(xí)，你可以輕松的使用HTML原生標(biāo)簽?zāi)芰Γ湍軌驅(qū)崿F(xiàn)以前復(fù)雜的第三方UI組件提供的功能。
