12 2018 档案
摘要：1、iframe 定义和用法 iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。 HTML 与 XHTML 之间的差异 在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。 提示和注释 ： 提示：您可以把需要的文本
阅读全文
摘要：前言 由于Sencha Touch 2这种开发模式的特性，基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。 当然了，通过调用强大的PhoneGap插件然后打包，你可以实现100%的Socket通讯和本地数据库功能，又或者通过HTML5的WebSocket也可以实现与服务器的通讯和服务端推功
阅读全文
摘要：第一部分 基础知识 一、正则申明方式 1、构造函数方式 var reg = new RegExp('\d', 'gi'); ● 通过 new 构造一个正则表达式对象，其中第一个参数 '\d' 是正则内容，第二个参数 'gi' 是修饰符。两个参数皆为字符串类型 ● 修饰符的作用是对匹配过程进行限定 ●
阅读全文
摘要：一般大家调试都是在浏览器端调试js的，不过有些时候也想和后台一样在代码工具里面调试js或者node.js，下面介绍下怎样在vscode里面走断点。 1，用来调试js 一：在左侧扩展中搜索Debugger for Chrome并点击安装： 二：在自己的html工程目录下面点击f5,或者在左侧选择调试按
阅读全文
摘要：为什么需要 ： 根据提供的目标浏览器的环境来，智能添加css前缀，js的polyfill垫片,来兼容旧版本浏览器，而不是一股脑的添加。避免不必要的兼容代码，以提高代码的编译质量。 共享使用browserslist的组件们： |组件名 | 功能 | | | | |Autoprefixer |postc
阅读全文
摘要：package和package lock package.json : 主要用来定义项目中需要依赖的包 package lock.json ： 在 时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。 '^' : 放在版本号之前，表示向后兼容依赖，说白了就是在
阅读全文
摘要：用vue cli构建的项目脚手架已经帮你把autoprefixer的配置做好了，自己不需要做什么改动就会自动加前缀： 下面一起看看涉及到autoprefixer这个插件的一些配置： 1，postcss配置写在.postcssrc.js， 2，浏览器规则则写在package.json上, 3，开发环境
阅读全文
摘要：贴一下之前vue脚手架的webpack3配置： app.js是入口js，vendor则是通过提取公共模块插件来提取的代码块（webpack本身带的模块化代码部分），而manifest则是在vendor的基础上，再抽取出要经常变动的部分，比如关于异步加载js模块部分的内容。 从截图上看也看出，vend
阅读全文
摘要：vue更新到2.0之后,作者就宣告不再对vue resource更新,而是推荐的axios。 vue resource特点 vue resource插件具有以下特点： 1，体积小 vue resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQue
阅读全文
摘要：demo 场景需求分析 需求很简单，左上角 ‘’网易云音乐‘’就是一个中英文切换的按钮，点击弹出提示框，确认切换语言后，实现英文版本。 切换成英文版本： 三、实现国际化 1、我们得先有开发环境，先有项目跑起来，我推荐如果是喜欢用 vue 的小伙伴，可以尝试 vue cli 官方脚手架 2、我们需要安
阅读全文
摘要：命名冲突和文件依赖，是前端开发过程中的两个经典问题。通过模块化开发来解决。 AMD 规范在这里：https://github.com/amdjs/amdjs api/wiki/AMD CMD 规范在这里：https://github.com/seajs/seajs/issues/242 AMD 是
阅读全文
摘要：一 第三方JavaScript库 前言 .vue文件 中不解析 script标签引入js文件，只能用 import 引入 有两种用法: 1.import a from '../a' 2.import '../a' 区别在于第一个你要用到export导出之后 才能用import导入。 第二个是直接引入
阅读全文
摘要：前言 在创建的 router 对象中，如果不配置 mode，就会使用默认的 hash 模式，该模式下会将路径格式化为 ! 开头。 添加 mode: 'history' 之后将使用 HTML5 history 模式，该模式下没有 前缀，而且可以使用 pushState 和 replaceState 来
阅读全文
摘要：router.push(location) 在vue.js中想要跳转到不同的 URL，需要使用 router.push 方法。 这个方法会向 history 栈添加一个新的记录，当用户点击浏览器后退按钮时，则回到之前的 URL。 当你点击 时，这个方法会在内部调用，所以说，点击 等同于调用 声明式
阅读全文
摘要：场景 业务要求能够直接通过 “域名+/file”的方式访问静态资源的html，然而产品绝对static暴露在url中不好看又不能直接将html放在static中。所以想到了既然static可以直接访问，那么给他新加几个文件目录应该不是问题。 重点 在webpack.dev.conf.js和webpa
阅读全文
摘要：你可能注意到了我们的静态资源共有两个目录src/assets和static/，你们它们之间有怎样的区别呢？ 资源打包 为了回答这个问题，我们需要了解webpack是如何处理静态资源的。 在所有的 .vue文件中你所有的templates 和CSS 都被vue html loader 和css loa
阅读全文
摘要：为了保存网站的用户数据和业务数据，通常需要一个数据库。 MongoDB 和 Node.js 特别般配，因为MongoDB是基于文档的非关系型数据库，文档是按BSON（JSON的轻量化二进制格式）存储的，增删改查等管理数据库的命令和JavaScript语法很像。 我也准备使用MongoDB来作为我的数
阅读全文
摘要：socket.io学习笔记 1。服务器信息传输； 2。不分组，数据传输； 3。分组数据传输； 4。Socket.io难点大放送（暂时没有搞定）； 服务器信息传输 1. // send to current request socket client 2. socket.emit('message',
阅读全文
摘要：nodejs简介 ：Node.js是一个可以让javascript运行在服务器端的平台，它可以让javascript脱离浏览器的束缚运行在一般的服务器下面，你可以用Node.js轻松地进行服务器端应用的开发。Node.js是一个为实时Web应用开发而诞生的平台，它充分考虑了在实时响应和超大规模数据下
阅读全文
摘要：win系统下nodejs安装及环境配置 第一步：下载安装文件 下载nodejs，官网：http://nodejs.org/download/， 我这里下载的是node v0.10.28 x86.msi，如下图： 第二步：安装nodejs 下载完成之后，双击"node v0.10.28 x86.msi
阅读全文
摘要：error_page指令解释 nginx指令error_page的作用是当发生错误的时候能够显示一个预定义的uri，比如： error_page 502 503 /50x.html; 这样实际上产生了一个内部跳转(internal redirect)，当访问出现502、503的时候就能返回50x.h
阅读全文
摘要：移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 一、viewport的概念
阅读全文
摘要：1.iPhone尺寸规格 2.单位inch（英吋） 1 inch = 2.54cm = 25.4mm 3.iPhone手机宽高 上表中的宽高（width/height）为手机的物理尺寸，包括显示屏和边框。 以下为iPhone4s的宽高示意图： 4.屏幕尺寸 我们通常所说的iPhone5屏幕尺寸为4英
阅读全文
摘要：场景： 人物：前端实习生「阿树」与 切图工程师「玉凤」 事件：设计师出设计稿，前端实现页面 玉凤：树，设计稿发给你啦，差那么点像素，就叼死你┏( ￣へ￣)=☞ 阿树：~( _
阅读全文
摘要：1.首先说滚动条 移动端开发在不设置任何适配和viewport宽度的情况下，以iphone5为例：屏幕界面的逻辑分辨率是320x568，在谷歌浏览器的界面下屏幕的可视宽度是980px（谷歌设置的，每个浏览器宽度不一样）, 所以界面如果是980可以横向铺满全屏： 如果超过980就会出现滚动条.比如界面
阅读全文
摘要：前言 Safari开启无痕模式后，localStorage和sessionStorage为空，对其进行set操作也会报错，也就是说这种情况下，storage是被禁止使用了。接下来说一下解决方法。 解决方案 我们项目框架上的解决方法是对storage进行一层封装，遇到这种开启无痕模式的情况，会定义一个
阅读全文
摘要：cube ui 是滴滴去年底开源的一款基于 Vue.js 2.0 的移动端组件库，主要核心目标是做到体验极致、灵活性强、易扩展以及提供良好的周边生态—后编译。 自 17 年 11 月开源至今已有 5 个月，在这个过程中 cube ui 受到了不少的关注，同时从社区中也收到了很多很好的反馈和建议。我们
阅读全文
摘要：1，先看看网上关于移动端适配讲解 再聊移动端页面适配，rem和vw适配方案！ 基础点 ：rem相对根节点字体的大小。所以不用px; 根字体 ：字体的大小px; px ：你就当成cm(厘米)这样的东西吧； 基准 ：750设计稿； 这是方案的基础理论，在这个基础上，我们还要搞明白，到底要干一件什么事情！
阅读全文
摘要：在jQuery中，attr()函数和prop()函数都用于设置或获取指定的属性，它们的参数和用法也几乎完全相同。 但不得不说的是，这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别。 1、操作对象不同 很明显，attr和prop分别是单词attribute和property的缩写，并
阅读全文
摘要：.html()用为读取和修改元素的HTML标签 对应js中的innerHTML .html()是用来读取元素的HTML内容（包括其Html标签）,.html()方法使用在多个元素上时，只读取第一个元素 .text()用来读取或修改元素的纯文本内容 对应js中的innerText text()用来读取
阅读全文
摘要：jQuery的开篇声明里有一段非常重要的话：jQuery是为了改变javascript的编码方式而设计的。从这段话可以看出jQuery本身并不是UI组件库或其他的一般AJAX类库。jQuery改变javascript编码方式！ 那么它是如何实现它的声明的呢？这里，用以下的一段简短的使用流程： 1、查
阅读全文
摘要：query这么多年了分析都写烂了，老早以前就拜读过， 不过这几年都是做移动端，一直御用zepto, 最近抽出点时间把jquery又给扫一遍 我也不会照本宣科的翻译源码，结合自己的实际经验一起拜读吧！ github上最新是jquery master，加入了AMD规范了，我就以官方最新2.0.3为准 整
阅读全文
摘要：先说个概念的东西： jQuery为开发插件提拱了两个方法，分别是： ：为每一个实例添加一个实例方法item。（ 会生成一个 jQuery类的实例） ：该方法是将item合并到Jquery的全局对象中去，相当于为Jquery全局对象添加了一个静态方法 fn 是什么东西呢。查看jQuery代码，就不难发
阅读全文
摘要：一、实现原理： 对于DOM元素 ，通过分配一个唯一的关联id把DOM元素和该DOM元素的数据缓存对象关联起来，关联id被附加到以jQuery.expando的值命名的属性上，数据存储在全局缓存对象jQuery.cache中。在读取、设置、移除数据时，将通过关联id从全局缓存对象jQuery.cach
阅读全文
摘要：jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的，有了模式，我们就能更好地组织我们的代码，并且从这些前人总结出来的模式中学到很多好的实践。 根据《jQuery高级编程》的描述，jQuery插件开发方式主要有三种： 1. 通过 来扩展jQuery 2. 通过 向jQuery添加
阅读全文
摘要：容器：一个即时执行函数 根本上来说，每个插件的代码是被包含在一个即时执行的函数当中，如下： (function(arg1, arg2) { // 代码 })(arg1, arg2); 即时执行函数，顾名思义，是一个函数。让它与众不同的是，它被包含在一对小括号里面，这让所有的代码都在匿名函数的局部作用
阅读全文
摘要：1，开始 可以通过为jQuery.fn增加一个新的函数来编写jQuery插件。属性的名字就是你的插件的名字： jQuery.fn.myPlugin = function(){ //开始写你的代码吧！ }; 但是，那惹人喜爱的美元符号 哪里去了？她就是jQuery，但是为了确保你的插件与其他使用 的库
阅读全文
摘要：由于这篇文章比较长，所以分了四个阶段讲，从简单的入门级到最后到综合级，有些列子和图片都是转载其他博主的，希望对想写插件对同学会有帮助。这里分享个好久之前写的一个jquery插件（网站的功能引导插件，思路应该有些落伍了，仅供参考）： https://github.com/BothEyes1993/pa
阅读全文
摘要：也许你学习了那么久的Java了，但如果有人问你什么是JavaEE？你会怎么回答他呢？在此我来谈谈关于JavaEE的相关技术。(仅是个人见解) 在谈JavaEE时，我们首先来了解一下Java平台。目前，Java平台有3个版本：适用于小型设备和智能卡的JavaME(Java Platform Micro
阅读全文
摘要：基于Maven的Spring + Spring MVC + Mybatis的环境搭建项目开发，先将环境先搭建起来。上次做了一个Spring + Spring MVC + Mybatis + Log4J + JUnit Test的环境搭建，这次也差不多，不过就是基于了Maven，同时也添加了事务管理。
阅读全文
摘要：使用 SSM （ Spring 、 SpringMVC 和 Mybatis ）已经有三个多月了，项目在技术上已经没有什么难点了，基于现有的技术就可以实现想要的功能，当然肯定有很多可以改进的地方。之前没有记录 SSM 整合的过程， 这次刚刚好基于自己的一个小项目重新搭建了一次，而且比项目搭建的要更好一
阅读全文
摘要：由于Oracle授权问题，Maven3不提供Oracle JDBC driver，为了在Maven项目中应用Oracle JDBC driver,必须手动添加到本地仓库。 一.首先要得到Oracle JDBC Driver 1.通过Oracle官方网站下载相应版本：http://www.oracle
阅读全文
摘要：作用： @Component 泛指组件，当组件不好归类的时候，我们可以使用这个注解进行标注。(Component 成分; 组分; 零件) @Resource (资源) @Autowired (自动绑定) @Repository 于标注数据访问组件，即DAO组件(repository 仓库; 贮藏室，
阅读全文
摘要：为了探寻 ‘@Resource’, ‘@Autowired’, 和‘@Inject’如何解决依赖注入中的问题，我创建了一个“Party”接口，和它的两个实现类“Person”，“Organization”。这样我就可以在注入Bean的时候不必使用具体类型（指使用接口类型即可）。这样做也方便我研究当一
阅读全文
摘要：本文介绍了使用spring注解注入属性的方法。 使用注解以前，注入属性通过类以及配置文件来实现。现在，注入属性可以通过引入@Autowired注解，或者@Resource，@Qualifier，@PostConstruct，@PreDestroy等注解来实现。 使用注解以前我们是怎样注入属性的 类的
阅读全文
摘要：在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃，而HTML5的支持的本地存储实际上变成了 Web Storage （Local Storage和Session Storage）与IndexedDB。Web Storage使用简单字符串键
阅读全文
摘要：在HTML5本地存储——IndexedDB（一：基本使用）中介绍了关于IndexedDB的基本使用方法，很不过瘾，这篇我们来看看indexedDB的杀器——索引。 熟悉数据库的同学都知道索引的一个好处就是可以迅速定位数据，提高搜索速度，在indexedDB中有两种索引，一种是自增长的int值，一种是
阅读全文
摘要：首先介绍什么叫存储： cache：通常把它叫做缓存，功能就是把从DB,或者磁盘拿出来的东西放在缓存里面，这样的话可以减少读取磁盘的IO。 磁盘文件：通常把一些图片或者一些视频都存放在磁盘上。 数据库：mysql,oracle,一般都是存放一些关系型数据，表与表之间有关联。 内存：如果放在数据库或者磁
阅读全文
摘要：一、WebSocket是HTML5出的东西（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持久连接的（长连接，循环连接的不算） 首先HTTP有1.1和1.0之说，也就是所谓的keep alive，把多个HTTP请求合并为一个，但是Websocket其实是一个新协议，跟HTTP
阅读全文
摘要：我们先看下$.fn.data()的使用，这个和$.data()是不一样的，前者是和某个jquery对象相关，后者则是全局方法。主要有data()和removeData()这2个实例方法。通过下面的例子和执行结果可以看到：$.fn.data()和$.fn.removeData()跟$.data的使用方
阅读全文
摘要：新加语义化标签： HTML5其实是关于图像，位置，存储，速度的优化和改进 图像： 到目前为止，基本上想要直接在网页上进行绘图还是不能轻易完成的，即使是几何图形也不可以。在浏览器当中直接能跟图片的交互操作也很有限，多数是保存和点击。如果希望能够跟图片进行更多的操作或者在浏览器当中画出图形，就需要fla
阅读全文
摘要：初探和实现websocket心跳重连 心跳重连缘由 在使用websocket过程中，可能会出现网络断开的情况，比如信号不好，或者网络临时性关闭，这时候websocket的连接已经断开， 而浏览器不会执行websocket 的 onclose方法，我们无法知道是否断开连接，也就无法进行重连操作。 如果
阅读全文
摘要：ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现 初学者一开始学习JavaScript，其实就是在学3.0版的语法。 Node.js是JavaScript语言的服务器运行环境，对ES6的支持度比浏览器更高。通过Node，可以体验更多ES6的特性。建议使用版
阅读全文
摘要：一：关于函数的参数： 可以接受任意数量的参数而无视函数声明的参数数量是js函数的独特之处。 1：参数默认值 ES6之前做法： 但是这样timeout如果设置为0，还是会使用默认值。因此更安全的方法是使用typeof来检测类型。 ES6做法： makeRequest("xxxx",undefined,
阅读全文
摘要：神马是EcmaScript5 首先得先搞清楚ECMAScript是神马，我们知道JavaScript或者说LiveScript最开始是Netscape搞出来的，后来微软也跟进搞出了Jscript，ScriptEase也有自己的CENvi，这样就有了三个版本的浏览器Script各行其是，大家懂这个混乱
阅读全文
摘要：自由缩放属性resize 为了增强用户体验，CSS3增加了很多新的属性，其中resize就是一个重要的属性，它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。到目前为止，可以使用overflow属性的任何容器元素。 在此之前，Web设计师为了要实现这样具有拖动效果的UI，使用大量的脚本代码才
阅读全文
摘要：Media Queries——媒体类型（一） 随着科学技术不断的向前发展，网页的浏览终端越来越多样化，用户可以通过：宽屏电视、台式电脑、笔记本电脑、平板电脑和智能手机来访问你的网站。尽管你无法保证一个网站在不同屏幕尺寸和不同设备上看起来完全一模一样，但至少要让你的Web页面能适配用户的终端，让他更好
阅读全文
摘要：伸缩布局（一） CSS3引入了一种新的布局模式—— Flexbox布局，即伸缩布局盒模型（Flexible Box） ，用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为 Flex 。 Flexbox布局常用于设计比较复杂的页面，可以轻松的实现屏
阅读全文
摘要：Keyframes介绍 Keyframes被称为 关键帧 ，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。 @keyframes changecolor{ 0%{ background:
阅读全文
摘要：变形 旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。如下图所示： HTML代码： CSS代码： .w
阅读全文
摘要：:enabled选择器 在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。 示例演示 通过“:enabled
阅读全文
摘要：属性选择器 在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过id属性可以将不同div元素进行区分。 在CSS2中引入了一些属性选择器，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择
阅读全文
摘要：background origin 设置元素背景图片的原始起始位置。 语法： background origin ： border box | padding box | content box; 参数分别表示背景图片是从 边框 ，还是 内边距（默认值） ，或者是 内容区域 开始显示。 效果如下：
阅读全文
摘要：text overflow 与 word wrap text overflow ：用来设置是否使用一个省略标记（...）标示对象内文本的溢出。 语法： 但是text overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white spac
阅读全文
摘要：颜色之RGBA RGB 是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。 语法： color：rgba(R,G,B,A) 以上R、G、B三个参数，正整数值的取值范围为：0 255。百分数值的取值范围为
阅读全文
摘要：圆角效果 border radius border radius是向元素添加圆角边框。 使用方法： 不要以为border radius的值只能用 px 单位，你还可以用百分比或者 em ，但兼容性目前还不太好。 实心上半圆： 方法：把高度(height)设为宽度（width）的一半，并且只设置左上角
阅读全文
摘要：什么是CSS3？ CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器 chrome、safari、firefox、opera 、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。 在编写CSS3样式时，不同的浏
阅读全文
摘要：单行文本溢出显示省略号(…) text overflow:ellipsis 部分浏览器还需要加宽度width属性 多行文本溢出显示省略号 ● WebKit浏览器或移动端的页面 在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属
阅读全文
摘要：伪类 伪类就是一种虚构的状态或者说是一个具有特殊属性的元素可以使用CSS进行样式修饰。常见的几种伪类是: :link , :visited , :hover , :active , :first child 以及 :nth child。 这里还有很多，接下来我们将要逐一进行介绍。此外，伪类前面总是加
阅读全文
摘要：强制换行与强制不换行用到的属性 我们一般控制换行所用到的CSS属性一共有三个：word wrap; word break; white space。这三个属性可以说是专为了文字断行而创造出来的。首先我们得知道这三个属性到底是做什么用地： word wrap语法： word wrap: normal(
阅读全文
摘要：概念介绍： 1、px (pixel，像素)： 是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。 2、em
阅读全文
摘要：sass优点: 用户多，更容易找到会用scss的开发，更容易找到scss的学习资源； 可编程能力比较强，支持函数，列表，对象，判断，循环等； 相比less有更多的功能； Bootstrap/Foundation等使用scss； 丰富的sass库：Compass/Bourbon； sass缺点: 在公
阅读全文
摘要：webkit animation动画有三个事件： 开始事件: webkitAnimationStart 结束事件: webkitAnimationEnd 重复运动事件: webkitAnimationIteration css3的过渡属性transition，在动画结束时，也存在结束的事件：webk
阅读全文
摘要：在调移动支付问题的时候遇到过，用window.open打开一个微信支付链接，唤醒移动支付，在IOS下死活唤醒不了，是js代码冲突问题...是click事件IOS下不兼容问题...最后定位到window.open语句，之后改为window.loaction.href，奇迹般的可以唤醒支付，因此，也就很
阅读全文
摘要：Chrome下调用play后抱错：DOMException: play() failed because the user didn't interact with the document first. 声音无法自动播放这个在IOS/Android上面一直是个惯例，桌面版的Safari在2017年
阅读全文