HTML
文章平均质量分 63
Frank·Ming
逆水行舟,不进则退
展开
-
App的分类与简析
App的分类与简析原创 2023-02-02 09:41:03 · 1226 阅读 · 0 评论 -
动态REM适配(青春版)
动态rem适配的简易版本,适合初学者感受这玩意儿的作用原创 2022-08-10 11:19:48 · 360 阅读 · 0 评论 -
Javascript中for..of快速遍历对象时用到的迭代器到底是个啥?
一个菜鸡自己对着文档瞎琢磨,琢磨出来的玩意儿,鬼知道有多少漏洞...欢迎指正原创 2022-04-09 13:03:11 · 1626 阅读 · 0 评论 -
Javascript 对象遍历方式与探索
先构建一个基础模型,RT // 父类存在一个实例属性 function Father(){ this.fname = "Father的实例属性" } // 父类存在一个原型属性 Father.prototype.fmoney = "100"; // 子类存在一个实例属性 function Son(){ this.sname = "son的实例属性"; } Son.prototype = new Father(); // 子类实例化原创 2022-03-09 18:01:35 · 821 阅读 · 0 评论 -
Javascript WeakSet与Set类型在引用上的区别 | “究竟什么算强引用?什么算弱引用?”
1.什么是引用? 引用,即引用计数的简称。通俗来讲可以认为是系统在管理内存时的一种凭证和依据。引用计数本身可以认为就是一个内存空间的【数字类型的固有属性】。当我们在创建一个变量的时候,系统会为我们分配一块内存,与此同时系统会给这块内存空间绑定一个名为引用计数的固有属性,并对这个固有属性设置为1。例如下图中我们编写一段简单的代码,创建一个名为num的变量并对这个num变量初始化内容为整数类型1,那么内存中的状态就如下所示: 特别的,内存区域的引用计数值会伴随着【指向该内存区域的变量】数量增多更..原创 2021-10-12 17:46:09 · 240 阅读 · 0 评论 -
Javascript 正则表达式浅谈
1.什么是正则表达式? 正则表达式,英regularExpression)是一种【字符串检索模式】正则表达式具体表现为一个字符串的样子原创 2021-06-03 11:55:47 · 352 阅读 · 0 评论 -
浅谈Javascript深浅拷贝
1.总述 在JavaScript中深浅拷贝均针对于引用数据类型。为了验证各种拷贝,准备三层深入结构的Object对象类型数据。 var obj = { level1stu:[ {name:"frank1", girlFriends:["迪丽肉巴1","古力nong扎1","玛尔扎哈1"]}, {name:"frank2", girlFriends:["迪丽肉巴2","古力nong扎2","玛尔扎.原创 2020-09-22 19:49:38 · 176 阅读 · 0 评论 -
js中this的四种使用场景
最近读到了一篇介绍js中this的四种使用场景的文章,感觉总结的很好,所以我认真读了读,并且动手实践了其中的demo,与大家共享。原文链接:https://github.com/alsotang/n...遇到this,一直要记得这句:函数执行时,this总是指向调用该函数的对象(即:判断this所在的函数属于谁)。1、函数有所属对象,则指向所属对象var myObject={ value:100};myObject.getValue=function(){ console.l转载 2020-09-22 17:20:22 · 398 阅读 · 0 评论 -
Javascript中的map()函数与filter()函数的区别
1.相似语法上来看两者相似,都能接受一个回调函数,并作用于调用者。 var arr = [1,2,3,4,5,6]; var mapArr = arr.map(item=>item+=1); var filterArr = arr.filter(item=>item+=1); console.log(mapArr); console.log(filterArr);2.区别不同点在于:当回调函数为【布尔函数】时map()函数会.原创 2020-09-21 17:49:42 · 1099 阅读 · 0 评论 -
visibility:collapse的作用
1.简述 今天被萌新问了个问题:visibility:hidden和visibility:collapse到底什么区别?感觉都是把元素变的不可见,却能保留在文档流中的位置,但是他们两个到底什么区别?尴尬的是我真不知道这属性啥意思,平时用的时候最多就是默认visible和hidden。最后搞明白了之后记录一下。2.说明 visibility属性用于设置html元素在页面中的可见性,其常见属性值有visible(默认)、hidden,而collapse是一个相对前两者来说并不怎么常见的一个...原创 2020-09-18 18:39:09 · 4548 阅读 · 5 评论 -
css中元素居中总结
很多时候,我们需要让元素居中显示:1. 一段文本的水平居中,2. 一张图片的水平居中,3. 一个块级元素的水平居中;4. 单行文本的竖直居中,5. 不确定高度的一段文本竖直居中,6. 确定高度的块级元素竖直居中等等。现在分别对其进行总结下(这篇文章也在 imooc 里发表过手记,可是因为板式的原因不太容易读懂。):更新(20181115):让元素水平垂直居中,也可以使用让元素显示为单元格,让单元格原本的垂直居中发挥作用:<div class="parent"> <div转载 2020-09-18 16:56:43 · 343 阅读 · 0 评论 -
CSS中display:block与display:table在参与处理BFC时的区别
1.问题 在页面父子级结构中:若父级结构与相邻子级结构之间没有内容,且父级不存在border的情况下。父级与子级元素的margin会发生合并,也就是所谓的margin击穿问题。 <style> *{ margin: 0; padding: 0; } .father{ margin-top: 50px; } .son{ width: 100px; ..原创 2020-09-18 16:52:35 · 1036 阅读 · 0 评论 -
圣杯布局和双飞翼布局的理解与思考
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。圣杯布局来源于文章In Search of the Holy Grail,而双飞翼布局来源于淘宝UED。虽然两者的实现方法略有差异,不过都遵循了以下要点:两侧宽度固定,中间宽度自适应 中间部分在DOM结构上优先,以便先行渲染 允许三列中的任意一列成为最高列 只需要使用一个额外的<div>标签下面我将依次介绍圣杯布局和双飞翼布局的实现方法,并在最后转载 2020-09-17 10:58:19 · 437 阅读 · 1 评论 -
CSSmargin击穿问题(子元素margin-top会影响父元素)
最近写一个H5页面的时候发现了这个被忽视的问题,一时没想到什么原因,搜了半天,记录一下,方便他人踩坑。唉,有些东西不用就忘。一、问题描述最终效果:会发现在元素上面会有20px的空白,然而我们并没有对父元素设置margin,可见是子元素的 margin-top:20px 影响到了父元素。二、原因:MDN的文档:如果没有边框border,内边距padding,行内内容,也没有创建块级格式上下文或清除浮动来分开一个块级元素的上边界margin-top与其内一个或多个后代块级元素的上边界m..转载 2020-09-17 10:49:22 · 406 阅读 · 0 评论 -
多行文本末尾溢出文字显示省略号问题
问题我之前作为开发者、亦或者作为一个先行者,都被问过很多次一个问题:“多行文本末尾的溢出怎么搞定?”。说实话我对css理解的的确一般,但是对我个人而言我第一个想到的办法永远都是:{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap}但是这种写法带来的效果是无论你的文本内容又多少,都...原创 2019-04-19 18:00:39 · 630 阅读 · 0 评论 -
paperJS框架学习破冰01-鼠标跟随式三D球状动画效果
目录1.引言2.基本描述3.开始使用3.1.入门3.2.基础构建4.案例:鼠标跟随式3d球状动画4.1.尝试构建4.2.多个path4.3.动画4.4.长度变化速率曲线4.5.颜色渐变4.6.增大数量4.7.鼠标跟随4.8.裸眼3D5.总结1.引言 最近工作中对HTML页面特效有一些需求,于是在工作之余就找了一些封装的非常酷...原创 2020-09-14 10:39:14 · 386 阅读 · 0 评论 -
递归在实际开发中用途之一:整理父子级关系数据
记得之前有个童鞋问过我一个问题就是递归在实际开发中有啥用然后还有另外一个童鞋问过我一个编程竞赛中的算法题,里面就用到了递归找了找之前代码没找到,干脆重写了一个,方便各位参考和指点。(其实原要求记得是把JSON数据整理成父子级关系的数组。然而现在很多童鞋没有学习过JSON,因此我直接把JSON类型数据翻译成了数组。)已知数据结构:var oldArr = [ ['自身...原创 2018-11-23 15:52:12 · 1325 阅读 · 0 评论 -
<table>
1.<table>表格标签,<tr>声明表格行标签,<td>声明表格行单元标签。语法如下:<table border="1"><tr><td>zhouxingchen</td><td>peoplemoster</td>&l原创 2015-03-31 22:12:06 · 489 阅读 · 0 评论 -
标签(2)
1.使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它!2.浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行(换行)都会被算作一个空格。3.连字符:&aelig 输出为æ(不知道有啥用……)4.<!DOCTYPE html>开启了标准模式,令浏览器按照W3C的标准解析渲染页面,否则会出现怪...原创 2015-03-31 22:05:37 · 443 阅读 · 0 评论 -
块
1.块级元素(block level element)在浏览器中显示时,通常会以新行来开始(和结束)。例如:<h1>(一号粗体标题文字),<p>(新行),<ol>(有序列表),<table>(表格)2.内联元素(inline element)在浏览器中显示时,通常不会以新行来开始。例如:<b>(粗体),<td>(表单元格内容...原创 2015-03-31 22:12:57 · 477 阅读 · 0 评论 -
标签(1)
1.标签都是成对出现,。2.空值的标签在开始声明结束,。3.标签使用小写4.浏览器会自动地在标题的前后添加空行。 描述网页 可见的页面内容to 标题,数字代表粗体几号字(不能用这个标签当做粗体字使用,因为索引) 段落 链接 图像(UIIimageView) 换行水平线注释原创 2015-03-31 22:05:37 · 378 阅读 · 0 评论 -
<ol><ul>
1.<ul>无序列表(指的是Unordered list),<li>列表元素。用法如下:<ul>sex <li>male</li> <li>female</li> <li>shapeng</li></ul>2.&a原创 2015-03-31 22:12:10 · 615 阅读 · 0 评论 -
HTML5 的诞生及一些优势
一、 HTML5的诞生自 W3C于 1999年发布 HTML4后,Web世界快速发展,一片繁荣。人们一度认为 HTML标准不需要升级了。一些致力于发展 Web App的公司另行成立了 WHATWG组织,直到 2007年,W3C从 WHATWG接手相关工作,重新开始发展 HTML5。HTML5的发展史,有用户的需求在推动,有技术开发者的需求在推动,转载 2015-03-31 22:03:45 · 895 阅读 · 0 评论 -
标签(3)
1.<head>内部使用<style>标签可以对整个html界面进行格式化操作2.style="text-decoration:none”属性是取消下划线,应写在标签内部。eg:<a href=“http://www.baidu.com”style="text-decoration:none”>没有下划线的超文本链接</a>3.样式(<s...原创 2015-03-31 22:07:46 · 362 阅读 · 0 评论 -
<img>
1.<img src=“url” 属性=”值” />加载图片(动态图语法一样)ps:<img/>标签为空值标签,直接末尾加结束符/2.其实<img/>标签中src中的url有两种选择写法。a.相对路径:也就是说加载的图片就是在本网页(服务器)内的图片,相当于从文件夹下加载。所以可以写成如下形式:<img src="/i/ct_netscape.jpg...原创 2015-03-31 22:11:27 · 631 阅读 · 0 评论 -
表单
1.<form>表单标签,是一个包含表单元素的区域。表单是一个块级元素。表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。2.<input>输入标签,一般用来搜集用户信息。根据其属性type值的不同,输入字段可以是不同的多种样式。例如:文本字段,复选框,掩码后的文本控件,单选按钮,按钮等等。ps:<input>标签在H...原创 2015-03-31 22:15:03 · 423 阅读 · 0 评论 -
框架
1.框架结构标签,也叫框架集。定义了如何将窗口分割为框架,从而在一个浏览器窗口中显示不止一个页面。每个页面(HTML文档)都被称为一个框架,并且每个框架都独立于其他的框架。基本用法如下: ps:每一个都定义了一系列的行或列pss:rows/cols的值规定了每行/每列占据浏览器窗口的面积psss:并不见得使用框架就是好的,坏处显而易见:在一个窗口中显示多个页面,这原创 2015-03-31 22:13:44 · 501 阅读 · 0 评论 -
背景
1.背景颜色bgcolor,是的一个属性,用来将背景设置为某种颜色。其属性值可以是十六进制数、RGB值或颜色名。一个背景颜色和文字颜色搭配良好的例子,使页面中的文字易于阅读。而相反一个背景颜色和文字颜色搭配得不好的例子,使页面中的文字难于阅读。以下为两个例子的对比:文字是黑色,背景色是灰色。文字是金色,背景色是白色。ps:第二种颜原创 2015-04-01 21:45:44 · 472 阅读 · 0 评论 -
精度极限与精度丢失问题
/*问题查看*/ //感觉是true,结果却是false var num1 = 0.1; var num2 = 0.2; var result = num1+num2; console.log(result); //16位数与17位数的判断结果是true va...原创 2018-11-22 15:54:54 · 879 阅读 · 0 评论 -
JS通过原型实现多重继承
/* * 声明一个动物类型 */ function Animal(){} // 为动物类创建一个aname属性 Animal.prototype.aname = "动物"; // 为动物类创建一个吼叫的方法 Animal.prototype.howl = function(word){ // 如果对象不存在aname属性,则使用原型链的aname (...原创 2018-11-23 07:43:25 · 303 阅读 · 0 评论 -
超链接<a>
1.link这种类似的链接是指向一个当前网站的某一个页面的链接2.如果用图像当作链接,那么在超链接文字显示处放置图片标签,原理同文字超链接3.两种使用 标签的方式:a.通过使用 href 属性 - 创建指向另一个文档的链接(链接)b.通过使用 name 属性 - 创建文档内的书签(锚)4.(链接)属性target属性规定了被链接的文档(网页)在何处显示,比如http:原创 2015-03-31 22:10:29 · 464 阅读 · 0 评论