网站建设之前端练习题

才大难为用

已于 2024-04-07 22:34:15 修改

阅读量1.1k

点赞数

分类专栏：前端基础与网站建设杂项文章标签：前端 javascript css3

于 2021-02-26 20:56:13 首次发布

本文链接：https://blog.csdn.net/HeroIsUseless/article/details/114152458

版权

前端基础与网站建设同时被 3 个专栏收录

80 篇文章 2 订阅

订阅专栏

杂项

33 篇文章 0 订阅

订阅专栏

复习

4 篇文章 0 订阅

订阅专栏

计算机网络

http发送报头与相应报头

html/css/js

get，post区别
最大的区别就是用法不同，get是获取数据，post是发送数据
最大的不同是get传参方式是通过地址栏URL传递，是可以直接看到get传递的参数，post传参方式参数URL不可见，get把请求的数据在URL后通过？连接，通过&进行参数分割。post将参数存放在HTTP的包体内
2.get传递数据是通过URL进行传递，对传递的数据长度是受到URL大小的限制，URL最大长度是2048个字符。post没有长度限制
6.get请求的记录会留在历史记录中，post请求不会留在历史记录
5.get请求只URL编码，post支持多种编码方式
3.get后退不会有影响，post后退会重新进行提交
4.get请求可以被缓存，post不可以被缓存
7.get只支持ASCII字符，post没有字符类型限制
状态码说几个
1xx(临时响应)2xx(成功)3xx(重定向)4xx(请求错误)5xx(服务器错误)
100: 请求者应当继续提出请求。
101(切换协议) 请求者已要求服务器切换协议，服务器已确认并准备进行切换。
2xx(成功)
200：正确的请求返回正确的结果
201：表示资源被正确的创建。比如说，我们 POST 用户名、密码正确创建了一个用户就可以返回 201。
202：请求是正确的，但是结果正在处理中，这时候客户端可以通过轮询等机制继续请求。
3xx(重定向)
300：请求成功，但结果有多种选择。
301：请求成功，但是资源被永久转移。
303：使用 GET 来访问新的地址来获取资源。
304：请求的资源并没有被修改过
4xx(请求错误)
400：请求出现错误，比如请求头不对等。
401：没有提供认证信息。请求的时候没有带上 Token 等
402：为以后需要所保留的状态码。
403：请求的资源不允许访问。就是说没有权限。
404：请求的内容不存在。
5xx(服务器错误)
500：服务器错误。
501：请求还没有被实现。
Cookie、sessionStorage、localStorage，IndexedDB
HTML5 提供两种新对象，通过 javascript API 来存储本地数据，Web Storage实际上由两部分组成：sessionStorage与localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

什么是会话cookie,什么是持久cookie?
1》会话cookie:是一种临时的cookie，它记录了用户访问站点时的设置和偏好，关闭浏览器，会话cookie就被删除了
2》持久化cookie：存储在硬盘上，不同的操作系统，不同的浏览器存储的位置不一样，不管浏览器退出，或电脑重启，持久cookie都存在。持久cookie有过期时间。

HTML5新特点语义化，本地存储，多媒体，图形，3D的支持，离线应用
es5/6/7/8/9 扩展运算符,let const Symbol 箭头函数（Arrow Functions）有特别有用的解构 Promises 函数参数默认值类，实际上是语法糖
css3新特点，增添了border和background的属性，对图形操作的属性，动画，flex布局，还有新增了一些伪类
在地址栏里输入一个URL,到这个页面呈现出来，中间会发生什么？即树的解析，DOM，CSSOM，渲染树，在dom树的构建过程中如果遇到JS脚本和外部JS连接，则会停止构建DOM树来执行和下载相应的代码
CSS盒模型？
link标签和import标签的区别
水平居中的方法，垂直居中的方法，flex，绝对定位+transform，margin auto，display inline block，text-align center
了解重绘和重排吗？
使元素消失的方法有哪些？
说一下闭包
说一下类的创建和继承（A.prototype = Object.create(B.prototype);），原型链
异步，promise(then的链式写法)，async
前端的事件流，事件委托
clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？
apply，call，bind
typeof，instantof，基本数据类型
let，var，const，死区
操作DOM的必要基本函数 parentNode，contains()
Array push() length 注意不是函数 pop()
arr.splice(2,0,“Lemon”,“Kiwi”); index, 要删除的多少个，后面的是要添加进去的，真奇怪
arr.slice(0) 浅拷贝数组 splice(0)清空原数组slice(start,end)：从已有的数组中返回选定的元素。括号内有两个参数，第一个参数为start，第二个参数为end。对原数组对象不产生任何影响。
arr1.concat(arr2)
bool indexOf(var) 不存在返回-1
常用标签及其属性
常用css
清除浮动的方法
两个动画的详细信息，要会写出来
this，在JavaScript中，this通常指向的是我们正在执行的函数本身，或者是指向该函数所属的对象（运行时）
手写bind，返回一个函数，里面用self.apply()，也就是说，apply返回的是这个构造函数返回的obj，构造函数返回obj，或者说，该返回什么，就返回什么
手写new，分三步，创建一个{}，赋予__proto__，用constorucor的apply，返回
手写闭包，「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是一个闭包。那么这个代码区域执行完之前，外层的那个变量肯定不能被释放，其实很好写
prototype JS中所有的东西都由Object衍生而来, 即所有东西原型链的终点指向Object.prototype
prototype实际上就是为了减少代码的
js垃圾回收，内存泄漏大致了解，一般来说没有被引用的对象就是垃圾，就是要被清除，有个例外如果几个对象引用形成一个环，互相引用，但根访问不到它们，这几个对象也是垃圾，也要被清除。一种算法是标记标记-清除算法
websock大致了解，为什么是长连接的
强制缓存和协商缓存有什么区别？
事件循环机制Eventloop大致了解
（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步。
有个特别的元素，一个是p一个是a，p是块元素，但是其不能包含除了它本身之外的任何块元素，a是内联元素，但是它可以包含除了它本身外的任意块元素
冒泡事件很多，个人觉得记住常见的不支持冒泡事件就可以了
有：①focus
②blur
③mouseenter
④mouseleave
⑤load
⑥unload
⑦resize
行内元素你注意，label，select，textarea(多行文本框)
alt是html标签的属性，而title既是html标签，又是html标签属性。
title标签这个不用多说，网页的标题就是写在这对标签之内的。
title作为属性时，用来为元素提供额外说明信息。例如，给超链接标签a添加了title属性，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果。
而alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。
H5使用 getCurrentPosition() 方法来获得用户的位置但是由于隐私设置你是没法在浏览器里直接测试的

Date() 返回当日的日期和时间。 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 getYear() 从 Date 对象以四位数字返回年份。 getTime() 返回 1970 年 1 月 1 日至今的毫秒数。

inputElement.style.backgroundColor = ‘red’; // 这是没问题的
inputElement.style.background-color = ‘red’; // 这是错的，浏览器看不懂啊…
inputElement.style[“background-color”] = ‘red’; // 这也是可以的

export和export default的区别？
使用上的不同

export default xxx
import xxx from ‘./’

export xxx
import {xxx} from ‘./’

es6新特性
let const Symbo

在html中通过\<a>标签打开一个链接，通过 \<a> 标签的 target 属性规定在何处打开链接文档。如果在标签\<a>中写入target属性，则浏览器会根据target的属性值去打开与其命名或名称相符的 框架\<frame>或者窗口.
在target中还存在四个保留的属性值如下，
_blank	在新窗口中打开被链接文档。
_self	默认。在相同的框架中打开被链接文档。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。
framename	在指定的框架中打开被链接文档。

2.window.opener 的用法
window.opener 返回的是创建当前窗口的那个窗口的引用，比如点击了a.htm上的一个链接而打开了b.htm，
然后我们打算在b.htm上输入一个值然后赋予a.htm上的一个id为“name”的textbox中，就可以写为：
window.opener.document.getElementById(“name”).value = “输入的数据”;

# CSS
可以继承的属性很少，只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承。这么来记很轻松的呀！不要被下边的吓到了哦~
所有元素可继承：visibility和cursor。
内联元素可继承：字体相关
终端块状元素可继承：text-indent和text-align。
列表元素可继承：list开头的

外联：使用link标签引入外部的css文件。 内联：在head标签中使用style标签。 嵌入：在标签中使用style属性。

表示红色有若干种方法:
颜色名：red
百分数：rgb(100%, 0%, 0%)
数值：rgb(255, 0, 0)
十六进制：#FF0000
简写的十六进制：#F00

positon:
1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。　　
3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
4、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

@supports (display: flex) { div { display: flex; }}
@supports not (display: flex) { div { float: right; }}
注释：如果浏览器支持display:flex属性的话，那么div的样式就是display:flex，如果浏览器不支持display:flex属性的话，那么div的样式就是display:right
@supports (display: flex) and ( box-shadow: 2px 2px 2px black ) {
     /*自己的样式*/
}
注释：如果浏览器支持display:flex和box-shadow的属性，就执行里面自己的样式
“or”和“and”混用，在@supports中“or”和“and”混用时，必须使用括号（）来区分其优先级
@supports ((transition-property: color) or (animation-name: foo)) and (transform: rotate(10deg)) {
     /*自己的样式 */
}

在css中我们使用media标签来区分调用哪个css样式，比如使用media="print"来表示当执行打印文档时，使用print.css样式。这样使得文档更有得于打印，如将页面宽度增宽、或屏蔽掉一些不需要打印的内容。默认为media="all"。也就是说，替补呗。所有浏览器都支持media标签，但and or not写法除IE6\7\8 以为的浏览器都支持
\<link href="styles/print.css" rel="stylesheet" type="text/css" media="print" /> 
CSS代码

```css
    @media all  { 
        body{ font:12px; width:100%;} 
         }  
    @media print  {  
        body{ font:14px; width:595px;}   /* 用于打印时将宽度设置为595px(A4) */  
    }

css水平、垂直居中的写法，请至少写出4种？
水平居中
行内元素: text-align: center
块级元素: margin: 0 auto
margin:0 auto=margin:0 auto 0 auto，表示上下为0，左右为auto；
首先如果想要设置居中,width是必须设置的,如果不设置width元素,那么块级元素一定会占据100%的宽度，auto是指平分剩余空间,比如宽度为200,父元素的宽度为1000,那么auto就是指水平方向平分剩余的宽度(1000-200)/2，auto实际上是说，自动平均分配。margin-left: auto;就表示仅左边分配所有的剩余空间，也就是跑到右边去了，实现了float:left;的效果。垂直方向不可以margin: auto 0，
margin:auto=margin:auto auto auto auto，即上下左右都auto
margin:0 auto=margin:0 auto 0 auto，表示上下为0，左右为auto；
position:absolute +left:50%+ transform:translateX(-50%)
绝对定位元素相对的元素是它最近的一个祖先，该祖先满足：position的值必须是：relative、absolute、fixed，若没有这样的祖先则相对于body进行定位。偏移值由其top、bottom、left、right值确定。
translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。
display:flex + justify-content: center
首先flex是水平布局，另外jc这个能够区分开，嗯。

垂直居中
设置line-height 等于height
在这里插入图片描述
line-height是一个长度，而不同于top，当font-size等于line-height时，行距 = line-height - font-size = 0；而当font-size大于line-height时，则会出现行距为负值，则两行重叠，也就是说，line-height是有必要空白的height(因为包括行距)。
在没有设置div的height属性时，div的高度根据line-height的大小而变化，且文字垂直居中。height = line-height时字体就会居中对齐。height>line-height时，字体上浮，可以理解为没有填充完，还有空位，height<line-height时字体下沉。
position：absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: center
display:table+display:table-cell + vertical-align: middle;
目前，在大多数开发环境中，已经基本不用table元素来做网页布局了，取而代之的是div+css，用DIV+CSS编写出来的文件k数比用table元素写出来的要小，table必须在页面完全加载后才显示，没有加载完毕前，table为一片空白，也就是说，需要页面完毕才显示，而div是逐行显示，不需要页面完全加载完毕，就可以一边加载一边显示
vertical-align是用来设置行内元素对齐方式的。说白了就是display属性值为inline、inline-block、inline-table另加一个table-cell的元素。行内元素，内联元素就是不会换行的，多与文字有关。
基线的位置并不是固定的：
在文本之类内联元素中，基线是字符x的下边缘位置
在像img元素中基线就是下边缘。
在inline-block元素中，也分两种情况
如果该元素中有内联元素，基线就是最后一行内联元素的基线。
如果该元素内没有内联元素或者overflow不是visible，其基线就是margin的地边缘。

vertical-align:baseline：默认值，就是基线对齐，所有内联元素都是居中对齐。
因此往往加上vertical-align:top，vertical-align的确是垂直对齐
display:block就是将元素显示为块级元素，block元素的特点是：
　　总是在新行上开始；
　　高度，行高以及顶和底边距都可控制；
　　宽度不设是它的容器的100%，除非设定一个宽度
　　<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。
display:inline就是将元素显示为行内元素，inline元素的特点是：
　　和其他元素都在一行上；
　　高，行高及顶和底边距不可改变；
　　宽度就是它的文字或图片的宽度，不可改变。
　　<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。
display:inline-block的元素特点：
　　将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度的块元素的属性)但支持的浏览器挺少的。
display的其他几个：常用的inline就是文字和图片，针对inline的标签，你设置宽度和高度是无效的，该元素实际的宽度和高度都是auto　
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
table 此元素会作为块级表格来显示（类似

），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似

），表格前后没有换行符。
table-row 此元素会作为一个表格行显示（类似）。
默认值： inline
继承： no

overflow 属性
默认值： visible
继承： no
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

1rem、1em、1vh、1px各自代表的含义？
rem
rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
em
子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size
vw/vh
全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的话 vh 单位更好。
px
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
一般电脑的分辨率有{1920*1024}等不同的分辨率
1920*1024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素

transform: scale(0.5); 很明显是给一个div放缩用的。rotate(7deg);是旋转。

盒模型是css中重要的基础知识，也是必考的基础知识
盒模型的组成，由里向外content,padding,border,margin.
在IE盒子模型中，width表示content+padding+border这三个部分的宽度
在标准的盒子模型中，width指content部分的宽度
box-sizing:border-box;表示将padding，border放入width中。

BFC(Block Formatting Context)，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。BFC是Web页面中盒模型布局的一种CSS渲染模式。它的定位体系属于常规文档流。
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。或者说，离经叛道的元素。
完全不影响的话，你能够想象到该怎么的css。

label标签主要是方便鼠标点击使用，扩大可点击的范围，增强用户操作体验。label标签常用于与checkbox或radio关联，以实现点击文字也能选中/取消checkbox或radio。如下图，点击文字和点击前面的单选框效果相同，即加大了控件的可点击区域较大，因为点击标签或控件都将激活控件，这对于复选框和单选框特别有用。label标签的关联方式主要有两种，显示关联和隐式关联：
显式关联是通过label标签的for属性，显式与另一个表单控件关联。需要注意的是，for属性的值必须是与label标签在同一文档中的可标记表单元素的id，注意是id而不是name。

<input type='checkbox' name='basket' id='basketball'>   
<label for="basketball">篮球</label>

隐式关联是直接将表单控件放到label标签内，这种情况下，label标签只能包含一个表单元素，包含多个只对第一个有效。如下：

<label>点击我可以使文本框获得焦点
    <input type='text' name='theinput' id='theinput'>
</label>

遍历A节点的父节点下的所有子节点
这题考查原生的js操作dom,属于非常简单的基础题，但长时间使用mvvm框架，可能会忘记

<script>
    var b=document.getElementById("a").parentNode.children;
    console.log(b)
</script>

浏览器渲染页面的一般过程：
1.浏览器解析html源码，然后创建一个 DOM树。并行请求 css/image/js在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement，对应的是html标签。
2.浏览器解析CSS代码，计算出最终的样式数据。构建CSSOM树。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < html中的style。
3.DOM Tree + CSSOM --> 渲染树（rendering tree）。渲染树和DOM树有点像，但是是有区别的。
DOM树完全和html标签一一对应，但是渲染树会忽略掉不需要渲染的元素，比如head、display:none的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有对应的css属性。
4.一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上。
以上四个步骤并不是一次性顺序完成的。如果DOM或者CSSOM被修改，以上过程会被重复执行。实际上，CSS和JavaScript往往会多次修改DOM或者CSSOM。

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

AJAX即“Asynchronous Javascript And XML”，是指一种创建交互式网页应用的网页开发技术。AJAX 是一种用于创建快速动态网页的技术。它可以令开发者只向服务器获取数据（而不是图片，HTML文档等资源），互联网资源的传输变得前所未有的轻量级和纯粹，这激发了广大开发者的创造力，使各式各样功能强大的网络站点，和互联网应用如雨后春笋一般冒出，不断带给人惊喜。Ajax核心对象XMLHttpRequest.

react

vue

vue的生命周期，总共分为三个阶段：初始化、运行中、销毁。挂载数据，绑定事件等等，然后执行created函数，编译模板为虚拟dom进行渲染，渲染出真实dom，然后执行mounted钩子函数，当组件或实例的数据更改之后，会立即执行beforeUpdate，利用diff算法进行对比之后重新渲染，
自己实现一个vue