问题来源：http://markyun.github.io/2015/Front-end-Developer-Questions/

1、Doctype作用？严格模式与混杂模式如何区分？它们有何意义?
答：告诉浏览器我们使用的是哪个版本的html协议（规范）。（对大小写不敏感）
严格模式中根据规范呈现页面；混杂模式中页面是一种比较宽松的向后兼容的方式显示。
（1）严格模式的HTML 4.0.1 strict
DTD包括所有的HTML元素和属性，不包括展示的和弃用的元素。不许框架集（Framesets）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
（2）混杂模式
DTD包括所有的HTML元素和属性，包括展示的和弃用的元素，以及框架集（Framesets）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
模式之间差异：最显著的一个例子与Windows上IE专有的盒模型有关
意义：DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

2、HTML5 为什么只需要写 <!DOCTYPE HTML>？
答：表示声明Html5标准网页，支持html5标准主流浏览器都认识这个声明。

3、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
答：行内元素：a-描点；em-强调；strong-粗体强调；span-定义文本内区块；i-斜体；img-图片；b-

粗体；label-表格标签；select-项目选择；textarea-多行文本输入框；sub-下标；sup-上标；q-短引

用
块元素：div-常用块；dl-定义列表；dt；dd；ul-非排序列表；li-排序列表；ol-排序表单；p-段落；

h1,h2,h3,h4,h5-标题；table-表格；form-表单
空元素：br-换行；hr-水平分隔线

4、页面导入样式时，使用link和@import有什么区别？
答：相同的地方，都是外部引用CSS方式，区别：
（1）link是xhtml标签，除了加载css外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载
CSS
（2）link引用CSS时候，页面载入时同时加载；@import需要在页面完全加载以后加载
（3）link是xhtml标签，无兼容问题；@import是在css2.1提出来的，低版本的浏览器不支持
（4）link支持使用javascript控制去改变样式，而@import不支持
最优化的@import url（style.css）最值得推荐，字节最优化，兼容的浏览器多。

5、介绍一下你对浏览器内核的理解？
答：主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和js引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网

页的显示方式，然后会输出至显示器或打印 机。浏览器的内核的不同对于网页的语法解释会有不同，

所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用

程序 都需要内核。
JS引擎则：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

6、常见的浏览器内核有哪些？
答;（1）Trident 微软的排版引擎 IE7修正许多CSS排版上的错误以及增加对PNG格式的支持：IE，The

World
（2）Geckos 开源的浏览器，:FireFox，seamonkey
（3）presto 渲染速度极速：opera7以上版本
（4）webkit 苹果公司的内核，包含webcore排版引擎和javascript解析引擎。：safari，chrome

7、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
答：新增加了图像、位置、存储、多任务等功能。
新增几大类：
(1)绘画 canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
(4)sessionStorage 的数据在浏览器关闭后自动删除;
(5)语意化更好的内容元素，比如 article、footer、header、nav、section;
(6)表单控件，calendar、date、time、email、url、search;
(7)新的技术webworker, websocket, Geolocation;
移除的元素：
（1）显示层元素：basefont，big，center，font，s，strike，tt，u
（2）性能较差元素：frame，frameset，noframes
处理HTML5新标签的浏览器兼容问题：
（1）IE8、7、6支持document方法产生的标签
（2）使用htmlshim框架
区分：
（1）doctype声明的方式是区分重要因素
（2）根据新增加的结构、功能来区分

8、简述一下你对HTML语义化的理解？
答：用正确的标签做正确的事情。根据内容结构化。选择合适的标签，便于开发者阅读和写出更优雅的

代码，同时让浏览器的爬虫进行解析。

9、HTML5的离线储存怎么使用，工作原理能不能解释一下？
答：所谓的离线存储就是将一些资源文件保存在本地，这样后续的页面加载将使用本地的资源文件，在

离线的情况下可以继续访问web应用。

原理：HTML5 的离线存储是基于一个新建的.appcache 文件的缓存机制（不是存储技术），通过这个文

件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。

10、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
答：（1）html5是使用一个manifest文件来标明那些文件是需要被存储，对于manifest文件，文件的

mime-type必须是text/cache-manifest类型。
（2）cache manifest下直接写需要缓存的文件，这里指明文件被缓存到浏览器本地；在network下指明

的文件，强制必须通过网络资源获取的；在failback下指明是一种失败的回调方案，比如无法访问，就

发出404.htm请求。

11、请描述一下 cookies，sessionStorage 和 localStorage 的区别？
答：共同点：都是保存在浏览器端，且是同源的。
区别：（1）cookies始终是http中携带，即cookie在浏览器和服务器间来回传递，而sessionstorage和

localstorage不会自动把数据发给服务器，仅在本地保存。
（2）存储大小的限制不同。cookie保存的数据很小，不能超过4k，而sessionstorage和localstorage

保存的数据大，可达到5M。
（3）数据的有效期不同。cookie只在设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭

。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效，窗口和浏览器关闭也一直保

存，用作长久数据保存。
（4）作用域不同。cookie在所有的同源窗口都是共享；sessionstorage不在不同的浏览器共享，即使

同一页面，localstorage在所有同源窗口都是共享的。

12、iframe框架有那些缺点？
答：优点：1.iframe能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的

更改，方便快捷。
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加

代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

缺点：（1）搜索引擎的“爬虫”程序无法解读这种页面。对于网站来说就是一种灾难
（2）框架结构让人感到迷茫，几个框架中出现各种滚动条。
（3）链接导航问题。使用框架结构时，保证设置正确的导航链接。
（4）iframe页面会增加服务器的http请求（基本上都用ajax来代替iframe）

13、Label的作用是什么?是怎么用的?(加 for 或 包裹)
答：Label 中有两个属性是非常有用的,一个是FOR、另外一个就是ACCESSKEY了。
FOR属性
功能：表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。
用法：<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">
ACCESSKEY属性：
功能：表示访问Label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。
用法：<Label FOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBox"

type="text">

14、HTML5的form如何关闭自动完成功能？
答：HTML的输入框可以拥有自动完成的功能，当你往输入框输入内容的时候，浏览器会从你以前的同名

输入框的历史记录中查找出类似的内容并列在输入框下面，这样就不用全部输入进去了，直接选择列表

中的项目就可以了。

但有时候我们希望关闭输入框的自动完成功能，例如当用户输入内容的时候，我们希望使用AJAX技术从

数据库搜索并列举而不是在用户的历史记录中搜索。

方法：1、在IE的internet选项菜单中里的内容--自动完成里面设置
2、设置form的autocomplete为on或者off来来开启输入框的自动完成功能。
3、设置输入框的autocomplete为on或者off来开启或者关闭输入框自动完成的功能。

15、如何实现浏览器内多个标签页之间的通信? (阿里)
答：WebSocket、SharedWorker;也可以调用 localstorge、cookies 等本地存储方式;localstorge 另

一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进

行页面信息通信;注意 quirks：Safari 在无痕模式下设置 localstorge 值时会抛出
QuotaExceededError 的异常;

16、webSocket如何兼容低浏览器？(阿里)
答：只是引用了WebSocket.js这个文件来兼容低版本浏览器。

17、页面可见性（Page Visibility）API 可以有哪些用途？
答：（1）通过visibilitystate的值得检测页面当前是否可见，以及打开网页的时间
（2）在页面被切换到其他后台进程时，自动暂停音乐或视频的播放。

18、如何在页面上实现一个圆形的可点击区域？
（1）map+area或者svg
（2）border-radius
（3）纯js实现，一个点不在圆上简单算法、获取鼠标坐标

19、实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一

效果。
<div style="height:1px;overflow:hidden;background:red"></div>

20、网页验证码是干嘛的，是为了解决什么安全问题？
答：（1）区分用户是计算机还是人的公共全自动程序。
（2）可以防止恶意破解密码、刷票、论坛灌水；可以有效防止黑客对某一个特定的注册用户用特定的

程序暴力破解进行不断的尝试。

21、tite与h1的区别、b与strong的区别、i与em的区别？
答：（1）title属性没有明确意义，只表示标题；h1表示层次明确的标题，对页面信息的抓取也有很大

的影响
（2）strong标明重点内容，语气加强含义；b是展示强调内容
（3）i是内容是斜体；em表示强调文本
注：自然样式标签：b，i，u，s
语义样式标签：strong，em，ins，del，code

Front End Developer Questions 前端开发人员问题（一）的更多相关文章

  1. Front End Developer Questions 前端开发人员问题（二）CSS 后续

    问题来源:http://markyun.github.io/2015/Front-end-Developer-Questions/ 31.视差滚动效果,如何给每页做不同的动画?(回到顶部,向下滑动要再 ...

  2. Front End Developer Questions 前端开发人员问题（二）

    问题来源:http://markyun.github.io/2015/Front-end-Developer-Questions/ 二.CSS 1.介绍一下标准的CSS的盒子模型?与低版本IE的盒子模 ...

  3. Front End Developer Questions 前端开发人员问题（三）JavaScript部分

    问题来源:http://markyun.github.io/2015/Front-end-Developer-Questions/ 三.javascript1.介绍JavaScript的基本数据类型. ...

  4. Front End Developer Questions

    Front End Developer Questions 感谢大神分享- 目录 前言 HTML部分 CSS部分 JavaScript部分 其他问题 前端学习网站推荐 前言 前言 HTML Docty ...

  5. Web前端开发人员实用Chrome插件收集

    越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录后你所有的插件都会自动同步到每一个登录 ...

  6. 10款让WEB前端开发人员更轻松的实用工具

    这篇文章介绍10款让Web前端开发人员生活更轻松的实用工具.每个Web开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具,所以如 ...

  7. WEB前端开发人员须知的常见浏览器兼容问题及解决技巧

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...

  8. Web 前端开发人员和设计师必读文章推荐【系列二十八】

    <Web 前端开发精华文章推荐>2014年第7期(总第28期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  9. Web 前端开发人员和设计师必读精华文章【系列二十六】

    <Web 前端开发精华文章推荐>2014年第5期(总第26期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

随机推荐

  1. 线程处理模型 由于 SynchronizationContext 引起的死锁问题解决

    由于GUI 应用程序 不能使用线程池的线程更新UI,只能使用 GUI 线程更新,所以在 await 前后需要保证是同一个 GUI 线程 ASP.NET 程序 的线程处理客户端请求的时候,需要假定客户端 ...

  2. tomcat相关

    一.下面这篇文章介绍了tomcat log相关内容 http://blog.csdn.net/cowmich/article/details/8173005

  3. Ajax的二次封装

    function handleAjax(url,_data,method) { return ajax(url,_data,method).then(function (res) { if(res){ ...

  4. PHP基础知识之魔术方法

    __construct(), __destruct(), __call(), __callStatic(), __get(), __set(), __isset(), __unset(), __sle ...

  5. Information Management Policy(信息管理策略)的使用范例

    基础知识 很多人都会定期收拾自己的书架或者抽屉,把里面过旧的资料拿走,为新的资料腾出空间来,这样既可以节省空间,而且当冗余资料过多的时候也会降低你查找的速度和效率.那么,在企业的SharePoint中 ...

  6. JPEG文件结构

    JPEG文件由八个部分组成,每个部分的标记字节为两个,首字节固定为:0xFF,当然,准许在其前面再填充多个0xFF,以最后一个为准.下面为各部分的名称和第二个标记字节的数值,用ultraedit的16 ...

  7. SQL Server null知多少？

    null是什么? 不知道.我是说,他的意思就是不知道(unknown). 它和true.false组成谓词的三个逻辑值,代表“未知”.与true和false相比,null最难以令人捉摸,因为它没有明确 ...

  8. ASP.NET MVC 路由(一)

    ASP.NET MVC路由(一) 前言 从这一章开始,我们即将进入MVC的世界,在学习MVC的过程中在网上搜索了一下,资料还是蛮多的,只不过对于我这样的初学者来看还是有点难度,自己就想看到有一篇引导性 ...

  9. EF：自定义Oracle的映射类型

    oracle在DB First模式下,int类型的字段会自动映射为decmial类型的属性. 我们可以通过自定义类型映射进行“纠整”. 在app.config 自定义映射规则: <oracle. ...

  10. 《第一本docker书》—— 读后总结

    关于docker 这本书其实并没有读完,只不过最近工作比较繁忙,也无心再看这些用不到的书.以后要是工作需要,再仔细学习吧. 这次的阅读算是达到目的了,对docker有了一定的了解.它的作用.意义以及大 ...