盧偉冰長文解析K60至尊版 對(duì)Redmi有著里程碑式的意義
在今天的Redmi后性能時(shí)代戰(zhàn)略發(fā)布會(huì)結(jié)束之后，Redmi總經(jīng)理盧偉冰又帶來了一篇長文，詳解了為什么 Redmi 要開啟后性能時(shí)代？為什么選擇和 MediaTek、Pixelworks 深度合作？以及后性
在過去的幾年里，前端開發(fā)發(fā)生了革命性的變化，變得更高效、更快，當(dāng)然也更大。 SPA 框架的引入使 Web 開發(fā)發(fā)生了重大變化。更多繁重的工作轉(zhuǎn)移到了前端，需要處理更多的事情，例如動(dòng)態(tài) UI、路由、狀態(tài)管理等。因此，程序員習(xí)慣于使用新方法和第三方來減輕一些繁重的工作。當(dāng)然，它有它的優(yōu)點(diǎn)，但也有缺點(diǎn)，讓我們變得更懶惰。但是如果我告訴你，在前端的這段時(shí)間里，你可能錯(cuò)過了一些基本功能，而不是使用它們，而是使用第三方包甚至更糟糕的是，自定義樣式來實(shí)現(xiàn)基本的東西？是的，當(dāng)然，讓我們從 HTML 中您可能不知道的 15 個(gè)功能的基礎(chǔ)開始，它們將幫助您輕松實(shí)現(xiàn)友好的 UI。事不宜遲，我們開始學(xué)習(xí)吧！
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>
<details> 標(biāo)簽向用戶提供按需詳細(xì)信息。默認(rèn)情況下，小部件是折疊的。打開時(shí)，它會(huì)展開并顯示其中的內(nèi)容。
<summary> 標(biāo)簽與 <details> 一起使用實(shí)現(xiàn)一個(gè)可以折疊打開標(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>
<datalist> 標(biāo)記指定預(yù)定義選項(xiàng)列表并提供自動(dòng)完成功能。
<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>
范圍輸入類型的表單類似于滑塊范圍選擇器。
<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>
<meter> 標(biāo)簽定義了定義范圍內(nèi)的標(biāo)量測(cè)量值或分?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>
使用 <mark> 標(biāo)記突出顯示任何文本內(nèi)容。
<p>Did you know that <mark>not all heroes wear capes.</mark></p>
實(shí)際上有一個(gè)標(biāo)記用于帶刪除線的文本，另一個(gè)標(biāo)記表示替換文本。
<p><del>Iron Man</del><ins>Captain America</ins>is ehmmm.. yea the captain!</p>
在隱藏元素方面，我們都嘗試過不同的方法，比如使用 opacity:0, visibility:hidden, height:0; width:0, display:none 在我們的 CSS 文件中。每一個(gè)都有自己的用例，適用于不同的布局。另一個(gè)與它們類似的選項(xiàng)是隱藏的 HTML 屬性。如果一個(gè)元素在其上指定了隱藏，它將被隱藏。我碰巧有用于存儲(chǔ)值的隱藏輸入，所以如果您也需要它，請(qǐng)不要吃驚。
<div hidden>...</div><time> 標(biāo)記定義特定時(shí)間（或日期時(shí)間）。
該元素的 datetime 屬性用于將時(shí)間轉(zhuǎn)換為機(jī)器可讀的格式，以便瀏覽器可以提供通過用戶日歷添加日期提醒，搜索引擎可以產(chǎn)生更智能的搜索結(jié)果。
<p>The next assemble meeting is postponed on <time datetime="2022-12-01">2022-12-01</time>.</p>
<audio> 標(biāo)簽將定義一種聲音，該標(biāo)簽可以與三個(gè)支持的文件一起使用。它們是 MP3、WAV 和 OGG。然后瀏覽器將選擇它支持的第一個(gè)。
<audio controls> <source src=”introduction.ogg” type=”audio/ogg”> <source src=”introduction.mp3” type=”audio/mpeg”> Your browser does not support this audio </audio>好了，今天的分享就到這里，通過本文的學(xué)習(xí)，你可以輕松的使用HTML原生標(biāo)簽?zāi)芰?，就能夠?qū)崿F(xiàn)以前復(fù)雜的第三方UI組件提供的功能。
本文鏈接：http://www.tebozhan.com/showinfo-26-70391-0.html分享 15 個(gè) HTML 新特性，大多數(shù)人可能不知道，建議盡早使用上
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： 十個(gè)超有用的 Python 的庫
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)