HTML問(wèn)題：如何實(shí)現(xiàn)分享URL預(yù)覽？

端功能問(wèn)題系列文章，點(diǎn)擊上方合集↑

序言

大家好，我是大澈！

本文約2100+字，整篇閱讀大約需要3分鐘。

本文主要內(nèi)容分三部分，如果您只需要解決問(wèn)題，請(qǐng)閱讀第一、二部分即可。如果您有更多時(shí)間，進(jìn)一步學(xué)習(xí)問(wèn)題相關(guān)知識(shí)點(diǎn)，請(qǐng)閱讀至第三部分。

感謝關(guān)注微信公眾號(hào)：“程序員大澈”，然后加入問(wèn)答群，從此讓解決問(wèn)題的你不再孤單！

ello大家好，今天廣州藍(lán)景跟大家分享一些html的使用技巧。

1. 使用capture屬性打開(kāi)設(shè)備攝像頭

正如input標(biāo)簽具有email、text和password屬性一樣，我們也可以通過(guò)一些屬性打開(kāi)移動(dòng)設(shè)備的攝像頭以捕獲圖像。

那就是capture屬性，屬性值有兩個(gè)：

user用于前置攝像頭
environment用于后置攝像頭

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

2. 網(wǎng)站自動(dòng)刷新

你可以在head標(biāo)簽中將網(wǎng)站設(shè)置為定時(shí)刷新！

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

此代碼段可以實(shí)現(xiàn)每10秒刷新一次網(wǎng)站。

3. 激活拼寫(xiě)檢查

你可以使用HTML的spellcheck屬性并將其設(shè)置為true以激活拼寫(xiě)檢查。使用lang屬性指定待檢查的語(yǔ)言。

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

這是一個(gè)標(biāo)準(zhǔn)屬性，得到了大多數(shù)瀏覽器的支持。

4. 指定要上傳的文件類(lèi)型

你可以使用accept屬性在input標(biāo)簽中指定允許用戶(hù)上傳的文件類(lèi)型。

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

5. 阻止瀏覽器翻譯

將translate屬性設(shè)置為no會(huì)阻止瀏覽器翻譯該內(nèi)容。如果你不想翻譯某個(gè)短語(yǔ)或單詞，例如logo、公司或品牌名稱(chēng)，那就可以應(yīng)用這個(gè)屬性。

<p translate="no">Brand name</p>

6. 在input標(biāo)簽中輸入多個(gè)項(xiàng)目

這可以通過(guò)multiple屬性來(lái)完成。

<input type="file" multiple>

適用于文件和電子郵件。如果是電子郵件，則可以用逗號(hào)分隔。

7. 為視頻創(chuàng)建海報(bào)（縮略圖）

使用poster屬性，我們可以在視頻加載時(shí)，或者在用戶(hù)點(diǎn)擊播放按鈕之前，顯示指定的縮略圖。

如果不指定圖片，則默認(rèn)使用視頻的第一幀作為縮略圖。

<video poster="picture.png"></video>

8. 點(diǎn)擊鏈接自動(dòng)下載

如果你希望在單擊目標(biāo)資源的鏈接時(shí)下載特定資源，那就添加download屬性。

<a href="image.png" download>

今天就分享到這里，想要了解更多前端技術(shù)知識(shí)，可以關(guān)注我們廣州藍(lán)景。

我們?yōu)g覽網(wǎng)頁(yè)時(shí)可能需要把網(wǎng)頁(yè)上的內(nèi)容保存下來(lái)，這時(shí)候有幾種方式可以做到：1、把重要的內(nèi)容復(fù)制出來(lái)；2、對(duì)網(wǎng)頁(yè)進(jìn)行截圖保存，我們推薦過(guò)的截圖插件如印象筆記·剪藏、Full Page Screen Capture等；3、把網(wǎng)頁(yè)保存成PDF，如Adobe Acrobat。4、直接把網(wǎng)頁(yè)保存成HTML。當(dāng)然所有瀏覽器都有另存頁(yè)面為HTML 文檔的功能，不過(guò)可能會(huì)遇到一些問(wèn)題，保存后不是各種資源如JS、CSS和圖片的文件很多，就是打開(kāi)后無(wú)法載入樣式表，圖片顯示不出來(lái)，要把網(wǎng)頁(yè)備份起來(lái)或傳送給別人就很麻煩。本文要介紹的SingleFile是一款免費(fèi)瀏覽器擴(kuò)展，可以將完整的頁(yè)面保存到一個(gè)HTML文件中，包括所有CSS和圖片等等，讓用戶(hù)即使在一個(gè)HTML文檔中也能瀏覽完整內(nèi)容。除了單一頁(yè)面外，SingleFile還支持保存選中的部分、非固定標(biāo)簽頁(yè)或所有頁(yè)面，操作上也非常的簡(jiǎn)單易用。如果你有保存頁(yè)面的需求，可以試試這款插件。

簡(jiǎn)介

SingleFile

在線(xiàn)咨詢(xún)

上一篇：JavaScript中輸出方法
下一篇：全方位梳理：如何成為一個(gè)移動(dòng)端UI設(shè)計(jì)師

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

HTML問(wèn)題：如何實(shí)現(xiàn)分享URL預(yù)覽？

您的項(xiàng)目需求