前端开发牛客网刷题核心知识点积累

科技2022-07-11 94

<!DOCTYPE>标签

这个虽然每次都会写到，写在html文档的第一行，但平时并没有深究过。

在w3school上是这么解释的：<!DOCTYPE>声明不是HTML标签，指示web浏览器关于页面使用哪个HTML版本进行编写的指令；在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5 不基于 SGML，所以不需要引用 DTD。

简而言之，<!DOCTYPE>规定了浏览器文档使用哪种html或者xhtml规范

平时我们常用的

<!DOCTYPE html>

这就是html5的声明，在html4.01里面有三种<!DOCTYPE>声明方式

Flash提供了ExternalInterface接口与JavaScript通信，ExternalInterface有两个方法，call和addCallback：

ExternalInterface.addCallback("在js里可调用的flash方法名",flash内方法) //在flash中通过这个方法公开在js中可调用的flash内的方法;ExternalInterface.call("js方法",传给js的参数) //在flash里调用js里的方法

静态语言：强类型语言（C C# C++ Java

动态语言：弱类型语言（JavaScript PHP SQL python）

只有在缺少DOCTYPE（文档类型声明）时，在IE6~IE8中会触发怪异模式（quirks）

clear : none | left | right | both.

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

clear 属性定义了元素的哪边上不允许出现浮动元素

绘制日历时间可以修改

什么是SVG?

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准

SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

(SVG是HTML下的一个分支)

absolute和relative的定义，都是基于非static的父元素的

盒模型的属性：margin（外边距）、border（边框）、padding（内边距）、content（内容）

text-transform用来设置文本的大小写

'use strict'是严格模式

严格模式下禁止this关键字指向全局对象。

此时this为undefined。

A.Object.keys() 该方***返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致。如果对象的键-值都不可枚举，那么将返回由键组成的数组。

B.String.prototype.split() split() 方法使用指定的分隔符字符串将一个String对象分割成字符串数组，以将字符串分隔为子字符串，以确定每个拆分的位置。

AB选项都是返回数组。

C.Array.prototype.join() join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。 C选项返回字符串。

D.Promise.all() Promise.all(iterable) 方法返回一个 Promise 实例，此实例在 iterable 参数内所有的 promise 都“完成（resolved）”或参数中不包含 promise 时回调完成（resolve）；如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），失败原因的是第一个失败 promise 的结果。 D选项返回的是promise对象。

/* function setValue(){ var p1=p2={};//相当于p2={};var p1=p2; p1.name='hhhh'; p2.value="xxxx"; console.log(p1.value,p2.name); } setValue(); console.log(typeof p1) //undefined console.log(typeof p2) //object */ /* (function() { var a = b = 5; //相当于b=5;var a=b })(); console.log(b);//5 console.log(a);//Uncaught ReferenceError: a is not defined //a声明的是函数的局部变量，在函数结束是就销毁了，所以在全局下找不到a */ (()=>{}).length; 获取方法形参个数，形参为01=0001 2=0010 按位与运算，同为1才为1，否则返回0+[] 隐式类型转换，因为[]是对象，所以toPrimitive->valueOf->toString为''，结果就是+''===0reduce对数组中的每个元素执行一个reducer函数(升序执行)，将其结果汇总为单个返回值。a为累计器累计回调的返回值，b为数组的每一项元素，传入初始值0->0-(1)->(-1)-2->(-3)-(-3)->0

cookie的有效时间默认为-1，如果不进行设置的话，就会默认在浏览器会话关闭时结束。

可以通过setMaxAge()方法设置cookie的生命期。

当setMaxAge(0)表示立刻删除该浏览器上指定的cookie

Shift() 删除数组的第一个元素，返回被删除的元素，arr.shift()

Unshift() 向数组开头添加一个或多个元素，返回新的长度，arr.unshift(e1,e2..)

Pop() 删除数组最后一个元素，返回被删除的元素，arr.pop()

Push() 向数组尾部添加一个或多个元素，返回新的长度，arr.push(e1,e2..)

页面有一个按钮button id为 button1，通过原生的js如何禁用？(IE 考虑IE 8.0以上版本)

Readonly只针对input(text/password)和textarea有效，而disabled对于所有的表单元素有效，包括select,radio,checkbox,button等。 document.getElementById("button1").disabled = true; document.getElementById("button1").setAttribute(“disabled”,”true”);

javascirpt中的数字在计算机内存储为多少Byte？8

(1):首先，Node在当前目录下查找package.json(CommonJS包规范定义的包描述文件)，通过JSON.parse()解析出包描述对象，从中取出main属性指定的文件名进行定位。如果文件缺少扩展名，将会进入扩展名分析的步骤。

(2):而如果main属性制定的文件名错误，或者压根没有package.json文件，Node会将index当做默认文件名，然后依次查找index.js、index.node、index.json.

(3):如果在目录分析的过程中没有定位成功任何文件，则自定义模块进入下一个模块路径进行查找。如果模块路径数组都被遍历完毕，依然没有查找到目标文件，则会抛出查找失败异常

按照上面的思路，首先应该查找package.json文件，看看里面有没有核心模块，应该是C最先，othermodule不是核心模块，那么接着应该进入扩展名分析的步骤，就应该是查找othermodule. js，对应B，紧接着就是以index为默认文件名，也就是A，再接下来就是上一个文件目录D了，所以答案是： C B A D

noscript是用来定义脚本未被执行时的替代内容。可以用来检测浏览器是否支持脚本，若不支持则显示noscript里面的innerText内容。还有就是浏览器中脚本被禁用

let array=[,1,,2,,3] array=array.map((i)=>++i) console.log(array)//[,1,,2,,3]

ES5

orEach(), filter(), reduce(), every() 和some()都会跳过空位。

map()会跳过空位，但会保留这个值

join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。

ES6

都会将空位当做undefined

JavaScript全局函数：

setTimeout是window的一个方法，如果把window当做全局对象来看待的话，它就是全局函数。严格来讲，它不是。全局函数与内置对象的属性或方法不是一个概念。全局函数它不属于任何一个内置对象。JavaScript 中包含以下 7 个全局函数escape( )、eval( )、isFinite( )、isNaN( )、parseFloat( )、parseInt( )、unescape( )。

required 属性是一个布尔属性。是表单提交时的必填字段。

required 属性规定必需在提交表单之前填写输入字段。

注意：required 属性适用于下面的 input 类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file。

H5 用于组合标题的标签 <hgroup>

优化滚动性能：

1、在滚动中对滚动函数进行节流处理

2、滚动中减少导致重绘的操作

3、滚动中减少导致重排的操作

4、给滚动内的子元素开启硬件加速

如何创建BFC

1、float的值不是none。2、position的值不是static或者relative。3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex4、overflow的值不是visible

h5新增的标签： video表示一段视频并提供播放的用户界面 audio表示音频 canvas表示位图区域 source为video和audio提供数据源 track为video和audio指定字母 svg定义矢量图 code代码段 figure和文档有关的图例 figcaption图例的说明 maintime日期和时间值 mark高亮的引用文字 datalist提供给其他控件的预定义选项 keygen秘钥对生成器控件 output计算值 progress进度条 menu菜单 embed嵌入的外部资源 menuitem用户可点击的菜单项 menu菜单 header定义了文档的头部区域 section定义文档中的节（section、区段） nav定义导航链接的部分 aside定义页面独立的内容区域 article定义页面的侧边栏内容 footer定义 section 或 document 的页脚一、语义标签： <section>：定义页面的区域 <header>：页面标题 <footer>：页面页脚 <nav>：页面导航元素 <article>：页面的文章或主要内容 <aside>：页面的附加内容，比如边栏 <figure>：文章的配图 <figcaption>：<figure>元素的标题 <summary>：<details>元素的可视标题二、增强型表单三、视频和音频四、Canvas绘图五、SVG绘图六、地理定位:使用getCurrentPosition()方法来获取用户的位置。以实现“LBS服务” 七、拖放API 八、WebWorker 九、WebStorage 十、WebSocket

网页最上层的标题是title，文章最上层的标题是h1

vuejs的特性是：指令和过滤器

广义的HTML5包括HTML5本身，还包括JavaScript和CSS3

空元素没有内容的 HTML 内容被称为空元素。空元素是在开始标签中关闭的。就是没有关闭标签的空元素( 标签定义换行)

在 HTML 中，通常在一个空元素上使用一个闭标签是无效的。例如， <input type="text"></input> 的闭标签是无效的 HTML。

在 HTML 中有以下这些空元素： <area><base><br><col><colgroup> when the span is present <command><embed><hr><img><input><keygen><link> <meta><param><source><track><wbr>

关于web表单登录中用到的图形验证码的实现,以下做法不正确的有: Ａ　返回给浏览器的html代码中包含图形验证码和文本字符串,登录前客户端判断输入内容和页面中保存的内容是否一致Ｂ　服务器端在返回的图片和cookie中同时包含图形验证码,登录前客户端判断输入内容和cookie保存的内容是否一致Ｃ　服务器端生成验证码后一方面通过图片将验证码返回给客户端,同时在服务器端保存文本的验证码,由服务器端验证输入内容是否正确Ｄ　浏览器通过识别图形验证码中的内容和用户输入的内容判断是否一致答案：ＡＢＤ A B选项都把正确的验证码文本放在了客户端，这是违背了验证码的初衷的。爬虫或者是恶意程序依旧可以通过各种手段获取你嵌入在html文本或者保存在cookie中的正确验证码文本，模拟表单提交来达到攻击的目的。 D选项更是浏览器自动无法识别图形验证码的内容。 C选项才是正确的实现方式，发送到客户端的只有图片形式的验证码，服务器端保存cookie对应的图形验证码的正确文本。客户端表单提交时到服务器端验证。

readonly和disabled区别

设置readonly = true，可以聚焦，页面上无法修改内容，但是可以通过JavaScript修改,内容会被提交

设置disabled = true,不可以聚焦，页面上无法修改内容，但是可以通过JavaScript修改,内容不会被提交

link与@import

link属于HTML范畴。是XHTML标签，可以引用样式文件，可以引用图片等资源文件，不存在兼容问题。在HTML页面加载的同时加载。支持通过js控制dom去改变样式。

@import属于css范畴，只能导入样式表，存在兼容问题，ie5以上支持，是css2.1新增的。需要等页面完全载入才会开始加载。不支持通过js控制dom去改变样式。

HTML5没有删除<small>标签

iframe可用在以下几个场景中：

1：典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe。 2：ajax上传文件。 3：加载别的网站内容，例如google广告，网站流量分析。

4：在上传图片时，不用flash实现无刷新。

5：跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源。

行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：和相邻的内联元素在同一行;宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。

那么问题来了，浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？

答案：<input> 、<img> 、<button> 、<texterea> 、<label>。

Web Storage实际上由两部分组成：sessionStorage与localStorage。 sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。 localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

a标签没有设置href属性时是不能获取到焦点的

text-transform:capitalize是首字母大写

text-transfrom:lowercase是全部字母为小写

text-transfrom:uppercase是全部字母为大写

font-weight: bold;字体为粗体，

<input type="range">定义滑块输入类型

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

复制代码

width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。height：和 width 相对应，指定高度。initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。maximum-scale：允许用户缩放到的最大比例。minimum-scale：允许用户缩放到的最小比例。user-scalable：用户是否可以手动缩放。

创建带有id属性的DOM元素有什么副作用？答：会创建同名的全局变量

清除浮动

autoplay 属性规定一旦视频就绪马上开始播放。

preload 属性规定是否在页面加载后载入视频。如果设置了 autoplay 属性，则忽略该属性。

jquery获取$

.value() 用在表单元素上，用来设置获取 input 或 select 的值

.html() 设置或返回的是源代码

.text() 设置或返回的是纯文本内容

.attr() 设置或返回被选元素的属性值

html 中 A标签 target 属性的默认取值是 _self，默认在当前窗口打开。

JSON数据格式

list数据格式

protocal buffer是 Google出品的一种轻量 & 高效的结构化数据存储格式，性能比 Json、XML 强

CSS中的重绘和回流_weixin_39676449的博客-博客

Processed: 0.022, SQL: 8