首頁 > web前端 > html教學 > 分享8個令人震驚的HTML技巧

分享8個令人震驚的HTML技巧

藏色散人
發布: 2023-04-12 15:34:54
轉載
2045 人瀏覽過

這篇文章為大家帶來了關於HTML 的相關知識,其中主要跟大家分享8個HTML 技巧,有興趣的朋友下面一起來看一下吧,希望對大家有幫助。

分享8個令人震驚的HTML技巧

1. 捕獲屬性打開你的設備相機

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

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

  • #前置鏡頭使用者
  • 後置相機的環境
<input type="file" capture="user" accept="image/*">
登入後複製

2. 網站自動刷新

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

<head>
    <meta http-equiv="refresh" content="10">
</head>
登入後複製

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

3. 啟動拼字檢查

您可以使用 HTML 拼字檢查屬性並將其設為 true 來啟動它。指定使用lang 屬性的語言

<input type="text" spellcheck="true">
登入後複製

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

browser support pic

4. 指定要上傳的檔案類型

您可以使用accept 屬性指定使用者允許在input 標記中上載的檔案類型

<input type="file" accept=".jpeg,.png">
登入後複製

5. 防止翻譯

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

<p translate="no">Brand name</p>
登入後複製

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

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

<input type="file" multiple>
登入後複製

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

7. 為你的影片建立一個海報(縮圖)

透過海報屬性,您可以建立一個圖像,該圖像在影片下載時顯示,或直到使用者點擊播放按鈕。

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

<video poster="picture.png"></video>
登入後複製

8. 點擊連結自動下載

如果希望在點擊指向目標資源的連結時下載特定資源,請新增download 屬性

<a href="image.png" download>
登入後複製

結束語 

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

以上是分享8個令人震驚的HTML技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:juejin.im
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板