Mate60手機殼曝光 致敬自己的經典設計
8月3日消息，今天下午博主數碼閑聊站帶來了華為Mate60的第三方手機殼圖，可以讓我們在真機發布之前看看這款華為全新旗艦的大致輪廓。從曝光的圖片看，Mate 60背后攝像頭面積依然
在過去的幾年里，前端開發發生了革命性的變化，變得更高效、更快，當然也更大。 SPA 框架的引入使 Web 開發發生了重大變化。更多繁重的工作轉移到了前端，需要處理更多的事情，例如動態 UI、路由、狀態管理等。因此，程序員習慣于使用新方法和第三方來減輕一些繁重的工作。當然，它有它的優點，但也有缺點，讓我們變得更懶惰。但是如果我告訴你，在前端的這段時間里，你可能錯過了一些基本功能，而不是使用它們，而是使用第三方包甚至更糟糕的是，自定義樣式來實現基本的東西？是的，當然，讓我們從 HTML 中您可能不知道的 15 個功能的基礎開始，它們將幫助您輕松實現友好的 UI。事不宜遲，我們開始學習吧！
contenteditable 是可以在元素上設置以使內容可編輯的屬性。它適用于 DIV、P、UL 等元素。您需要這樣 <element contenteditable=”true|false”> 設置它。
<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> 標簽向用戶提供按需詳細信息。默認情況下，小部件是折疊的。打開時，它會展開并顯示其中的內容。
<summary> 標簽與 <details> 一起使用實現一個可以折疊打開標題及詳情內容。
<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> 標記指定預定義選項列表并提供自動完成功能。
<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> 標簽定義了定義范圍內的標量測量值或分數值
<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> 標記突出顯示任何文本內容。
<p>Did you know that <mark>not all heroes wear capes.</mark></p>
實際上有一個標記用于帶刪除線的文本，另一個標記表示替換文本。
<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 文件中。每一個都有自己的用例，適用于不同的布局。另一個與它們類似的選項是隱藏的 HTML 屬性。如果一個元素在其上指定了隱藏，它將被隱藏。我碰巧有用于存儲值的隱藏輸入，所以如果您也需要它，請不要吃驚。
<div hidden>...</div><time> 標記定義特定時間（或日期時間）。
該元素的 datetime 屬性用于將時間轉換為機器可讀的格式，以便瀏覽器可以提供通過用戶日歷添加日期提醒，搜索引擎可以產生更智能的搜索結果。
<p>The next assemble meeting is postponed on <time datetime="2022-12-01">2022-12-01</time>.</p>
<audio> 標簽將定義一種聲音，該標簽可以與三個支持的文件一起使用。它們是 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>好了，今天的分享就到這里，通過本文的學習，你可以輕松的使用HTML原生標簽能力，就能夠實現以前復雜的第三方UI組件提供的功能。
本文鏈接：http://m.www897cc.com/showinfo-26-70391-0.html分享 15 個 HTML 新特性，大多數人可能不知道，建議盡早使用上
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 十個超有用的 Python 的庫
下一篇： 異步Rust：構建實時消息代理服務器
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號