HTML <area> 标签的 download 属性 详解
HTML基础 2022-06-02 11:57:40小码哥的IT人生shichen
HTML <area> 标签的 download 属性
实例
使用 download 属性规定当用户单击超链接时将下载目标：
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="info_about_the_sun.html" download="sun">
<area shape="circle" coords="90,58,3" alt="Mercury" href="merglobe.gif" download="mercury">
<area shape="circle" coords="124,58,8" alt="Venus" href="information_about_the_planet_venus.txt" download="venus">
</map>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<h1>area download 属性</h1>
<p>请点击图像上的星球，下载其内容。</p>
<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="rect" coords="0,0,110,260" alt="Sun" href ="/demo/css/information_about_the_sun.html" download />
<area shape="circle" coords="129,161,10" alt="Mercury" href ="/demo/css/merglobe.gif" download />
<area shape="circle" coords="180,139,14" alt="Venus" href ="/demo/css/information_about_the_planet_venus.txt" download />
</map>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
页面下方有更多 TIY 实例。
定义和用法
download 属性指定当用户单击超链接时将下载目标（在 href 属性中指定的文件）。
download 属性的可选值将是文件下载后的新名称。对允许值没有限制，浏览器会自动检测正确的文件扩展名并将其添加到文件中（.img、.pdf、.txt、.html 等）。
如果省略该值，则使用原始文件名。
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
| 属性 | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| download | 14.0* | 18.0 | 20.0* | 10.1 | 15.0 |
* Chrome 65+ 和 Firefox 仅支持同源下载链接。
语法
<area download="filename">
属性值
| 值 | 描述 |
|---|---|
| filename | 可选。规定被下载文件的新文件名。 |
更多实例
示例代码：
为 download 属性规定一个值，它将是下载文件的新文件名（sun.htm 而不是 information_about_the_sun.htm 等）：
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="info_about_the_sun.html" download="sun">
<area shape="circle" coords="90,58,3" alt="Mercury" href="merglobe.gif" download="mercury">
<area shape="circle" coords="124,58,8" alt="Venus" href="information_about_the_planet_venus.txt" download="venus">
</map>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<h1>button value 属性</h1>
<form action="/demo/example/html/form_action.asp" method="get">
请选择您喜欢的科目：
<button name="subject" type="submit" value="fav_HTML">HTML</button>
<button name="subject" type="submit" value="fav_CSS">CSS</button>
</form>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
