众号【传智播客博学谷】回复关键词:前端 PS Java(100G) Python(80G) 大数据 区块链 测试 PPT JS(40g+300教程) HTML 简历 领取相关学习资料!
一、HTML
1、<image>标签上title属性与alt属性的区别是什么?
alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户,视觉障碍的用户和使用屏幕阅读器的用户等。
title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。参考《alt和title属性的区别及应用》
2、分别写出以下几个HTML标签:文字加粗、下标、居中、字体
加粗:<b>、<strong>
下标:<sub>
居中:<center>
字体:<font>、<basefont>、参考《HTML标签列表》
3、请写出至少5个html5新增的标签,并说明其语义和应用场景
section:定义文档中的一个章节
nav:定义只包含导航链接的章节
header:定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
footer:定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
aside:定义和页面内容关联度较低的内容——如果被删除,剩下的内容仍然很合理。
参考《HTML5 标签列表》
4、请说说你对标签语义化的理解?
a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
b. 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
c. 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
d. 便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
5、Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?
声明位于文档中的最前面,处于 标签之前。告知浏览器以何种模式来渲染文档。
严格模式的排版和 JS 运作模式是,以该浏览器支持的最高标准运行。
在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
6、你知道多少种Doctype文档类型?
标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。
Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,
Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。
7、HTML与XHTML——二者有什么区别
a. XHTML 元素必须被正确地嵌套。
b. XHTML 元素必须被关闭。
c. 标签名必须用小写字母。
d. XHTML 文档必须拥有根元素。
参考《XHTML 与 HTML 之间的差异》
8、html5有哪些新特性、移除了那些元素?
a. HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
b. 拖拽释放(Drag and drop) API
c. 语义化更好的内容标签(header,nav,footer,aside,article,section)
d. 音频、视频API(audio,video)
e. 画布(Canvas) API
f. 地理(Geolocation) API
g. 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失
h. sessionStorage 的数据在页面会话结束时会被清除
i. 表单控件,calendar、date、time、email、url、search
j. 新的技术webworker, websocket等
移除的元素:
a. 纯表现的元素:basefont,big,center, s,strike,tt,u;
b. 对可用性产生负面影响的元素:frame,frameset,noframes;
9、iframe的优缺点?
优点:
a. 解决加载缓慢的第三方内容如图标和广告等的加载问题
b. iframe无刷新文件上传
c. iframe跨域通信
缺点:
a. iframe会阻塞主页面的Onload事件
b. 无法被一些搜索引擎索引到
c. 页面会增加服务器的http请求
d. 会产生很多页面,不容易管理。
参考《iframe的一些记录》
10、Quirks模式是什么?它和Standards模式有什么区别?
在写程序时我们也会经常遇到这样的问题,如何保证原来的接口不变,又提供更强大的功能,尤其是新功能不兼容旧功能时。IE6以前的页面大家都不会去写DTD,所以IE6就假定 如果写了DTD,就意味着这个页面将采用对CSS支持更好的布局,而如果没有,则采用兼容之前的布局方式。这就是Quirks模式(怪癖模式,诡异模式,怪异模式)。
区别:总体会有布局、样式解析和脚本执行三个方面的区别。
a. 盒模型:在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在Quirks 模式下,IE的宽度和高度还包含了padding和border。
b. 设置行内元素的高宽:在Standards模式下,给等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效。
c. 设置百分比的高度:在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的用
d. 设置水平居中:使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效。
11、请阐述table的缺点
a. 太深的嵌套,比如table>tr>td>h3,会导致搜索引擎读取困难,而且,最直接的损失就是大大增加了冗余代码量。
b. 灵活性差,比如要将tr设置border等属性,是不行的,得通过td
c. 代码臃肿,当在table中套用table的时候,阅读代码会显得异常混乱
d. 混乱的colspan与rowspan,用来布局时,频繁使用他们会造成整个文档顺序混乱。
e. 不够语义
参考《为什么说table表格布局不好?》
12、简述一下src与href的区别
src用于替换当前元素;href用于在当前文档和引用资源之间确立联系。
src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置
href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接
公众号【传智播客博学谷】回复关键词:前端 PS Java Python 大数据 区块链 测试 PPT JS HTML 简历 领取相关学习资料!
.HTML 指的是?()
A.超文本标记语言(Hyper Text Markup Language)
B.家庭工具标记语言(Home Tool Markup Language)
C.超链接和文本标记语言(Hyperlinks and Text Markup Language)
2.Web 标准的制定者是?()
A.微软(Microsoft)
B.万维网联盟(W3C)
C.网景公司(Netscape)
3.在下列的 HTML 中,哪个是最大的标题?()
A.<h6>
B.<head>
C.<heading>
D.<h1>
4.在下列的 HTML 中,哪个可以插入折行?()
A.<br>
B.<lb>
C.<break>
5.在下列的 HTML 中,哪个可以添加背景颜色?()
A.<body color="yellow">
B.<background>yellow</background>
C.<body bgcolor="yellow">
6.请选择产生粗体字的 HTML 标签:()
A.<bold>
B.<bb>
C.<b>
D.<bld>
7.请选择产生斜体字的 HTML 标签:()
A.<i>
B.<italics>
C.<ii>
8.在下列的 HTML 中,哪个可以产生超链接?()
A.<a url="http://www.w3cschool.cn">W3Cschool.cn</a>
B.<a href="http://www.w3cschool.cn">W3Cschool</a>
C.<a>http://www.w3cschool.cn</a>
D.<a name="http://www.w3cschool.cn">W3Cschool.cn</a>
9.如何制作电子邮件链接?()
A.<a href="xxx@yyy">
B.<mail href="xxx@yyy">
C.<a href="mailto:xxx@yyy">
D.<mail>xxx@yyy</mail>
10.如何在新窗口打开链接?()
A.<a href="url" new>
B.<a href="url" target="_blank">
C.<a href="url" target="new">
11.请选择可以使单元格中的内容进行左对齐的正确 HTML 标签:()
A.<td align="left">
B.<td valign="left">
C.<td leftalign>
D.<tdleft>
13.如何产生带有圆点列表符号的列表?()
A.<dl>
B.<list>
C.<ol>
D.<ul>
14.在下列的 HTML 中,哪个可以产生复选框?()
A.<input type="check">
B.<checkbox>
C.<input type="checkbox">
D.<check>
15.在下列的 HTML 中,哪个可以产生文本框?()
A.<input type="textfield">
B.<textinput type="text">
C.<input type="text">
D.<textfield>
16.在下列的 HTML 中,哪个可以产生下拉列表?()
A.<list>
B.<input type="list">
C.<input type="dropdown">
D.<select>
17.在下列的 HTML 中,哪个可以产生文本区(textarea)?()
A.<textarea>
B.<input type="textarea">
C.<input type="textbox">
18.在下列的 HTML 中,哪个可以插入背景图像?()
A.<body background="background.gif">
B.<background img="background.gif">
C.<img src="background.gif" background>
19.以下选项中,哪个全部都是表格标签?()
A.<table><head><tfoot>
B.<table><tr><td>
C.<table><tr><tt>
D.<thead><body><tr>
20.在下列的 HTML 中,哪个可以插入图像?()
A.<img href="image.gif">
B.<image src="image.gif">
C.<img src="image.gif">
D.<img>image.gif</img>
请把你的答案写在留言区。^_^
易杨说:https://juejin.im/post/5d23e750f265da1b855c7bbe
第 1 题:(滴滴、饿了么)写 React / Vue 项目时为什么要在列表组件中写 key,其作用是什么?
第 2 题:['1', '2', '3'].map(parseInt) 运行结果,解释原因?
第 3 题:(挖财)什么是防抖和节流?有什么区别?如何实现?
第 4 题:介绍下 Set、Map、WeakSet 和 WeakMap 的区别?
第 5 题:介绍下深度优先遍历和广度优先遍历,如何实现?
第 6 题:请分别用深度优先思想和广度优先思想实现一个拷贝函数?
第 7 题:ES5/ES6 的继承除了写法以外还有什么区别?
第 8 题:setTimeout、Promise、Async/Await 的区别
第 9 题:(头条、微医)Async/Await 如何通过同步的方式实现异步
第 10 题:(头条)异步笔试题
请写出下面代码的运行结果
第 11 题:(携程)算法手写题
已知如下数组:
var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];编写一个程序将数组扁平化去并除其中重复部分数据,最终得到一个升序且不重复的数组
第 12 题:(滴滴、挖财、微医、海康)JS 异步解决方案的发展历程以及优缺点。
第 13 题:(微医)Promise 构造函数是同步执行还是异步执行,那么 then 方法呢?
第 14 题:(兑吧)情人节福利题,如何实现一个 new
第 15 题:(网易)简单讲解一下http2的多路复用
第 16 题:谈谈你对TCP三次握手和四次挥手的理解
第 17 题:A、B 机器正常连接后,B 机器突然重启,问 A 此时处于 TCP 什么状态
如果A 与 B 建立了正常连接后,从未相互发过数据,这个时候 B 突然机器重启,问 A 此时处于 TCP 什么状态?如何消除服务器程序中的这个状态?(超纲题,了解即可)
第 18 题:(微医)React 中 setState 什么时候是同步的,什么时候是异步的?
第 19 题:React setState 笔试题,下面的代码输出什么?
第 20 题:介绍下 npm 模块安装机制,为什么输入 npm install 就可以自动安装对应的模块?
第 21 题:有以下 3 个判断数组的方法,请分别介绍它们之间的区别和优劣
Object.prototype.toString.call() 、 instanceof 以及 Array.isArray()
第 22 题:介绍下重绘和回流(Repaint & Reflow),以及如何进行优化
第 23 题:介绍下观察者模式和订阅-发布模式的区别,各自适用于什么场景
第 24 题:聊聊 Redux 和 Vuex 的设计思想
第 25 题:说说浏览器和 Node 事件循环的区别
第 26 题:介绍模块化发展历程
可从IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、<script type="module"> 这几个角度考虑。
第 27 题:全局作用域中,用 const 和 let 声明的变量不在 window 上,那到底在哪里?如何去获取?。
第 28 题:cookie 和 token 都存放在 header 中,为什么不会劫持 token?
第 29 题:聊聊 Vue 的双向数据绑定,Model 如何改变 View,View 又是如何改变 Model 的
第 30 题:两个数组合并成一个数组
请把两个数组 ['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2'] 和 ['A', 'B', 'C', 'D'],合并为 ['A1', 'A2', 'A', 'B1', 'B2', 'B', 'C1', 'C2', 'C', 'D1', 'D2', 'D']。
第 31 题:改造下面的代码,使之输出0 - 9,写出你能想到的所有解法。
for (var i = 0; i< 10; i++){ setTimeout(() => { console.log(i); }, 1000) }
第 32 题:Virtual DOM 真的比操作原生 DOM 快吗?谈谈你的想法。
第 33 题:下面的代码打印什么内容,为什么?
var b = 10; (function b(){ b = 20; console.log(b); })();
第 34 题:简单改造下面的代码,使之分别打印 10 和 20。
var b = 10; (function b(){ b = 20; console.log(b); })();
第 35 题:浏览器缓存读取规则
可以分成 Service Worker、Memory Cache、Disk Cache 和 Push Cache,那请求的时候 from memory cache 和 from disk cache 的依据是什么,哪些数据什么时候存放在 Memory Cache 和 Disk Cache中?
第 36 题:使用迭代的方式实现 flatten 函数。
第 37 题:为什么 Vuex 的 mutation 和 Redux 的 reducer 中不能做异步操作?
第 38 题:(京东)下面代码中 a 在什么情况下会打印 1?
var a = ?; if(a == 1 && a == 2 && a == 3){ console.log(1); }
第 39 题:介绍下 BFC 及其应用。
第 40 题:在 Vue 中,子组件为何不可以修改父组件传递的 Prop
如果修改了,Vue 是如何监控到属性的修改并给出警告的。
第 41 题:下面代码输出什么
var a = 10; (function () { console.log(a) a = 5 console.log(window.a) var a = 20; console.log(a) })()
第 42 题:实现一个 sleep 函数
比如 sleep(1000) 意味着等待1000毫秒,可从 Promise、Generator、Async/Await 等角度实现
第 43 题:使用 sort() 对数组 [3, 15, 8, 29, 102, 22] 进行排序,输出结果
第 44 题:介绍 HTTPS 握手过程
第 45 题:HTTPS 握手过程中,客户端如何验证证书的合法性
第 46 题:输出以下代码执行的结果并解释为什么
var obj = { '2': 3, '3': 4, 'length': 2, 'splice': Array.prototype.splice, 'push': Array.prototype.push } obj.push(1) obj.push(2) console.log(obj)
第 47 题:双向绑定和 vuex 是否冲突
第 48 题:call 和 apply 的区别是什么,哪个性能更好一些
第 49 题:为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片?
第 50 题:(百度)实现 (5).add(3).minus(2) 功能。
例: 5 + 3 - 2,结果为 6
第 51 题:Vue 的响应式原理中 Object.defineProperty 有什么缺陷?
为什么在 Vue3.0 采用了 Proxy,抛弃了 Object.defineProperty?
第 52 题:怎么让一个 div 水平垂直居中
第 53 题:输出以下代码的执行结果并解释为什么
var a = {n: 1}; var b = a; a.x = a = {n: 2}; console.log(a.x) console.log(b.x)
第 54 题:冒泡排序如何实现,时间复杂度是多少, 还可以如何改进?
第 55 题:某公司 1 到 12 月份的销售额存在一个对象里面
如下:{1:222, 2:123, 5:888},请把数据处理为如下结构:[222, 123, null, null, 888, null, null, null, null, null, null, null]。
第 56 题:要求设计 LazyMan 类,实现以下功能。
LazyMan('Tony'); // Hi I am Tony LazyMan('Tony').sleep(10).eat('lunch'); // Hi I am Tony // 等待了10秒... // I am eating lunch LazyMan('Tony').eat('lunch').sleep(10).eat('dinner'); // Hi I am Tony // I am eating lunch // 等待了10秒... // I am eating diner LazyMan('Tony').eat('lunch').eat('dinner').sleepFirst(5).sleep(10).eat('junk food'); // Hi I am Tony // 等待了5秒... // I am eating lunch // I am eating dinner // 等待了10秒... // I am eating junk food
第 57 题:分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景。
第 58 题:箭头函数与普通函数(function)的区别是什么?构造函数(function)可以使用 new 生成实例,那么箭头函数可以吗?为什么?
第 59 题:给定两个数组,写一个方法来计算它们的交集。
例如:给定 nums1 = [1, 2, 2, 1],nums2 = [2, 2],返回 [2, 2]。
第 60 题:已知如下代码,如何修改才能让图片宽度为 300px ?注意下面代码不可修改。
<img src="1.jpg" style="width:480px!important;”>
第 61 题:介绍下如何实现 token 加密
第 62 题:redux 为什么要把 reducer 设计成纯函数
第 63 题:如何设计实现无缝轮播
第 64 题:模拟实现一个 Promise.finally
第 65 题: a.b.c.d 和 a['b']['c']['d'],哪个性能更高?
第 66 题:ES6 代码转成 ES5 代码的实现思路是什么
第 67 题:数组编程题
随机生成一个长度为 10 的整数类型的数组,例如 [2, 10, 3, 4, 5, 11, 10, 11, 20],将其排列成一个新数组,要求新数组形式如下,例如 [[2, 3, 4, 5], [10, 11], [20]]。
第 68 题: 如何解决移动端 Retina 屏 1px 像素问题
第 69 题: 如何把一个字符串的大小写取反(大写变小写小写变大写),例如 ’AbC' 变成 'aBc' 。
第 70 题: 介绍下 webpack 热更新原理,是如何做到在不刷新浏览器的前提下更新页面的
第 71 题: 实现一个字符串匹配算法,从长度为 n 的字符串 S 中,查找是否存在字符串 T,T 的长度是 m,若存在返回所在位置。
第 72 题: 为什么普通 for 循环的性能远远高于 forEach 的性能,请解释其中的原因。
第 73 题: 介绍下 BFC、IFC、GFC 和 FFC
第 74 题: 使用 JavaScript Proxy 实现简单的数据绑定
第 75 题:数组里面有10万个数据,取第一个元素和第10万个元素的时间相差多少
第 76 题:输出以下代码运行结果
// example 1 var a={}, b='123', c=123; a[b]='b'; a[c]='c'; console.log(a[b]); --------------------- // example 2 var a={}, b=Symbol('123'), c=Symbol('123'); a[b]='b'; a[c]='c'; console.log(a[b]); --------------------- // example 3 var a={}, b={key:'123'}, c={key:'456'}; a[b]='b'; a[c]='c'; console.log(a[b]);
第 77 题:算法题「旋转数组」
给定一个数组,将数组中的元素向右移动 k 个位置,其中 k 是非负数。
示例 1:
输入: [1, 2, 3, 4, 5, 6, 7] 和 k = 3 输出: [5, 6, 7, 1, 2, 3, 4] 解释: 向右旋转 1 步: [7, 1, 2, 3, 4, 5, 6] 向右旋转 2 步: [6, 7, 1, 2, 3, 4, 5] 向右旋转 3 步: [5, 6, 7, 1, 2, 3, 4]
示例 2:
输入: [-1, -100, 3, 99] 和 k = 2 输出: [3, 99, -1, -100] 解释: 向右旋转 1 步: [99, -1, -100, 3] 向右旋转 2 步: [3, 99, -1, -100]
第 78 题:Vue 的父组件和子组件生命周期钩子执行顺序是什么
第 79 题:input 搜索如何防抖,如何处理中文输入
第 80 题:介绍下 Promise.all 使用、原理实现及错误处理
第 81 题:打印出 1 - 10000 之间的所有对称数
例如:121、1331 等
第 82 题:周一算法题之「移动零」
给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序。
示例:
输入: [0,1,0,3,12] 输出: [1,3,12,0,0]
说明:
第 83 题:var、let 和 const 区别的实现原理是什么
第 84 题:请实现一个 add 函数,满足以下功能。
add(1); // 1 add(1)(2); // 3 add(1)(2)(3);// 6 add(1)(2, 3); // 6 add(1, 2)(3); // 6 add(1, 2, 3); // 6
第 85 题:react-router 里的 <Link> 标签和 <a> 标签有什么区别
如何禁掉 <a> 标签默认事件,禁掉之后如何实现跳转。
第 86 题:(京东、快手)周一算法题之「两数之和」
给定一个整数数组和一个目标值,找出数组中和为目标值的两个数。
你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用。
示例:
给定 nums = [2, 7, 11, 15], target = 9 因为 nums[0] + nums[1] = 2 + 7 = 9 所以返回 [0, 1]
第 87 题:在输入框中如何判断输入的是一个正确的网址。
第 88 题:实现 convert 方法,把原始 list 转换成树形结构,要求尽可能降低时间复杂度
以下数据结构中,id 代表部门编号,name 是部门名称,parentId 是父部门编号,为 0 代表一级部门,现在要求实现一个 convert 方法,把原始 list 转换成树形结构,parentId 为多少就挂载在该 id 的属性 children 数组下,结构如下:
// 原始 list 如下 let list =[ {id:1,name:'部门A',parentId:0}, {id:2,name:'部门B',parentId:0}, {id:3,name:'部门C',parentId:1}, {id:4,name:'部门D',parentId:1}, {id:5,name:'部门E',parentId:2}, {id:6,name:'部门F',parentId:3}, {id:7,name:'部门G',parentId:2}, {id:8,name:'部门H',parentId:4} ]; const result = convert(list, ...); // 转换后的结果如下 let result = [ { id: 1, name: '部门A', parentId: 0, children: [ { id: 3, name: '部门C', parentId: 1, children: [ { id: 6, name: '部门F', parentId: 3 }, { id: 16, name: '部门L', parentId: 3 } ] }, { id: 4, name: '部门D', parentId: 1, children: [ { id: 8, name: '部门H', parentId: 4 } ] } ] }, ··· ];
第 89 题:设计并实现 Promise.race()
第 90 题:实现模糊搜索结果的关键词高亮显示
第 91 题:介绍下 HTTPS 中间人攻击
第 92 题:已知数据格式,实现一个函数 fn 找出链条中所有的父级 id
const value = '112' const fn = (value) => { ... } fn(value) // 输出 [1, 11, 112]
第 93 题:给定两个大小为 m 和 n 的有序数组 nums1 和 nums2。请找出这两个有序数组的中位数。要求算法的时间复杂度为 O(log(m+n))。
示例 1:
nums1 = [1, 3] nums2 = [2]
中位数是 2.0
示例 2:
nums1 = [1, 2] nums2 = [3, 4]
中位数是(2 + 3) / 2 = 2.5
第 94 题:vue 在 v-for 时给每项元素绑定事件需要用事件代理吗?为什么?
第 95 题:模拟实现一个深拷贝,并考虑对象相互引用以及 Symbol 拷贝的情况
第 96 题:介绍下前端加密的常见场景和方法
第 97 题:React 和 Vue 的 diff 时间复杂度从 O(n^3) 优化到 O(n) ,那么 O(n^3) 和 O(n) 是如何计算出来的?
第 98 题:(京东)写出如下代码的打印结果
function changeObjProperty(o) { o.siteUrl = "http://www.baidu.com" o = new Object() o.siteUrl = "http://www.google.com" } let webSite = new Object(); changeObjProperty(webSite); console.log(webSite.siteUrl);
第 99 题:(bilibili)编程算法题
用 JavaScript 写一个函数,输入 int 型,返回整数逆序后的字符串。如:输入整型 1234,返回字符串“4321”。要求必须使用递归函数调用,不能用全局变量,输入函数必须只有一个参数传入,必须返回字符串。
第 100 题:(京东)请写出如下代码的打印结果
*请认真填写需求信息,我们会在24小时内与您取得联系。