全国咨询/投诉热线:400-618-4000

最新Web前端开发面试题及参考答案

更新时间:2018年11月27日15时20分 来源:传智播客 浏览次数:

  最新Web前端开发面试题及参考答案
最新Web前端开发面试题及参考答案

  很多企业现在要求求职者完成面试题,web前端开发面试试题已经成为web前端开发求职者求职面试过程中的重要环节之一。以下是传智播客为大家整理的:Web前端开发面试题及答案,仅供大家参考! 
    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、对语义化如何理解?
  (3)import只在IE5以上才能识别,而link是XHTML标签,无兼容问题;
  (4)link方式的样式的权重高于@import的权重.
  7、浏览器的内核分别是什么?
  IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera内核原为Presto,现为Blink;
  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、浏览器的内核分别是什么?
  IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera内核原为Presto,现为Blink;
  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.后代选择器(li a) 7.通配符选择器( * ) 8.属性选择器(a[rel = "external"]) 9.伪类选择器(a: hover, li: nth - child) 可继承的样式: font-size font-family color, UL LI DL DD DT; 不可继承的样式:border padding margin width height ; 优先级就近原则,同权重情况下样式定义最近者为准;
  载入样式以最后载入的定位为准;
  优先级为:
  !important > id > class > tag important 比内联优先级高
  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:0 auto属性
  div{ width:200px; margin:0 auto; }
  居中一个浮动元素
  确定容器的宽高宽500 高 300 的层 设置层的外边距 .div
  { Width:500px ; height:300px;//高度可以不设 Margin: -150px 0 0 -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, right z-index 声明)。
  inherit 规定从父元素继承 position 属性的值。

javaee

python

web

ui

cloud

test

c

netmarket

pm

Linux

movies

robot

uids

北京校区

    14天免费试学

    基础班入门课程限时免费

    申请试学名额

    15天免费试学

    基础班入门课程限时免费

    申请试学名额

    15天免费试学

    基础班入门课程限时免费

    申请试学名额

    15天免费试学

    基础班入门课程限时免费

    申请试学名额

    20天免费试学

    基础班入门课程限时免费

    申请试学名额

    8天免费试学

    基础班入门课程限时免费

    申请试学名额

    20天免费试学

    基础班入门课程限时免费

    申请试学名额

    5天免费试学

    基础班入门课程限时免费

    申请试学名额

    0天免费试学

    基础班入门课程限时免费

    申请试学名额

    12天免费试学

    基础班入门课程限时免费

    申请试学名额

    5天免费试学

    基础班入门课程限时免费

    申请试学名额

    5天免费试学

    基础班入门课程限时免费

    申请试学名额

    10天免费试学

    基础班入门课程限时免费

    申请试学名额