KFE 第44期

一周推荐

你不知道的伪元素实用小技巧

总结几个伪元素的使用技巧

css :before :after

iPhone X 适配手Q H5 页面通用解决方案

适配iPhone X的屏幕是不可避免的一问题

iphone x

数据可视化概览

数据可视化让我们可以对一些复杂的数据有一个直观的认识,容易从数据中发现一些。

数据可视化

长连接/websocket/SSE等主流服务器推送技术比较

推送技术

一周技能加油站

overscroll-behavior

overscroll-behavior是CSS的新属性,允许开发者覆盖默认的浏览器行为。例如多个滚动条引起的滚动链接又或者是浏览器默认的下来刷新。一系列的问题可能给开发者带来很大的不便。

overscroll-behavior 属性有 3 个值:

1.auto - 默认。元素的滚动会传播给祖先元素。

2.contain - 阻止滚动链接。滚动不会传播给祖先,但会显示元素内的原生效果。例如,Android 上的炫光效果或 iOS 上的回弹效果,当用户触摸滚动边界时会通知用户。注意:overscroll-behavior: contain 在 html 元素上使用可防止滚动导航操作。

3.none - 和 contain 一样,但它也可以防止节点本身的滚动效果(例如 Android 炫光或 iOS 回弹)。

https://github.com/dev-reading/fe/blob/master/articles/2017-11-15-overscroll-behavior.md

一周挑战

1
2
3
4
5
6
7
8
9
10
前端安全之XSS

XSS攻击全称跨站脚本攻击,它允许恶意web用户将代码植入到提供给其它用户使用的页面中。

比如发布评论,提交含有Javascript的内容文本,如果服务器没有过滤掉这些脚本,作为发布内容发布到页面上,其它用户访问这个页面的时候就会执行这些脚本,从而有可能影响用户正常访问页面。

攻击举例:反射型XSS、持久型XSS、DOM-based XSS

[https://baike.baidu.com/item/XSS%E6%94%BB%E5%87%BB](https://baike.baidu.com/item/XSS%E6%94%BB%E5%87%BB)
[http://www.imooc.com/article/13553](http://www.imooc.com/article/13553)

一周段子

在逗逼室友的电脑里发现几个文件夹,黑丝高清,青春小妹……我抱着一丢丢好奇打开,发现全是要背的法律文献,问这货,这货居然说是为了诱惑自己打开

KFE 第43期

一周推荐

使用 Chrome DevTools 调试 JavaScript

Chrome DevTools还有特别多好用的调试功能

chrome devtools

知道这20个正则表达式,能让你少写1,000行代码

假不了

正则表达式

理解 Service Workers

Service Worker特别好的中文文档

Service Worker

RESTful API 设计最佳实践

以往API的设计都是按照需求名字命名,但是实际上也可以按照一定的准则来设计出更加直观、简介的API

RESTful API

一周技能加油站

sticky

position:sticky是一个新的css3属性,
它的表现类似position:relativeposition:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像position:fixed,它会固定在目标位置。

想想都觉得特别棒是不是!!!

使用非常简单:

1
2
3
4
5
.sticky { 
position: -webkit-sticky;
position:sticky;
top: 15px;
}

效果怎么样,谁用谁知道

一周挑战(每周提供一道面试题)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
http的状态码一直以来都是前端的重要基础,但是往往又被忽略。

http状态码由三位数组成,第一位表示状态码的响应类型

1xx 表示请求已经接收了
2xx 表示请求已经接收成功并处理掉了
3xx 表示请求已经重定向
4xx 表示客户端错误,可能请求有语法错误或者无法识别等
5xx 表示服务器端的错误

常见状态码:
200 OK 请求成功了
400 客户端请求有语法错误
401 请求没有经过授权
403 服务端收到请求但是拒绝响应
404 请求的资源没有找到
500 服务器发生不可预期的一个错误
503 服务器暂时发生错误,可能过一会就会好

喵星人帮你来记 HTTP 状态码

一周段子

一次出去逛街,碰到一扫马路的老汉在上坡路

上拉双轮车,我就跑过去帮他推,确实是特别

重,把我累的直喘气,上完坡老汉给我道谢。

我就客气的回了句:“这是我推过最累的车。”

老汉:“小伙子,你还没有结婚,这话说的有点早了。”

文章整理来自互联网,不作商业用途,如侵权,请联系删除

KFE 第42期

一周推荐

如何编写轻量级 CSS 框架

各种各样的CSS框架层出不穷,稍微大点的,功能不能完全用上,小的功能却有可能不能满足自己的需求,何不动手自己编写自己的一个轻量级CSS框架

CSS 轻量CSS框架

使用浏览器开发者工具检查CSS动画性能

仅使用CSS的Opacity,Transforms 和Filters用于动画效果,才可以做出比较顺滑的动画。

CSS CSS动画

CSS双关语–来自前端的小段子,你看得懂吗?

有点难get到点

CSS

null == undefined ?

ECMAScript规范中定义了null == undefined会返回true。undefined表示一个变量最原始的状态,而非人为的操作的结果。JavaScript 中的函数都有返回值,当没有 return 操作时,就默认返回一个原始的状态值,这个值就是 undefined,表明函数的返回值未被定义。
null表示 一个对象被人为的重置为空对象,而非一个变量最原始的状态。
所以,在实际使用过程中,为了保证变量所代表的语义,不要对一个变量显式的赋值 undefined,当需要释放一个对象时,直接赋值为 null 即可。

一周技能加油站

getBoundingClientRect介绍

getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。getBoundingClientRect是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分)。

该函数返回一个Object对象,该对象有6个属性:top,lef,right,bottom,width,height;这里的top、left和css中的理解很相似,width、height是元素自身的宽高,但是right,bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离,bottom是指元素下边界距窗口最上面的距离。

https://mdn.mozillademos.org/files/15087/rect.png

应用场景:通过getBoundingClientRect判断元素是否在可视区域

1
2
3
4
5
6
7
8
9
function isElementInViewport (el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
);
}

参考:
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

https://div.io/topic/1400

一周挑战(每周提供一道面试题)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
javascript中的浅拷贝和深拷贝?
简单的理解就是,浅拷贝和深拷贝只针对Object和Array这样复杂的对象,浅拷贝只复制一层对象的属性,而深拷贝则递归拷贝所有层级。

浅拷贝的实现
function shallowCopy(obj) {
var newObj = {}
for(var i in obj) {
newObj[i] = obj[i]
}

return newObj
}
缺点是没有实现真正意义上的拷贝,如果源对象的子属性也是引用对象,所以实际上拷贝的是内存的一个引用地址,源对象的子属性发生修改也会作用到新的拷贝对象。

深拷贝的实现
function deepCopy(p, c) {
 var c = c || {};
 for (var i in p) {
  if (typeof p[i] === 'object') {
   c[i] = (p[i].constructor === Array) ? [] : {};
   deepCopy(p[i], c[i]);
  } else {
   c[i] = p[i];
  }
 }
 return c;
}

一周段子

“妹,别哭啊,到底发生什么了?”
“唔 唔,昨天我在你卧室睡觉,姐夫以为我是你,就把我给那个了。”
“妹,你为什么不叫呢?”
“太快了,还没来得及叫。”

文章整理来自互联网,不作商业用途,如侵权,请联系删除

KFE 第41期

一周推荐

JavaScript 包管理的前世今生

文章涉及了多知识点,不懂地方需要自己关注。

Yarn npm

Grab 前端技术指南(上)

Grab 前端技术指南(中)

Grab 前端技术指南(下)

内容虽然有点多,但是却可以更快帮助新员工熟悉Grab的开发技术栈。

前端指南

Chrome浏览器控制台(console)花式调试

console不止只有log这个方法,还有dir,time,assert等等调试的技巧

console

移动web资源整理

非常全的移动Web资源整理,简直造福程序员

移动web

一周技能加油站

相信很多前端er对cookie的印象,基本都是停留在set cookie的value以及expires,但是cookie其实远没有我们了解的这两个属性。今天回顾什么是cookie

什么是cookie?

  • Cookie 就是浏览器储存在用户电脑上的一小段文本文件
  • Cookie 是纯文本格式,不包含任何可执行的代码
  • Cookie 由键值对构成,由分号和空格隔开
  • Cookie 虽然是存储在浏览器,但是通常由服务器端进行设置
  • Cookie 的大小限制在 4kb 左右
  • expires

    expires用来设置cookie的失效时间,且是GMT 格式的时间(可以通过 new Date().toGMTString() 或者 new Date().toUTCString() 来获得)。

    cookie失效之后,document.cookie就访问不到这个cookie了,请求的时候也不会带上这个cookie。

  • max-age

    max-age也是控制cookie的失效时刻。在新的 http/1.1 协议中 expires 已经由 max-age 选项代替。

    *max-age 的值是一个以为单位时间段 (Cookie 失效时刻 = 创建时刻 + max-age)

优先级:同时设置了 max-age 和 expires,以 max-age 的时间为准

  • domain

    domain 默认值为设置该 Cookie 的网页所在的域名

  • path

    path 默认值为设置该 Cookie 的网页所在的目录。

    name、path 和 domain 是唯一标识一个 Cookie

  • secure

    secure选项用来设置 Cookie 只在确保安全的请求中才会发送。当请求是 HTTPS 或者其他安全协议时,包含 secure 选项的 Cookie 才能被保存到浏览器或者发送至服务器。

  • httpOnly

    选项用来设置 Cookie 是否能通过 js 去访问。默认情况下,Cookie 不会带 httpOnly 选项(即为空),客户端是可以通过 js 代码去访问(包括读取、修改、删除等)这个 Cookie 的。当 Cookie 带 httpOnly 选项时,客户端则无法通过 js 代码去访问(包括读取、修改、删除等)这个 Cookie。

    这种类型的 Cookie 只能通过服务端来设置,发送请求的时候,我们看到请求头还是会带上这个设置了 httpOnly 的 Cookie

可以设置 Cookie 的下列选项:expires、domain、path,各个键值对之间都要用 ; 和 空格 隔开

1
document.cookie='name=value; expires=Thu, 26 Feb 2116 11:50:25 GMT; domain=sankuai.com; path=/';
  • secure

    只有在 https 协议的网页中,客户端设置 secure 类型的 Cookie 才能成功

  • HttpOnly

    客户端中无法设置 HttpOnly 选项

重要点

  • 删除一个cookie,只要将一个cookie的max-age设置为0,就可以删除
  • Cookie 的作用域和作用路径

    只要满足作用域和作用路径,请求就会带上 Cookie,即使端口号不一样。

    子域会带上父域的cookie。

    子路径也会带上父路径的cookie,但是父路径无法带上子路径内的cookie。

参考:
Cookie 在前端中的实践

一周挑战(每周提供一道面试题)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
什么是函数节流?

由于在浏览器中,如果频繁的操作DOM,会相当消耗性能,通过函数节流的方式则可以大大减少对DOM的操作。

所谓函数节流,就是让一个函数无法在很短的时间间隔内连续调用,只有等到上一个函数执行后过了你规定的时间间隔,才能进行下一次调用。

具体实现:
// 方法一:JavaScript高级程序设计
var throttle = function(method, context){

clearTimeout(method.id)
method.id = setTimeout(function() {
method.apply(context)
}, 100)
}

// 调用
window.onresize = function() {
throttle(myFunc)
}

// 方法二: impress
var throttle = function(fn, delay) {
var timer = null
return function() {
var context = this, args = argument
clearTimeout(timer)
timer = setTimeout(function() {
fn.apply(context, args)
}, delay)
}
}

window.onresize = throttle(myFunc, 100)

一周段子

去姐家蹭饭,蒸螃蟹,姐夫夹了一个给我。四岁的小外甥女:”爸爸你吃“。”爸爸不吃,留给小姨和宝宝吃“。小外甥女:”爸爸你不能这样,你要对自己好一点,你天天跟牛似的还不吃饭,你累死了,会有别的叔叔花你的钱,住你的房子,睡你的老婆,打你的宝宝的!吃!赶紧吃

文章整理来自互联网,不作商业用途,如侵权,请联系删除

KFE 第40期

一周推荐

精选!15 个必备的 VSCode 插件

最近开始用VSCode,总体感觉不错,虽然没有sublime Text各种快捷键,但是IDE的集成不错,尤其是终端的集成

VSCode

总结个人使用过的移动端布局方法

不同的移动布局方案适合不同的场景,正如作者总结的,现在移动站已经开始普遍使用rem,而有大量CSS3动画这适合设置viewport

移动布局

浏览器中唤起native app || 跳转到应用商城下载

近期刚好也有遇到这样的需求,mark

native app

纯 CSS 实现波浪效果!

奇技淫巧,有木有

CSS 波浪效果

你一定要知道的 Chrome DevTool 新功能

新的 Audits 面板基于 Lighthouse , 它提供了一套全面的测试来评估网页的质量。测试的类别分别是 性能、可访问性、最佳实践和 PWA(Progressive Web Apps)。

Chrome DevTool

一周技能加油站

什么是 rem?

顾名思义就是以根元素(root)为参照物的 em 单位

根据 W3C 规范中对 1rem 的定义:

1rem 与等于根元素 font-size 的计算值。当明确规定根元素的 font-size 时,rem 单位以该属性的初始值作参照。

这就意味着 1rem 等于 html 元素的字体大小(大部分浏览器根元素的字体大小为16px)

1
2
3
4
5
6
7
8
9
10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (base)
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875rem
32px = 2rem

但是这种计算是十分麻烦的,于是就有了Snook 的62.5

因为 rem 单位与根元素相关联,Snook 改进后的方案变为了:

1
2
3
html { font-size: 62.5%; }  /* =10px */
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */

http://www.zcfy.cc/article/understanding-and-using-rem-units-in-css-1411.html

一周挑战(每周提供一道面试题)

1
2
1像素边框问题?
由于不同手机的像素密度不同,所以css中1px不等于移动设备的1px

一周段子

女秘帮老总设置计算机,询问老总想用什么词做为登陆系统的密码,老总坏笑地告诉女秘输入Penis,女秘一言不发,直接输入,结果电脑显 示:Password rejected. Not long enough.

老总晕倒,女秘书笑翻。

文章整理来自互联网,不作商业用途,如侵权,请联系删除

KFE 第39期

一周推荐

前后端分离后的前端时代

在前后端分离的时代,前端不再仅仅切图和编写静态模板,会有更多的承接页面更多的交互了。

前后端分离

JavaScript核心概念归纳整理

查缺补漏,看看自己还有哪些概念不会

Javascript

VueJS 开发常见问题集锦

遇到Vue的问题尝试来这里找解决方法

Vue

2017 Amsterdam CSS Day

赶快补充每个讲座的知识

CSS

只有20行Javascript代码!手把手教你写一个页面模板引擎

简单易懂,自己也可以写一个简单的模板引擎

模板引擎

一周技能加油站

学习模板引擎的时候,对代码中用的正则有点不是很熟悉了,于是对几个关键的正则稍微复习了一下

1
2
3
4
5
/<%([^%>]+)?%>/g
() 与模式 匹配并保存匹配项。
[] 字符集 与任何一个指定字符匹配
^ 匹配搜索字符串开始的位置。如果将 ^ 用作括号表达式中的第一个字符,则会对字符集求反。
? 零次或一次匹配前面的字符或子表达式。

https://msdn.microsoft.com/zh-cn/library/ae5bf541(v=vs.100).aspx.aspx)

一周挑战(每周提供一道面试题)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
实现extend函数?
有很多的插件库都有实现类似的方法
var isArray = function(obj) {
return (/Array/).test(Object.prototype.toString.call(obj));
}
var extend = function(to, from, overwrite){
var prop, hasProp;
for (prop in from) {
hasProp = to[prop] !== undefined;
if (hasProp && typeof from[prop] === 'object' && from[prop] !== null && from[prop].nodeName === undefined) {
if (isArray(from[prop])) {
if (overwrite) {
to[prop] = from[prop].slice(0);
}
} else {
to[prop] = extend({}, from[prop], overwrite);
}
} else if (overwrite || !hasProp) {
to[prop] = from[prop];
}
}
return to;
}

一周段子

哥们我上公交时前面一漂亮妹子发夹掉了,
我捡起上前叫住她:“美女你发夹掉了。”
妹子微微一笑,伸手来接。
从没跟妹子搭讪过的我不知哪来的勇气,
我竟然说:“能认识下吗?交个朋友。”
结果,妹子华丽丽地来了句:“算了,发夹我不要了。”

文章整理来自互联网,不作商业用途,如侵权,请联系删除

KFE 第38期

一周推荐

如何高效利用 GitHub 提升自己

把github当成微博来刷
github

2017 年学习 JavaScript 最好的书籍

多读书
Javascript

十大经典排序算法

最近对算法知识十分感兴趣,我也要学
算法

从 JavaScript 到 TypeScript

TypeScript是由微软开发和维护的一种开源编程语言,通过作为 ECMAScript 的超集来提供一些额外的功能,如类型检测和更丰富的语法。

TypeScript

大话WEB前端性能优化基本套路

性能优化一个老生常谈的话题,来看看这里的基本套路是不是和你想的一样
性能优化

2017 年 20 个最佳的极简 CSS 框架

来看看有没有可以用的上的
CSS框架

一周技能加油站

通过上期分享了HTML5上传下载相关之后,你可能对一些关键技术还想做更深入了解,例如FileList和File的关系是什么等等

FileList

即所有type属性(attribute)为file的 input 元素都有一个files属性(property),用来存储用户所选择的文件.

File

而File对象就是FileList对象中的每一个文件对象

一周挑战(每周提供一道面试题)

1
2
3
4
5
6
事件委托?
事件委托主要得益于事件冒泡的机制,当多个子元素需要绑定相同事件处理函数是比较麻烦的,通过事件冒泡机制,我们无需通过每一个子元素添加事件处理函数,只需要在他们所在的父元素添加相同的事件处理函数后,当触发监听的事件操作就能执行相应的事件处理函数。

特别声明:不同的浏览器厂商,对于事件的捕获和处理,有不同机制,目前W3C对DOM2.0定义的标准事件流是:

一、事件捕获阶段;二、事件目标阶段;三、事件气泡阶段;

一周段子

到银行汇款,车临时停路边上,为了怕交警罚就把朋友留下看车,跟他说有查车的过来了告诉我一声。进去几分钟果然有交警来了,那个朋友风风火火地闯进银行大声吼到:大哥,警察来了,快走啊!尼玛,偌大的一个大厅几十号人,顷刻间寂静无声,然后人潮像洪水一样湧出银行,接着我就被五六个保安按在了地上……真冤!不怕神一样的对手,就怕猪一样的队友!

文章整理来自互联网,不作商业用途,如侵权,请联系删除

KFE 第37期

一周推荐

Web开发野蛮生长的这17年

作者分享了Web开发发展的17年变化,以及对如何学习编程提供了非常好的建议

Web开发

Node.js原生开发入门完全教程

通过一个实例,一步步带你入门Node.js的原生开发
Node.js

工作中,ES6 可能掌握这些就足够了

快速起飞ES6的新特性

ES6

JavaScript 模块简史

依稀记起当年开始学习seajs的场景

模块化

H5 直播避坑指南

相信做视频开发,在这里可以找到很多解决方案

H5视频

一周技能加油站

这周要分享HTML5上传相关知识,相信阅读完会对整个上传下载的过程有进一步的清晰认识

HTML5 进阶系列:文件上传下载

一周挑战(每周提供一道面试题)

1
2
3
CSS3有哪些新特性?
CSS3选择器、@font-face...等等
https://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/index.html

一周段子

在日本福岛有非常强烈的辐射,有一个人的眼球白的被辐射成黑的,黑的被辐射成白的,他就是

.

.

.

.

蜡笔小新

文章整理来自互联网,不作商业用途,如侵权,请联系删除

KFE 第36期

一周推荐

腾讯Web前端大会精彩回顾

看到吗?我就是中奖的那个

腾讯Web前端大会

CSS 新的长度单位 fr 你知道么?

fr是 CSS Grid 规范中引入的一个新的长度单位,来看看fr实现了什么效果

fr

Vue vs React: Javascript 框架之战

要我说呀,老夫开发只用jQuery

Vue React

HTML 自定义元素教程

浏览器对待自定义元素,就像对待标准元素一样,只是没有默认的样式和行为。所以即使是写错的标签元素也能正常显示标签内容

自定义元素

Server-Sent Events 教程

SSE是服务器向客户端声明,服务端将向客户端发送流信息,从而实现服务端向浏览器推送消息

Server-Sent Events SSE

一周技能加油站

这周打算回顾一下计算机基础,位运算符,准备好智商,发车

ECMAScript 位运算符

论腾讯 TFC 抽奖程序作弊的可能性,以及代码中存在的 bug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
~~null;      // => 0
~~undefined; // => 0
~~0; // => 0
~~{}; // => 0
~~[]; // => 0
~~(1/0); // => 0
~~false; // => 0
~~true; // => 1
~~1.2543; // => 1
~~4.9; // => 4
~~(-2.999); // => -2

对于非数字,~~的结果为0,布尔的true是1

对于大于0的数,~~相当于是Math.floor

对于小于0的数,~~相当于是Math.ceil

一周挑战(每周提供一道面试题)

1
2
3
4
5
6
7
8
9
用一个div模拟textarea的实现?

HTML5中添加了一个新属性contenteditable,该属性可以让input,textarea以外的不可编辑的标签具备可编辑功能;

/contenteditable="true"  当属性值为true的时候,可编辑标签内可以写入标签,对于复制的具有样式的内容,其样式会保留;
<div contenteditable="true">我是可编辑的富文本框</div>

//contenteditable="plaintext-only"  当属性值为plaintext-only时,该可编辑标签内只能写入纯文本的数据,对于复制的具有样式的内容,会转换为纯文本,而将样式标签等内容过滤掉;
<div contenteditable="plaintext-only"></div>

一周段子

“儿子,你要不要叫外卖?”

“好!”
.

.

.

.

.

于是爸爸带儿子去派出所改名了

文章整理来自互联网,不作商业用途,如侵权,请联系删除

KFE 第35期

一周推荐

如何用Mocha测试JavaScript - 基础知识

如何用Mocha测试JavaScript - 第2部分

轻松入门mocha,看看你写的代码有啥毛病

Mocha

2017 年 6 月:15 个有趣的 JS 和 CSS 库

我就喜欢这些炫“库”

JS CSS

谁说Javascript简单的? – Hacker Noon

简单?不简单?

JS

十行 HTML 实现增强现实

重拾VR乐趣
增强现实

一周技能加油站

这周要分享的技能是css3 clip-path
相信掌握clip-path后,你可以绘制出各种漂亮的图形

CSS的clip-path

奇妙的 CSS shapes(CSS图形)

一周挑战(每周提供一道面试题)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
HTML中<input>和<textarea>的区别?
在HTML中有两种方式表达文本框,一个是<input>元素的单行文本框,一种是<textarea>的多行文本框。

<input>元素:

1.一定要指定type的值为text;

2.通过size属性指定显示字符的长度,value属性指定初始值,Maxlength属性指定文本框可以输入的

最长的长度;

<textarea>元素

1.使用<textarea></textarea>标签对

2.内容放在<textarea></textarea>标签对中

3.使用row、col指定大小

区别:一个是单行文本框,一个是多行文本框。

一周段子

小明:“爸爸,我到底是哪里来的?”

爸爸:“这个,这个……你是网上下载的。”

小明:“可是,我们家去年才有网络啊,我都6岁了啊?”

妈妈在旁边打圆场:“傻孩子,是蹭了隔壁王叔叔家的WIFI。”

文章整理来自互联网,不作商业用途,如侵权,请联系删除