8個你可能不知道的令人震驚的 HTML 技巧

語言: CN / TW / HK

攜手創作,共同成長!這是我參與「掘金日新計劃 · 8 月更文挑戰」的第4天,點擊查看活動詳情

大家好,我是速凍魚🐟,一條水系前端💦,喜歡花裏胡哨💐,持續沙雕🌲
歡迎小夥伴們加我微信sudongyuer拉你進羣
關注我的公眾號:前端速凍魚一起進步,期待與大家共同成長🥂

1. 捕獲屬性打開你的設備攝像頭

正如 input 標記具有 email、 text 和 password 屬性一樣,還有一個屬性可以打開移動設備的攝像頭來捕捉圖像。

這是通過 capture 屬性完成的,該屬性可以有兩個值:

  • 前置攝像頭用户
  • 後置攝像頭的環境

html <input type="file" capture="user" accept="image/*">

2. 網站自動刷新

您可以設置您的網站刷新後,給定的時間從頭標籤!

html <head> <meta http-equiv="refresh" content="10"> </head>

這個片段每10秒刷新一次網站

3. 激活拼寫檢查

您可以使用 HTML 拼寫檢查屬性並將其設置為 true 來激活它。指定使用 lang 屬性的語言

<input type="text" spellcheck="true" lang="en">

它是一個標準屬性,大多數瀏覽器都支持它

browser support pic

4. 指定要上傳的文件類型

您可以使用 accept 屬性指定用户允許在 input 標記中上載的文件類型

html <input type="file" accept=".jpeg,.png">

5. 防止翻譯

將 translate 屬性設置為 no,可防止翻譯。這一點很重要,以防你不想翻譯一個短語或單詞,例如你的標誌、公司或品牌名稱。

```html

Brand name

```

6. 在 input 標籤中輸入多個條目

這可以通過多個屬性來完成

html <input type="file" multiple>

它適用於文件和電子郵件。對於電子郵件,用逗號分隔每封電子郵件。

7. 為你的視頻創建一個海報(縮略圖)

通過海報屬性,您可以創建一個圖像,該圖像在視頻下載時顯示,或者直到用户點擊播放按鈕。

如果不包括這一點,視頻的第一幀將被替代使用。

```html

```

8. 點擊鏈接自動下載

如果希望在單擊指向目標資源的鏈接時下載特定資源,請添加 download 屬性

html <a href="image.png" download>

結束語 🌞

那麼我的8個你可能不知道的令人震驚的 HTML 技巧就結束了,文章的目的其實很簡單,就是對日常工作的總結和輸出,輸出一些覺得對大家有用的東西,菜不菜不重要,但是熱愛🔥,希望大家能夠喜歡我的文章,我真的很用心在寫,也希望通過文章認識更多志同道合的朋友,如果你也喜歡折騰,歡迎加我好友,一起沙雕,一起進步

github🤖:sudongyu

個人博客👨‍💻:速凍魚blog

vx👦:sudongyuer

寫在最後

夥伴們,如果喜歡我的口水話給🐟🐟點一個贊👍或者關注➕都是對我最大的支持。

加我微信:sudongyuer,邀你進羣,一起學習前端,成為更優秀的工程師~(羣二維碼在這裏->前端要早睡, 二維碼過期了的話看鏈接沸點中的評論,我會把最新的二維碼放在評論區,當然也可以加我微信我拉你進羣,畢竟我也是有趣的前端,認識我也不賴🌟~