歡迎來到我的 HTML can do 這個系列,第 1 部分。

為了與我的GitHub-Can-Do-This 系列保持一致,今天我想寫一篇關於HTML 可以做的很酷的事情的文章(很多人顯然不知道)。

我堅信,越多的人理解 HTML 並充分利用它,網路就會自動變得更容易存取。

表中的內容

  1. 詳細資訊和摘要 HTML 標籤

  2. 電子郵件或電話號碼連結

  3. 自動完成清單

  4. 文字修改


由於我不知道接下來還會有多少部分,因此我將透過按字母順序描述出色的標籤及其背後的 HTML 魔力來開始本系列。

1. 詳細資訊和摘要

開啟/關閉小部件通常使用 JavaScript 建立。很長一段時間以來,有一個預設的 HTML 標籤恰好涵蓋了這種行為。

樣式可以根據需要進行調整。預設情況下,該小部件是關閉的。賦予 <details> 屬性 open,它會從頭開始顯示其內容。

{% codepen https://codepen.io/YuriDevAT/pen/dyaBQZm %}

2. 連結到電子郵件地址或電話號碼

<a> 標籤有一個 href 屬性,它指示連結的目的地。它可以連結到網頁、文件、電子郵件地址、同一頁面中的位置或 URL 可以尋址的任何其他內容。

href 屬性負責使 <a> 可聚焦並在按 Enter 鍵時啟動連結。

連結到電子郵件地址

如果您在「href」的 URL 方案中新增「mailto:」和預期收件者的電子郵件地址,則按一下時會開啟新的外寄電子郵件。

<a href="mailto:[email protected]">Send email to nowhere</a>

您還可以在 URL 中加入更多詳細訊息,包括抄送、密件副本、主題和正文 😯。

<a href="mailto:[email protected][email protected]&subject=This%20is%20the%20subject">Send email with subject to nowhere and nobody</a>

詳細了解連結至電子郵件地址 rfc6068

連結到電話號碼

將電話號碼新增至「tel:」之後的「href」時,您也可以連結到電話號碼。

<a href="tel:+18005551239">(800) 555 1239</a>

連結行為可能因設備而異(關於連結到電話號碼的 MDN 官方文件):

  • 在行動裝置上,系統會自動撥打號碼。

  • 大多數作業系統都有可以撥打電話的程序,例如 Skype 或 FaceTime。

  • 網站可以使用registerProtocolHandler撥打電話,例如web.skype.com。

  • 其他行為包括將號碼儲存到聯絡人,或將號碼傳送到另一台裝置。

詳細了解連結到電話號碼 rfc3966

{% codepen https://codepen.io/YuriDevAT/pen/OJdZLKK %}

3. 自動完成清單

使用“”,當使用者開始在輸入欄位中寫入時會出現一個下拉式選單,並使他們可以從清單中的可用選項中進行選擇。

{% codepen https://codepen.io/YuriDevAT/pen/zYeVMbE %}

4. 文字修改

使用特定標籤,可以直接修改文本,無需額外的 CSS。非常便利。

{% codepen https://codepen.io/YuriDevAT/pen/LYqKXwJ %}


謝謝閱讀。對此,我真的非常感激!


原文出處:https://dev.to/yuridevat/html-can-do-this-part-1-3ab2


共有 0 則留言