html5 提示属性_快速提示：使用HTML5下载属性

html5 提示属性

用HTML创建下载链接非常简单。 添加锚标记并指向href属性内的文件。 但是，某些文件类型（例如图像，.pdf，.txt和.doc）将不会下载。 相反，它们将在浏览器中打开。

如果您对网站具有服务器端访问权限，则可以使用一些变通办法，例如配置.htaccess ，以直接下载这些文件。 如果您的网站托管有免费服务，例如WordPress.com，Blogspot或不允许您这样做的Github页面，请考虑使用download属性。

使用HTML5下载属性

download属性是HTML5规范的一部分，将链接表示为下载链接，而不是导航链接。

download属性还允许您在下载时重命名文件名。 当文件驻留在服务器上时，尤其是如果文件是自动生成的，可以用数字和破折号系统地命名，例如acme-doc-2.0.1.txt 。 用户最好在下载时以更合理的名称接收文件，例如： Acme Documentation (ver. 2.0.1).txt （不要忘记文件扩展名）。

这是实际的样子：

<a href="download/acme-doc-2.0.1.txt" download="Acme Documentation (ver. 2.0.1).txt">Download Text</a>

在演示页面上尝试一下，您应该找到使用在download属性中指定的名称下载的文件。

几个注意事项：

• 出于安全考虑， Firefox仅允许用户下载具有相同来源的文件。 该文件必须来自您自己的服务器或域名，否则它将在浏览器中打开。
• 虽然Chrome和最新的Opera（带有Chromium / Blink）都允许下载跨域文件，但它们都将忽略属性值。 换句话说，文件名将保持不变。

提供后备

尽管Edge支持Edge属性，但尚未在Internet Explorer中实现download属性（您可能期望如此）。

为了使事情变得安全，我们可以添加一个不错的后备，例如在下载链接下方为不支持的浏览器提供额外的说明。 为此，我们将需要下载包含download功能测试的Modernizr 。

然后，我们可以添加以下脚本。

if ( ! Modernizr.adownload ) {
	var $link = $('a');

	$link.each(function() {
		var $download = $(this).attr('download');
	
		if (typeof $download !== typeof undefined && $download !== false) {
      var $el = $('<div>').addClass('download-instruction').text('Right-click and select "Download Linked File"');
      $el.insertAfter($(this));
		}

	});
}

该脚本将测试浏览器是否支持download属性。 如果不是，它将为类添加新的<div>以及用于说明目的的说明类，并将其插入到具有download属性的任何链接的下面。

结语

HTML5 download属性使处理下载链接对于任何无法访问服务器端配置的人来说非常方便。 我期待Internet Explorer尽快实现download属性！

翻译自: https://webdesign.tutsplus.com/tutorials/quick-tip-using-the-html5-download-attribute--cms-23880

html5 提示属性