【前端面试】HTML5+CSS3初级面试3

1、写出media type的几种使用方法。

1）方法一 ：

<link href="style.css" media="screen print" ...

2）方法二：

<?xml-stylesheet media="screen" href="style.css"... 

3）方法三：

@import url("style.css") screen; 

4）方法四：

<style media="screen"> 
@import url("style.css"); 
</style> 

5）方法五：

@media screen{ 
selector{rules} 
} 

     当然，这几种方法各有利弊，而我们常用的是第一种和最后一种方法。 下面说明一下media type的浏览器支持 ：

• IE5.5/6/7不支持在@import中使用媒体类型 。
• Safari/firefox只支持all,screen,print三种类型(包括iphone) 。
• Opera 完全支持 。
• Opera mini 支持handheld，未指定则使用screen 。
• Windows Mobile系统中的IE支持handheld。

2、HTML5应用程序缓存为应用带来什么优势。

     应用程序缓存为应用带来三个优势：

     1）离线浏览：用户可在应用离线时使用它们。

     2）速度：已缓存资源加载得更快。

     3）减少服务器负载：浏览器将只从服务器下载更新过或更改过的资源。

3、HTML、CSS、JavaScript的关系

     学习Web前端开发基础技术需要掌握HTML、CSS、JavaScript语言。

     （1）HTML是网页内容的载体，是内容显示的框架。内容就是网页制作者放在页面上想让用户浏览的信息，可以包括文字、图片、视频等。

     （2）CSS样式是表现，就像网页的外衣。比如字体、颜色、边框等，这些都是用来改变内容外观的东西称为表现。

     （3）JavaScript是用来实现网页上的特效和交互。比如鼠标滑过表格时背景颜色改变，图片轮播等。

4、谈谈对响应式布局的看法。

     响应式布局有缺点也有优点。

     优点：面对不同分辨率设备，灵活性强，能够快捷地解决设备显示适应问题。

     缺点：兼容各种设备时所需工作量大、效率低下、代码累赘，会隐藏无用的元素，加载时间延长，其实这是一种折中性质的十设计解决方案，由于多方面元素影响而达不到最佳效果，在一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。

5、列举几个响应式Web框架。

1）Gumby Framework

    Gumby 2是建立在Sass基础上的。Sass是一款非常强大的CSS 预处理器，允许用户自主快速的开发扩展Gumby，同时提供很多新的工具来自定义和扩展Gumby框架。Gumby 2是一个非常棒的响应式CSS框架。
2）Get UI Kit

    Get UI Kit是一款轻量级、模块化的前端框架，用于开发快四且强大的Web界面。
3）Foundation

    Foundation是一个易用、强大而且灵活的框架，用于构建基于任何设备上的Web应用。提供多种Web上的UI 组件，如表单、按钮、 标签等。
4）Semantic

    UI是Web的灵魂！Semantic是为攻城师而制作的可复用的开源前端框架。提供各种UI组件，使得开发更加直观、易于理解。
5）52Framework

    52 Framework主要用于优化HTML5和CSS3的跨浏览器兼容性的框架，可在所有主流浏览器上运行。
6）PureCSS

      Pure是一组小的、响应式CSS模块，可用于任意Web项目中。它可作为每个网站或Web应用的起步工具，帮助开发者处理应用程序所需的所有CSS工作，同时不会让每个应用千篇一律。 
7）Responsablecss
     Responsable使用最少的Sass，带给你最完美的响应式框架。
8）TukTuk

     TukTuk支持代码重用功能，提供更加快速、高效的样式列表，易于添加与维护。
9）Kube

     Kube是全球最为流行、最灵活的CSS框架之一。其带给你最强大的功能选择，极具创意性与美观性。
 10）Ivory
     Ivory是一款强大、灵活、易用的响应式框架。 Ivory基于12列的响应式网格布局，包含表格，按钮，表格，分页，拨动开关，工具提示，手风琴，选项卡等网站中常用的组件和样式。   

6、PC端和移动端有什么区别，你觉得PC端和移动端哪个比较好一些。

     从我个人角度来说，我觉得PC端的定位就是用户视觉浏览路线，可以显示较多的内容，而移动互联网终端的定位就是便携，体现的是“Anyone Anytime Anywhere”的理念，它不是替代PC的设备，准确的说是PC的补充，可以让人们很好的利用起零碎的时间。以下，我从4个方面分析他们之间的区别。

    1）界面布局。PC端和移动端的屏幕尺寸不同，导致显示的内容也会有所差异。移动端屏幕相对窄小，一般是单列显示，最多也只能是双列+响应式，但是PC端的屏幕大，布局可以更加灵活。

     2）使用习惯。移动端的操作尺度比较大，单击误差大，所以按钮、链接等元素比较设计的大一些。而PC端的操作尺度比较小，用鼠标单击是一件比较准确的事情，所以在设计按钮或者链接等样式时可以稍微小一些。比如说淘宝网页的PC版和手机版。在PC版的淘宝页面中，有些小按钮能放下的功能，在移动版就必须另弹窗口让用户详细输入。

   3）网络速度。手机的网络一般是2G\3G\4G\WIFI等，网页的加载速度会影响用户的体验，需要消耗用户的流量，所以要少用图片、动画、JS等，而PC的网络一般是连接宽带或者WIFI，PC端的用户一般不会考虑页面消耗的流量，所以一般不用考虑加载问题。

   4）技术层面。移动端开发有一些jquery for mobile一类的库是专用，不适用于PC端。当然，反过来有些PC端的工具或者技术在移动端也不好用。PC应用更关注的是后台、大数据、算法类的，而移动端更关注的是如何更好地交互和体验。

    

     我感觉移动端开发更好，因为移动端和用户有更直接的接触，而且以后应用会更广泛，需要考虑的兼容性也相对较少，在技术层面的实现相对简单，毕竟移动端是大势所趋，以后的使用会越来越多。

7、PC端页面需要兼容哪些浏览器。

     浏览器不断更新，人们所熟知所使用的浏览器已不再是电脑自带的浏览器，所以在设计并完成PC端的页面时，要尽可能考虑更多的浏览器兼容性问题。那浏览器大致可以分为IE内核浏览器和非IE内核浏览器。

    

     IE内核浏览器：360，傲游、搜狗、世界之窗、腾讯TT

     非IE内核浏览器：Firefox、Opera、Safari、Chrome

一般情况下主要考虑兼容性问题的浏览器是：IE6、IE7、IE8、Firefox5+、Safari、Chrome等浏览器。

8、网页制作中会用到的图片格式。

     常用的图片格式包括：PNG、JPG、gif、svg等。

     在移动端流行的同时，我们在制作网页的时候，要考虑到图片的大小会影响流量和加载速度，所以采用压缩式的图片会更好，目前我知道的有两种格式，一种是Webp，另一种是Apng。

     WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。但WebP是一种有损压缩。相较编码JPEG文件，编码同样质量的WebP文件需要占用更多的计算资源。

扩展：Sprite图片二次优化

　　由于目前国内很多互联网公司没有页面重构师这一职位，所以页面切图和静态代码实现基本都是前端工程师去完成。为提高页面性能目前普遍采用的实现方式是将与页面结构相关的需要用到图片的视觉元素集中在一个PNG图片上，然后通过CSS样式将其应用到页面中，我们称这个图片为Sprite图片。由于这个图片上经常要集中较多的视觉元素，在用PNG格式存储时难免会产生失真而影响图片质量。这个时候就需要视觉设计师帮助前端开发工程师对Sprite图片进行优化，这样做的好处是不仅能提升图片质量，还能达到减小文件大小的效果，可谓一举两得。

9、如何提高前端性能。

具体参考：前端性能优化----yahoo前端性能团队总结的35条黄金定律

前端面试系列文章：

1、【前端面试】HTML5+CSS3初级面试1

2、【前端面试】HTML5+CSS3初级面试2

3、【前端面试】HTML5+CSS3初级面试3

4、【前端面试】HTML5+CSS3初级面试4