web前端开发(面试题及参考答案)

web前端开发

前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技能、结构、解决方案，来实现互联网产品的用户界面交互。
前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产品，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以阅读为主。跟着互联网技能的开展和HTML5、CSS3的使用，现代网页愈加漂亮，交互效果显著，功用愈加强大。
前端开发跟从移动互联网开展带来了大量高性能的移动终端设备使用。HTML5，Node.js的广泛使用，各类UI结构，JS类库层出不穷，开发难度也在逐渐提升。

web前端开发面试题及参考答案

许多企业现在要求求职者完成面试题，web前端开发面试试题已经成为web前端开发求职者求职面试过程中的重要环节之一。以下是传智播客为我们收拾的：Web前端开发面试题及答案，仅供我们参阅!
1、Doctype作用?严厉形式与稠浊形式怎么区别?它们有何意义?
(1)、声明位于文档中的最前面，处于标签之前。奉告浏览器的解析器，用什么文档类型标准来解析这个文档。
(2)、严厉形式的排版和JS运作形式是以该浏览器支撑的最高标准运行。
(3)、在稠浊形式中，页面以宽松的向后兼容的方法显现。模拟旧式浏览器的行为以防止站点无法作业。
(4)、DOCTYPE不存在或格局不正确会导致文档以稠浊形式呈现。
2、行内元素有哪些?块级元素有哪些?
(1)CSS标准规定，每个元素都有display特点，确认该元素的类型，每个元素都有默许的display值，比如div默许display特点值为“block”，成为“块级”元素;span默许display特点值为“inline”，是“行内”元素。
(2)行内元素有：abspanimginputselectstrong(强调的语气)块级元素有：divulollidldtddh1h2h3h4…p
3、link和@import的区别是?
(1)link归于XHTML标签，而@import是CSS提供的;
(2)页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
(3)import只在IE5以上才干辨认，而link是XHTML标签，无兼容问题;
(4)link方法的款式的权重高于@import的权重.
4、浏览器的内核别离是什么?
5、HTML5有哪些新特性?怎么处理HTML5新标签的浏览器兼容问题?怎么区别HTML和HTML5?
HTML5现在已经不是SGML的子集，主要是关于图画，方位，存储，多任务等功能的增加。
绘画canvas用于前言回放的video和audio元素本地离线存储localStorage长时间存储数据，浏览器封闭后数据不丢掉;sessionStorage的数据在浏览器封闭后主动删语意化更好的内容元素，比如article、footer、header、nav、section表单控件，calendar、date、time、email、url、search新的技能webworker,websockt,Geolocation
6、对语义化怎么了解?
(3)import只在IE5以上才干辨认，而link是XHTML标签，无兼容问题;
(4)link方法的款式的权重高于@import的权重.
7、浏览器的内核别离是什么?
8、HTML5有哪些新特性?怎么处理HTML5新标签的浏览器兼容问题?怎么区别HTML和HTML5?
HTML5现在已经不是SGML的子集，主要是关于图画，方位，存储，多任务等功能的增加。
绘画canvas用于前言回放的video和audio元素本地离线存储localStorage长时间存储数据，浏览器封闭后数据不丢掉;sessionStorage的数据在浏览器封闭后主动删语意化更好的内容元素，比如article、footer、header、nav、section表单控件，calendar、date、time、email、url、search新的技能webworker,websockt,Geolocation
9、对语义化怎么了解?
(3)import只在IE5以上才干辨认，而link是XHTML标签，无兼容问题;
(4)link方法的款式的权重高于@import的权重.
10、浏览器的内核别离是什么?
11、HTML5有哪些新特性?怎么处理HTML5新标签的浏览器兼容问题?怎么区别HTML和HTML5?
HTML5现在已经不是SGML的子集，主要是关于图画，方位，存储，多任务等功能的增加。
绘画canvas用于前言回放的video和audio元素本地离线存储localStorage长时间存储数据，浏览器封闭后数据不丢掉;sessionStorage的数据在浏览器封闭后主动删语意化更好的内容元素，比如article、footer、header、nav、section表单控件，calendar、date、time、email、url、search新的技能webworker,websockt,Geolocation
12、对语义化怎么了解?
用正确的标签做正确的工作!
HTML语义化便是让页面的内容结构化，便于对浏览器、搜索引擎解析;在没有款式CCS情况下也以一种文档格局显现，并且是简单阅览的。搜索引擎的爬虫依赖于标记来确认上下文和各个关键字的权重，利于SEO。使阅览源代码的人对网站更简单将网站分块，便于阅览保护了解。
13、HTML5的离线储存有几种方法?
localStorage长时间存储数据，浏览器封闭后数据不丢掉;sessionStorage数据在浏览器封闭后主动删去。
14、iframe有那些缺陷?
iframe会阻塞主页面的Onload事件;
iframe和主页面同享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。运用iframe之前需求考虑这两个缺陷。如果需求运用iframe，最好是通过javascript动态给iframe增加src特点值，这样能够能够绕开以上两个问题。
15、请描述一下cookies，sessionStorage和localStorage的区别?
cookie在浏览器和服务器间来回传递。sessionStorage和localStorage不会sessionStorage和localStorage的存储空间更大;sessionStorage和
localStorage有更多丰厚易用的接口;sessionStorage和localStorage各自独立的存储空间;
web前端开发面试题：CSS部分
1、CSS挑选符有哪些?哪些特点能够承继?优先级算法怎么核算?CSS3新增伪类有那些?
1.id挑选器(#myid)2.类挑选器(.myclassname)3.标签挑选器(div,h1,p)4.相邻挑选器(h1+p)5.子挑选器(ul<li)6.后代挑选器(lia)7.通配符挑选器(*)8.特点挑选器(a[rel=”external”])9.伪类挑选器(a:hover,li:nth-child)可承继的款式：font-sizefont-familycolor,ULLIDLDDDT;不行承继的款式：borderpaddingmarginwidthheight;优先级就近准则，同权重情况下款式定义最近者为准;
载入款式以最终载入的定位为准;
优先级为:
!important>id>class>tagimportant比内联优先级高
2、CSS3新增伪类举例：
p:first-of-type挑选归于其父元素的首个元素的每个元素。
p:last-of-type挑选归于其父元素的最终元素的每个元素。p:only-of-type挑选归于其父元素仅有的元素的每个元素。p:only-child挑选归于其父元素的仅有子元素的每个元素。p:nth-child(2)挑选归于其父元素的第二个子元素的每个元素。:enabled:disabled控制表单控件的禁用态。:checked单选框或复选框被选中。
3、怎么居中div?怎么居中一个起浮元素?给div设置一个宽度，然后增加margin:0auto特点
div{width:200px;margin:0auto;}
居中一个起浮元素
确认容器的宽高宽500高300的层设置层的外边距.div
{Width:500px;height:300px;//高度能够不设Margin:-150px00-250px;position:relative;相对定位background-color:pink;//方便看作用left:50%;top:50%;}
列出display的值，说明他们的作用。position的值，relative和absolute定位原点是?
1.block象块类型元素相同显现。none缺省值。象行内元素类型相同显现。inline-block象行内元素相同显现，但其内容象块类型元素相同显现。list-item象块类型元素相同显现，并增加款式列表标记。
2.absolute生成肯定定位的元素，相对于static定位以外的第一个父元素进行定位。
fixed(老IE不支撑)生成肯定定位的元素，相对于浏览器窗口进行定位。
relative生成相对定位的元素，相对于其正常方位进行定位。
static默许值。没有定位，元素出现在正常的流中*(忽略top,bottom,left,rightz-index声明)。
inherit规定从父元素承继position特点的值。