HTML
- Doctype作用？严格模式与混杂模式如何区分？它们有何意义?
- HTML5 为什么只需要写 <!DOCTYPE HTML>？
- 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
- 行内元素(行内元素默认不会从新行开始，而块级元素会新起一行):b,big,i,small,tt;abbr,acronym,cite,code,dfn,em,kbd,strong,samp,var;a,bdo,br,img,map,object,q,script,span,sub,sup;button,input,label,select,textarea
- 块儿元素：h5：figcaption,article,figure,aside,output,footer,audio,section,canvas,header,hgroup,video;address,blockquote,dd,div,dl,fieldset,form,h1,h3,h6,hr,noscript,ol,p,pre,table,tfoot,ul。
- 空(void)元素(没有内容的元素)：br，hr，input,img,link,meta；area,base,col,command,embed,keygen,param,source,track,wbr
- 页面导入样式时，使用link和@import有什么区别
- link属于xhtml标签，除了家在css外，还能用于定义rss定义rel连接属性等作用；@import是css提供的，只能用于加载css；
- 页面被加载时，link会同时被加载，@import引用的css会等到页面加载完再加载；
- @import是css2.1提出，ie5以上，link是xhtml标签，无兼容问题。
- 介绍一下你对浏览器内核的理解？答案
- 主要氛围两部分：渲染引擎(Render Engine)和JS引擎
- 渲染引擎(Render Engine)：负责取得网页的内容(html,xml和图像等)，整理讯息(例如假如css)，以及计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。所有网页浏览器、电子邮件客户端以及它需要编辑、显示网络内容的应用程序都需要内核。
- JS引擎：解析和执行JavaScript来实现网页的动态效果。
- 常见的浏览器内核有哪些？
- Trident内核：IE，360，搜过浏览器；
- Gecko内核：Netscape6及以上版本
- Presto内核：Opera
- Blink内核：Opera
- Webkit内核：Safari，Chrome
- html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？h5标签
- 新特性：图像，位置，存储，多任务等，例如canvas,video,audio,localStorage，sessionStorage.
- 语意化更好的内容元素：article,footer,header,nav,section
- 表单：calendar，date，time，email，url，search
- 新技术：Websockt，Webworker，Geolocation
- 简述一下你对HTML语义化的理解？ 答案
- 根据内容的结构化，选择合适的标签，便于开发者阅读和写出更优雅的代码，让浏览器的爬虫和机器很好地解析。
- 在没有css的情况下，页面也可以呈现出很好地内容结构、代码结构
- 有利于SEO：有利于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各关键字的权重；
- 方便其他设备解析(屏幕阅读器，盲人阅读器，移动设备)以意义的方式来渲染网页
- 便于团队开发和维护，语义化更具可读性
- HTML5的离线储存怎么使用，工作原理能不能解释一下？
- 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
- 在线情况下，浏览器发现html头部manifest属性，会请求manifest文件，如果是第一次，浏览器根据文件内容下载对应的资源并且进行离线缓存，如果已经访问过app并且资源文件已经离线存储。浏览器使用离线资源加载页面，然后浏览器对比新旧manifest文件，如果改变，重新下载文件中的资源并进行离线缓存。离线时间直接使用离线存储的资源
- 请描述一下 cookies，sessionStorage 和 localStorage 的区别？
- localStorage是h5标准中新加入的技术 答案
| 特性 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 数据的生命周期 | 可以设置失效时间，默认是关闭浏览器后失效 | 除非清除缓存否则永久保存 | 仅在当前会话下有效，关闭页面或浏览器会被清除 |
| 存放数据大小 | 4K左右 | 一般为5MB | 一般为5MB |
| 与服务器端通信 | 每次都会携带在http头中，使用cookie保存过多数据会带来性能问题 | 仅在客户端中保存，不参与服务器通信 | 仅在客户端中保存，不参与服务器通信 |
| 易用性 | 需要开发人员自己封装，原生的Cookie借口不友好 | 原生接口可以接受，亦可以再次封装来更好的支持Object和Array |
- iframe有那些缺点？
- 链接
- 优点
- iframe能够原封不动地把嵌入的网页展现出来
- 如果有多个网页调用iframe，只需要修改iframe的内容，就可以实现对调用iframe的每一个页面内容的更改，方便快捷
- 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用性。
- 如果遇到加载缓慢的第三方内容，如图标和广告等，可以用iframe来解决。
- 缺点
- 会产生很多页面，不容易管理
- 在几个框架中都出现上下、左右滚动条时，这些滚动条除了会挤占已经非常有限的页面空间外，还会分散访问者的注意力。
- 使用框架结构时，必须保证正确设置所有的导航链接，否则会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内，这种情况下会导致链接死循环。
- 很多的移动设备（PDA手机）无法完全显示框架，设备兼容性差。
- iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
- 现在基本上都是用Ajax来代替iframe，iframe已渐渐退出了前端开发。
- Label的作用是什么？是怎么用的？（加 for 或 包裹）
- 元素定义标注（标记）。 label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。
- HTML5的form如何关闭自动完成功能？
<form autocomplete="on|off">
- 如何实现浏览器内多个标签页之间的通信? (阿里)
- cookie
- 客户端和服务器端都会请求服务器，性能下降
- 存储限制4kb
- 页面的cookie是共享的
- storage:只在客户端使用，不会请求服务器处理，存储量比较大，只能存储字符串，非字符串会被转成字符串
- sessionStorage：临时性的，页面打开有关闭则没有，数据不共享
- localStorage：永久性的存储，数据共享
- api：clear()，getItem,key(index),removeItem (name),setItem(name,value)
- cookie
- webSocket如何兼容低浏览器？(阿里)
- (WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。在浏览器中通过http仅能实现单向的通信,comet可以一定程度上模拟双向通信,但效率较低,并需要服务器有较好的支持; flash中的socket和xmlsocket可以实现真正的双向通信,通过 flex ajax bridge,可以在javascript中使用这两项功能. 可以预见,如果websocket一旦在浏览器中得到实现,将会替代上面两项技术,得到广泛的使用.) WebSocket是目前"唯一"的一个浏览器下的Socket的标准, 它是通过浏览器内部提供的API来实现访问的. 低版本的浏览器没有WebSocket这个标准, 就意味这些浏览器不允许用户通过它们来实现Socket通讯. 解决兼容性的办法就是准备一套Ajax + Server-side Script的后备方案. 比如Ajax + PHP Socket. 其他方案:Adobe Flash Socket 、ActiveX HTMLFile (IE) 、基于 multipart 编码 发送 XHR 、基于长轮询的 XHR. 作者： 熠熠生阳 链接：http://www.imooc.com/article/details/id/10377 来源：慕课网 本文原创发布于慕课网 ，转载请注明出处，谢谢合作！
- 页面可见性（Page Visibility）API 可以有哪些用途？
- 如何在页面上实现一个圆形的可点击区域？
- map+Area/svg，boder-radius,js 19.实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。
<div style="height:1px;overflow:hidden;background:black"></div>
- map+Area/svg，boder-radius,js 19.实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。
- 网页验证码是干嘛的，是为了解决什么安全问题？
- 减少非正常的请求，保护用户权益，例如暴力破解用户密码，脚本登陆，频繁使用涉及后台性能平静的功能。
- tite与h1的区别、b与strong的区别、i与em的区别？
CSS
-
介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
- 标准css盒子的宽度指的是内容区content的宽度，IE css盒子模型的宽指的是内容区宽+填充宽+边界宽。
-
CSS选择符有哪些？哪些属性可以继承？博客
- 类选择器，id选择器，伪类选择器，属性选择器，类型选择器
- 是否可以继承
- 所有元素可以继承：visibility和cursor
- 内联元素可以继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
- 终端块状元素可继承：text-indent和text-align。
- 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image
- 不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
-
CSS优先级算法如何计算？
- 第一等：内联样式，权值为1000
- 第二等：代表ID选择器，权值100
- 第三等：类，伪类，属性选择器，权值10
- 第四等：类型选择器和伪元素选择器，权值为1
- 通用选择器，子选择器，相邻同胞选择器权值为0
-
CSS3新增伪类有那些？