web前端面试题及答案

时间：2024-05-12 07:34:18 面试题我要投稿

相关推荐

web前端面试题及答案

　　在平平淡淡的日常中，我们都离不开试题，借助试题可以为主办方提供考生某方面的知识或技能状况的信息。一份好的试题都是什么样子的呢？以下是小编整理的web前端面试题及答案，希望能够帮助到大家。

web前端面试题及答案

web前端面试题及答案1

　　1、Doctype作用？严格模式与混杂模式如何区分？它们有何意义？

　　（1）、声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。

　　（2）、严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。

　　（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

　　（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

　　2、行内元素有哪些？块级元素有哪些？

　　（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

　　（2）行内元素有：a b span img input select strong（强调的语气）块级元素有：div ulol li dl dtdd h1 h2 h3 h4…p

　　3、link和@import的区别是？

　　（1）link属于XHTML标签，而@import是CSS提供的；

　　（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载；

　　（3）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题；

　　（4）link方式的样式的权重高于@import的权重。

　　4、浏览器的内核分别是什么？

　　IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；

　　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、对语义化如何理解？

　　（1）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题；

　　（2）link方式的样式的权重高于@import的权重。

　　4、浏览器的内核分别是什么？

　　IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的'分支）、Opera内核原为Presto，现为Blink；

　　5、HTML5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

　　HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。

　　6、对语义化如何理解？

　　（3）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题；

　　（4）link方式的样式的权重高于@import的权重。

　　4、浏览器的内核分别是什么？

　　IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；

　　5、HTML5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

　　HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。

　　6、对语义化如何理解？

　　用正确的标签做正确的事情！

　　HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

　　7、HTML5的离线储存有几种方式？

　　localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage数据在浏览器关闭后自动删除。

　　8、iframe有那些缺点？

　　iframe会阻塞主页面的Onload事件；

　　iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以可以绕开以上两个问题。

　　9、请描述一下cookies，sessionStorage和localStorage的区别？

　　cookie在浏览器和服务器间来回传递。sessionStorage和localStorage不会sessionStorage和localStorage的存储空间更大；sessionStorage和localStorage有更多丰富易用的接口；sessionStorage和localStorage各自独立的存储空间；

web前端面试题及答案2

　　1、对WEB标准以及W3C的理解与认识

　　标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；

　　2、xhtml和html有什么区别

　　HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言

　　最主要的不同：

　　XHTML元素必须被正确地嵌套。

　　XHTML元素必须被关闭。

　　标签名必须用小写字母。

　　XHTML文档必须拥有根元素。

　　3、Doctype？严格模式与混杂模式—如何触发这两种模式，区分它们有何意义？

　　用于声明文档使用那种规范（html/Xhtml）一般为严格过度基于框架的html文档加入XMl声明可触发，解析方式更改为IE5、5拥有IE5、5的bug

　　4、行内元素有哪些？块级元素有哪些？CSS的盒模型？

　　块级元素：div p h1 h2 h3 h4 form ul

　　行内元素：a b br i span input select

　　Css盒模型：内容，border，margin，padding

　　5、CSS引入的方式有哪些？link和@import的区别是？

　　内联内嵌外链导入

　　区别：同时加载

　　前者无兼容性，后者CSS2、1以下浏览器不支持

　　Link支持使用javascript改变样式，后者不可

　　6、CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？

　　标签选择符类选择符id选择符

　　继承不如指定Id>class>标签选择

　　后者优先级高

　　7、前端页面有哪三层构成，分别是什么？作用是什么？

　　结构层Html表示层CSS行为层js

　　8、css的基本语句构成是？

　　选择器{属性1：值1；属性2：值2；……}

　　9、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么？

　　Ie（Ie内核）火狐（Gecko）谷歌（webkit）opear（Presto）

　　10、写出几种IE6 BUG的解决方法

　　1、双边距BUG float引起的使用display

　　2、3像素问题使用float引起的使用dislpay：inline —3px

　　3、超链接hover点击后失效使用正确的书写顺序link visited hover active

　　4、Ie z—index问题给父级添加position：relative

　　5、Png透明使用js代码改

　　6、Min—height最小高度！Important解决’

　　7、select在ie6下遮盖使用iframe嵌套

　　8、为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的`，使用

　　over：hidden，zoom：0。08 line—height：1px）

　　11、标签上title与alt属性的区别是什么？

　　Alt当图片不显示是用文字代表。

　　Title为该属性提供信息

　　12、描述css reset的作用和用途。

　　Reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一

　　13、解释css sprites，如何使用。

　　Css精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

　　14、浏览器标准模式和怪异模式之间的区别是什么？

　　盒子模型渲染模式的不同

　　使用window。top。document。compatMode可显示为什么模式

　　15、你如何对网站的文件和资源进行优化？期待的解决方案包括：

　　文件合并

　　文件最小化/文件压缩

　　使用CDN托管

　　缓存的使用

　　16、什么是语义化的HTML？

　　直观的认识标签对于搜索引擎的抓取有好处

　　17、清除浮动的几种方式，各自的优缺点

　　1、使用空标签清除浮动clear：both（理论上能清楚任何标签，增加无意义的标签）

　　2、使用overflow：auto（空标签元素清除浮动而不得不增加无意代码的弊端，使用zoom：1用于兼容IE）

　　3、是用afert伪元素清除浮动（用于非IE浏览器）

　　18、举出3个HTML5 / CSS3特效的例子

　　圆角，阴影，放大/缩小，转动等

　　Javascript

　　1、javascript的[返回哪些数据类型

　　Object number function boolean underfind

　　2、函数的几种定义方法

　　function a（）{}，var a = function（）{}

　　3、在javascript中，以声明变量名的规则

　　1、变量名是严格区别分小写的，如变量abc和ABC是两个变量，可以在程序分别对其进行声明，赋值和引用。

　　2、js中变量名必须以字母，其余可以包括数字，字符和_，如temp，abc，exmple2就是合法的变量名。

　　3、不能引用javascript中的关键字作为变量，在javascript中定义了40多个关键字，这些关键字都是是javascript内部使用的，不能作为变量的名称，如var，true，int等不能作为变量名使用。

　　4、document load和document ready的区别

　　Document。onload是在结构和样式加载完才执行js

　　Document。ready原生种没有这个方法，jquery中有$（）。ready（function）

　　5、使用JQ插入删除替换到某个节点的常用方法

　　插入：append（），prepend（），after（）等等

　　删除：remove（），detach（）和empty（）

　　替换：replaceWith（）和replaceAll（）

【web前端面试题及答案】相关文章：