了解HTML/HTML5中的download属性

一.download属性是个什么鬼? 首先看下面这种截图: 如果我们想实现点击上面的下载按钮下载一张图片,你会如何实现? 我们可能会想到一个最简单的方法,就是直接按钮a标签链接一张图片,类似下面这样: 1 <a href="large.jpg">下载</a> 但是,想法虽好,实际效果却不是我们想要的,因为浏览器可以直接浏览图片,因此,我们点击下面的"下载"链接,并是不下载图片,而是在新窗口直接浏览图片. 下载看我的眼睛, 于是,基本…

html/html5中的download属性

兼容性不是很好, 只是了解一下: 主要表现在跨域策略的处理上,Chrome浏览器和FireFox浏览器: 如果需要下载的资源是跨域的,包括跨子域,在Chrome浏览器下,使用download属性是可以下载的,但是,并不能重置下载的文件的命名:而FireFox浏览器下,则download属性是无效的,也就是FireFox浏览器无论如何都不支持跨域资源的download属性下载. 而,如果资源是同域名的,则两个浏览器都是畅通无阻的下载,不会出现下载变浏览的情况. demo <a href="l…

HTML5 中的新属性autocomplete="off"失效的解决方法（兼容firefox，IE，360）

因为业务需求,在写一个注册页面的时候,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便.加了HTML5 中的新属性autocomplete="off" ,但是并没有产生效果. 反复测试后发现浏览器自动填充机制是满足:页面里有一个type=password的input且这个input前面有一个type=text的input.的时候就会进行自动填充. firefox和360浏览器的处理方式是:只要检测到页面里有满足填充机制的,不管是不是display:none 的,只要检测到…

小强的HTML5移动开发之路（13）——HTML5中的全局属性

来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> <html> <body> <a href="http://blog.csdn.net/column/details/dawanganban-html5.html" accesskey="w">小强的HTML5移动开发之路</a…

HTML5 <a>标签download 属性

一.简单实例 <a href="../images/1.jpg" download="下载图片.jpg"> 点击按钮下载 </a> 二.说明: 定义和用法 download 属性规定被下载的超链接目标. 在 <a> 标签中必须设置 href 属性. 该属性也可以设置一个值来规定下载文件的名称.所允许的值没有限制,浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等). 注: 1.h…

html5中的全局属性

在html5中,新增了一个"全局属性"的概念,所谓全局属性,是指可以对任何属性都使用的属性.下面列出常用的全局属性. 1.contentEditable属性,是微软开发的,该属性主要功能是允许用户编辑元素中的内容,所以该属性必须是可以获得鼠标焦点的元素,而且在点击鼠标后要向用户提供一个插入符号,提示用户该元素在的内容允许编辑.该属性是一个布尔值属性,可以被指定为ture或false.注:在编辑完元素中的内容后,要想保存其中的内容,只能把该元素的innerHTML发送到服务器端进行保存,…

HTML5中class选择器属性的解释

设置有class属性值的元素,可以被css中的选择器调用,也可以在javascript中以getElementsByClassName()方法调用. 可以给各个元素添加class而且名称可以相同与id正好相反,id属性一般建议少用,在小型网站中页面元素不多的情况下我们推荐是id,而在大众型网站我们推荐使用class 如: <div id="box">HTML5</div> 复制代码 class选择器 <div class="box"&g…

测试开发之前端——No4.HTML5中的事件属性

HTML5的事件属性. 属性值描述 onafterprint script 在打印文档之后运行脚本 onbeforeprint script 在文档打印之前运行脚本 onbeforeonload script 在文档加载之前运行脚本 onblur script 当窗口失去焦点时运行脚本 onerror script 当错误发生时运行脚本 onfocus script 当窗口获得焦点时运行脚本 onhaschange script 当文档改变时运行脚本 onload script 当文档加载时…

测试开发之前端——No3.HTML5中的标准属性

HTML5的标准属性属性值描述 accesskey character 规定访问元素的键盘快捷键 class classname 规定元素的类名(用于规定样式表中的类). contenteditable true false 规定是否允许用户编辑内容. contextmenu menu_id 规定元素的上下文菜单. data-yourvalue value 创作者定义的属性. HTML 文档的创作者可以定义他们自己的属性. 必须以 "data-" 开头. dir ltr rtl…

辛星浅析html5中的role属性

我们使用role属性告诉辅助设备.这个元素所扮演的角色.比方点击的按钮,我们通常就使用role="button",会让这个元素可点击. 可是它很多其它的是用来增强语义性,当现有的html标签不能充分表达语义性的时候,就能够借助role来说明.通常它很多其它的出如今一些自己定义的组件上. 比方html中没有tree标签.我们就能够把他的role设置为tree.这样能够增强组件的可訪问性.可用性和可交互性.…

html5 中video标签属性

<video id="haoroomsvideo" src="haorooms.mp4" poster="images/haorooms.jpg" /*视频封面*/ preload="auto" webkit-playsinline="true" /*这个属性是ios 10中设置可以让视频在小窗内播放,也就是不是全屏播放*/ playsinline="true" /*IOS微…

HTML 全局属性 = HTML5 中添加的属性。

属性描述 accesskey 规定激活元素的快捷键. class 规定元素的一个或多个类名(引用样式表中的类). contenteditable 规定元素内容是否可编辑. contextmenu 规定元素的上下文菜单.上下文菜单在用户点击元素时显示. data-* 用于存储页面或应用程序的私有定制数据. dir 规定元素中内容的文本方向. draggable 规定元素是否可拖动. dropzone 规定在拖动被拖动数据时是否进行复制.移动或链接. hidden 规定元素仍未或不再相关. id…

html5中新增的属性和删除的属性

一.表单新增的属性 1.对input(type="text").select.textarea与button元素指定autofocus属性,它以指定属性的方式让元素在画面打开时自动获取焦点. 2.input.textarea元素指定placeholder属性,它会对用户的输入进行提示,提示用户输入的内容. 3.input.output.select.textarea.button与fieldset指定form属性,声明它属于哪个表单,然后将它放在页面的任何位置,而不是表单内部. 4.i…

全栈JavaScript之路（十四）HTML5 中与class属性相关的扩充

1. getElementByClassName() :支持getElementsByClassName()方法的浏览器有IE 9+.Firefox 3+.Safari 3.1+.Chrome 和 Opera 9.5+. 2. classList 属性 : classList 属性是新集合类型 DOMTokenList 的实例.DOMTokenList 类型有一个lenght 属性 ,表示包括了多少子元素,要取得每个元素能够通过item() 方法訪问.也能够用 [ ] 方法訪问. 此外这个…

HTML5中的lang属性，zh-CN还是zh-Hans？

一.资源先提供资源.如果我弄错了什么,请以这些文档为准: W3C文档.IANA已登记的子标签.BCP 47.RFC 5646. 二.格式简介先上一张图片: 一个Language Tags,由①到⑦一共四个子标签组成.有什么盘算不清楚的,请参考资源部分提供的文档. 三.各部分含义 ①language:主语言,用代码“zh”表示汉语,小写.好像对于大小写没有强制要求,习惯而已.还是遵循习惯吧,总让别人看着别扭不是彰显个性的好办法.②extlang:翻译成“扩展的语言”?对于汉语而言,这个部分表示…

HTML5中script的async属性异步加载JS

HTML5中script的async属性异步加载JS HTML4.01为script标签定义了5个属性: charset 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer 可选.延迟脚本执行,相当于将script标签放入页面body标签的底部.除IE和较新版本的Firefox外,其他浏览器并未支持.language 已废弃.大部分浏览器会忽略该值.src 可选.指定引入的外部代码文件,不限制后缀名.type 必选.指定脚本的内容类型(MIME类型).现实中通常不指定该值…

JS前端下载文本文件小技巧：1、download属性；2、借助Blob转换成二进制下载

一.HTML download 与文件下载如果希望在前端侧直接触发某些资源的下载,最方便快捷的方法就是使用HTML5原生的download属性,例如: <a href="large.jpg" download>下载</a> 但显然,如果纯粹利用HTML属性来实现文件的下载(而不是浏览器打开或浏览),对于动态内容,就无能为力. 例如,我们对页面进行分享的时候,希望分享图片是页面内容的实时截图,此时,这个图片就是动态的,纯HTML显然是无法满足我们的需求的,借助J…

HTML 5 中的标准属性

HTML 全局属性 HTML 属性赋予元素意义和语境. 下面的全局属性可用于任何 HTML 元素. (5)= HTML5 中添加的属性. 属性描述 accesskey 规定激活元素的快捷键. class 规定元素的一个或多个类名(引用样式表中的类). contenteditable(5) 规定元素内容是否可编辑. contextmenu(5) 规定元素的上下文菜单.上下文菜单在用户点击元素时显示. data-*(5) 用于存储页面或应用程序的私有定制数据. dir 规定元素中内容的文本方向.…

HTML5新增的form属性简介——张鑫旭

一.引言 HTML5中新增了一个名为form的属性,是一个与处理表单相关的元素. 在HTML4或XHTML中,我们要提交一个表单,必须把相关的控件元素都放在<form>元素下.因为表单提交的时候,会直接忽略不是其子元素的控件.但是,实际情况下,由于页面设计与实现的特殊性,会存在有些表单之外的元素也需要一并提交的情况,这时候,传统的表单功能就显得有些捉襟见肘了. HTML5中新增form属性就是为更好地处理这个问题才出现的.其作用,个人感觉,有点类似于label标签的for属性. 二.更好的实现…

HTML5中常用的标签(及标签的属性和作用)

1.标签:<!DOCTYPE>作用:声明是文档中的第一成分,位于<html>标签之前. 2.标签:<html>作用:此元素可告知浏览器其自身是一个HTML文档.属性:manifest:值(url)为脱机使用定义缓存信息. 3.标签:<head>作用:标签用于定义文档的头部,它是所有头部元素的容器.属性:profile:值(URL)一个有空格分隔的URL列表,这些URL包含着有关页面的元数据信息. 4.标签:<title>作用:元素可定义文档的标题…

火狐 a 标签 download 属性，要在 a 标签添加到页面中才生效；

在 chrome 中,如果需要设置点击下载文件,需要创建一个 a 标签,指定 download 属性和 href 属性即可, var aLink = document.createElement('a'); aLink.href = canvas.toDataURL(); aLink.download = 'spirite.png'; aLink.click(); 但是在 firefox 中,这样就会失败,需要添加到文档里才行, //兼容FF,需要添加到页面中才有用 document.body.…

html5中新增的form表单属性

html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属性值,当设置为on时,启动该功能:当设置off时,关闭该功能.启用该功能后,当用户在自动完成域开始输入时,浏览器就会在该域中显示填写的选项.用户每提交一次,就会增加一个用于选择的选项 <!DOCTYPE html> <html> <head lang="en"…

HTML5 a标签的download属性

介绍一个HTML5的新特性 a标签的download属性: 目前市场上面支持的浏览器有限: html: <!DOCTYPE html> <html> <body> <p>点击 W3School 的 logo 来下载该图片:<p> <a href="/i/w3school_logo_white.gif" download="w3logo"> <img border="0"…

IE9对HTML5中一部分属性不提供支持的原因

为什么在IE9中对于HTML5标准中的离线应用程序以及CSS3中的一部分不提供支持?笔者间接了解到了这个原因. 微软日前已经发布了Internet Explorer 9(以下简称IE9)正式版.在该版本中,微软遵循他们的发展战略,对于作为最新Web标准的HTML5与CSS3中大多数功能提供了支持. 同时,微软也准备将IE9应用在Windows Phone 7中使用.IE9无疑成为了微软的Internet战略中非常重要的一个环节. 但是,现在公布的IE9中,应该被用来与Firefox,Safari…