五一期間，知道大家都比較懶，我也是。所以寫篇簡單且基礎的技術小文，不需要動腦子，掃一眼就能掌握的那種。

DETAILS 標簽

<details>?標簽將額外的詳情信息隱藏起來，用戶在需要的時候點擊即可展開查看詳情。

<details><p>這是一段文字</p><p>用戶可以在需要或不需要的時候選擇顯示或隱藏</p> </details>

SUMMARY 標簽

<details>?標簽的內容默認是“詳細信息”，在其內部放置?summary?標簽可以指定該值：

<details><summary>1、Summary 標簽</summary><p>這是一段文字</p><p>用戶可以在需要或不需要的時候選擇顯示或隱藏</p> </details>

DIALOG 標簽

<dialog>?標簽用來展示一個對話框，通過?open?屬性來指定顯示和隱藏。

<dialog open>這是一個打開的對話框 </dialog>

TIME 標簽

<p>我每天在 <time>6:00</time> 發表文章</p>

<time>?標簽用于 date 或 time 的展示，效果上沒有什么特別的，在開發的角度增加代碼的可讀性而已。

DATALIST 標簽

<datalist>?標簽用來為各種類型的?<input>?標簽提供數據源，有點像?<select>?標簽，但它結合?<input>?標簽可以支持自定義輸入和檢索。

<input list="lang" placeholder="請選擇語言" /><datalist id="lang"><option>JavaScript</option><option>C#</option><option>Python</option><option>Rust</option> </datalist>

PROGRESS 標簽

<progress>?標簽用來表示某個任務的進度，效果是一個進度條。當不指定 value 屬性時是動畫效果。

<label for="file1">正在下載</label> <progress id="file1" value="30" max="100">30%</progress> <p/> <label for="file2">正在下載</label> <progress id="file2"></progress>

SMALL 標簽

<small>?標簽使用文本更小，一般用來修飾不重要的文本信息。

<p>價格：199<small>.00</small> 元</p>

完。

總結

以上是生活随笔為你收集整理的​你可能不知道的7个HTML小技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。