问题来源：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. *HDU 1398 母函数

    Square Coins Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tota ...

  2. jquery插入复杂表格，合并行列

    此方法为个人测试所写,针对各种兼容性问题还未测试,初写的目的是easyui复杂表头有些缺陷,比如某个表头合并两列, 在easyui中这样操作无法绑定两个值 或者说我没找到 再或者 可以做个隐藏 数据列 ...

  3. 【实战Java高并发程序设计 5】让普通变量也享受原子操作

    [实战Java高并发程序设计 1]Java中的指针:Unsafe类 [实战Java高并发程序设计 2]无锁的对象引用:AtomicReference [实战Java高并发程序设计 3]带有时间戳的对象 ...

  4. 一步步学习javascript基础篇（4）：面向对象设计之创建对象（工厂、原型和构造函数等模式）

    前面我们介绍了可以通过Object构造函数或对象字面量都可以用来创建单个对象,但是如果需要创建多个对象的话,显然很多冗余代码. 接下来介绍几种模式来创建对象.不过在此之前,我们还是先来了解下 type ...

  5. [译]MVC网站教程（二）：异常管理

    介绍 “MVC网站教程”系列的目的是教你如何使用 ASP.NET MVC 创建一个基本的.可扩展的网站. 1)   MVC网站教程(一):多语言网站框架 2)   MVC网站教程(二):异常管理 3) ...

  6. 软件工程(QLGY2015)博客点评总结

    目录 第一次作业(2015.5.9) 第二次作业(2015.5.21) 第三次作业(2015.6.11) 2015上半年软工助教总结 第一次作业(2015.5.9) 存在主要问题 1)书写这种练习博客 ...

  7. Docker：Ubuntu下的安装

    Docker是什么 Docker 是 Docker.Inc 公司开源的一个基于 LXC技术之上构建的Container容器引擎, 源代码托 管在 GitHub 上, 基于Go语言并遵从Apache2. ...

  8. ASP.net 常用服务器控件

    新人初学,有错请指,大神轻喷. .net中有HTML控件和标准服务器控件. 老师教学用的是vs2010是这样分的,不知道15里是不是这样. 如果使用HTML控件我们就会发现页面中加载了原本HTML代码 ...

  9. Go 作用

    Go语句的作用是表示一个batch(多条Tsql命令)的结束,并向sql server 提交batch,由于局部变量的作用域是基于batch的,所以,go语句限制局部变量的作用域在一个batch中. ...

  10. Sql Server系列：数据控制语句

    数据控制语句用来设置.更改用户或角色的权限,包括GRANT.DENY.REVOKE等语句. GRANT用来对用户授予权限,REVOKE可用于删除已授权的权限,DENY用于防止主体通过GRANT获得特定 ...