简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > html教學 > 主體

HTML download屬性使用方法詳解

藏色散人
發布： 2018-09-01 14:36:28
原創
9240 人瀏覽過

點擊下載檔案或圖片是我們在網頁上尋找資源的日常操作，那麼我們自己在設計HTML頁面的時候，如果需要實現讓別人下載檔案的功能，我們該如何是去做呢？其實這種功能實作並沒有很複雜，反而是很簡單的。本篇文章就給大家詳細得介紹a標籤中的download屬性，只要掌握了這個屬性就可以實現點擊下載檔圖等功能。

一段簡單的帶有a標籤download屬性的html程式碼範例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML a标签download属性使用示例</title>
</head>
<body>
<p>给a标签添加了download属性：</p>
<a href="/test/img/2.png"  download="2.png">点击下载</a>
</body>
</html>
登入後複製

我在本機測試效果如下圖：

HTML <a> download屬性使用方法詳解

如圖我是用火狐瀏覽器進行訪問的，並且成功下載打開圖片。相信大家如果自己動手測試的話，對download屬性已經有所概念。這裡a標籤href的值是表示，你要下載某個檔案或圖片的位址。 download的值則表示你要下載已儲存的檔案名稱或圖片名稱。

但大家也要注意html中a download屬性並不是所有瀏覽器裡奏效的。目前a download屬性只在火狐和Google瀏覽器有效。其餘的如IE、Safari、Opera瀏覽器都是沒有用的。

綜上所述，所以想要實作點擊下載某檔或圖片只要掌握好a標籤中的download屬性用法即可，如果你只給a標籤加了href的檔案位址而沒有download屬性的話，那麼就只會出現預覽的效果而無法下載！

這篇文章有一定的參考價值，希望對有需要的朋友有一定的幫助！

以上是HTML download屬性使用方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
a标签download属性
來源：php.cn
上一篇：xhtml與html有什麼差別？ xhtml與html之間的異同分析 下一篇：html中b標籤和strong標籤的差別是什麼？ b和strong區別的總結
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
網頁抓取：缺少 href 屬性 - 需要模擬滑鼠點擊進行網頁抓取嗎？ 對於一個有趣的網頁抓取項目，我想從ttps://www.nhl.com/stats/teams收集NHL資料。有一個可點擊的Excel匯出標籤，我可以使用selenium和bs4找...
來自於 2024-04-04 10:32:06
0
1
3473
如何使用CSS選擇器來定位包含特定屬性或標籤的div元素？ 我正在使用一個產生網站的POS系統。大部分程式碼是專有的，因此我無法編輯很多內容。我有一個輸出的類別列表，其中一些圖像作為類別浮動。我想隱藏主頁上列出的前3個。我嘗試使用div:n...
來自於 2024-04-03 22:25:59
0
1
277
MySQL自連線缺失數據 我想在表上執行自連接，以按列方式呈現值。對於每個對象，都有多個屬性（最多達到已知限制），但並非所有對象的所有屬性都被儲存。我嘗試過各種連接，但總是缺少行，我希望使用空值。起始表：物...
來自於 2024-03-31 10:07:32
0
1
263
多個 JSON-LD Schema.org 標籤可以代表同一個「物件」嗎？ 我有一個網站，客戶端請求JSON-LD（不是微資料）schema.org標籤。他們想要的其中一個是每個頁面上都有一個基本的「WebPage」標籤，其中包含有關每個頁面上的內容的一些...
來自於 2024-03-30 11:58:39
0
1
412
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！