- 博客(29)
- 收藏
- 关注
RSS订阅原创 META Tag详解
meta是html语言head区的一个辅助性标签。几乎所有的网页里，我们可以看到类似下面这段的html代码：也许你认为这些代码可有可无。其实如果你能够用好meta标签，会给你带来意想不到的效果，例如加入关键字会自动被大型搜索网站自动搜集；可以设定页面格式及刷新等等。一、meta标签的组成meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。1、name属性name属性主要用于描述网页，与之对应的属性值为
2022-02-14 13:49:19
886
原创 HTML 中 META tag
meta是用来在HTML文档中模拟HTTP协议的响应头报文。 meta 标签用于网页的<head>与</head>中，meta 标签的用处很多。meta 的属性有两种：name和http-equiv。 name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。 这其中最重要的是description（站点在搜索引擎上的描述）和keywords（分类关键...
2022-02-14 10:34:58
246
原创 jq轮播图实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>淘宝滑动轮播案例</title> <script src="./js/jquery-2.1.4.min.js"></script> <style type="text/css"> *{ paddi
2021-12-03 09:55:47
75
原创 移动端网页通过css或js判断手机横屏还是竖屏
如何区分横屏和竖屏， 在CSS中？//竖屏@media screen and (orientation:portrait) { div { background-color:red; }}//横屏@media screen and (orientation:landscape) { div { background-color:red; }}如何区分横屏和竖屏， 在JS中？...
2021-11-25 17:12:14
314
原创 链接分享的图片的修改
当我们钉钉分享或是FaceBook分享我们的资源链接的时候，经常会被默认展示页面中第一张可见图片，于是就会有需要更改这张展示图片的需求，解决办法如下：<meta property="og:image" content="https://scontent-sea1-1.xx.fbcdn.net/hphotos-xap1/t39.2178-6/851565_496755187057665_544240989_n.jpg" />将这段代码插入到你页面的head标签内，content内的图片链接地
2021-11-18 12:26:59
535
原创 如何运行vue打包后的dist文件夹下的项目
1.需要安装http-server通过npm install -g http-server 进行全局安装2. 通过命令行进入到dist文件夹运行http-server，这样就可简单的本地启动一个服务了。
2021-11-11 11:25:46
671
原创 js 根据屏幕大小调用不同的css文件
原因:屏幕大小不一样,网站看起来总觉得怪怪的,所以,针对不同大小的屏幕,写了不同的css,写完了,要解决的问题就是:怎么根据屏幕的大小来引用不同的CSS,下面就是解决方法了.解决方法:首先,在head标签里面先引用一个通用的CSS文件,如下: <link href="Styles/Style.css" id="css" rel="stylesheet" type="text/css" />这时候,你会发现,这个和平常引用的CSS文件有些许不同,那就是,多加了一个ID,这里面就增加了一个i
2021-11-08 11:02:13
367
原创 VUE显示消息提示框功能
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> .toast { position: fixed; z-index: 2000; left: 50%; top: 45%; transition: all .5s;.
2021-10-14 15:12:12
2137
1
原创 Duplicate keys detected: ‘gggggg‘. This may cause an update error.的解决办法
vue项目中报了一个这样的错：Duplicate keys detected: ‘gggggg’. This may cause an update error.虽然不影响使用吧，但是一直冒红也不太好吧，还是要解决一下的。通过科学上网，说是v-for循环里，key值可能重复了，所以会报这个错。查看了下自己的代码，页面果然有v-for循环因为里面的name有重复的，所以。。。。。。。。。key值是必须唯一的，如果重复就会报错可以把key值改为index（其实就是用索引做key值），就可以避免这个
2021-09-17 15:51:16
252
原创 position：sticky实现粘性布局
生效规则position:sticky 的生效是有一定的限制的，总结如下：须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。这里需要解释一下：如果
2021-09-07 09:52:33
145
原创 谷歌浏览器截长图
使用浏览器浏览页面的时候，有时候会想把网页截取下来，但是使用平常的截图工具只能截取一小部分，此处来告诉打下如何利用谷歌浏览器截长图。步骤：(1): 在浏览器的右上角处找到三个竖着的小黑点按钮，点击选择该按钮。(2):在弹出来的下拉菜单中选择“更多工具”功能按钮，将鼠标放置于该按钮处会弹出一个二级菜单。(3):在二级菜单中找到“开发者工具”，鼠标左键单击选择该功能按钮，进入开发者工具操作中。（另外也可以按F12进入开发者工具）（ 4）在该页面中按快捷键“Ctrl+Shift+P”，开发者工具的窗
2021-09-03 11:04:37
470
原创 elementui中的el-input回显成功后input框不能进行编辑的问题
通过接口拿到数据后，input框无法进行编辑 <el-dialog v-dialogDrag title="RPA" :visible.sync="accountVisible" width="30%"> <el-form ref="accountForm" :model="accountForm" :rules="rules" label-width="200px"> <el-form-item label="Channel" prop=
2021-08-28 10:20:29
3937
1
原创 用javascript获得地址栏的各个部分
内容扩展对于像下面这样的网址http://www.caibaojian.com:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere我们可以用javascript获得其中的各个部分1, window.location.href-----------整个URl字符串(在浏览器中就是完整的地址栏)本例返回值: http://www.caibaojian.com:80/fisker/post/0703/window.locati
2021-08-25 17:33:34
245
原创 解决H5移动端点击输入框时，弹起的输入法会将底部的固定按钮顶起来
在写一个H5页面的时候，中间有输入框，底部有固定按钮。但是在点击输入框时，你就会看到一个奇怪的事情，我fixed固定在底部的部分被输入法顶起来了（图片先欠着）。下面给大家提供一种解决的办法，仅供参考。//navigator.userAgent.indexOf用来判断浏览器类型var isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;if (i
2021-08-25 10:07:08
2394
原创 overflow的属性介绍
关于overflow的其他属性的介绍：overflow 一共有5个属性。1、overflow:auto ；内容会被修剪，超出设置的宽高后会出现滚动条2、overflow:scroll;内容会被修剪，不管内容是否超出，都会出现滚动条的位置3、overflow:visible;这个是默认值，内容不会被修剪，会出现在元素框外面。4、overflow:hidden;内容被修剪，多余的内容被隐藏5、overflow:inherit;从父元素那里继承overflow的值。...
2021-08-25 09:50:36
12342
原创 vue倒计时组件（时分秒）
<template> <span>{{hour? hourString+':'+minuteString+':'+secondString : minuteString+':'+secondString}}</span></template><script> export default { data () { return { hour: '', minute: '',
2021-08-24 16:04:43
1527
原创 Uncaught SyntaxError: Unexpected token ‘＜‘的解决办法
Uncaught SyntaxError: Unexpected token ‘＜‘的解决办法
2021-08-13 10:54:28
465
原创 js中的splice的三种用法（删除，替换，插入）
splice有3个参数， splice(index,len,[item])其中，index:数组开始下标 len: 替换/删除的长度 item:替换的值，删除操作的话 item为空splice作用：删除元素/插入元素/替换元素，该方法会改变原始数组el：arr = [‘1’,‘2’,‘3’,‘4’]作用1：删除元素 — [item]为0arr.splice(1,1) //[‘1’,‘3’,‘4’]arr.splice(1,0) //[‘1’,‘2’,‘3’,‘4
2021-08-05 17:31:30
25738
原创 vue3对开发环境，测试环境以及生产环境的相关配置
vue3对开发环境，测试环境以及生产环境的相关配置前言一、设置全局变量1.在根目录下新建以下三个文件二、在package.json中设置相应的代码3.统一设置接口总结前言我们在开发vue项目的时候，会分为开发环境，测试环境以及生产环境。为了方便项目日后的开发，我们要对不同环境进行相应的设置。一、设置全局变量1.在根目录下新建以下三个文件文件内的代码如下（示例）：VUE_APP_CURRENTMODE='xxxxxxx' //不同环境的标识VUE_APP_URL='http://xxx
2021-08-03 16:12:46
617
原创 移动端1px解决方案border.css
@charset "utf-8";.border,.border-top,.border-right,.border-bottom,.border-left,.border-topbottom,.border-rightleft,.border-topleft,.border-rightbottom,.border-topright,.border-bottomleft { position: relative;}.border::before,.border-top:.
2021-07-30 10:15:47
89
原创 JS获取屏幕的高度
1，获取屏幕的宽度： window.screen.width //整个屏幕的宽度2，获取屏幕的高度： window.screen.height //整个屏幕的高度3，获取网页的宽高（不含边框）。3，1 获取整个网页的宽度：document.body.scrollWidth3，2 获取整个网页的高度：document.body.scrollHeight4，获取body的宽高（不含边框）。4，1 获取整个body的宽度：document.body.clientWidth4，2 获取整
2021-07-29 10:17:51
11179
原创 12个有用的JavaScript数组技巧
12个有用的JavaScript数组技巧1、数组去重1、from()叠加new Set()方法字符串或数值型数组的去重可以直接使用from方法。var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];var uniquePlants = Array.from(new Set(plants)); console.log(uniquePlants); // [ 'Saturn
2021-07-12 10:41:05
99
原创 了解Git和GitHub
git首次安装的配置1）打开Git bash，你要哪个目录下面打开，无所谓2）输入一个命令，叫git config --list3）配置全局邮箱 打开Git bash，你要哪个目录下面打开，无所谓 输入一个命令：git config --global user.email “你的邮箱” 这个邮箱，理论上，你可以随便写一个，最好使用真实邮箱 最好使用你注册github的邮箱 没有任何提示，就表示配置OK4）配置全局用户名打开Git bash，你要哪个目录下面打开，无所谓输入一个命令：gi
2021-01-28 21:44:25
79
原创 正则表达式
正则表达式：作用： 1）验证某个字符串是否符合某个规则 验证 2）从一个字符串中获取符合某个规则的子串 捕获语法： 正则也是表达式，在这个表达式使用了特定的符号，我们需要学习一堆的符号创建正则有两种方式： 1）字面量创建 let reg = /abc/; 不能进行拼接 写元字符时 \x 2）使用new的形式创建正则 let reg = new RegExp("hello"); 能进行拼接
2021-01-28 20:18:53
210
原创 前端路由的两种模式： hash 模式和 history 模式
前端路由的两种模式： hash 模式和 history 模式随着 ajax 的使用越来越广泛，前端的页面逻辑开始变得越来越复杂，特别是spa的兴起，前端路由系统随之开始流行。从用户的角度看，前端路由主要实现了两个功能（使用ajax更新页面状态的情况下）：1，记录当前页面的状态（保存或分享当前页的url，再次打开该url时，网页还是保存（分享）时的状态）；2，可以使用浏览器的前进后退功能（如点击后退按钮，可以使页面回到使用ajax更新页面之前的状态，url也回到之前的状态）；作为开发者，要实现这两个
2021-01-12 20:15:43
122
原创 react中使用redux
现在我们如果在react中使用redux，有什么不足之处：1）不管是哪一个组件中使用仓库，都需要引入，不方便2）在组件中派发一个action时，需要引入store，还需要引入action理想情况下：1）把store在根组件中提供 所有的子组件都可以使用之2）如果把仓库中的状态映射成组件的属性 this.props.xxx3）如果把派发动作的操作映射成组件的方法下面介绍一下react-redux:介绍：这是一个独立的模块，这个模块，可以让我们非常方便的在react中使用redux安装：np
2021-01-09 16:08:17
212
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人