课程咨询:400-111-8989

  • 您好,您有一套HTML5面试题邀你作答

    发布:HTML5培训  来源:html5就业指导  时间: 2018年08月22日

  • Hello小伙伴,本文讲的是HTML5面试题,听说您最近在寻找HTML5相关工作,快来看看文章的面试题你都会吗?据说掌握了这些面试题的人通过面试的几率更大哦。...

  • Hello小伙伴,本文讲的是HTML5面试题,听说您最近在寻找HTML5相关工作,快来看看文章的面试题你都会吗?据说掌握了这些面试题的人通过面试的几率更大哦。

    您好,您有一套HTML5面试题邀你作答

    1.XHTML和HTML有什么区别

    · HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言 最主要的不同:

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

    · XHTML 元素必须被关闭。

    · 标签名必须用小写字母。

    · XHTML 文档必须拥有根元素。

    2.前端页面有哪三层构成,分别是什么?作用是什么?

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

    3.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

    · Ie(Ie内核) 火狐(Gecko) 谷歌(webkit,Blink) opera(Presto),Safari(wbkit)

    4.什么是语义化的HTML?

    · 直观的认识标签 对于搜索引擎的抓取有好处,用正确的标签做正确的事情!

    · html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;

    在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。

    · 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

    5.HTML5 为什么只需要写 !DOCTYPE HTML?

    · HTML5 不基于 SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行);而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。

    6.Doctype作用?标准模式与兼容模式各有什么区别?

    · !DOCTYPE声明位于位于HTML文档中的第一行,处于html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

    · 标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

    7.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

    移除的元素

    · 纯表现的元素:basefont,big,center,font, s,strike,tt,u;

    · 对可用性产生负面影响的元素:frame,frameset,noframes;

    支持HTML5新标签:

    · IE8/IE7/IE6支持通过document.createElement方法产生的标签,

    · 可以利用这一特性让这些浏览器支持HTML5新标签,

    · 浏览器支持新标签后,还需要添加标签默认的样式:

    8.请描述一下 cookies,sessionStorage 和 localStorage 的区别?

    · cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会

    · sessionStorage和localStorage的存储空间更大;

    · sessionStorage和localStorage有更多丰富易用的接口;

    · sessionStorage和localStorage各自独立的存储空间;

    9.如何实现浏览器内多个标签页之间的通信?

    · 调用localstorge、cookies等本地存储方式

    CSS相关

    1.简要说一下CSS的元素分类

    · 块级元素:div,p,h1,form,ul,li;

    · 行内元素 : span>,a,label,input,img,strong,em;

    2.CSS隐藏元素的几种方法(至少说出三种)

    · Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;

    · Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外,元素在读屏软件中也会被隐藏;

    · Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;

    · Position:不会影响布局,能让元素保持可以操作;

    · Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件,浏览器支持度还要低;

    3.CSS清除浮动的几种方法(至少两种)

    · 使用带clear属性的空元素

    · 使用CSS的overflow属性;

    · 使用CSS的:after伪元素;

    · 使用邻接元素处理;

    4.CSS居中(包括水平居中和垂直居中)

    4.1内联元素居中方案

    水平居中设置:

    (1)行内元素

    · 设置 text-align:center;

    (2)Flex布局

    · 设置display:flex;justify-content:center;(灵活运用,支持Chroime,Firefox,IE9+)

    垂直居中设置:

    (1)父元素高度确定的单行文本(内联元素)

    (2)设置 height = line-height;

    父元素高度确定的多行文本(内联元素)

    a:插入 table (插入方法和水平居中一样),然后设置 vertical-align:middle;

    b:先设置 display:table-cell 再设置 vertical-align:middle;

    4.2块级元素居中方案

    水平居中设置:

    (1).定宽块状元素

    · 设置 左右 margin 值为 auto;

    (2)不定宽块状元素

    a:在元素外加入 table 标签(完整的,包括 table、tbody、tr、td),该元素写在 td 内,然后设置 margin 的值为 auto;

    b:给该元素设置 display:inine 方法;

    c:父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:50%;

    垂直居中设置:

    1. 使用position:absolute(fixed),设置left、top、margin-left、margin-top的属性;

    2. 利用position:fixed(absolute)属性,margin:auto这个必须不要忘记了;

    3. 利用display:table-cell属性使内容垂直居中;

    4. 使用css3的新属性transform:translate(x,y)属性;

    5. 使用:before元素;

    5.写出几种IE6 BUG的解决方法

    · 双边距BUG float引起的 使用display

    · 3像素问题 使用float引起的 使用dislpay:inline -3px

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

    · Ie z-index问题 给父级添加position:relative

    · Png 透明 使用js代码 改

    · Min-height 最小高度 !Important 解决’

    · select 在ie6下遮盖 使用iframe嵌套

    · 为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)

    6.对于SASS或是Less的了解程度?喜欢那个?

    · 语法介绍

    7.Bootstrap了解程度

    · 特点,排版,插件的使用;

    8.页面导入样式时,使用link和@import有什么区别?

    · link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS;

    · 页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;

    · import是CSS2.1 提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题;

    9.介绍一下CSS的盒子模型?

    · 有两种, IE 盒子模型、标准 W3C 盒子模型;IE的content部分包含了 border 和 pading;

    · 盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border).

    10.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)

    10. 可继承的样式: font-size font-family color, UL LI DL DD DT;

    11. 不可继承的样式:border padding margin width height ;

    12. 优先级就近原则,同权重情况下样式定义最近者为准;

    13. 优先级为:

    !important > id > class > tag

    important 比 内联优先级高

    11.CSS3有哪些新特性?

    · CSS3实现圆角(border-radius:8px),阴影(box-shadow:10px),

    对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)

    · transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

    增加了更多的CSS选择器 多背景 rgba

    JavaScript相关

    1.javascript的typeof返回哪些数据类型

    · Object number function boolean underfind;

    2.例举3种强制类型转换和2种隐式类型转换?

    · 强制(parseInt,parseFloat,number)隐式(== – ===);

    3.数组方法pop() push() unshift() shift()

    · Push()尾部添加 pop()尾部删除

    · Unshift()头部添加 shift()头部删除

    4.ajax请求的时候get 和post方式的区别?

    · 一个在url后面 一个放在虚拟载体里面,有大小限制

    · 安全问题,应用不同 一个是论坛等只需要请求的,一个是类似修改密码的;

    5.call和apply的区别

    · Object.call(this,obj1,obj2,obj3)

    · Object.apply(this,arguments)

    6.ajax请求时,如何解释json数据

    · 使用eval parse,鉴于安全性考虑 使用parse更靠谱;

    7.事件委托是什么

    · 让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!

    8.闭包是什么,有什么特性,对页面有什么影响?简要介绍你理解的闭包

    · 闭包就是能够读取其他函数内部变量的函数。

    9.添加 删除 替换 插入到某个接点的方法

    obj.appendChidl()

    obj.innersetBefore

    obj.replaceChild

    obj.removeChild

    10.说一下什么是javascript的同源策略?

    · 一段脚本只能读取来自于同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合

    11.谈谈This对象的理解。

    this是js的一个关键字,随着函数使用场合不同,this的值会发生变化。

    但是有一个总原则,那就是this指的是调用函数的那个对象。

    this一般情况下:是全局对象Global。 作为方法调用,那么this就是指这个对象

    12.介绍下你最常用的一款框架

    · vue,jquery,react,angular等;

    13.对于前端自动化构建工具有了解吗?简单介绍一下

    · Gulp,Grunt等;

    以上就是小编今天为大家准备的HTML5面试题了,想要参加HTML5面试的小伙伴快点记住这些面试题,在面试的时候有备无患,顺利通过面试,找到工作,加油吧!

  • 上一篇:面试技巧-HTML5前端面试题汇总(二)

    下一篇:没有下一篇了

网站导航
2002-2018 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56