一、如何理解HTML语义化?
<!--非语义化写法-->
<div>标题</div>
<div>
<div>一段文字</div>
<div>
<div>列表1</div>
<div>列表2</div>
<div>
</div>
<!--语义化写法-->
<h1>标题</h1>
<div>
<p>一段文字</p>
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
</div>
让人更容易读懂、让搜索引擎更容易读懂(避免找不到重点)
二、默认情况下,那些HTML元素是块标签
块状元素(独占一行):display:block/table 有div h1 h2 table ul ol p 等
内联元素:display:inline/inline-block;有spam img input button等
三、CSS问题
1)布局
盒模型的宽度如何计算
offsetWidth = (内容宽度+内边距+加边框),无外边距
margin纵向重叠问题
相邻元素的margin-top和margin-bottom会发生重叠
空白内容的p标签也会重叠
magrin负值的问题
margin-top和margin-left负值,元素向上、向左移动
margin-right负值,右侧元素左移,自身不受影响
margin-bottom负值,下方元素上移,自身不受影响
BFC的理解和应用
形成BFC的常见条件:
1、float不是none
2、position是absolute或fixed
3、overflow不是visible
4、display是flex或者inline-block
可以用来清除浮动
float布局的问题,以及clearfix
如何实现圣杯布局和双飞翼布局:
三栏布局,中间一栏最先加载渲染(内容最终要)
两侧内容固定,中间内容自适应(一般用于pc网页)
技术总结:1.使用float布局 2.两侧使用margin负值,以便和中间内容横向重叠 3.防止中间内容被两侧覆盖,一个用margin(双飞翼)一个用padding(圣杯)
手写clearfix
flex画色子
常用的语法:flex-direction flex-wrap justify-content align-self align-items
/* flex画三个点的色子 */
.box{
display:flex;/*flex布局*/
justify-content:space-between;/*两端对齐*/
}
.item{
/*背景色,大小,边框*/
}
.item:nth-child(2){
align-self:center; /*第二项居中对齐*/
}
.item:nth-child(3){
align-self:flex-end/*第三项尾对齐*/
}
2) 定位
absolute和relative分别依据什么定位
relative依据自身定位
absolute依据最近一层的定位元素定位
定位元素:relative、absolute、fixed
居中对齐有哪些实现方式
水平居中
inline元素:text-align:center
block元素:margin:auto
absolute元素:left:50%+margin-left负值
垂直居中
inline元素:line-height的值等于height值
absolute元素:top:50%+margin-top负值
absolute元素:transform(-50%,-50%)
absolute元素: top,left,bottom,right = 0+margin:auto
3) 图文样式
line-height的继承问题
写具体数值,如30px,则直接继承这个值
写比例,如2/15,则继承比例
写百分比,如200%,继承计算出来的值(考点)
4) 响应式
rem是什么
px绝对长度单位最常用
em相对长度单位,相对于父元素不常用
rem相对长度单位,相对于根元素,常用于响应式布局
如何实现响应式
media-query,根据不同的屏幕宽度设置根元素font-size
rem,基于根元素的相对单位
rem的不足:具有阶梯性
vw,wh
window.screen.height //屏幕高度
window.innerHeight //网页视口高度
document.body.clientHeight //body高度
5) CSS3
关于CSS3动画
四、变量类型和计算
1)typeof能判断哪些类型
识别所有值类型
识别函数
判断是否是引用类型(不可在细分)
2)何时使用 === 何时使用 ==
truly变量 : !!a === true的变量
falsely变量: !!a ===false的变量
// falsely变量
!!0 === false
!!NaN === false
!!'' === false
!!null === fasle
!!undefined === false
!!false === false
//除了 == null 之外,其他都一律用 === ,
// ==
100 == '100' //true
0 == '' //true
0 == false //true
false == '' //true
null == undefined //true
//除了 == null 之外,其他都一律用 ===
const obj = {x:100}
if(obj.a = null){}
//相当于:
//if(obj.a === null || obj.a === undefined){}
3) 值类型和引用类型的区别
//应用类型
let a = { age:20 }
let b = a
b.age = 21
console.log(a.age) //21
//常见的引用类型
const obj = {x:100}
const arr = ['a','b','c']
//特殊引用类型,但不用于存储数据,所以没有‘拷贝,复制’这一说
function fn(){}
//值类型(不会相互干扰)
let a = 100
let b = a
a = 200
console.log(b) //100
//常见的值类型
let a //undegined
const s = 'abc' //string
const n = 100 //number
const b = true //Boolean
const s = Symbol('s')
4)手写深拷贝
const obj = {
age : 10,
name: 'xxx',
address:{
city:'beijing'
},
arr:['a','b','c']
}
const obj2 = obj1
boj2.address.city = 'shanghai'
console.log(obj1.address.city)
function deepClone(obj = {}){
if(typeof obj !== 'object' || obj = null){
//obj 是null,或者不是对象和数组,直接返回
return obj
}
let result
if(obj instanceof Array){
result = []
}else{
for(let key in obj){
//保证key不是原型的属性
if(obj.hasOwnProperty(key)){
//递归调用
result[key] = deepClone(obj[key])
}
}
}
//返回结果
return result
}
五、原型和原型链
每个class都有显示原型prototype
每个实例都有隐式原型_proto_
实例的_proto_指向对应class的prototype
1)如何准确判断一个变量是不是数组
类型判断instanceof
qlv instanceof Student //true
qlv instanceof People //true
qlv instanceof Object //true
[] instanceof Array //true
[] instanceof Object //true
{} instanceof Object //true
2) 手写一个简易的JQuery,考虑插件的可扩展性
3)class的原型本质,怎么理解?
class和继承
class Student {
constructor(name,number){
this.name = name
this.number = number
}
sayHi(){
console.log(`姓名${this.name},学号${this.number})`
}
}
//通过类new对象/实例
const xialuo = new Student('夏洛',100)
console.log(xialuo.name)
console.log(xialuo.number)
继承
//父类
class People{
constructor(name){
this.name = name
}
eat(){
console.log(`${this.name}` eat something)
}
}
//子类
class Student extends People{
constructor(name,number){
super(name)
this.number = number
}
sayHi(){
console.log(`姓名${this.name},学号${this.number})`
}
}
六、作用域和闭包
1.作用域和自由变量 2.闭包 3.this
自由变量:1.一个变量在当前作用域没有定义,但被使用了 2.向上级作用域,一层一层依次寻找,直至找到为止 3.如果全局作用域没有找到。则报 xx is not defined 所有的自由变量的查找,是在函数定义的地方,向上级作用域查找,不是在执行的地方
闭包
作用域应用的特殊情况,有两种表现:
1)函数作为参数被传递
2)函数作为返回值被返回
//函数作为返回值
function create(){
let a = 100
return function (){
console.log(a)
}
}
let fn = create()
let a = 200
fn()
//函数作为参数
function print (fn){
let a = 200
fn()
}
let a = 100
function fn () {
console.log(a)
}
print(fn)
1)this的不同应用场景,如何取值?
当做普通函数返回的时候指向的是window
通过call apply bind 传入什么调用什么
作为对象方法指向本身
在class的方法中调用 当前实例本身
箭头函数里面的this取值取得是当前对象的值(上级作用域)
2)手写bind函数
function.[rototype.bind1 = function(){
//将参数解析为数组
const args = Array.prototype.slice.call(arguments)
//获取this(取出数组第一项,数组剩余的就是传递的参数)
const t = args.shift()
const self = ths //当前函数
//返回一个函数
return function () {
//执行原函数,并返回结果
returnself.apply(t,args)
}
}
3)实际开发中闭包的应用场景,举例说明
1)闭包隐藏数据,只提供API
function createCache(){
const data = {} //闭包中的数据,被隐藏,不被外界访问
return{
set : funciton(key,val){
data[key]
},
get:function(key){
return data[key]
}
}
}
七、异步和单线程
1.js是单线程语言,只能同时做一件事 2.浏览器nodejs已支持j启动进程如web worker 3.JS和DOM渲染共用同一个线程因为JS可以修改DOM结构
1)同步和异步的区别?
基于js是单线程语言
异步不会阻塞代码执行
同步会阻塞代码执行
2)手写promise加载一张图片
const url = ''
function loadImg(src){
return new Promise(
(resolve,reject)=>{
const img = document.createElement('img')
img.onLoad = () =>{
resolve(img)
}
img.onerror = () =>{
reject(new Error('图片加载失败 ${src}'))
}
img.src = src
}
)
}
3)前端使用异步的场景有哪些
网络请求,如ajax图片加载
定时任务,如setTimeout
callBack hell(回调地狱)
//获取第一份数据
$.get(url1,(data1)=>{
console.log(data1)
//获取第二份数据
$.get(url2,(data2)=>{
console.log(data2)
//获取第三份数据
$.get(urls,(data3)=>{
console.log(datas)
//还可以获取更多数据
})
})
})
八、JS异步-进阶
event loop
JS是单线程运行的
异步要基于回调来实现
event loop就是异步回调函数的实现原理
就是如何执行
1) 从前到后,一行一行执行
2)如果某一行执行爆粗,则下面的代码停止执行
3)先把同步代码执行完,在执行异步
console.log('hi')
setTimeout(function cb1() {
console.log('cb1')
},5000)
console.log('bye')