前端
文章平均质量分 60
shelleyHLX
这个作者很懒,什么都没留下…
展开
-
jquery和vue实现无操作锁屏
1. 事件的添加,事件防抖2. 状态的保存3. 父窗口的初始化和各个iframe的事件加载一、首先书写锁屏类,保存每种操作后的结果function ScreenNoWorkLocker(settings) { if (!settings) settings = {}; this.count = 0; this.work = false; this.hasInit = false; this.outTime = settings.outTime?par...原创 2022-01-28 16:33:23 · 1325 阅读 · 0 评论 -
2021 前端开发手册
简介这是一份 2021 年前端开发手册,列举前端开发相关技术,提供相关技术的学习资源。下面的项目不用全部学习,可以选其中一些学习。欢迎补充!项目地址:2021-frontend-handbook目录HTML CSS JavaScript 前端框架 前端工程化 服务端渲染 SSR 静态站点生成器 SSG TypeScript 用 JS 去做服务器端 桌面应用程序 Electron 移动端混合开发 前端架构 JAMStack WebAssembly1. HTMLDO转载 2021-12-27 17:07:26 · 496 阅读 · 0 评论 -
《2020前端工程师必读手册》
重磅下载!《2020前端工程师必读手册》,阿里巴巴前端委员会推荐!-阿里云开发者社区阿里巴巴前端委员会推荐!覆盖5大热点前端技术方向10+核心实战的前端手册--《2020前端工程师必读手册》已经正式上线了,大家可以免费下载了,解锁前端新方式,挖掘前端新思路,尽在此刻,赶紧来先睹为快!https://developer.aliyun.com/article/751767?utm_content=g_1000118457...原创 2021-12-27 16:51:54 · 321 阅读 · 0 评论 -
Web 前端技术图谱
Web前端开发技术栈浏览器 Internet Explorer Chrome Firefox Safari Opera Edge Netscape 协议 HTTP/1.1 链接 会话 授权 请求 响应 HTTP/2 压缩 打包 服务器端推送 WebSocket Web三剑客 HTML (HyperText Markup Language) CSS (Cascading Style Shee...转载 2021-12-27 15:31:32 · 292 阅读 · 0 评论 -
checkbox的样式
<!DOCTYPE html><head> <meta charset="utf-8"> <link rel="stylesheet" href="../font-awesome-4.4.0/css/font-awesome.css"></head><body style="margin: 20px"> <style> input[type=checkbox].jt-gc-check ...原创 2021-07-20 10:05:53 · 884 阅读 · 0 评论 -
p元素的强制换行
<p class="notice-lianjie"><a href="#" class="csEntityWindow" value="1399628778241658880" nameval="3814752">【3814752:3814752】</a></p>a是不换行,但是p强制换行,就换行原创 2021-07-15 16:08:53 · 765 阅读 · 0 评论 -
一个按钮绑定两个事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&.原创 2021-07-14 17:54:05 · 1551 阅读 · 0 评论 -
iframe
昨天在一家公司的笔试题中遇到一道题目:*iframe有那些缺点?*我这,完全不知道怎么答啊,虽然有遇到过这道题,可是在实际开发中没有用到过iframe,我当时粗略看了下答案也没记住……虽然不知道以后开发会不会用到,但是秉着遇到就不要放过的思想我决定了解一下 下面是W3School对<iframe>的定义:*iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。*其实我也不太明白这个什么意思,不过按我的理解就是:iframe提供了一个简单的方式吧一个网站的...转载 2021-07-14 15:58:59 · 217 阅读 · 0 评论 -
2021-07-14
iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同。一、同域下父子页面的通信父页面parent.html<html><head> <script type="text/javascript"> function say(){ alert("parent.html"); } function callChild(){转载 2021-07-14 15:42:01 · 50 阅读 · 0 评论 -
iframe的onload事件
很多时候,我们会需要改变一个iframe的地址(src属性),或者使用表单(form)的target在指定的iframe进行提交后,在 iframe加载完毕(onload)时立即响应某个操作,以提高WEB应用程序的价值。本文讨论了跨浏览器的iframe onload事件的监听方法。如果你没时间去阅读全文,可以看解决方案的内容概要:同域的页面嵌套,最好的是让内嵌的页面调用父页面的函数,如 window.parent.callparentFunctoin()。 如果是异域,或者子页面已存在且无法修改,转载 2021-07-14 15:38:41 · 13248 阅读 · 1 评论 -
Web前端之iframe详解
iframe基本内涵通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。<iframe src="demo_iframe_sandbox.htm"></iframe>但是,有追求的我们,并不是想要这么low的iframe. 我们来看看在iframe中还可以设置些什么属性iframe常用属性:1.frameborder:是否显示边框,1(yes),0(no)2.height:框架作为一个普通元素的高度,建议在使用css设置。3转载 2021-07-14 15:35:32 · 1997 阅读 · 0 评论 -
iframe子页面与父页面元素的访问以及js变量的访问
后台管理系统嵌套了很多iframe页面,想要取得父页面的元素,需要特殊的写法,总是记不住,写下来方便寻找// eg:iframe页面找父页面的 #nav$('#nav',parent.document) var order = $("nav.J_menuTabs a[data-id*=importOrderExcel]", parent.document); if(order.length){ $(".csEntityImport").hide(); }else{ ...原创 2021-07-14 15:19:53 · 3511 阅读 · 0 评论 -
html语言span标签,html 中span标签里面都能放那些标签??
基本上都可以放只是样式调整起来比较头疼。所以一般只是做标记用。不用再在它的里面放标签了在SEO中span标签代表搜索引擎不抓取的内容。span属于内联元素,默认宽度为当前文本长度宽度。所以当span中包含一些块级标签时就会无效果。如:<span><h1></h1></span>浏览器会解析为:<span></span><h1></h1>默认的span标签是一个行内标签,页面构成时,尽转载 2021-07-09 15:19:56 · 6778 阅读 · 0 评论 -
js 页面刷新
刷新为新的页面获得当前页面的url,即浏览器显示的地址:window.location.href;按下enter,页面刷新为百度刷新为当前页面1,history.go(0)2,location.reload()3,location=location4,location.assign(location)5,document.execcommand(‘refresh‘)6,window.navigate(location)7,location.repla...原创 2021-05-28 14:06:55 · 5291 阅读 · 0 评论 -
tabindex 属性 html5洗属性 规定当使用 “tab“ 键进行导航时元素的顺序。
tabindex 属性 html5洗属性规定当使用 "tab" 键进行导航时元素的顺序。定义和用法tabindex 属性规定当使用 "tab" 键进行导航时元素的顺序。一、在 HTML5 中, tabindex 属性可用于任何的 HTML 元素 (它会验证任何HTML元素。但不一定是有用。①在可以操作的元素上面才会有效,②<a>, <area>, <button>, <input>, <object&...转载 2021-05-19 18:12:52 · 299 阅读 · 0 评论 -
HTML:利用data自定义属性进行传值
data-* 属性用于存储私有页面后应用的自定义数据,可以在所有的 HTML 元素中嵌入数据。自定义的数据可以让页面拥有更好的交互体验(不需要使用 Ajax 或去服务端查询数据)。data-* 属性由以下两部分组成:属性名不要包含大写字母,在 data- 后必须至少有一个字符。该属性可以是任何字符串注意:自定义属性前缀 "data-" 会被客户端忽略。语法:<elementdata-*="somevalue">为一个元素分配data属性存储数据在javasc...原创 2021-05-17 10:05:53 · 664 阅读 · 0 评论 -
iframe的使用
window.top.documentwindow.document<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title></head><style> #box { height: 100%; width: 100%; max-width: 640px; backgrou原创 2021-05-13 16:26:25 · 591 阅读 · 0 评论 -
图片问题的一些总结
前言: 之前个人对于图片的问题,一直还是显得不是很重视。但其实对于互联网来说,可能图片的内容已经占据了整个互联网的大半部分,因此我们很大一部分流量的消 耗,都是用在了图片上面,因此,对于图片有一些认识肯定是现在所必须的。所以趁今天这个不太忙的机会,打算对于图片的问题做一个简单地总结,也算是对之前 没掌握到的东西的一个学习与备忘过程。常见的图片格式图片格式 压缩方式 动画 适应浏览器 JPG 有损 不支持 所有 PNG 无损 不支持 所有转载 2021-05-04 15:59:45 · 721 阅读 · 0 评论 -
HTML
一、HTML介绍PPTHTML(HyperText Markup Language)超文本标记语言,是学习Web程序的最重要并且最基础部分。xhtml(扩展HTML)xhtml1.0是HTML4.01的升级版本,比HTML更加严格,删除了表现型标签最新版本为HTML5.0,html由浏览器解释执行,纯文本文件。可以用文本编辑器编辑。二、HTML基本结构html5基本结构:<!DOCTYPEhtml> <html> <head> ...转载 2021-05-04 15:54:00 · 188 阅读 · 0 评论 -
十分钟搞清字符集和字符编码
字符集字符集(Character set)是多个字符的集合,字符集种类较多,每个字符集包含的字符个数不同,常用字符集名称有:ASCII字符集、GB2312字符集、BIG5字符集、GB18030字符集、Unicode字符集等等计算机要准确的处理各种字符集文字,需要进行字符编码,以便计算机能够识别和存储各种文字。中文文字数目大,而且还分为简体中文和繁体中文两种不同书写规则的文字,而计算机最初是按英语单字节字符设计的,因此,对中文字符进行编码,是中文信息交流的技术基础。GBK编码是中国大陆制订的,等同转载 2021-05-04 15:46:34 · 547 阅读 · 0 评论 -
[前端] 记录工作中遇到的各种问题(Bug,总结,记录)
https://blog.csdn.net/weixin_33724659/article/details/85928773转载 2021-04-23 14:24:23 · 189 阅读 · 0 评论 -
TypeError: instance.render is not a function [React]
render函数名写错了。。。。。。。原创 2021-03-16 15:02:36 · 477 阅读 · 0 评论 -
antd的错误
SyntaxError: E:\vscode\my-app\src\component\Header\index.js: Identifier 'Icon' has already been declared (5:7)因为新版本的引入方式改变了,可以看下官网,这是v4的https://ant.design/components/menu-cn/安装v3,npminstall--saveantd@3.10.9...原创 2021-03-16 15:02:01 · 289 阅读 · 0 评论 -
vscode将后缀为.art文件识别为html文件
打开设置搜索asso,在files:associations下添加:*.arthtml原创 2021-03-12 16:31:17 · 283 阅读 · 0 评论 -
webpack的错误
ERROR in Template execution failed: ReferenceError: document is not definedERROR in ReferenceError: document is not defined - carousel.js:3 eval webpack-internal:///./src/pages/index/js/carousel.js:3:25 - carousel.js:123 eval webpack-inte...原创 2021-03-10 10:24:46 · 1167 阅读 · 0 评论 -
前端书籍
1、CSS :《CSS禅意花园》链接:https://pan.baidu.com/s/1hHmcyIYtv90Gu-Es4MFzPQ提取码:wk92复制这段内容后打开百度网盘手机App,操作更方便哦--来自百度网盘超级会员V3的分享《CSS权威指南》链接:https://pan.baidu.com/s/1nlFQH3R7KIx_lD4vyFcjFQ提取码:wfzb复制这段内容后打开百度网盘手机App,操作更方便哦--来自百度网盘超级会员V3的分享《CSs设计指南》链接...原创 2021-02-02 16:00:21 · 265 阅读 · 0 评论 -
前端资源分享-只为更好前端
一、团队组织网站 说明 腾讯 AlloyTeam 团队 腾讯Web前端团队,代表作品WebQQ,致力于前端技术的研究 ISUX 腾讯社交用户体验设计,简称ISUX,腾讯设计团队网站 CDC 腾讯用户研究与体验设计部 FEX 百度Web前端研发部出品 淘宝前端团队(FED) 用技术为体验提供无限可能 凹凸实验室 京东用户体验设计部出品 奇舞团 奇虎360旗下前端开发团队出品 阿里巴巴国际UED团队 在更新的屏幕里创造出更原创 2021-02-02 10:54:31 · 69 阅读 · 0 评论 -
HTML提供了几种空格表示
HTML提供了5种空格实体(space entity),它们拥有不同的宽度,非断行空格( )是常规空格的宽度,可运行于所有主流浏览器。其他几种空格(      ‌‍)在不同浏览器中宽度各异。 它叫不换行空格,全称No-Break Space,它是最常见和我们使用最多的空格,大多数的人可能只接触了 ,它是按下space键产生的空格。在...转载 2021-01-28 15:47:46 · 94 阅读 · 0 评论 -
VsCode安装cssrem插件实现px转rem
1、搜索安装插件2、配置设置cssrem.rootFontSizeroot font-size (unit: px), default: 16这项最重要,这就是根字体大小,默认是16px,即1rem = 16px,可自定义cssrem.fixedDigits px转rem小数点最大长度,默认:6。cssrem.autoRemovePrefixZero 自动移除0开头的前缀,默认:true该插件可以在输入时选择转换,也可以使用ct...转载 2021-01-26 10:38:23 · 1936 阅读 · 0 评论 -
HTML5 基础
HTML5 是什么?HTML5是 HTML 最新的修订版本,是下一代 HTML 标准,2014年10月由万维网联盟(W3C)完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。HTML5还引进了新的功能,可以真正改变用户与文档的交互方式。接下来,让我们一起学习HTML5的有关知识,了解HTML5中的新特性。HTML5 文档在编写HTML5文档时,<!doctype>声明必须位于HTML5文档中的第一行:<!DOC...原创 2021-01-05 09:21:43 · 608 阅读 · 0 评论 -
HTML微课(含HTML5) - 创建一个博客页面
创建一个博客在这个章节中,我们将练习并创建一个博客主页,你需要积累所学到的知识,并将其应用。继续学习,按照“任务”部分的说明进行操作,最终,完成创建自己的博客页面。下面就是你要完成的博客页面,点击“尝试一下”查看代码及其输出。<html> <head> <title>我的博客</title> </head> <body>...尝试一下 »不要害怕页面代码长,当你完成创建博客页面时,一...原创 2021-01-04 09:37:42 · 527 阅读 · 0 评论 -
前端学习网站
https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_startedhttps://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps原创 2020-12-30 10:25:53 · 285 阅读 · 0 评论 -
CSS 网格
CSS 网格:创建你的第一个 CSS 网格通过将属性display的值设为grid,使 HTML 元素变为网格容器。通过前面的操作,你可以对该容器使用与 CSS 网格(CSS Grid)相关的属性。注意:在 CSS 网格中,父元素称为容器(container),它的子元素称为项(items)。将类为container的 div 的display属性改为grid。<style> .d1{background:...原创 2020-12-25 13:47:13 · 519 阅读 · 0 评论 -
CSS 弹性盒子
CSS 弹性盒子:使用 display: flex 定位两个盒子这节会使用一种不同的挑战方式来学习一下如何更灵活地使用 CSS 布局元素。首先,我们会先用一个挑战解释原理,然后使用“弹性盒子”(flexbox)调整一个推文组件的样式来完成挑战。只要在一个元素的 CSS 中添加display: flex;,就可以使用其他 flex 属性来构建响应式页面了。为#box-container添加display属性,设置其值为 flex。<style> #box-c...原创 2020-12-25 11:07:45 · 603 阅读 · 0 评论 -
响应式 Web 设计原则
from:https://learn.freecodecamp.one/responsive-web-design/css-flexbox响应式 Web 设计原则:创建一个媒介查询媒体查询是 CSS3 中引入的一项新技术,它可以根据不同的可视窗口大小显示不同的布局。可视窗口是用户在网页上的可见区域,根据访问网站的设备不同而不同。媒体查询由媒体类型组成,如果媒体类型与展示网页的设备类型匹配,则应用对应的样式。你可以在媒体查询中用上你想用的选择器和样式。下面是一个媒体查询的例子,当设备宽度.原创 2020-12-25 10:13:40 · 258 阅读 · 0 评论 -
freecodecamp----应用无障碍
应用无障碍:为视觉受损的用户添加替代图像的文本在其他挑战里你应该已经见到过img标签的alt属性了。alt属性中的文本作为备用文字描述了图片的内容,这可以帮助用户在图片加载失败或者不可见的情况下理解图片内容,也有助于搜索引擎理解图片内容,并将其加入到搜索结果中。例如:<img src="importantLogo.jpeg" alt="Company logo">那些无法通过视觉获取信息的用户,只能通过屏幕阅读器将网页内容转换为音频的方式获取信息,而屏幕阅读器通过识别alt属性,并朗原创 2020-12-25 09:42:00 · 838 阅读 · 0 评论 -
javascript的数组
在浏览器的console处测试。一、JS数组JavaScript中的数组类似于Python的列表 > a = [11,22,33,44] 常见功能: obj.length 数组的大小obj.push(ele) 尾部追加元素obj.pop() 尾部获取一个元素obj.unshift(ele) 头部插入元素obj.shift() 头部移除元素obj.splice(start...原创 2020-12-25 09:13:09 · 94 阅读 · 0 评论 -
JavaScript中字典的常用操作
https://blog.csdn.net/qq_44322357/article/details/102379334字典是一种以键值对存在的数据结构,他的底层是Array数组字典初始化和数组初始化的区别:数组的初始化:var arr = [1,2,3,4,5];//使用中括号字典的初始化: var names = {“a”:“aaa”,“b”:“bbb”,“c”:“ccc”};//使用花括号字典的创建//创建方式1 var arr = {"a":"1","b":"...转载 2020-12-24 13:22:56 · 868 阅读 · 0 评论 -
Vue基础(八):Vue前端交互
作者:@小灰灰本文为作者原创,转载请注明出处:https://www.cnblogs.com/liuhui0308/p/13618729.html阅读目录(Content)1.Vue前端交互 1.1 异步 1.2 promise 1.3基于Promise发送Ajax请求 1.4Promise常用API 1.5 Fetch 1.5.1fetch API中的HTTP请求 1.5.2 fetch API中响应格式 1.6 axios 1.6....转载 2020-12-24 13:19:58 · 411 阅读 · 0 评论 -
实战中学习浏览器工作原理 — 之 HTTP 请求与解析
前沿浏览器工作原理是一块非常重要的内容,我们经常看到的重绘、重排或者一些讲解CSS属性的时候,都会用到一些浏览器工作原理的知识来讲解。理论化学习浏览器工作原理,效果不是很大,而且很枯燥,所以这里我们从零开始用JavaScript来实现一个浏览器。通过自己实现一遍简单的浏览器,我们会对浏览器的基本原理有更为深刻的理解。浏览器基础渲染流程首先浏览器是由5个步骤完成的整体渲染 我们从URL访问一个网页,经过浏览器的解析和渲染后成为了Bitmap 最后通过我们的显卡驱动设配出去...转载 2020-12-23 10:57:45 · 399 阅读 · 1 评论