前端面试总结(六)

1.每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗?

<!DOCTYPE>声明位于文档中的最前面的位置,处于?<html>?标签之前。此标签可告知浏览器文档使用哪种?HTML?或?XHTML?规范。(重点:告诉浏览器按照何种规范解析页面)
Doctype的作用?严格模式与混杂模式的区别?
<!DOCTYPE>用于告知浏览器该以何种模式来渲染文档
严格模式下:页面排版及JS解析是以该浏览器支持的最高标准来执行
混杂模式:不严格按照标准执行,主要用来兼容旧的浏览器,向后兼容

2.如何在一个宽高都100%的div中,居中(上下左右都居中)一个宽高都是200px的div?写出具体的css和html

<style>
    *{
       padding:0;
        margin:0;
     }
     html,body{
         width:100%;
         height:100%;
     }
     .box{
         width:100%;
         height:100%;
         border:1px solid;
         position: relative;
     }
     .div{
         position: absolute;
         left:50%;
         top:50%;
         margin-left: -100px;
         margin-top: -100px;
         width:200px;
         height:200px;
         background:red;
     }
</style>
<body>
    <div class="box">
        <div class="div"></div>
    </div> 
</body>

3.对WEB标准以及W3C的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维 护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

4.iframe有那些缺点?

1.会产生很多页面,不容易管理。

2.iframe框架结构有时会让人感到迷惑,如果框架个数多的话,可能会出现上下、左右滚动条,会分散访问者的注意力,用户体验度差。

3.代码复杂,无法被一些搜索引擎索引到,这一点很关键,现在的搜索引擎爬虫还不能很好的处理iframe中的内容,所以使用iframe会不利于搜索引擎优化。

4.很多的移动设备(PDA 手机)无法完全显示框架,设备兼容性差。

5.iframe框架页面会增加服务器的http请求,对于大型网站是不可取的。
分析了这么多,现在基本上都是用Ajax来代替iframe,所以iframe已经渐渐的退出了前端开发

5.iframe如何跨域通信

iframe两个网页不同源,就无法拿到对方的DOM。但是如果两个窗口一级域名相同,只是二级域名不同,那么设置document.domain属性,就可以规避同源政策,拿到DOM实现跨域通信。

6.Utf-8和gbk/gb2312各有什么优劣。

GBK是国家标准GB2312基础上扩容后兼容GB2312的标准。GBK的文字编码是用双字节来表示的,通用性比UTF8差。UTF-8:是用以解决国际上字符的一种多字节编码,它对英文使用8位(即一个字节),中文使用24为(三个字节)来编码。UTF-8包含全世界所有国家需要用到的字符,是国际编码,通用性强。UTF-8版本虽然具有良好的国际兼容性,但中文需要比GBK版本多占用50%的数据库存储空间。

7.html有那些新特性?如何处理html新标签的浏览器问题?如何区分html和html5?

新特性:
1.新的文档类型
2.脚本和链接无需type
3.语义Header和Footer
4.Hgroup
5.标记元素
6.图形元素
7.重新定义<small>
8.占位符
9.必要属性
10.Autofocus 属性
11.Audio 支持
12.Video 支持
13.视频预载
14.显示控制条
15.正规表达式
区分:

1.IE8/IE7/IE6支持通过document.方法产生的标签,利用这一特性让这些浏览器支持HTML5新标签。
2.使用是html5shim框架
另外,DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素,此外,还可以根据新增的结构、功能元素来加以区分。

8.html5允许我们自己控制那些文件需要缓存,哪些不需要
1、首先给html添加manifest属性,并赋值为cache.manifest
2、cache.manifest的内容为:

 CACHE MANIFEST 
          #v1.2  
          CACHE :           //表示需要缓存的文件  
          a.js  
          b.js       
          NETWORK:    //表示只在用户在线的时候才需要的文件,不会缓存         
          c.js  
          FALLBACK 
 /        /index.html     //表示如果找不到第一个资源就用第二个资源代替

9.如何处理HTML5新标签的浏览器兼容问题?

当在页面中使用Html5新标签时,可能会得到三种不同的结果:
1)结果1:新标签被当作错误处理并被忽略,在DOM构建时会当作这个标签不存在。
2)结果2:新标签被当作错误处理,并在DOM构建时,这个新标签会被构造成行内元素。
3)结果3:新标签被识别为HTML5标签,然后用DOM节点对其进行替换。

不能识别HTML5新标签而不能使用,解决办法有两种:
1)方法1:实现标签被识别
通过document.createElement(tagName)方法即可让浏览器识别新标签,浏览器支持新标签后,还可以为新标签添加CSS样式。

2)方法2:JavaScript解决方案
a)使用html5shim:
在<head>中调用以下代码:
`

`
当然也可以直接把这个文件下载到自己的网站上,但这个文件必须在head标签中调用。

b)使用kill IE6
在</body>之前调用以下代码:
`

`

10.实现多个页面之间进行通信

使用cookie,使用web worker,使用localeStorage和sessionStorage

cookie,兼容性很好,但是大概4kb.同时,cookie可以永久存在,也可以再回话结束后结束。要就关闭标签页回话立即结束时,不要用cookie,因为它还很有可能会存在一段时间,即使是session-cookie。

用户在浏览器输入url,发送请求,服务器接受请求
服务器在响应报文中生成一个Set-Cookie报头,发给客户端
浏览器取出响应中Set-Cookie中内容,以cookie.txt形式保存在客户端
如果浏览器继续发送请求,浏览器会在硬盘中找到cookie文件,产生Cookie报头,与HTTP请求一起发送.
服务器接受含Cookie报头的请求,处理其中的cookie信息,找到对应资源给客户端.
浏览器每一次请求都会包含已有的cookie.

Sessionstorage:不支持跨标签页共享数据。比如,每次新开启一个标签页都要求用户重新登录。

Localstorage:此处作者用localstorage事件来解决这个问题。思路:当打开一个新的标签页的时候,先询问是否有sessionstorage。如果有,现有标签页通过localstorage事件向新页面传递sessionstorage,新页面获取后设置。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,948评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,371评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,490评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,521评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,627评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,842评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,997评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,741评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,203评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,339评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,955评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2 349

推荐阅读更多精彩内容