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,新页面获取后设置。