课程咨询:400-111-8989

  • 面试技巧-HTML5前端面试题汇总(一)

    发布:李军宜  来源: rw助你成功  时间: 2018年07月20日

  • 正准备参加HTML5面试的小伙伴们是不是在为面试做准备,到处寻找面试经验?今天小编就为大家做准备了这篇HTML5前端面试题汇总,准备参加面试的小伙伴们快来看看这些面试题吧,希望对你有所帮助。...

  • 正准备参加HTML5面试的小伙伴们是不是在为面试做准备,到处寻找面试经验?今天小编就为大家做准备了这篇HTML5前端面试题汇总,准备参加面试的小伙伴们快来看看这些面试题吧,希望对你有所帮助。

    面试技巧-HTML5前端面试题汇总(一)

    一 . CSS3有哪些新特性?

    1. CSS3实现圆角(border-radius),阴影(box-shadow),

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

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

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

    5. 在CSS3中唯一引入的伪元素是 ::selection.

    6. 媒体查询,多栏布局

    7. border-image

    二 . html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

    新特性:

    1. 拖拽释放(Drag and drop) API

    2. 语义化更好的内容标签(header,nav,footer,aside,article,section)

    3. 音频、视频API(audio,video)

    4. 画布(Canvas) API

    5. 地理(Geolocation) API

    6. 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;

    7. sessionStorage 的数据在浏览器关闭后自动删除

    8. 表单控件,calendar、date、time、email、url、search

    9. 新的技术webworker, websocket, Geolocation

    移除的元素:

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

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

    支持HTML5新标签:

    1. IE8/IE7/IE6支持通过 document.createElement 方法产生的标签,可以利用这一特性让这些浏览器支持 HTML5 新标签,浏览器支持新标签后,还需要添加标签默认的样式(当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架):

    <!--[if lt IE 9]>

    <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

    <![endif]-->

    如何区分:

    DOCTYPE声明新增的结构元素、功能元素

    三 . 本地存储(Local Storage )和cookies(储存在用户本地终端上的数据)之间的区别是什么?

    Cookies:服务器和客户端都可以访问;大小只有4KB左右;有有效期,过期后将会删除;

    本地存储:只有本地浏览器端可访问数据,服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器;每个域5MB;没有过期数据,它将保留直到用户从浏览器清除或者使用Javascript代码移除

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

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

    五 . 你如何对网站的文件和资源进行优化?

    文件合并

    文件最小化/文件压缩

    使用CDN托管

    缓存的使用

    六 . 什么是响应式设计?

    低成本实现一套代码一个网页在多终端多设备下访问达到一定用户体验的开发方式。其布局会根据终端情况自适应调整达到一定水平的用户体验。

    七 . 新的 HTML5 文档类型和字符集是?

    答:HTML5文档类型:<!doctype html>

    HTML5使用的编码<meta charset=”UTF-8”>

    八 . HTML5 Canvas 元素有什么用?

    答:Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作。

    九 . HTML5 存储类型有什么区别?

    答:Media API、Text Track API、Application Cache API、User Interaction、Data Transfer API、Command API、Constraint Validation API、History API

    十. CSS3新增伪类有那些?

    p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

    p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

    p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

    p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。

    p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

    :enabled、:disabled 控制表单控件的禁用状态。

    :checked,单选框或复选框被选中。

    十一 . 请用CSS实现:一个矩形内容,有投影,有圆角,hover状态慢慢变透明。

    css属性的熟练程度和实践经验

    十二 . 描述下CSS3里实现元素动画的方法

    动画相关属性的熟悉程度

    十三 . html5\CSS3有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

    HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,地理定位等功能的增加。

    * 绘画 canvas 元素

    用于媒介回放的 video 和 audio 元素

    本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;

    sessionStorage 的数据在浏览器关闭后自动删除

    语意化更好的内容元素,比如 article、footer、header、nav、section

    表单控件,calendar、date、time、email、url、search

    CSS3实现圆角,阴影,对文字加特效,增加了更多的CSS选择器 多背景 rgba

    新的技术webworker, websockt, Geolocation

    移除的元素

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

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

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

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

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

    * 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

    <!--[if lt IE 9]>

    <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

    <![endif]-->

    十四 . 你怎么来实现页面设计图,你认为前端应该如何高质量完成工作? 一个满屏品字布局如何设计?

    * 首先划分成头部、body、脚部;。。。。。

    * 实现效果图是最基本的工作,精确到2px;

    与设计师,产品经理的沟通和项目的参与

    做好的页面结构,页面重构和用户体验

    处理hack,兼容、写出优美的代码格式

    针对服务器的优化、拥抱 HTML5。

    以上就是小编今天为大家分析的HTML5前端面试题汇总的文章,希望本篇文章对正准备参加HTML5面试的小伙伴有所帮助,想要了解更多HTML5面试相关信息,记得关注达内HTML5培训官网哦。

  • 上一篇:2018HTML5面试题分享,来看一看你能答得上来吗?

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

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