BAT大佬推薦使用的HTML5的十個功能

2021-02-16 前端陽光
原文地址：https://dev.to/atapas/10-useful-html5-features-you-may-not-be-using-2bk0

HTML5不是新事物。自從最初發布（2008年1月）以來，我們一直在使用它的一些功能。後來，我再次仔細查看了HTML5功能列表。看到我發現了什麼？到目前為止，我還沒有真正使用過它！

在本文中，我列出了十個HTML5我過去沒用過但現在發現有用的功能。我還創建了一個工作示例流程並託管在Netlify。希望您也覺得它有用。

點擊演示實例：https://html5-tips.netlify.app/

太好了，讓我們開始介紹它們的解釋，快速碼起來吧。您可以在Twitter上關注我，以了解我將來的文章和工作。

🔥 Details Tag

<details>標籤提供隨需應變的細節內容給用戶。如果需要按需向用戶顯示內容，請使用此標記。默認情況下，詳細內容是關閉的。打開後，它將展開並顯示其中的內容。

<summary>標籤與<details>一起使用，來為它指定一個可見的標題。

Code
<details>
     <summary>Click Here to get the user details</summary>
         <table>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Location</th>
                    <th>Job</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>Adam</td>
                    <td>Huston</td>
                    <td>UI/UX</td>
                </tr>
          </table>
``  </details>
效果演示
您可以從這裡開始查看演示：https : //html5-tips.netlify.app/details/index.html
小提示
在GitHub Readme中使用它來顯示需要的詳細信息。隱藏大量的文字並僅按需顯示它。酷吧？
點擊查看例子：https://github.com/atapas/notifyme#properties
🔥 Content Editable 
contenteditable是可以在元素上設置以使內容可編輯的屬性
可以與DIV，P，UL等元素一起使用。您必須像這樣指定它：<element contenteditable="true|false">。
注意，如果contenteditable未在元素上設置屬性，則會從其父級繼承該屬性。
Code
<h2> Shoppping List(Content Editable) </h2>
 <ul class="content-editable" contenteditable="true">
     <li> 1. Milk </li>
     <li> 2. Bread </li>
     <li> 3. Honey </li>
</ul>
效果演示
您可以從這裡開始查看演示：https://html5-tips.netlify.app/content-editable/index.html
小提示
可以使span或div元素可編輯，並且可以使用CSS樣式向其添加任何豐富的內容。這將比使用input 輸入框更好。試一試！
🔥 Map 
<map>標籤可以幫助定義image map，image map是其中具有一個或多個可單擊區域的任何圖像。map標籤與<area>標籤一起確定可點擊區域。可點擊區域可以是矩形，圓形或多邊形區域中的任意一種。如果您未指定任何形狀，它將默認整個圖像。
Code
<div>
    <img src="circus.jpg" width="500" height="500" alt="Circus" usemap="#circusmap">

    <map name="circusmap">
        <area shape="rect" coords="67,114,207,254" href="elephant.htm">
        <area shape="rect" coords="222,141,318, 256" href="lion.htm">
        <area shape="rect" coords="343,111,455, 267" href="horse.htm">
        <area shape="rect" coords="35,328,143,500" href="clown.htm">
        <area shape="circle" coords="426,409,100" href="clown.htm">
    </map>
 </div>
效果演示
您可以從這裡開始查看演示：https://html5-tips.netlify.app/map/index.html
小提示
圖像貼圖有其自身的缺點，但是您可以將其用於視覺演示。我們可以用全家福照片嘗試一下並深入研究個人照片
🔥 Mark Content 
使用<mark>標記突出顯示任何文本內容。
Code
 <p> Did you know, you can <mark>"Highlight something interesting"</mark> just with an HTML tag? </p>
效果演示
您可以從這裡開始查看演示：https://html5-tips.netlify.app/mark/index.html
小提示
您始終可以使用CSS更改突出顯示顏色，
mark {
  background-color: green;
  color: #FFFFFF;
}
🔥 data-* attribute 
data-*屬性用於存儲頁面或應用程式專用的自定義數據。可以在JavaScript代碼中使用存儲的數據來創建更多的用戶體驗。
data- *屬性由兩部分組成：
屬性名稱不得包含任何大寫字母，並且前綴「 data-」後必須至少長一個字符Code
<h2> Know data attribute </h2>
 <div 
       class="data-attribute" 
       id="data-attr" 
       data-custom-attr="You are just Awesome!"> 
   I have a hidden secret!
  </div>

 <button onclick="reveal()">Reveal</button>

function reveal() {
   let dataDiv = document.getElementById('data-attr');
    let value = dataDiv.dataset['customAttr'];
   document.getElementById('msg').innerHTML = `<mark>${value}</mark>`;
}
注意：要在JavaScript中讀取這些屬性的值，可以使用getAttribute()，但是規範定義了一種更簡單的方法：使用dataset屬性。
效果演示
您可以從這裡開始查看演示：https://html5-tips.netlify.app/data-attribute/index.html
小提示
您可以使用它在頁面中存儲一些數據，然後使用REST調用將其傳遞給伺服器。
🔥 Output Tag 
<output>標籤表示運算的結果。通常，此元素定義一個區域，該區域將用於顯示某些計算得出的文本。
Code
<form oninput="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>
效果演示
您可以從這裡開始查看演示：https://html5-tips.netlify.app/output/index.html
小提示
如果要在客戶端JavaScript中執行任何計算，並且希望結果反映在頁面上，請使用<output>標記。您不必走動使用可獲取元素的額外步驟：getElementById()。
🔥 Datalist 
<datalist>標籤指定了預先定義的選項列表，並允許用戶添加更多。它提供了一項autocomplete功能，使您可以提前輸入所需的選項。
Code
<form action="" method="get">
    <label for="fruit">Choose your fruit from the list:</label>
    <input list="fruits" name="fruit" id="fruit">
        <datalist id="fruits">
           <option value="Apple">
           <option value="Orange">
           <option value="Banana">
           <option value="Mango">
           <option value="Avacado">
        </datalist>
     <input type="submit">
 </form>  
效果演示
您可以從這裡開始查看演示：https://html5-tips.netlify.app/datalist/index.html
小提示
與傳統<select>-<option>標籤有何不同？Select標記用於從選項中選擇一個或多個項目，您需要瀏覽列表以進行選擇。Datalist是具有自動完成支持的高級功能。也就是說Datalist標籤不僅可以選擇，還可以輸入
🔥 Range(Slider) 
range具有滑塊，範圍選擇的輸入類型
Code
<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> 
效果演示
您可以從這裡開始查看演示：https://html5-tips.netlify.app/range/index.html
小提示
在html5中，沒有叫slider的東西
🔥 Meter 
使用<meter>標籤測量給定範圍內的數據。
Code
`<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> `
效果演示
您可以從這裡開始查看演示：https://html5-tips.netlify.app/meter/index.html
小提示
請勿將<meter>標籤用於進度條。我們有<Progress>HTML5的標記。
<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>
下一步是什麼？ 
好吧，我敢肯定，我留下了一些有用的東西。請提供有關此文章以及您對HTML5的學習的評論。
如果對您有用，請點讚/分享，這樣也可以吸引其他人。我對UI / UX充滿熱情，並喜歡通過文章分享我的知識。
文章首發於 微信公眾號《前端陽光》

相關焦點

  • 怎麼理解Html5?Html5和html4相比有哪些優勢?怎麼學好html5?
    ，html5應用凝結很多人的心血，作為下一代超文本標記語言的核心，html5主要增加了新元素互操作性主要是針對行動裝置和多媒體。html5是現在前端培訓比較火熱的語言，今天為大家簡單介紹一下html5語言。Html5和html4相比有哪些優勢?
  • HTML5標籤對seo的作用,以及主題HTML5標籤自定義功能介紹
    HTML5標籤對於seo的作用html5增加了非常多的新的標籤，這些標籤能夠非常容易的將我們的網頁各個功能區域區分開來。html5和html4的區別我們知道HTML4 是採用「div+css」，也就是說，網頁的各個功能區域都是使用div標籤進行排版的，而這些div的區分只是使用css類名稱進行的，而搜尋引擎是不會理解類名稱是有什麼作用的。下面的圖片可以幫助你理解HTML4的排版：可以見到上圖。
  • Bat——帶語法高亮的cat天使
    使用cat命令，可以將文件的內容列印到標準輸出，還能支持將多個文件連接顯示以及附加到一個文件。蟲蟲今天給大家介紹一個用Rust（一個新的運行時安全系統程式語言）開發的超酷的cat替代命令Bat，和logo中宣稱那樣的它不僅僅是對cat的clone，還美化了cat，增加了很多功能，給cat"增加了一個翅膀"。它就是活脫脫一個天使，那麼這個天使會帶來哪些功能呢，請聽小編給你慢慢道來。
  • html5換行符元素:
    元素
    這是因為html5在遇到常規的換行符的時候，只是顯示一個空格而已，而不會真正地在新的一行上顯示後續的內容。要在段落內的文本中手動換行，除了使用<pre>元素還真的就只有這個<br>元素了。上面這段代碼的執行結果如圖1所示，可以看到雖然我們在第一個句子的「鬥爭」二字後面按下了回車鍵，但是該回車鍵並沒有起到換行的作用。
  • 【佳瑾學習】如何從Flash轉換到HTML5
    最終這一需求導向了html5，因為html5能夠提供靈活而強大的學習體驗。 從Flash轉換到HTML5的五大關鍵點 1．萃取要啟動轉換過程，首先要確保你拿到所有必須的內容、媒體和支持材料。沒有它們你無法順利轉換。集合完整的材料，會讓整個轉換過程減少一些繁瑣細節，更及時，更少錯誤。
  • html5中progress標籤(進度條)的詳細介紹
    本篇將介紹html5中progress標籤（進度條）的詳細用法，有興趣的朋友可以了解一下！在html5中新增了很多實用的標籤，今天小編介紹的就是其中一個，即progress標籤。學會progress標籤，可以讓我們很輕鬆的創建一個進度條，接下來跟著小編一起來學習吧！
  • PLC調用.bat,實現萬能的Windows命令
    在工作中實踐總結，在朋友圈分享討論，做最接地氣的公眾號內容摘要年初有客戶想讓PLC把Ｗindows系統切到休眠，今天又有客戶想用PLC刪除文件夾，我發現了一個萬能的辦法：製作.bat凡是在cmd窗體中可以完成的工作，都可以用PLC調用.bat來完成關鍵詞方法1, 製作.bat文件用記事本可編輯command命令，並另存為.bat的文件。
  • html5中meter標籤的詳細介紹
    在html5版本中新增了很多新標籤，今天小編要介紹的就是其中一個，即meter標籤。meter標籤由於是html5新增標籤，目前IE瀏覽器還不支持，所以用的還不是很多。一、meter標籤定義及用法在html中，meter標籤是html5版本中新增標籤，是使用來定義已知範圍或分數值內的標量測量（比如：磁碟用量、相關性等等）。meter標籤的效果很像進度條，但是它不作為進度條來使用。如果要表示進度條，通常使用progress標籤。
  • HTML5調用攝像頭並拍照
    利用html5特性，調用攝像頭，並利用canvas拍照先簡單的添加需要的控制項<video id="video" autoplay=""style='width:640px;height:480px'></video><button id='picture
  • 如何快速整理6年的excel文檔,使用bat命令,雙擊一下即可搞定
    當我們想要查找其中的某一個或者說某一類文件的時候就會非常的浪費時間，今天就跟就跟大家分享下如何快速整理同一個文件夾下的所有excel文檔一、獲取姓名如下圖我們將6年的銷售數據都放在了同一個文件夾中，我們想要根據年份來excel放在對應的文件夾中，首先我們在地址欄複製這個文件夾的路徑，然後新建一個excel，點擊數據功能組找到數據查詢選擇從文件找到從文件夾
  • excel與bat命令配合,1分鐘新建366個文件夾
    Hello，大家好，今天跟大家分享下，我們如何使用excel與bat命令為2020年的每天都新建一個文件夾，他的操作也並不難，下面就讓我們來一起操作下吧一、填充日期想要為2020年的每一天都新建一個文件夾，首先我們需要先吧2020年的日期都羅列出來首先我們在A1單元格中輸入2020/1/1，然後點擊這個日期在開始功能組中找到填充，然後在填充中選擇序列，將序列產生設置為列，將類型設置為日期，然後將單位設置為日，隨把步長設置為1，終止時間設置為2020/12/31，然後點擊確定，這樣的話即可填充整年的日期
  • html5中nav標籤(導航連結)的詳細介紹
    本篇將介紹html5中nav標籤（導航連結）的詳細用法，有興趣的朋友可以了解一下！在html5版本中，新增了很多語義標籤，比如：header標籤、footer標籤、aside標籤、nav標籤等等。這些語義標籤沒有實際的顯示效果，只是起到語義的作用。今天小編要介紹的就是其中一個，即nav標籤。
  • 讓IE瀏覽器支持HTML5標準的方法
    自HTML5標準的提出就得到非常多的關注，而作為全球使用用戶最多的IE瀏覽器能夠支持HTML5標準也是大家備受關注一個問題，上周微軟在技術大會上就表示目前微軟正在開發的IE9將更加支持HTML5標準，但對於IE9是否將完全支持HTML5所有的標準，微軟卻表現的有點含糊其辭。
  • Sketchpad:基於html5在線圖像繪畫板
    圖為Sketchpad相關圖片(圖片來源：Techweb.com.cn)【TechWeb報導】11月16日消息，新酷網站：基於html5在線圖像繪畫板SketchpadSketchpad，基於html5
  • 使用React和HTML5表單驗證API處理表單
    在本教程中，我們將看看如何使用React和HTML5的現代組合來處理表單提交和驗證。當我們在Web應用程式中討論用戶輸入時，我們經常首先想到HTML表單。Web表單從HTML的第一個版本開始就已經可用。顯然，該功能已於1991年推出，並在1995年以RFC 1866標準進行了標準化。
  • 使用HTML5畫布實現的超棒javascript動畫儀錶板:gauge.js
    使用HTML5畫布實現的超棒javascript動畫儀錶板：gauge.js 在線演示今天我們分享來自guage.js的超棒動畫儀錶板實現，這個類庫使用
  • 開源項目名字就叫BAT,具有語法高亮的Cat類命令
    使用cat命令，我們可以將文件的內容列印到標準輸出中，將多個文件合成為一個目標文件，然後將幾個文件附加到目標文件中。近日，我偶然發現了一個名為「 Bat」的實用程序，一聽這名字是不是就覺得有點高端大氣上檔次。
  • 叫我女皇陛下寶藏秘聞新增一鍵合成功能介紹
    叫我女皇陛下寶藏秘聞新增功能介紹。叫我女皇陛下是一款基於html5研發的2D卡通版養成類遊戲，在這裡，你可以開啟自己的皇宮養成之旅，結識各種絕色皇子，並與他結緣。小編今天帶來的就是寶藏秘聞新增功能介紹，還不知道寶藏秘聞優化情況的小夥伴們快來看看吧!
  • 每周學點測試小知識-bat批處理命令
    打開或者關閉回顯：echo on/off將@字符放在命令前面可以關閉這條命令的回顯，無論此時回顯功能是關閉還是打開。所以我們經常能在bat腳本第一行看到@echo off，這樣整個腳本的命令都不會回顯。
  • 流媒體RTMP推流伺服器EasyDSS如何在Nodejs中調用bat或sh腳本?
    點播功能主要包含：上傳、轉碼、分發。直播功能，主要包含：直播、錄像，直播支持RTMP輸入，RTMP/HLS/HTTP-FLV的分發輸出；錄像支持自定義保存時長、檢索及下載。但是它比Windows下的批處理更強大，比用其他編程程序編輯的程序效率更高，它使用了Linux/Unix下的命令。bat腳本bat腳本是windows上所用的腳本，我們經常使用的cmd一些命令就可以使用。也許有的朋友會問為什麼不直接使用powershell腳本？