1、<a>标签

(1)href属性包含超链接或超链接指向的URL或URL片段,URL 片段是哈希标记(#)前面的名称,哈希标记指定当前文档中的内部目标位置(HTML 元素的 ID)。URL 不限于基于 Web(HTTP)的文档,也可以使用浏览器支持的任何协议。例如,在大多数浏览器中正常工作的file:、ftp:和mailto:。

(2)可以使用 href="#top" 或者 href="#" 链接返回到页面顶部(HTML5)

(3)创建一个可点击的图片

<a href="https://developer.mozilla.org/en-US/">
<img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"
alt="MDN logo" />
</a>

(4)创建一个email链接

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

点击将用户的电子邮件程序打开,让他们发送新邮件

(5)创建电话链接

<a href="tel:+491570156">+49 157 0156</a>

(6)使用download属性将<canvas>保存为PNG格式

如果你想允许用户下载一个HTML画布,你可以创建一个下载属性和画布数据作为文件URL链接图像

var link = document.createElement('a');
link.innerHTML = 'download image'; link.addEventListener('click', function(ev) {
link.href = canvas.toDataURL();
link.download = "mypainting.png";
}, false); document.body.appendChild(link);

(7)最好不要滥用<a href="javascript:;"></a>,使用<button></button>代替,<a>最好只用于正常的URL导航

2、Blob

Blob 对象表示一个不可变、原始数据的类文件对象

Blob()构造函数允许用其它对象创建 Blob 对象。比如,用字符串构建一个 blob:

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)],
{type : 'application/json'});

使用 Blob 创建一个指向类型化数组的URL

var url = URL.createObjectURL(blob);
// 会产生一个类似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串
// 你可以像使用一个普通URL那样使用它,比如用在img.src上。

3、html元素的id里如果包含斜杠(/),用querySelector()等选择器时会报错,所以要对斜杠进行转义,key.replace('/', '\\/')

你不知道的js的更多相关文章

  1. 翻译连载 | 第 9 章:递归(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  2. 翻译连载 | 第 10 章:异步的函数式(上)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  3. 翻译连载 | 第 10 章:异步的函数式(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  4. 翻译连载 | 第 11 章:融会贯通 -《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  5. 翻译连载 | 附录 A:Transducing(上)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  6. 翻译连载 | 附录 A:Transducing(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  7. 翻译连载 | 附录 B: 谦虚的 Monad-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  8. 翻译连载 | 附录 C:函数式编程函数库-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  9. 你不知道的JS之 this 和对象原型(一)this 是什么

     原文:你不知道的js系列 JavaScript 的 this 机制并没有那么复杂 为什么会有 this? 在如何使用 this 之前,我们要搞清楚一个问题,为什么要使用 this. 下面的代码尝试去 ...

  10. 你不知道的JS之作用域和闭包 附录

     原文:你不知道的js系列 A 动态作用域 动态作用域 是和 JavaScript中的词法作用域 对立的概念. 动态作用域和 JavaScript 中的另外一个机制 (this)很相似. 词法作用域是 ...

随机推荐

  1. HTML常用特殊字符

    网页特殊符号HTML代码大全   HTML特殊字符编码大全:往网页中输入特殊字符,需在html代码中加入以&开头的字母组合或以&#开头的数字.下面就是以字母或数字表示的特殊符号大全. ...

  2. Ex 6_17 数量无限的硬币兑换问题_第七次作业

    子问题定义:定义一个数组b,大小比兑换价格的大小多一个元素,其中b[i]表示是否能用面值为x1,x2,x3,..,xn的硬币兑换价格i. 递归关系: 初值设定:设b[0]=true 求解顺序:按下标从 ...

  3. 如何利用github打造个人博客专属域名(文字版本)

    1. 前言 此篇文章仅限于记录,不适合作为教程使用. 2. 步骤 2.1 先决条件 有github账号,有个人域名(可在万网购买),电脑本地安装有git环境 2.2 在github新建仓库.例如我的g ...

  4. Python-互斥锁 进程间通讯

    3.守护进程(**) 主进程创建守护进程 其一:守护进程会在主进程代码执行结束后就终止 其二:守护进程内无法再开启子进程,否则抛出异常: AssertionError: daemonic proces ...

  5. Linux 文件查找命令详解

    find命令 Linux find命令用来在指定目录下查找文件.任何位于参数之前的字符串都将被视为欲查找的目录名.如果使用该命令时,不设置任何参数,则find命令将在当前目录下查找子目录与文件.并且将 ...

  6. vue2之对象属性的监听

    对象属性监听的两种方法: 1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValu ...

  7. LeetCode(6):Z字形转换

    Medium! 题目描述: 将字符串 "PAYPALISHIRING" 以Z字形排列成给定的行数:(下面这样的形状) P A H N A P L S I I G Y I R 之后按 ...

  8. python 全栈开发,Day35(TCP协议 粘包现象 和解决方案)

    一.TCP协议 粘包现象 和解决方案 黏包现象让我们基于tcp先制作一个远程执行命令的程序(命令ls -l ; lllllll ; pwd)执行远程命令的模块 需要用到模块subprocess sub ...

  9. ubuntu16.04LTS服务器,python2.7升级到3.6,且同时升级pip

    ubuntu这个服务器,默认是带了python2.7和python3.5版本的. 如果想升级到python3.6,怎么办? 我综合了网上的几个帖子,在几台服务器上测试了一下, 没什么大问题,作个记录. ...

  10. Ubuntu 安装 OpenMPI

    1. 下载OpenMPI 在官网上下载最新版本的安装包,如:openmpi-1.8.4.tar.gz 2. 解压并进行配置 tar -zxvf openmpi-3.0.0.tar.gz cd open ...