前端⾯试题（HTMLCSSJS）
前端⾯试题（HTML/CSS/JS/ES6/HTTP/⽹络协议）
HTML相关⾯试题：
1、HTML5的新特性（常问）：
(1) 绘画canvas
(2) ⽤于媒介回放的video和audio元素
(3) 本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失
(4) sessionStorage的数据在浏览器关闭后⾃动删除
(5) 语义化更好的内容元素，⽐如article,footer,header,nav,section
(6) 表单控件，calendar,date,time,email,url等
(7) 新的技术webworker,websockt,Geolocation
(8) 移出的元素
a.纯表现的元素：basefont,big,center,font等
b.产⽣负⾯影响的元素：frame frameset等
(9) ie8 7 6 ⽀持通过ateElemet ⽅法产⽣新的标签，可以利⽤这 ⼀特性让这些浏览器⽀持html5新标签
2、语义化的理解
*HTML语义化就是让页⾯的内容结构化，便于对浏览器、搜索引擎解析；
*在没有样式CSS情况下也以⼀种⽂档格式显⽰，并且是容易阅读的；
*搜索引擎的爬⾍依赖于标记来确定上下⽂和各个关键字的权重，利于SEO。
*使阅读源代码的⼈对⽹站更容易将⽹站分块，便于阅读维护理解。
3、块级标签和⾏内标签的区别：
⾏内标签（内联标签）不占有独⽴的区域，仅仅靠⾃⾝的字体⼤⼩和图像尺⼨来⽀撑结构，⼀般不可以设置宽度，⾼度，对齐等属性，常⽤于控制页⾯中⽂本的样式
常见的⾏内标签a,strong,b,em,i,del,s,ins,u,span其中span标签是最典型的⾏内标签。
特点：
和相邻⾏内标签在⼀⾏上
⾼、宽⽆效，但⽔平⽅向的padding，margin可以设置，垂直⽅向的⽆效
⾏内标签只能容纳⽂本或者其他⾏内标签(a特殊 ，a标签⾥⾯可以放块级元素)
块级标签：每个块标签通常都会独⾃占据⼀⾏或多整⾏，可以对其设置宽度，⾼度，对齐等属性，常⽤于⽹页布局和⽹页结构的搭建
常见的快标签有h1~h6 ，p,div,ul,ol,li其中div标签是最典型的块标签
特点：
总是从新⾏开始
⾼度、⾏⾼、外边距以及内边距都可以控制
宽度默认是容器的100%
可以容纳内联标签和其他标签
⾏内块标签：在⾏内标签中有⼏个特殊的标签 img,input,td 可以对它们设置宽⾼和对齐属性
特点:
和相邻⾏内标签（或者⾏内块）在⼀⾏上，但是之间有空⽩缝隙
默认宽度就是它本⾝内容的宽度
块、⾏内标签转换为⾏内块：display:inline-block;
4、form中的input设置为readonly和disable的区别
readonly不可编辑，但可以选择和复制；值可以传递到后台
disabled不能编辑，不能复制，不能选择；值不可以传递到后台
5、什么是WebSocket
这个⾃⾏百度，解释起来⽐较长
6、localstorage sessionstorage和cookie的区别（常问）
基本概念
cookie：是⽹景公司的前雇员在1993年发明。它的主要⽤于保存登陆信息，⽐如登陆某个⽹站市场可以看到’记住密码’，这就是通过在cookie中存⼊⼀段辨别⽤户⾝份的数据来实现的。
sessionStorage：会话，是可以将⼀部分数据在当前会话中保存下来，刷新页⾯数据依旧存在。但是页⾯关闭后，sessionStorage中的数据就会被清空。
localStorage：是HTML5标准中新加⼊的技术，当然早在IE6时代就有⼀个userData的东西⽤于本地存储，⽽当时考虑到浏览器的兼容性，更通⽤的⽅案是使⽤flash。如今localStorage被⼤多数浏览器所⽀持。
三者区别
1）存储⼤⼩
cookie：⼀般不超过4K（因为每次http请求都会携带cookie、所以cookie只适合保存很⼩的数据，如会话标识）
sessionStorage：5M或者更⼤
localStorage：5M或者更⼤
2）数据有效期
cookie：⼀般由服务器⽣成，可以设置失效时间；若没有设置时间，关闭浏览器cookie失效，若设置了时间，cookie就会存放在硬盘⾥，过期才失效
sessionStorage：仅在当前浏览器窗⼝关闭之前有效，关闭页⾯或者浏览器会被清除
localStorage：永久有效，窗⼝或者浏览器关闭也会⼀直保存，除⾮⼿动永久清除，因此⽤作持久数据
3）作⽤域
cookie：在所有同源窗⼝中都是共享的
sessionStorage：在同⼀个浏览器窗⼝是共享的（不同浏览器、同⼀个页⾯也是不共享的）
localStorage：在所有同源窗⼝中都是共享的
4）通信
ccokie：始终携带在同源的http请求中，即使不需要，故cookie在浏览器和服务器之间来回传递；如果使⽤cookie保存过多数据会造成性能问题
sessionStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信；不会⾃动把数据发送给服务器，仅在本地保存
localStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信；不会⾃动把数据发送给服务器，仅在本地保存
5）易⽤性
cookie：需要⾃⼰进⾏封装，原⽣的cookie接⼝不够友好
sessionStorage：原⽣接⼝可以接受，可以封装来对Object和Array有更好的⽀持
localStorage：原⽣接⼝可以接受，可以封装来对Object和Array有更好的⽀持
6）应⽤场景
cookie：判断⽤户是否登录过⽹站，以便实现下次⾃动登录或记住密码；保存事件信息等
sessionStorage：敏感账号⼀次性登录；单页⾯⽤的较多（sessionStorage 可以保证打开页⾯时 sessionStorage 的数据为空）
localStorage：常⽤于长期登录（判断⽤户是否已登录），适合长期保存在本地的数据
网页设计html代码大全继承关系
CSS相关⾯试题：
1、浅谈css中⼀个元素如何在其⽗元素居中显⽰（常问）
⽅法有很多种：
1、⽔平居中（margin:0 auto;）
2、⽔平居中（text-align：center;）　
3、⽔平垂直居中 ⼦元素相对于⽗元素绝对定位，并且margin值减去⾃⼰宽⾼的⼀半
4、⽔平垂直居中 ⼦元素相对于⽗元素绝对定位，并且margin值位auto
5、⽔平垂直居中 diplay：table-cell
6、⽔平垂直居中 绝对定位和transfrom
7、⽔平垂直居中 css3中的flex属性
具体可⾃⾏百度，此处不添加代码演⽰
2、清除浮动的⽅法（常问，最常⽤的4种）
1.额外标签法（在最后⼀个浮动标签后，新加⼀个标签，给其设置clear：both；）（不推荐）
优点：通俗易懂，⽅便
缺点：添加⽆意义标签，语义化差
2.⽗级添加overflow属性（⽗元素添加overflow:hidden）（不推荐）通过触发BFC⽅式，实现清除浮动
优点：代码简洁
缺点：内容增多的时候容易造成不会⾃动换⾏导致内容被隐藏掉，⽆法显⽰要溢出的元素
3.使⽤after伪元素清除浮动（推荐使⽤）
优点：符合闭合浮动思想，结构语义化正确
缺点：ie6-7不⽀持伪元素：after，使⽤zoom:1触发hasLayout.
4.使⽤before和after双伪元素清除浮动（推荐使⽤）
优点：代码更简洁
缺点：⽤zoom:1触发hasLayout.
5、⽹页布局有哪⼏种，有什么区别
静态、⾃适应、流式、响应式四种⽹页布局
静态布局：意思就是不管浏览器尺⼨具体是多少，⽹页布局就按照当时写代码的布局来布置；
⾃适应布局：就是说你看到的页⾯，⾥⾯元素的位置会变化⽽⼤⼩不会变化；
流式布局：你看到的页⾯，元素的⼤⼩会变化⽽位置不会变化——这就导致如果屏幕太⼤或者太⼩都
会导致元素⽆法正常显⽰。⾃适应布局：每个屏幕分辨率下⾯会有⼀个布局样式，同时位置会变⽽且⼤⼩也会变。
6、css哪些样式属性可以继承
不可继承的：
display
margin
padding
border
background
height min-height max-height
width min-width max-width
overflow
position left right top bottom z-index
float
vertical-align
所有元素可继承：
visibility
cursor
内联元素可继承：
line-height
color
font font-family font-size font-style font-weight
块状元素可继承：
text-indent
text-align
列表元素可继承：
list-style
7、定位属性（相对定位、绝对定位、固定定位）
相对定位：
让元素相对于⾃⼰原来的位置，进⾏位置调整（可⽤于盒⼦的位置微调）。
绝对定位：
定义横纵坐标。原点在⽗容器的左上⾓或左下⾓。横坐标⽤left表⽰，纵坐标⽤top或者bottom表⽰。
固定定位：
就是相对浏览器窗⼝进⾏定位。⽆论页⾯如何滚动，这个盒⼦显⽰的位置不变。
如果不是很理解的⼩伙伴需要⾃⾏百度深⼊认识⼀下喔。
8、CSS选择器有哪些？选择器的优先级如何排序？
CSS选择器分类：
CSS的选择器分类可以分为三⼤类：id选择器，类选择器，标签选择器。
⽤法如下：
选择器  e.g.说明
id选择器#id#header选择id="header"的所有元素
类选择器.ssage选择class="message"的所有元素
标签选择器el div选择所有的div元素
优先级：!important > 内联样式 > id选择器 > 类、伪类、属性选择器 > 标签、伪元素选择器
权 重： !important：10000
    　内联： 1000
    　id选择器：100
    　类、伪类、属性选择器：10
    　标签、伪元素选择器：1
    　通⽤选择器（*）、⼦选择器（>）、相邻兄弟选择器（+）、通⽤兄弟选择器（~）权重值为0
JS相关⾯试题：
1、JS的执⾏机制（重点）：
这⾥推荐个⼈觉得很好的⼀篇⽂章，耐⼼看完⼀定会有收获的
2、深拷贝 vs 浅拷贝：
因为有些内容⽐较长，这⾥同样推个⼈学习的链接：
3、“= =” 和 “===”的区别
= =是判断等于的意思，返回的是⼀个布尔值，如：alert(1= =1)；将返回true，因为1等于1，如果 alert(1==‘1’)；也返回true，虽说后⾯的1是字符串类型，但是= =是不判断类型的，所以还是true，如果：alert(1==‘2’)就是false了，因为1不等于2;
“= = =”也是判断的，但是它要⽐= =判断的严谨⼀点，它的判断必须什么都相等，⽐如说类型，值；如： alert(1== =1)；将返回true，因为它们都是1，⽽且都是数字类型，如果：alert(1===‘1’)；将返回false，因为前⾯的1是数字类型，后⾯的1是字符串类型。
4、闭包（常问）
闭包（closure）是Javascript语⾔的⼀个难点，也是它的特⾊，很多⾼级应⽤都要依靠闭包实现。
使⽤闭包主要是为了设计私有的⽅法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增⼤内存使⽤量，使⽤不当很容易造成内存泄露。
下⾯就是我的学习笔记，对于Javascript初学者应该是很有⽤的。
变量的作⽤域
要理解闭包，⾸先必须理解Javascript特殊的变量作⽤域。
变量的作⽤域⽆⾮就是两种：全局变量和局部变量。
Javascript语⾔的特殊之处，就在于函数内部可以直接读取全局变量。

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