每天整理一些面试题

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

ie:ie内核

谷歌、Safari:WebKit内核

Opera:Presto内核

2、每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗?**
**
<!DOCTYPE>声明位于文档的最前面的位置,处于<html>标签之前。此标签会告诉浏览器文档使用哪种HTML或者XHTML规范。(重点:告诉浏览器按照何种规范即系页面)

Doctype不存在或者格式不正确会导致文档以兼容模式呈现

3Quirks模式是什么?它和Standards模式有什么区别**
**
Quirks Mode是一种浏览器(像IE,Firefox,Opera)操作模式。从根本上说,怪异模式(也称之为兼容模式)意味着一个相对新的浏览器故意模拟许多在旧浏览器中存在的
bug,特别是在IE4和IE5中。

Standards为标准模式

4、div+css的布局较table布局有什么优点?**** ****19**
**
1.代码少,页面文件小,下载快

2.布局灵活,网页有小的改动不影响搜索引擎收录

3.影响搜索排名

5、 img的alt与title有何异同? strong与em的异同?**
**
alt和title的相同点:
同属于img的属性,可以替代图片显示为文本。
不同点:
alt是图片在无法正确显示的时候起到文本替代的作用;
title在鼠标滑过时显示的文字提示。

em表示强调
strong表示更强烈的强调。
言简意赅,表明了em和strong的命名来历。并且在浏览器中,em默认用斜体表示,strong用粗体表示。

6、你能描述一下渐进增强和优雅降级之间的不同吗?**
**
渐进增强(progressive enhancement):一开始只构建站点的最少特性,然后不断针对各浏览器追加功能。

优雅降级:使用优雅降级方案,
Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。

7、为什么利用多个域名来存储网站资源会更有效?**
**
CDN缓存更方便突破浏览器并发限制
节约cookie带宽
节约主域名的连接数,优化页面响应速度
防止不必要的安全问题

8、请谈一下你对网页标准和标准制定机构重要性的理解。**
**
网页标准和标准制定机构都是为了能让
web发展的更‘健康’,首先约束浏览器开发者遵循统一的标准,其次约束网站开发者,这样降低开发难度,开发成本,SEO也会更好做,也不会因为滥用代码导致各种BUG、安全问题,最终提高网站易用性。

9、请描述一下cookies,sessionStorage和localStorage的区别***
**
LocalStorage(本地存储)和sessionStorage(会话存储)

LocalStorage和sessionStorage功能上是一样的,但是存储持久时间不一样。

    LocalStorage:浏览器关闭了数据仍然可以保存下来,并可用于所有同源(相同的域名、协议和端口)窗口(或标签页),

    sessionStorage:数据存储在窗口对象中,窗口关闭后对应的窗口对象消失,存储的数据也会丢失。

10、简述一下src与href的区别。**
**
href 表示超文本引用(hypertext reference),在 link和a 等元素上使用 src 表示来源地址,在 img、script、iframe 等元素上 src 的内容,是页面必不可少的一部分,是引入。href 的内容,是与该页面有关 联,是引用。区别就是,引入和引用。

11、知道的网页制作会用到的图片格式有哪些?**
**
Jpg png gif

12、知道什么是微格式吗?**
**
微格式是一种让机器可读的语义化
XHTML 词汇的集 合,是结构化数据的开放标准

13、在css/js代码上线之后开发人员经常会优化性能,从用户刷新网页开始,一次js请求一般情况下有哪些地方会有缓存处理?**
**
dns(域名服务器)缓存,cdn()缓存,浏览器缓存,服务器缓存。

14、一个页面上有大量的图片(大型电商网站),加载很慢,你有哪些方法优化这些图片的加载,给用户更好的体验。**
**
图片懒加载,在页面上的未可视区域可以添加一个滚动条事件,判断图片位置与浏览器顶端的距离与页面的距离,如果前者小于后者,优先加载。
如果为幻灯片、相册等,可以使用图片预加载技术,将当前展示图片的前一张和后一张优先下载。
如果图片为
css图片,可以使用CSSsprite,SVGsprite,Iconfont、Base64等技术。如果图片过大,可以使用特殊编码的图片,加载时会先加载一张压缩的特别厉害的缩略图,以提高用户体验。
如果图片展示区域小于图片的真实大小,则因在服务器端根据业务需要先行进行图片压缩,图片压缩后大小与展示一致。

如果是小图片(图标一类的)就用:雪碧图/精灵图

15、你如何理解HTML结构的语义化?**
**
去掉或样式丢失的时候能让页面呈现清晰的结构;

便于团队开发和维护。

16、谈谈以前端角度出发做好SEO需要考虑什么?**
**
SEO:搜索引擎优化

需要知道一些搜索引擎的基本工作原理,各个搜索引擎之间的区别,搜索机器人(
SE robot 或叫 web crawler)如何进行工作,搜索引擎如何对搜索结果进行排序等等。

17、有哪项方式可以对一个DOM设置它的CSS样式?**
**
外部样式表,引入一个外部
css文件 内部样式表,将
css代码放在 <head> 标签内部 内联样式,将
css样式直接定义在 HTML 元素内部

18、CSS都有哪些选择器?**
**
派生选择器(用HTML标签申明)
id选择器(用DOM的ID申明)
类选择器(用一个样式类名申明)
属性选择器(用DOM的属性申明,属于CSS2,IE6不支持,不常用, 不知道就算了)

除了前3种基本选择器,还有一些扩展选择器,包括:
后代选择器(利用空格间隔,比如div .a{ })
群组选择器(利用逗号间隔,比如p,div,#a{ })

19、CSS中可以通过哪些属性定义,使得一个DOM元素不显示在浏览器可视范围内?**
**
最基本的:
设置display属性为none,或者设置visibility属性为hidden
技巧性:
设置宽高为0,设置透明度为0,设置z-index位置在-1000em

20、超链接访问过后hover样式就不出现的问题是什么?如何解决?**
**
被点击访问过的超链接样式不在具有
hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A(link,visited,hover,active)

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,776评论 1 91
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 1,914评论 0 8
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 2,953评论 1 19
  • 第一次画脑图的时候逻辑有点乱,不知道该按什么统一维度画。仔细琢磨了一下,决定以后核心功能模块尽量按显示和操作这两...
    草莓泡泡kitty阅读 398评论 3 0
  • 惊蛰一过,雨便如期而至,起初淅淅沥沥,断断续续,人仿佛在这一场阳光,一场春雨中略有快意,毕竟雨后空气更清新,花...
    骑蜗牛看风景阅读 82评论 0 0
  • 杨倩,焦点讲师三期,漯河,坚持分享301天,(2017-10-27) 每个人都希望被看到 ...
    温心怡然阅读 79评论 0 0
  • 时间轻轻把脉络改写,试管里萃取出的青葱色泽 ,,在漫长的消耗里腿去苍白与灰蒙。 旭日暖阳是你凝望的双眼,与时间对...
    慕妍清子阅读 86评论 0 0