- 博客(41)
- 收藏
- 关注
RSS订阅原创 Homer 快跑
Homer 乱入for (let i = 0; i < 10000; i++) { setTimeout(function () { console.log( "%c ", `margin-left:-30px; padding-left:1000px; font-size:200px; background-image: url('https://img-blog.csdnimg.cn/f6611d285a404f949f50
2021-12-01 22:22:06
269
原创 JavaScript之命名规范
JavaScript之命名规范JavaScript中的常用的命名规则如下，不能以数字开头可以用字母、下划线（_）、$开头变量里可以包含数字、字母、下划线（_）、$开头关键字和保留字是不可以用来声明变量的语义化，变量名需要有意义（人类能看懂而不是只有你能看懂），例如js_header，反例为abc...
2021-10-21 17:38:50
740
原创 JavaScript之保留关键字
JavaScript之保留关键字Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript 以后扩展使用。abstractargumentsbooleanbreakbytecasecatchcharclass*constcontinuedebuggerdefaultdeletedodoubleelseenum*evalexport*extends*falsefinal
2021-10-21 17:38:22
333
原创 JavaScript之引用方法
JavaScript之引用方法常用的JS引用方法有两种，如下直接引用，在HTML代码中嵌入JS代码以外部链接的方式引用直接引用示例如下，<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name
2021-10-21 17:37:39
568
原创 JavaScript之单线程特性
JavaScript之单线程特性JS引擎是单线程的，但是可以模拟多线程，靠的是轮转时间片。轮转时间片，即短时间之内轮流执行多个任务的片段。原理如下，现有任务1和任务2切分任务1和任务2随机排列这些任务片段，组成队列按照这个队里的顺序将任务片段送进JS进程JS线程执行一个又一个的任务片段...
2021-10-21 17:36:58
120
原创 JavaScript之组成
JavaScript之组成完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型（DOM, document object model），浏览器对象模型（BOM, browser object model）。ECMAScript包含且不限于语法、变量、关键字、保留字、值、原始类型、引用类型运算、对象、继承、函数。DOM包含且不限于获取、添加、修改、删除HTML元素，属于W3C规范。BOM包含且不限于滚动条、窗口宽高、事件、冒泡/捕获，没有规范，每
2021-10-21 17:36:28
106
原创 JavaScript之标准
JavaScript之标准所有的现代浏览器完全支持 ECMAScript 3（ES3，JavaScript 的第三版，从 1999 年开始）。ECMAScript 4（ES4）未通过。ECMAScript 5（ES5，2009 年发布），是 JavaScript 最新的官方版本。随着时间的推移，我们开始看到，所有的现代浏览器已经完全支持 ES5。...
2021-10-21 17:35:58
147
原创 脚本语言相关
脚本语言脚本语言又被称为扩建的语言，或者动态语言，是一种编程语言，用来控制软件应用程序，脚本通常以文本（如ASCII）保存，只在被调用时进行解释或编译。脚本语言是为了缩短传统的**编写-编译-链接-运行（edit-compile-link-run）**过程而创建的计算机编程语言。它的命名起源于一个脚本“screenplay”，每次运行都会使对话框逐字重复。早期的脚本语言经常被称为批量处理语言或工作控制语言。JavaScript是客户端脚本，PHP是服务端脚本。客户端脚本能在浏览器被view，但服务端脚
2021-10-21 17:32:18
109
原创 编程语言相关
编程语言相关编程语言大致分为编译型语言和解释型语言。他们的的翻译过程如下，编译型语言源码 -> 编译器 -> 机器语言 -> 可执行文件解释型语言源码 -> 解释器 -> 解释一行就执行一行解释型语言不需要根据系统平台进行移植（有对应的解释器就行）。编译型语言则需要根据平台的不同（例如Mac OS，Windows，Linux）来编译输出不同的可执行文件。编译型语言的运行速度是要大于解释型语言的，因为前者是直接运行机器码，而后者则需要一行一行地翻译
2021-10-21 17:31:28
83
原创 JavaScript与浏览器
JavaScript与浏览器浏览器的内核五大主流浏览器内核IEtridentChromewebkit blinkSafariwebkitFireFoxgeckoOperaprestoPS: Chrome和Safari合作开发了webkit，后来谷歌单干用webkit的内核开发了blink，两者可以说是一个东西。浏览器的历史和JS诞生1990年12月25日，万维网的发明者蒂姆·伯纳斯·李（Tim Berners-Lee）和罗伯特·卡里奥
2021-10-21 17:28:33
913
转载 函数式编程初探
函数式编程初探作者： 阮一峰日期： 2012年4月 6日诞生50多年之后，函数式编程（functional programming）开始获得越来越多的关注。不仅最古老的函数式语言Lisp重获青春，而且新的函数式语言层出不穷，比如Erlang、clojure、Scala、F#等等。目前最当红的Python、Ruby、Javascript，对函数式编程的支持都很强，就连老牌的面向对象的Java、面向过程的PHP，都忙不迭地加入对匿名函数的支持。越来越多的迹象表明，函数式编程已经不再是学术界的最爱，开始大
2021-09-24 17:20:59
131
转载 渐进式Web应用程序（PWA）
渐进式Web应用程序（PWA）什么是PWA渐进式Web应用程序（也称为PWA）是开发人员使Web应用程序加载更快，性能提升更高的一种现代化开发方法。简而言之，PWA是一个网站，但是它们采用了最新的Web标准来允许在用户在设备上安装它。他提供了和App一样的用户体验。当没有网络连接时，它可以离线使用，它可以缓存上一次联网交互过程中的数据。它将App应用程序的外观美感和网站的易开发特性融合在了一起。PWA，可以简单地理解为响应式网站，它依赖于用户的浏览器功能。它可以自动逐步增强其内置功能，使其外观和感
2021-09-18 13:37:15
1019
原创 CSS杂记（三）
CSS杂记（三）CSS之tableborder的样式区别<table border="1">与table css样式border: 1px solid #000;的区别<!DOCTYPE html><html lang="zh-CH"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
2021-09-14 17:59:50
114
原创 CSS杂记（二）
CSS杂记（二）CSS之文本垂直居中单行文本垂直居中将height赋值给line-height即可，原理是单行文字总会处于行高的中线上<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="vi
2021-09-13 00:56:04
546
原创 清除浮动的四种常用方法及其优缺点
清除浮动的四种常用方法及其优缺点浮动带来的问题众所周知，清除浮动主要是为了解决如下两个问题1，子元素浮动导致父元素高度为0浮动前<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="vi
2021-09-12 17:28:44
528
转载 zoom在清除浮动中的利用
zoom在清除浮动中的利用zoom 是个困惑了好久的元素，今天对它有了个初步的认识zoom, IE 的专属属性，在其他浏览器中不起作用，它的原本功能是设置或检测对象的缩放比例（只在IE下起作用）比如<div style="background:#f0f3f9; padding:20px; zoom:2;"> <img data-src="http://XXXXX.jpg" border="0" /></div>在IE中它会使图片放大两倍显示。在我们
2021-09-12 15:53:01
374
转载 IE下的布局（layout）和拥有布局（hasLayout）
IE下的布局（layout）和拥有布局（hasLayout）我们都知道IE浏览器和其他一些浏览器有很多表现不同的地方，这确实让人头疼，IE的表现与其他浏览器不同的原因之一就是我们今天要说的这个熟悉又陌生的东西：layout是一个专门针对显示引擎内部工作方式的概念（听起来好像很官方），布局问题是许多IE显示bug的根源。另外在清除浮动的时候也经常提出触发haslayout，关于清除浮动的内容，戳这里！windows上的IE使用布局概念减少它的处理开销。在理想情况下，所有元素都控制自己的尺寸和定位，但是在
2021-09-12 15:48:02
527
原创 CSS伪类和伪元素的区别
CSS伪类和伪元素的区别概念伪类元素的某种状态用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。例如：当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般css相似，可以为已有元素添加样式，但是它是不存在于DOM树中同时也不能被常规的CSS选择器获取到的信息，所以称为伪类。伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。任何常规选择器可以在任何位置使用伪类。伪类的语法不区分大小写。伪元素人为创造的不存在于DOM
2021-09-12 15:39:36
811
原创 IFC思维解决问题案例
IFC思维解决问题案例1，inline-block(例如img)元素底部空隙问题<!DOCTYPE html><html lang="zh-CH"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device
2021-09-12 15:33:06
156
转载 IFC(Inline Formatting Context)内联格式化上下文
IFC(Inline Formatting Context)内联格式化上下文与IFC之对应的是BFC : block formating context（块级格式化上下文），BFC在网页布局中的应用场景更是极其丰富，了解它会了解很多bug出现的原因，以及自行找到解决办法。建议首先了解BFC戳这里。IFC跟BFC一样，它不是一个元素，不是一种属性，而是一种环境，一种上下文，一种布局特性。符合以下条件即会生成一个IFC块级元素中仅包含内联级别元素形成条件非常简单，需要注意的是当IFC中有块级元素插
2021-09-11 20:12:40
420
转载 深入理解vertical-align
深入理解vertical-align一、为什么要写这篇文章今天看到一个问题：两个div 都设置 display：inline-block，正常显示；但是在第二个div中加一个块级元素或者内联元素，显示就变了个样，为什么？<meta charset="utf-8"/><style>div{ width: 100px; height: 100px; border:1px solid red; display: inline-block;}.
2021-09-11 19:18:12
519
转载 深入理解line-height
深入理解line-height基本概念行高、行距行高是指文本行基线间的垂直距离。那什么是基线呢？记不记得vertical-align属性有个baseline值，这个baseline就是基线，也即当前字体当前字号中字母'x'的底部。看张“盗图”（选自下面的参考文章），其实我也修改了一下啦~注意：倒数第二根是基线哦，最下面那根是底线，不是基线。图中两条红线之间的距离就是行高（line-height），上一行的底线和下一行的顶线之间的距离就是行距，而同一行顶线和底线之间的距离是font-size的大小，
2021-09-11 19:05:32
269
转载 字母‘x‘在CSS世界中的角色和故事
字母’x’在CSS世界中的角色和故事by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=4848一、不起眼的字母’x’首先，我们这里的字母'x'就是26个英文字母a,b,c,...中的x.由于自身形态的一些特殊性，因此，这个小小的不起眼的字母担当大任，在CSS世界中扮演了一个重要的角色。有人可能的第一反应是：“我知道，可以模拟关闭按钮的那个叉叉效果！”这位同学思维很活跃，
2021-09-11 18:07:06
304
转载 BFC(Block Formatting Context) 块级格式化上下文
BFC(Block Formatting Context) 块级格式化上下文一、BFC的概念在解释BFC是什么之前，我们需要先知道Box、Formatting Context的概念。Box: css布局的基本单位Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同
2021-09-11 17:59:57
147
转载 CSS命名规范——BEM（非常赞的规范）
CSS命名规范——BEM（非常赞的规范）特别声明：此篇文章由David根据csswizardry的英文文章原名《MindBEMding – getting your head ’round BEM syntax》进行翻译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax以及作者相关信息——作者
2021-09-08 18:34:10
392
转载 如何让 height:100%； 起作用
如何让 height:100%; 起作用当你设置一个页面元素的高度(height)为100%时，期望这样元素能撑满整个浏览器窗口的高度，但大多数情况下，这样的做法没有任何效果。你知道为什么height:100%不起作用吗？按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如，如果一个div元素的CSS是height: 100px;，那它应该在页面的竖向空间里占满100px的高度。而跟W3C的规范，百分比的高度在设定时需要根据这个
2021-09-06 20:31:58
85
原创 CSS杂记（一）
CSS杂记浏览器组成部分shell内核：渲染引擎/JS引擎常用浏览器Google Chrome webkit/blink(内核)Safari webkitFirefox geckoIE tridentOpera prestoCSScascading style shee
2021-09-06 01:42:05
226
原创 HTML杂记
HTML杂记文本缩进<p style="text-indent: 2em;"> paragraph </p>del and ins（语义）<del>已删除文本</del><ins>更新后的（新增的）文本</ins>address(语义)<address>北京市东大街35号</address>用strong而不用b<strong>加粗，表强调的语义，b是物理性标签，没有语
2021-09-06 01:38:11
169
转载 进程与线程的一个简单解释
进程与线程的一个简单解释作者： 阮一峰日期： 2013年4月24日进程（process）和线程（thread）是操作系统的基本概念，但是它们比较抽象，不容易掌握。最近，我读到一篇材料，发现有一个很好的类比，可以把它们解释地清晰易懂。计算机的核心是CPU，它承担了所有的计算任务。它就像一座工厂，时刻在运行。假定工厂的电力有限，一次只能供给一个车间使用。也就是说，一个车间开工的时候，其他车间都必须停工。背后的含义就是，单个CPU一次只能运行一个任务。进程就好比工厂的车间，它
2021-09-03 17:12:16
88
原创 HTML之a标签
HTML之a标签anchor标签(锚点)<a href="https://www.baidu.com" target="_blank">百度一下，你就知道</a><a href="tel:18228879562“>联系我们</a><a href="mailto:abc@cn.xxx.com">发邮件</a>href是hyper text reference的缩写，用于指定链接的资源。target规定在何处打开链接文档，_b
2021-09-02 15:39:23
484
转载 HTML ＜br＞ 标签的 clear 属性
HTML ＜br＞ 标签的 clear 属性<br clear="right/left/all" /> 仅支持right、left、all三个值，并且只有在左对齐或右对齐的图像或表格起作用。效果：一：不使用clear属性<img src="image.png" align="left"><br/>2021年<br/>新年快乐二：使用clear属性定义为left, 直接清除左边界<img src="image.png" align="
2021-09-02 14:50:58
896
转载 div中英文无法自动换行的解决办法
div中英文无法自动换行的解决办法在一个设定好宽度的div中，当我们输入的中文文字长度超过了设定宽度时，会自动换到下一行。但是，如果输入的是英文字母，那么，无论你div设定宽度为多少，英文字母都是不换行直接在同一行输出，导致div的宽度远远超出设定的大小。原因：这是因为div中，英文字母之间没有空格的话，它会默认认为这是一个英文单词，所以单词就一次输出不换行。那么，难道我们得在每个字母中间加入一个空格来解决这个问题么？其实不用的，可以通过CSS实现。解决办法：在div的style中设定word-br
2021-09-02 13:03:08
1637
转载 HTML之结构化标签
HTML之结构化标签今天主要介绍一些html5新的结构化标签h5新增加了一些新的结构化标签，其目的呢想必是为了更直观的表达这就不得不提到HTML的语义化了我所理解的语义化呢就是选用合适的标签做合适的事然后更加直观的体现页面的内容比如说你一看见 <img/>标签就应该知道这是一个放图片的标签了所以呢h5也新增加了一些语义化更好的标签好了，介绍之前呢，我找了一张图，方便大家直观的理解相信大家已经从图中应该可以了解到我今天所要介绍的这些标签了我们一个个的来看一下section表
2021-09-02 12:32:52
570
转载 响应式设计之 — em 与 rem
响应式设计之 — em 与 rem综合指南: 何时使用 em 与 remem和 rem都是灵活、 可扩展的单位，由浏览器转换为像素值，具体取决于您的设计中的字体大小设置。 如果你使用值 1em 或 1rem，它可以被浏览器翻译成 从16px到 160px 或其他任意值。最大的问题是em和 rem单位提供的这种灵活性和工作方式都很相似，所以最大的问题是，我们何时应使用em值，何时应使用 rem 值呢?主要区别em 和 rem 单位之间的区别是浏览器根据谁来转化成px值 理解这种差异是决定何时使
2021-09-01 22:32:09
712
转载 浏览器标准模式与怪异模式-CSS1Compat and BackCompat
浏览器标准模式与怪异模式-CSS1Compat and BackCompat由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSS1compat或称为Strict mode也有叫做Standards mode)，这就是二者最简单的区别。W3C标准推出以后，浏览器都
2021-09-01 21:35:26
404
原创 HTML之charset
HTML之charset示例：<meta charset="UTF-8">UTF-8（万国码的一种实现方式），是针对Unicode的一种可变长度字符编码。它可以用来表示Unicode标准中的任何字符。GB2312（信息交换用汉字编码字符集）, 包含了简体中文的字符和一些非汉字图形字符。同时包含了日文平假名及片假名、拉丁字母、希腊字母、鳄鱼西里尔字母在内的全角字符。GBK（汉字编码扩展规范），涵盖了Unicode中的所有汉字(向上兼容)，在GB2312的基础上扩大了汉字收录，增加了古汉
2021-09-01 20:52:32
683
转载 字符编码笔记：ASCII，Unicode 和 UTF-8
字符编码笔记：ASCII，Unicode 和 UTF-8作者： 阮一峰日期： 2007年10月28日今天中午，我突然想搞清楚 Unicode 和 UTF-8 之间的关系，就开始查资料。这个问题比我想象的复杂，午饭后一直看到晚上9点，才算初步搞清楚。下面就是我的笔记，主要用来整理自己的思路。我尽量写得通俗易懂，希望能对其他朋友有用。毕竟，字符编码是计算机技术的基石，想要熟练使用计算机，就必须懂得一点字符编码的知识。一、ASCII 码我们知道，计算机内部，所有信息最终都是一个二进制值。每一个二进制
2021-09-01 20:26:30
465
转载 HTML5语义化
HTML5语义化什么是语义化语义化，顾名思义，就是你写的HTML结构，是用相对应的有一定语义的英文标签表示的。容易阅读以及理解代码的结构。在开发过程中，尽量使用官方推出的有语义的标签，不要再使用DIV+CSS的老一套无字面意义的标签去堆砌网页结构。为什么要语义化美化内容结构：为了在没有CSS的情况下，页面也能很好的呈现出内容结构。提升用户体验：例如title解释网页的主旨、alt解释图片的含义、label标签的活用。有利于SEO：爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立
2021-09-01 13:14:46
106
转载 html标签的lang属性
html标签的lang属性前言做 web 无障碍相关的研究时，遇到的第一件事就是要给 <html> 设置正确的 lang 属性，这么简单的一件事，想也不用就写好了：<html lang="zh-CN">，或者直接简写成 <html lang="zh">，Bingo，可以去做其它事了。但仔细想一想，好像有些问题zh 是什么鬼？拼音？明明是国际标准怎么会用中文拼音？CN 为什么要大写？zh-CN表示中国中文，zh-SG表示新加坡中文，但都是用的简体中文，貌似没什么
2021-09-01 13:10:04
3640
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人