前端html和css总结
1、html知识总结1.1 表格的的相关属性 属性 表示 border-collapse 设置表格的边框是否被合并为一个单一的边框 cellpadding 单元格边距 cellspacing 单元格间距 valign: top 顶对齐 单元格内容垂直方向的对齐方式 valign: middle 居中对齐 valign: bottom 底部对齐 colspan 单元格可横跨的列数 rowspan 单元格可竖跨的行数 1.2 表单常用属性 属性 表示 name 对提交到服务器后的表单数据进行标识 checked 在页面加载时被预先选定的input元素 selected 规定在页面加载时预先选定该选项 readonly 只读元素 disabled 禁用元素 size 下拉列表中可见选项的数目 1.3 选择器的优先级 行内选择器 > id选择器 > 父代选择器 > class选择器 > 标签选择器 > *{}通配符选择器 1.4 有关间距的css属性 margin/...
使用 Cravatar 解决 Gravatar 头像无法访问的问题
Gravatar全球通用头像服务1、基本介绍Gravatar,即全球公认的头像,是一项免费的头像服务,适用于网站所有者,开发人员以及任何想要轻松且经过验证的在线身份的人。它被内置在每个WordPress.com 帐户中,并在开放网络中广泛实施。我们可以通过登录wordpress账号创建和上传图片进行个性设置。 2、使用方式 进入官网,点击Create your Gravatar开始注册账户。 进入wordpress注册页面,填写注册邮箱和账户名以及密码。如果有账户,点击已有Wordpress.com账户进行登录。 在注册完成后会收到来自wordpress的激活邮件,打开激活邮件。 点击激活账户。 跳转到wordpress阅读器界面 点击右上角的头像跳转到个人信息页面,就可以对头像进行设置了。 3、常见问题由于近几年中国大陆的Gravatar服务的CDN服务被污染,现在已经无法通过官方服务器进行访问了。解决方法如下: 使用境外的服务器部署站点。 使用镜像源。 zeruns’s Blog的镜像源:https://gravata...
在博客中实现播放音乐功能(QQ,网易,酷狗,虾米,百度)
1、在页头head标签里添加:12345678910111213141516<link rel="stylesheet" href="https://gcore.jsdelivr.net/gh/likepoems/rushi/aplayer/dist/APlayer.min.css"><script src="https://gcore.jsdelivr.net/gh/likepoems/rushi/aplayer/dist/APlayer.min.js"></script><script src="https://gcore.jsdelivr.net/gh/likepoems/rushi/aplayer/dist/Meting.min.js"></script><!-- 自定义歌词样式 --><style>.aplayer-list li, .aplayer-music{text-align: left; ...
vue使用elementUI组件提交表单(带图片)到node后台
1、方法一(图片与表单分开,请求2次)1.1 前台代码123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111// elementUI表单<el-form ref="form" class="forms" :model="form"> <div class="title"> <el-input type="text" placeholder="请在这...
免费随机图片api接口
1、api接口整合 搏天:https://api.btstu.cn/樱道:https://api.r10086.com/樱花:https://www.dmoe.cc/保罗:https://api.paugram.com/东方Project:https://img.paulzzh.tech/缙哥哥博客: https://api.dujin.org/pic/yuanshen/LoliAPI:https://www.loliapi.com/栗次元:https://t.alcy.cc/ 2、api网站整合2.1 搏天 网址:https://api.btstu.cn 调用地址:https://api.btstu.cn/sjbz/api.php网站中有很多的接口,建议返回原站查询。 2.2 樱道 网址:https://img.r10086.com 调用地址: https://api.r10086.com/樱道随机图片api接口.php?自适应图片系列=原神网站中有很多的接口以及接口地址经常变更,建议返回原站查询。 2.3 樱花 网址:https://www.dmoe.c...
node 创建服务器方法
方法一12345678let http = require('http')let httpserver = http.createServer(function(req,res){ res.writeHead(200,{'Content-type':'text/plain'}) res.end("hello!666666")})httpserver.listen(3000,()=>{ console.log('正在监听 localhost:3000');}); 方法二12345let express = require('express');let app = express();app.listen(3000,()=>{ console.log('正在监听 localhost:3000');});
ES6学习笔记(十四)module的简单使用
1、前言module模块机制是es6新引入的,它解决了作用域的问题,使代码更加规范和结构化。下面简单的使用一下。 2、基本使用2.1 模块和脚本的区别 模块代码运行在严格模式下,并且没有任何办法跳出严格模式。 在模块的顶级作用域创建的变量,不会影响到全局作用域,它们只会在模块顶级作用域的内部存在。 模块顶级作用域的this值为undefined。 模块不允许在代码中使用HTML风格的注释。 模块允许到处需要外部引用的方法或变量。 模块可以从其他模块导入绑定。 2.2 几种使用方法2.2.1 导入单个(JS文件中)methods.mjs 1234function mul(num1, num2) { return num1 * num2}export { mul } test.js 12import { mul } from "./methods.mjs";console.log(mul(2, 3)); 2.2.2 导入单个(浏览器中)HTML中方式一: 12//直接通过script标签引用,注意...
ES6 学习笔记(十三)promise的简单使用
1、什么是promise在JavaScript中,我们经常会用到回调函数,而回调函数的使用让我们没法使用return,throw等关键字。JS引用promise正好解决了这个问题。promise单词意思是承诺,代表未来的某个事情或者是行为。promise是一个容器,包含了异步操作。因此我们认为promise是异步操作的解决方案。所有异步操作都可以通过promise来解决 2、了解promise上面说到promise是一个容器,那我们先在控制台打印一下。可以看到,Promise是一个构造函数,自身就有all、reject(代表失败的回调函数, 失败的操作)、resolve(代表成功的回调函数, 成功的操作)这几个于我们而言比较眼熟的方法,原型上有then、catch等同样很眼熟的方法。这么说用Promise new出来的对象肯定就有then、catch方法。 2.1、promise对象的特点 Promise对象的状态不受外界影响。包含pending(进行中)、fulfilled(已成功)和rejected(已失败)三种状态。只有异步操作结果才可决定是哪种状态,其他任何操作都无法改变...
ES6 学习笔记(十二)代理器Proxy的简单使用
1、前言以前在学习react时做了个仿手机端的QQ音乐项目。当时的数据是通过proxy代理的QQ音乐数据接口,直接写在package.json里面。Proxy 对象(Proxy)是 ES6的特性,只是不太常用。 2、基本内容2.1 含义正如MDN上所说,Proxy 对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。通俗的讲,Proxy是目标对象的一个代理器。即:在目标对象之前架设一层“拦截”,外界对该对象的访问都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写 2.2 语法12// 直接通过new Proxy实例一个代理对象const p = new Proxy(target, handler) 其中,new Proxy()表示生成一个Proxy实例,target参数表示所要拦截的目标对象,handler参数也是一个对象,用来表示拦截行为。 常见的拦截项属性: 属性 作用 has 拦截 in 操作。比如,你可以用它来隐藏对象上某些属性。 get 来拦截读取操作。比如当试图读取不存在的属性时,你可...
ES6 学习笔记(十一)迭代器和生成器函数
1、前言JavaScript提供了许多的方法来获取数组或者对象中的某个元素或者属性(迭代)。从以前的for循环到之后的filter、map再到后来的for…in和for…of的迭代机制。只要具有iterator接口的都可被迭代。 2、迭代器 Iterator2.1 含义迭代器(iterator)为各种数据结构,提供一个统一的、简便的访问接口,简单的说,迭代可以是数组或对象的遍历方式。它使得数据结构的成员能够按某种次序排列,如上面所说,只要部署 Iterator 接口,就可以完成遍历操作。即依次处理该数据结构的所有成员。 2.2 工作过程 首先,创建一个指针对象,指向当前数据结构的起始位置。也就是说,遍历器对象本质上,就是一个指针对象。 第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员 第二次调用指针对象的next方法,指针就指向数据结构的第二个成员,以此类推。 不断调用指针对象的next方法,直到它指向数据结构的结束位置 2.3 Symbol.iterator属性2.3.1 简介ES6 规定,默认的 Iterator 接口部署在数据结构的Symbol.ite...








