xml地图|网站地图|网站标签 [设为首页] [加入收藏]
页面制作之开发调试工具,是个什么样的东西
分类:web前端

了解HTML/HTML5中的download属性

2016/04/07 · HTML5 · 5 评论 · download

最早的文章出处: 张鑫旭(@张鑫旭)   

扶摇直上、download属性是个怎么着鬼?

第朝气蓬勃看上面这种截图:
图片 1

假诺我们想实现点击上面的下载按键下载一张图纸,你会怎么促成?

我们大概会想到二个最轻巧易行的秘诀,正是一贯开关a标签链接一张图片,类似上面那样:

<a href="large.jpg">下载</a>

1
<a href="large.jpg">下载</a>

不过,主张虽好,实效却不是我们想要的,因为浏览器能够平素浏览图片,由此,大家点击上边包车型地铁“下载”链接,并是不下载图片,而是在新窗口直接浏览图片。

下载

看本人的肉眼,图片 2

于是乎,基本上,近年来的完结都以放任HTML战略,而是利用,举个例子php那样的后端语言,通过报告浏览器header消息,来促成下载。

header('Content-type: image/jpeg'); header("Content-Disposition: attachment; filename='download.jpg'");

1
2
header('Content-type: image/jpeg');
header("Content-Disposition: attachment; filename='download.jpg'");

但是,这种光景端都要思量的艺术神烦,将来都流行前后端分离,还搅在联合具名太累了,认为不会再爱了。

那有未有哪些只须求前端动入手指就能够落到实处下载的点子吧?有,就是本文要介绍的download属性。

举例说,大家愿意点击“下载”链接下载图片实际不是浏览,直接增加四个download品质就能够:

<a href="large.jpg" download>下载</a>

1
<a href="large.jpg" download>下载</a>

是的,你未曾看错,就好像此结束了,不要紧点击后边的链接试试:下载

结果在Chrome浏览器下(FireFox浏览器因为跨域限制无效):
图片 3

不止如此,大家还足以钦赐下载图片的文件名:

<a href="index_logo.gif" download="_5332_.gif">下载</a>

1
<a href="index_logo.gif" download="_5332_.gif">下载</a>

只要后缀名同样,大家还足以缺省,直接文件名:

<a href="index_logo.gif" download="_5332_">下载</a>

1
<a href="index_logo.gif" download="_5332_">下载</a>

截图为虚,操作为实:下载

Chrome下的截图效果暗指:
图片 4

叁个大写的酷里!

页面制作之付出调节和测量检验工具(1)

2015/04/14 · CSS, HTML5, JavaScript · 调试

原著出处: jingwhale   

Web Components 是个什么的东西

2016/09/04 · HTML5, JavaScript · Web Components

原稿出处: teabyii   

后边三个组件化那几个宗旨相关的剧情已经火了非常久比较久,angular 刚出去时的 Directive 到 angular2 的 components,还有 React 的components 等等,无一不是前端组件化的大器晚成种达成和探寻,然则提上章程的 Web Components 标准是个如何的事物,相关的有的框架大概类库,如 React,Angular2,以至是 x-tag,polymer 今后落实的组件化的事物和 Web Components 标准差距在哪个地方?笔者花时间努力地把现存的 W3C Web Components 文书档案看了下,然后坚强地写下这一个记录。

率先大家需求精晓,Web Components 包涵了多少个部分:

  • Custom Elements
  • HTML Imports
  • HTML Templates
  • Shadow DOM

那四某个有机地构成在同步,才是 Web Components。

能够用自定义的竹签来引进组件是前边四个组件化的基本功,在页面援用 HTML 文件和 HTML 模板是用于扶持编写组件视图和组件财富管理,而 Shadow DOM 则是与世隔阂组件间代码的冲突和潜移默化。

上边分别是每一片段的笔记内容。

二、浏览器兼容性和跨域战略

图片 5

不过,caniuse体现的宽容性只是个笼统,依据鄙人的确切测量试验,事情要比看见的复杂性。

重要呈将来跨域计策的拍卖上,由于自家手上未有IE13,所以,只可以相比较Chrome浏览器和FireFox浏览器:

假如急需下载的能源是跨域的,包涵跨子域,在Chrome浏览器下,使用download特性是能够下载的,不过,并无法重新载入参数下载的公文的命名;而FireFox浏览器下,则download属性是行不通的,也正是FireFox浏览器无论如何都不辅助跨域能源的download质量下载。

而,假诺能源是同域名的,则三个浏览器都以直通的下载,不会并发下载变浏览的气象。
图片 6

是或不是扶持download属性的监测
要监测当前浏览器是不是援救download质量,后生可畏行JS代码就可以了,如下:

var isSupportDownload = 'download' in document.createElement('a');

1
var isSupportDownload = 'download' in document.createElement('a');

开荒工具介绍

开辟工具日常分为两种档次:文本编辑器和购并开荒碰到(IDE)

常用的公文编辑器:Sublime Text、Notepad++、EditPlus等

常用的IDE:WebStorm、Intellij IDEA、Eclipce等

大家那边关键介绍怎么着运用Sublime Text编辑器,它基本满足大家对前端开采工具的急需。

Custom Elements

三、结束语

除了图片财富,我们还足以是PDF财富,恐怕txt能源等等。特别Chrome等浏览器能够一贯张开PDF文件,使得此文件格式供给download拍卖的景观越来越宽广。

此HTML属性即使特别实用和造福,可是宽容性制约了我们的宽广使用。

与此相同的时候挂念到众多时候,要求进行部分下载的总括,纯前端的艺术想要保存下载量数据,依然有个别吃紧,供给跟开辟的同班合作才行,还不比使用古板方法。

所以,download属性的前途前景在哪儿?当下是不是足以平昔步入到实在项目?还须要大家联合能够思虑。其实接收JS达成download质量的polyfill并简单,可是,思虑到为啥不辜负有浏览器都使用polyfill的法子,又以为为了本事而本领是不太妥贴的。

同理可得,先放着心上,再观察旁观。

1 赞 3 收藏 5 评论

图片 7

一、Sublime Text的特点:

跨平台、启动快

多行接收

各个实用插件

Snippets

支撑VIM包容情势

Sublime Text获取地址:

概述

Custom Elements 看名就能够知道意思,是提供龙精虎猛种办法让开拓者能够自定义 HTML 成分,富含特定的整合,样式和行事。扶持 Web Components 规范的浏览器会提供意气风发多种 API 给开采者用于成立自定义的成分,也许扩大现存成分。

那风流浪漫项标准的草案还处在不牢固的状态,时有更新,API 还有所变动,上边的笔记以 Cutsom Elements 2016.02.26 这么些本子为准,因为在风靡的 chrome 浏览器已然是能够干活的了,这样能够行使 demo 来做尝试,最终作者会再轻易写一下流行文书档案和这些的界别。

二、常用的插件

Package Control:设置任何插件在此以前,首先先安装Package Control

Emmet:Web开辟者的工具包,能够大大进步你的HTML和CSS的行事流程

SublimeCodeIntel:代码提醒

DocBlocker:对js代码进行讲解

JSFormat:格式化js代码

Terminal:使用vim命令

registerElement

第如火如荼,我们能够尝试在 chrome 调节台输入 HTMLInputElement,能够见见是有这样壹个事物的,那么些通晓为 input DOM 成分实例化时的构造函数,基础的是 HTMLElement

Web Components 标准建议提供那样叁个接口:

JavaScript

document.registerElement('x-foo', { prototype: Object.create(HTMLElement.prototype, { createdCallback: { value: function() { ... } }, ... }) })

1
2
3
4
5
6
7
8
document.registerElement('x-foo', {
  prototype: Object.create(HTMLElement.prototype, {
    createdCallback: {      
      value: function() { ... }
    },
    ...
  })
})

你能够应用 document.registerElement 来注册二个标签,规范中为了提供 namesapce 的帮助,防止冲突,规定标签类型(也能够清楚为名字)要求使用 - 连接。同一时间,不能够是以下那有的:

  • annotation-xml
  • color-profile
  • font-face
  • font-face-src
  • font-face-uri
  • font-face-format
  • font-face-name
  • missing-glyph

第四个参数是标签相关的布局,主假若提供贰个 prototype,那几个原型对象是以 HTMLElement 等的原型为根基创设的指标。然后您便得以在 HTML 中去选用自定义的竹签。如:

XHTML

<div> <x-foo></x-foo> </div>

1
2
3
<div>
  <x-foo></x-foo>
</div>

是还是不是嗅到了 React 的意味?可以吗,React 说它谐和重要不是做那么些业务的。

2.1 Package Control

设置任何插件早前,首先先安装Package Control,具体步骤如下:

使用Ctrl+`飞快键或许经过View->Show Console菜单张开命令行,

Sublime text3粘贴如下代码:

JavaScript

import urllib.request,os; pf = 'PackageControl.sublime-package'; ipp = sublime.installed_packages_path();urllib.request.install_opener( urllib.request.build_opener(urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf),'wb').write(urllib.request.urlopen( '; + pf.replace('','%20')).read())

1
import urllib.request,os; pf = &#039;PackageControl.sublime-package&#039;; ipp = sublime.installed_packages_path();urllib.request.install_opener( urllib.request.build_opener(urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf),&#039;wb&#039;).write(urllib.request.urlopen( &#039;http://sublime.wbond.net/&#039; + pf.replace(&#039;&#039;,&#039;%20&#039;)).read())

Sublime text2粘贴如下代码:

JavaScript

import urllib2,os; pf='PackageControl.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs(ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf),'wb' ).write( urllib2.urlopen( '; +pf.replace( '','%20' )).read()); print( 'Please restart Sublime Text to finishinstallation')

1
import urllib2,os; pf=&#039;PackageControl.sublime-package&#039;; ipp = sublime.installed_packages_path(); os.makedirs(ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf),&#039;wb&#039; ).write( urllib2.urlopen( &#039;http://sublime.wbond.net/&#039; +pf.replace( &#039;&#039;,&#039;%20&#039; )).read()); print( &#039;Please restart Sublime Text to finishinstallation&#039;)

假如顺利的话,此时就能够在Preferences菜单下看看Package Settings和Package Control八个菜单了。

莫不出于各类缘由,无法选代替码安装,那可以通过以下步骤手动安装Package Control:

a.Package Control下载地址:
b.点击Preferences>BrowsePackages菜单
c.进去展开的目录的上层目录,然后再步入Installed Packages/目录
d.下载Package Control.sublime-package并复制到Installed Packages/目录
e.重启SublimeText。

生命周期和回调

在此个 API 的基础上,Web Components 规范提供了一文山会海决定自定义成分的不二等秘书技。大家来每家每户看下:

三个自定义成分会经历以下那个生命周期:

  • 挂号前创办
  • 注册自定义元素定义
  • 在注册后创建成分实例
  • 要素插入到 document 中
  • 元素从 document 中移除
  • 要素的品质变化时

这么些是很着重的从头到尾的经过,开拓者能够在注册新的自定义成分时钦命相应的生命周期回调来为自定义成分添加种种自定义的作为,那么些生命周期回调包蕴了:

  • createdCallback
    自定义成分注册后,在实例化之后会调用,平常多用于做成分的早先化,如插入子成分,绑定事件等。
  • attachedCallback
    要素插入到 document 时接触。
  • detachedCallback
    要素从 document 中移除时接触,大概会用来做类似 destroy 之类的事体。
  • attributeChangedCallback
    要素属性别变化化时接触,能够用来从外到内的通讯。外界通过修改成分的性格来让里面获得有关的多少同期实施相应的操作。

其叁回调在不一样情况下有对应差别的参数:

  • 安装属性时,参数列表是:属性名称,null,值,命名空间
  • 修改属性时,参数列表是:属性名称,旧值,新值,命名空间
  • 去除属性时,参数列表是:属性名称,旧值,null,命名空间

好了,就上面掌握到的根底上,要是大家要成立三个自定义的 button-hello 开关,点击时会 alert('hello world'),代码如下:

JavaScript

document.registerElement('button-hello', { prototype: Object.create(HTMLButtonElement.prototype, { createdCallback: { value: function createdCallback() { this.innerHTML = '<button>hello world</button>' this.addEventListener('click', () => { alert('hello world') }) } } }) })

1
2
3
4
5
6
7
8
9
10
11
12
document.registerElement('button-hello', {
  prototype: Object.create(HTMLButtonElement.prototype, {
    createdCallback: {
      value: function createdCallback() {
        this.innerHTML = '<button>hello world</button>'
        this.addEventListener('click', () => {
          alert('hello world')
        })
      }
    }
  })
})

要潜心上述代码实行之后技能利用 <button-hello></button-hello>

2.2 Emmet

Emmet是叁个Web开采者的工具包,能够大大进步你的HTML和CSS的做事流程。

基本上,大非常多的公文编辑器都会允许你存款和储蓄和重用一些代码块,大家称为“片段”。即便有个别能很好地推向您得生产力,但多数的得以完毕都有这般三个瑕玷:你不能够不先定义你得代码片段,并且无法再运营时张开进行。Emmet把有些这几个概念提升到了三个新的层系:你能够安装CSS格局的可以动态被深入分析的表明式,然后根据你所输入的缩写来获得相应的内容。Emmet是很成熟的还要特别适用于编写HTML/XML 和 CSS 代码的前端开拓人士,但也足以用于编制程序语言。

图片 8

扩展原有成分

实际,借使大家须求一个开关,完全无需再一次自定义一个因素,Web Components 标准提供了生机勃勃种扩张现成标签的不二秘籍,把上面的代码调度一下:

JavaScript

document.registerElement('button-hello', { prototype: Object.create(HTMLButtonElement.prototype, { createdCallback: { value: function createdCallback() { this.addEventListener('click', () => { alert('hello world') }) } } }), extends: 'button' })

1
2
3
4
5
6
7
8
9
10
11
12
document.registerElement('button-hello', {
  prototype: Object.create(HTMLButtonElement.prototype, {
    createdCallback: {
      value: function createdCallback() {
        this.addEventListener('click', () => {
          alert('hello world')
        })
      }
    }
  }),
  extends: 'button'
})

下一场在 HTML 中要这样使用:

XHTML

<button is="button-hello">hello world</button>

1
<button is="button-hello">hello world</button>

使用 is 属性来声称三个增添的品种,看起来也蛮酷的。生命周期和自定义成分标签的保持震耳欲聋致。

当大家须求多少个标签组合成新的因素时,大家能够运用自定义的要素标签,不过大器晚成旦只是内需在原始的 HTML 标签上拓宽扩大的话,使用 is 的这种元素扩充的章程就好。

原有的 createElementcreateElementNS,在 Web Components 标准中也扩充成为扶持成分扩充,比如要创造多个 button-hello

JavaScript

const hello = document.createElement('button', 'button-hello')

1
const hello = document.createElement('button', 'button-hello')

行业内部文书档案中还会有好多细节上的内容,比如接口的参数表明和须要,回调队列的完成须求等,这一个越来越多是对于达成那么些正式的浏览器开荒者的渴求,这里不做详细描述了,内容相当多,有意思味的自发性查阅:Cutsom Elements 2016.02.26。

2.2.1 安装Emmet

a、透过火速键组合ctrl+shift+P唤出命令面板
b、在面板中输入“install package”后回车
c、继之输入“Emmet”,等待安装实现。

和新星版的分别

前边笔者提到说文书档案的翻新改动比异常快,截至至自身写这一个小说的时候,最新的文书档案是那一个:Custom Elements 2016.07.21。

细节不做描述了,讲讲作者看出的最大转移,正是向 ES6 靠拢。大概有上面三点:

  • 从原先的扩大 prototype 来定义成分调解为建议使用 class extends 的办法
  • 登记自定义成分接口调治,尤其方便使用,传入 type 和 class 就能够
  • 生命周期回调调治,createdCallback 直接用 class 的 constructor

前多个点,大家一贯看下代码,原来的代码遵照新的正规,应该调度为:

JavaScript

class ButtonHelloElement extends HTMLButtonElement { constructor() { super() this.addEventListener('click', () => { alert('hello world') }) } } customElements.define('button-hello', ButtonHelloElement, { extends: 'button' })

1
2
3
4
5
6
7
8
9
10
11
class ButtonHelloElement extends HTMLButtonElement {
  constructor() {
    super()
 
    this.addEventListener('click', () => {
      alert('hello world')
    })
  }
}
 
customElements.define('button-hello', ButtonHelloElement, { extends: 'button' })

从代码上看会认为更是 OO,编写上也比原先要来得方便一些,原来的生命周期回调是调动为新的:

  • constructor in class 功用约等于原本的 createdCallback
  • connectedCallback 效用也正是 attachedCallback
  • disconnectedCallback 成效相当于 detachedCallback
  • adoptedCallback 使用 document.adoptNode(node) 时触发
  • attributeChangedCallback 和原先保持风流浪漫致

connect 事件和插入成分到 document 有微微组别,首要就是插入成分到 document 时,成分状态会成为 connected,这时会触发 connectedCallback,disconnect 亦是这么。

2.2.2 使用Emmet

HTML Imports

1) html初始化

输入“!”或“html:5”,然后按Tab键:

图片 9

html:5 或!:用以HTML5文档类型
html:xt:用于XHTML过渡文书档案类型
html:4s:用于HTML4严谨文书档案类型

概述

HTML Imports 是黄金年代种在 HTMLs 中援用以至复用其余的 HTML 文书档案的法子。那一个Import 绝对美丽貌,能够省略领会为大家普及的模板中的include 之类的作用。

我们最分布的引进多个 css 文件的艺术是:

XHTML

<link rel="stylesheet" href="/css/master.css">

1
<link rel="stylesheet" href="/css/master.css">

Web Components 现在提供多了二个以此:

XHTML

<link rel="import" href="/components/header.html">

1
<link rel="import" href="/components/header.html">
2) head标签内操作

引进外界样式表:link:css+tab

CSS

<link rel="stylesheet" href="style.css">

1
<link rel="stylesheet" href="style.css">

引进此中样式表:style+tab

CSS

<style></style>

1
<style></style>

引进外界js文件:script:src+tab

JavaScript

<script src=""></script>

1
<script src=""></script>

引进当中js文件:script+tab

JavaScript

<script></script>

1
<script></script>

增加网址Logo:link:favicon+tab

CSS

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

1
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

安装字符编码:meta:utf+tab

XHTML

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

1
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

安装包容形式meta:compat+tab

XHTML

<meta http-equiv="X-UA-Compatible" content="IE=7">

1
<meta http-equiv="X-UA-Compatible" content="IE=7">

示范如下:

图片 10

HTMLLinkElement

原本的 link 标签在增加了 HTML Import 之后,多了贰个只读的 import 属性,当出现下面三种处境时,那么些天性为 null

  • link 不是用来 import 多个 HTML 的。
  • link 成分不在 document 中。

不然,那天个性会回去八个意味着引入的 HTML 文件的文书档案对象,类似于 document。譬如说,在上方的代码基础上,能够这么做:

JavaScript

const link = document.querySelector('link[rel=import]') const header = link.import; const pulse = header.querySelector('div.logo');

1
2
3
4
const link = document.querySelector('link[rel=import]')
const header = link.import;
 
const pulse = header.querySelector('div.logo');
3)  body体内容编排

●标签:标签名(+tab)

●id:标签名#+类名称(+tab),能够跟五个类

类:标签名.+id名称(+tab),仅能够跟贰个id

图片 11

只输入.item,则Emmet会依照父标签举行剖断,日常为div。譬喻在<ul>中输入.item,就能够生成<li></li>。

图片 12

下边是有所的隐式标签名称:

li:用于ul和ol中
tr:用于table、tbody、thead和tfoot中
td:用于tr中
option:用于select和optgroup中

●标签的故事情节:标签名{内容}

标签内的属性:标签名[属性名=属性值],如:a[href=www.baidu.com]

图片 13

补充:

表单method属性

form:post(get)

input属性增添缩写(部分)

input->inp input:hidden->input:h input:text->input:t
input:password->input:p
input:checkbox->input:c
input:radio->input:r
input:submit->input:s input:button->input:b

●嵌套

>:子成分符号,表示嵌套的要素
+:同级标签符号
^:能够使该符号前的竹签提高如日中天行

图片 14

●分组()
能够经过嵌套和括号来迅快速生成成一些代码块,比方输入(.foo>h1)+(.bar>h2),会自动生成如下代码:

图片 15

●定义八个成分***
要定义多少个要素,能够利用
**符号。比如,ul>li3可以转变如下代码

图片 16

●计数器 $
在大家做”轮播“时,给元素的命名(id大概class),都会有一个计数位,这年,大家就能够利用 $ 它来完毕了,如下:

图片 17

能够合理组合种种操作来写出复杂样式的代码块。

阻塞式

大家要了解的是,默许的 link 加载是阻塞式的,除非你给她增加三个 async 标识。

阻塞式从某种程度上讲是有要求的,当您 improt 的是二个安然无恙的自定义组件并且供给在主 HTML 中用竹签直接行使时,非阻塞的就会面世谬误了,因为标签还还未有被登记。

2.2.3 CSS缩写

document

有一点点值得在意的是,在 import 的 HTML 中,大家编辑的 script 里边的 document 是指向 import 这个 HTML 的主 HTML 的 document。

假使我们要赢得 import 的 HTML 的 document 的话,得那样来:

JavaScript

const d = document.currentScript.ownerDocument

1
const d = document.currentScript.ownerDocument

那般设计是因为 import 进来的 HTML 必要用到主 HTML 的 document。比如我们下边提到的 registerElement

在八个被 import 的 HTML 文件中运用上边八个方法会抛出三个 InvalidStateError 异常:

  • document.open()
  • document.write()
  • document.close()

对于 HTML Import,规范文书档案中还应该有不小片段剧情是有关三个凭借加载的拍卖算法的,在此就不详述了,有空子的话找时间再开篇谈,这么些剧情是亟需浏览器去达成的。

1).  值

诸如要定义元素的增幅,只需输入w100,就可以生成

CSS

width: 100px;

1
width: 100px;

图片 18
除开px,也足以生成任何单位,比方输入h10p+m5e,结果如下

CSS

height: 10%; margin: 5em;

1
2
height: 10%;  
margin: 5em;

单位外号列表: p 表示%、e 表示 em、表示 ex

HTML Templates

2).  附加属性

@f+

图片 19

概述

本条东西很简短,用过 handlebars 的人都精晓有诸如此比一个东西:

XHTML

<script id="template" type="text/x-handlebars-template"> ... </script>

1
2
3
<script id="template" type="text/x-handlebars-template">
  ...
</script>

其他模板引擎也可以有临近的事物,那么 HTML Templates 正是把那些东西官方口径,提供了二个 template 标签来存放现在必要但是临时不渲染的 HTML 代码。

后来能够那样写了:

XHTML

<template id="template"> ... </template>

1
2
3
<template id="template">
  ...
</template>

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:页面制作之开发调试工具,是个什么样的东西

上一篇:深入理解Javascript面向对象编程,编写的计算器应 下一篇:打造高大上的Canvas粒子动画,浅谈浏览器http的缓
猜你喜欢
热门排行
精彩图文