HTML,Css,JavaScript,JQuery,Vue基础⾯试题（持续更新）1.表单中GET和POST两种提交⽅式的不同?
Get：速度快，安全性低通过浏览器地址栏传值，不⽀持中⽂
最多⽀持2000个字符，浏览器地址栏格式为key=value&keyN=valueN，只能传字符串
post：速度慢，安全性⾼，不通过浏览器地址栏传值，通过消息体传值，不⽀持中⽂，不限制⼤⼩,⽀持Json和字符串
2.表单元素
input="text" 单⾏⽂本输⼊框
input="password" 单⾏密码输⼊框
input="checkbox" 多选
input="radio"  单选
input="file"  上传⽂件
input="email"  邮箱
input="date"  ⽇期
input="number"  数字
input="tel"  电话
input="submit"  提交
input="reset"  重置表单
input="image"  使⽤图⽚作为提交按钮
select > option  下拉列表框
3.css中的优先级
1.引⼊css的三种⽅式的优先级
⾏内式 > 外链式和内嵌式谁放在后⾯听谁的如果出现冲突会覆盖冲突的部分
2.基本选择器的优先级
id选择器 > 类别选择器 > 标记选择器如果存在⾏内式，则⼀切以⾏内式为准
4.页⾯的元素类型
页⾯元素类型:
在css中将页⾯的元素分为很多种，主要有以下三种特点⽐较明显的元素
1：内联元素（inline）
1：内联元素（inline）
内联元素结尾不换⾏,⼀⾏可以书写多个从左到右依次排列,
元素的宽度⾼度与元素内部嵌套的内容有关设置盒⼦模型⽆效设置对齐⽅式⽆效
eg:  span label a img*
2：块元素（block）
2：块元素（block）
块元素,⾃动换⾏,⼀⾏只能书写⼀个，从上到下排序，设置盒⼦模型有效，对齐⽅式有效
如果不设置宽度则元素⾃动占满整个⽗元素
eg: div p ul li h1~h6 pre img*
3：空元素（empty）
3：空元素（empty）
⼀般不嵌套内容，直接⽤来设置页⾯的⼀些结构或者参数
多为整合标签
br hr meta
img
img:(内联块元素 inline-block)是⼀个具备块元素特征的内联元素
display
display：设置元素类型
display:block 设置元素为块元素（互相转换⼀下）
display:inline 设置元素为内联元素
display:none 隐藏元素
5.盒⼦模型
什么是盒⼦模型:
在css中将⼀个个元素看做⼀个盒⼦摆放在页⾯上，由于⼤多数都是块元素,
从上到下排列，这种排序⽅式成为标准⽂本流或者⽂档流，这些盒⼦可以通过设置⼀些参数,
来改变他们周边的空间位置，那么这些参数组成了盒⼦模型
内填充（padding），外边距（margin），边框（border）都有4个⽅向。⽐如内填充就有：padding-top, padding-right, padding-bottom, padding-left。
简略写法:
margin: 上右下左;  四个值的时候
margin: 上 (右左) 下;  三个值的时候
margin: (上下) (右左);  两个值的时候
margin: (上右下左);  ⼀个值的时候
6.浮动
在不设置宽度的前提下，块元素会占满⽗元素的整个空间，当设置浮动之后,
元素开始向浮动⽅向不断缩⼩，直到缩⼩到内部的内容⼤⼩为⽌，之后漂浮在页⾯上，该元素之前的空间被其他元素占据
float:left  左浮动
float:right  右浮动
float:both  两侧浮动
如果不想让元素受到其它元素浮动的影响，则添加clear属性
clear:left；去除左浮动影响
clear:right；去除右浮动影响
clear:both；去除两侧浮动影响
7.定位
1：相对定位
根据元素的原先位置的左上⾓来定位，定位之后元素保持原先的类型,
元素原先的位置依然被占据，元素漂浮在页⾯上
top和bottom只能书写⼀个作为偏移量
left和right只能书写⼀个作为偏移量
2：绝对定位
根据距离元素最近的定位过的祖先元素的左上⾓进⾏定位，定位之后，元素
不再保持原先的类型，原来的位置也被占⽤，元素漂浮在页⾯上，可能会遮挡
页⾯上的元素
注意如果没有定位过的祖先元素，则根据body来进⾏定位，也就是浏览器的
左上⾓来进⾏定位，这样可能会出现严重的页⾯问题
8.JavaScript的数据类型
基本数据类型(7种)
String  number  boolean  null  undefined
Symbol(ES6新特性) 表⽰⼀个独⼀⽆⼆的对象
BigInt(ES10新特性) 是对number的补充,⽤来表述2^53-1以外的数据精度
复合数据类型
Object
由对象引出
Array Function Math Date等内置对象
9.JavaScript能否直接修改页⾯的样式和结构，如果不能，请说明理由?
JavaScript不能直接修改页⾯的样式和结构,⽽是通过DOM模型来修改页⾯的结构和样式，浏览器⼀般存在⼀个引擎，这个引擎存在两个解析器,⼀个叫脚本解析器,⼀个叫标签解析器，浏览器从上到下解析，当解析完全⽂之后，会创建⼀个DOM模型，这个DOM模型全部封装在Document对象当中,Js并不是对页⾯上的元素进⾏增删改查,⽽是对DOM模型进⾏增删改查，修改完之后，模型和浏览器页⾯不⼀致时，浏览器会重新渲染页⾯使之保持⼀致
10.JavaScript中的⼏种选择器
Javascript最基本的⼏个选择器
1：根据唯⼀的id在全⽂拿取元素
返回元素节点
ElementById('id')
2：根据标签名拿取多个元素节点
这些节点组成⼀个类数组，这个类数组中
封装了所有获取的元素节点
ElementsByTagName('tagName')
类数组其实就是DOM当中的数组，但是与ES规范也就是
Js中的Array并不是⼀码事，所以类数组⽆法使⽤
部分Array的⽅法
const newArray = Array.from(NodeList)
3：根据name属性值拿取多个元素节点，返回类数组
ElementsByName('name')
4：根据class属性拿取多个元素节点，返回类数组（民间）
ElementsByClassName('class')
尽量少⽤，严重兼容性问题
11.DOM
根据特点使⽤场合的不同，DOM将页⾯节点分为12种，
我们常见的节点由以下⼏种
以下节点根据 nodeType nodeName nodeValue⼏个属性⽤以区分
1:⽂档节点
就是指的document，⼀个页⾯只有⼀个⽂档节点
也就是根元素
nodeType 9
nodeName #document
nodeValue 不可⽤
2：元素节点
就是指页⾯上的各种元素，通过
nodeType 1
nodeName 标签名
nodeValue 不可⽤
3：属性节点
就是指元素节点中的各种属性
XXX="XXX"
我们之前写的 name="" id="" class=""
type=""
nodeType 2
nodeName 属性名
nodeValue 属性值
4:⽂本节点
就是指页⾯中的各种字符串
nodeType 3
nodeName 永远是#text
nodeValue 就是⽂本内容
5：注释节点
就是指页⾯中的注释
nodeType 8
nodeName 就是注释信息
nodeValue 不可⽤
12.BOMjquery在线图片
window:BOM七对象之⼀，表⽰整个窗⼝，BOM(Browser
Object Model浏览器对象模型)，将浏览器的不同的功能
分别分为七个对象
window：表⽰整个窗⼝，也是BOM七个对象的
顶层对象，它包含着另外6个对象，属于全局变量
document：表⽰页⾯的正⽂部分，操作页⾯的元素
也是⽤此对象
location：表⽰浏览器的地址栏信息，⽤来负责页⾯的
条件以及地址的搜索等
navigator：浏览器信息，通过此对象可以查看当前页⾯
使⽤的是何种浏览器进⾏解析
history：浏览器历史记录以及缓存信息
screen:⽤户显⽰器信息
frame：页⾯的已经框架，⽬前已经被淘汰
13.Js的引⼊⽅式
1.⾏内引⼊在标签内结合事件来使⽤
2.内部引⼊在head或者body标签内定义script标签，然后在script标签内书写js代码
3.外部引⼊引⼊⼀个独⽴的js⽂件
14.JS创建数组的⽅式和迭代⽅式
有两种创建数组的⽅式
1.let arr = [1,2,3,4,5]
2.let arr = new Array[元素个数]
arr[0] = **
arr[1] = **
....
迭代⽅式
1.普通迭代
for(let i = 0;i<arr.length;i++){
console.log(`${arr[i]}`)
}
2.ES5 for in 循环
for(let key in arr){
console.log(`${arr[key]}`)
}
3.ES6 for of 循环
for(let value of ar){
value就是要被遍历的值
}
4.循环体.forEach
循环体.forEach(a =>{
console.log(`${a}`)
})
15.JS中创建对象的⽅式
1：使⽤对象字⾯量来创建对象
let|const 对象名 = {
属性名：属性值;
属性名：属性值;
属性名：属性值;
⽅法名(){
}
}
注意: 属性值不能加引号属性名看数据类型来定(String,Number,boolean,null,undefined,Symbol,BigInt) 2：使⽤构造⽅法来创建对象
使⽤构造⽅法可以复⽤⼀个对象
this：书写在某个对象中，则表⽰本对象
书写在对象或者函数外表⽰全局变量window
16.ES6新特性
1.当属姓名和属性值⼀致省略写法  name:name => name;
2.将类数组转化为数组  Array.form(类数组)
3.⽅法名:function(){}  写为⽅法名(){}
4.基本数据类型 Symbol
5. 箭头函数
在js中为了简化书写，如果在书写匿名函数时
可以使⽤箭头函数，如果匿名函数中，存在⼀个以上
或者没有参数，则⼩括号保留，如果只有⼀个参数，则
⼩阔号省略，function去掉，则参数之后添加=>
如果函数体直接是return，则省略return 省略
⼤括号
6.  不再推荐使⽤var
使⽤let赋值变量
使⽤const赋值常量
7. 在前端中⼀般不使⽤后端的拼接字符串书写⽅式
这种书写⽅式太过繁琐了，如果遇到⼤量需要拼接的
地⽅⾮常容易出错
在ES6新规范中提出了模板字符串的概念
格式:
`${要输出的值}`
17. = ,==, ===的区别
=：赋值
==:⽐对，如果不是同⼀种数据类型，则转换为同⼀种
数据类型，进⾏⽐对
===：如果两者不是同⼀种数据类型，则⽴刻返回false
如果是同⼀种数据类型则进⾏⽐对
18.jQuery基本选择器
1.$('tagName') : 根据标签名拿取元素
2.$('.class') : 根据类名拿取元素
3.$('#id') : 根据id拿取元素
4.$('tagName.class')/$('tagName#id') 拿取包含class或者id的特定元素
5.$('sel1,sel2,sel3') : 只要符合其中任意⼀个就可以成功选取
6.$('sel1 sel2 selN) : 拿取具有特定层级关系的元素
7.$('*') : 拿取全部元素
8.$('sel1 > sel2') : 拿取元素的特定⼦元素，仅仅拿取⼦元素
9.$('sel1 + sel2') : 需要满⾜三个条件向下选取，互为兄弟，必须紧邻
10.$('sel1 ~ sel2') : 需要满⾜两个条件向下选取，互为兄弟
19.jQuery基本筛选器

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。