钱端常见面试问题一
1 Doctype作用？标准模式与兼容模式各有什么区别？
（1）<!Doctype> 声明位于HTML文档中的第一行，处于<html>标签之前。告知浏览器用什么文档标准解析这个文档。Doctype不存在或格式不正确会导致文档以兼容模式呈现。
（2）标准模式的排版，和js运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器行为以防止站点无法工作。
2 HTML5为什么只需要写<!Doctype HTML>?
html5 不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器行为（让浏览器按照它们应该的方式的方式来运行）；
而HTML4.01 基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的的文档类型
3 行内元素有哪些？块级元素有哪些？空（VOid）元素有哪些？
首先：css规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性为inline 是行内元素。
行内元素有 ： a b span img input select strong
块级元素有：div ul ol li dl dt dl dd h1 h2 h3 h4 h5 h6 p
常见的空元素：<br> <hr> <img> <input> <link> <meta>
鲜为人知的是：<area> <base> <col> <command> <embed> <keygen> <param> <source> <trackk> <wbr>
4 页面导入样式模式时，使用link和@import有什么区别？
（1）link属于XHTML标签，除了加载css外，还能用于定义Rss，定义rel链接属性等作用；而@import是css提供的，只能用于加载css；
（2）页面被加载的时候，link会同时被加载，而@import引用的css会等到页面被加载完再加载；
（3）@import是css2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题
5 介绍一下你对浏览器内核的理解？
主要分成两个部分：渲染引擎（layout engineer 或 Rendering Engine）和js引擎。
渲染引擎：负责取得网页的内容（HTML xml 图像等等），整理讯息（例如加入了css等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。所有网页浏览器，电子邮件客户端以及其他需要编辑，显示网络内容的应用程序都需要内核。
js引擎则：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和js引擎并没有区分的很明确，后来js引擎越来越独立，内核就倾向于只指渲染引擎。
6 常见的浏览器内核有哪些？
Trident 内核：IE，maxthon，TT，The World ，360 ，搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF，MozillaSuite/SeaMonkey等
presto内核：opera7及以上 [ opera 内核原为 ：presto 现为：Blink ]
Webkit内核：Safari，Chorome等。 [ chrome的：blink（WebKit 的分支） ]
7 html有哪些新特性，移除了哪些元素？如何处理HTML5 新标签的浏览器兼容问题？如何区分HTML和HTML5？
html5 现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。
(1)绘画canvas；(2)用于媒介的回放的 video 和audio 元素；(3)本地离线存储localStorage 长期存储数据，浏览器关闭后数据丢失；
(4)sessionStorage 的数据在浏览器关闭后自动删除；
(5)语义化更好的内容元素，比如article ， footer ，header ，nav ，section；
(6)表单控件，calendar ，data ，time ，email ，url ，search；
(7)新的技术webworker ，websocket， Geolocation；
(8)移除的元素：纯表现的元素 basefont ，big ，center ，font ，s ，strike ，tt ，u； 对可用性产生负面的元素：frame，frameset，noframes；
支持HTML5新标签：IE8/ IE7/IE6支持通过 document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持这些HTML5新标签，浏览器支持这些标签以后还要添加标签默认样式。当然也可以使用成熟的框架 比如html5shim
<--![if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js" </script> <![end if]-->
8 简述一下你对HTML语义化的理解？
用正确的标准做正确的事情。HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析；即使在没有样式css情况下也以一种文档格式显示，并且容易阅读的；
搜索引擎的爬虫也也依耐于HTML标记来确定上下文和各个关键字的权重，利用SEO；使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
9 HTML5的离线存储怎么使用，工作原理能不能解释一下？
在用户没有与英特网链接时，可以正常访问站点或应用，在用户与英特网链接时，更新用户机器上的缓存文件。
原理：HTML5离线存储是基于一个新建的，.appcache文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会向cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示
如何使用: 1页面头部像下面一样加入一个manifest的属性； 2 在cache.manifest文件的编写离线存储的资源；3 在离线状态时操作 window.applicationCache进行需求实现。
10 浏览器是怎样对HTML5的离线储存资源进行管理和加载的呢？
在线的情况下，浏览器发现HTML头部都有manifest属性，它会请求manifest文件的内容，如果第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不会发生改变，就不做任何操作，如果文件改变了那么就会重新下载文件中的资源并进行离线存储。离线的情况下，浏览器就会直接使用离线存储的资源。
11 请描述一下cookies，sessionStorage和localStorage的区别？
cookie是网站为了提示用户身份而储存在用户本地终端（client side ）上的数据（通常经过加密）
cookie数据始终在同源的http请求中携带（即使不需要）任会在浏览器和服务器来回传递。sessionStorage 和 localStorage不会自动把数据分发给服务器，仅在本地保存。
存储大小：
cookie数据大小不能超过4K。
sessionStorage和localStorage虽然也有存储大小限制但是比cookie大得多，可以达到5M或则更大
有限时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 根据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一致有效，即使窗口或浏览器关闭
12 iframe有哪些确点？
iframe 会阻塞主页页面的onload事件
搜素引擎的检索程序无法解读这种页面，不利于SEO；
iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前 需要考虑这两个确点，如果需要使用iframe最好是通过javascript 动态给iframe添加src属性值，这样可以绕开以上两个问题、
14 label的作用是什么?是怎么用的？
label 标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上
<label for="Name">Number:</label>
<input type ="text" name = "Name" id="Name">
<label>Date:<input type="text" name="B"/></label>
15 html5 如何关闭自动完成功能？
给不想要提示的form 或某个 input 设置为autocomplete=off。
16 如何实现浏览器内多个标签页面之间的通信？
也可以调用localStorage cookie等本地存储方式；
localStorage另一个浏览上下文里面添加 修改 或则删除时，它会触发一个事件 我们通过监听事件，控制它的值来进行页面之间的通信
注意 quirks：Safari 在无痕模式下设置localStorage值时会抛出QutaExceededError的异常
17 webSocket 如何兼容低的浏览器
Adobe flash socket，Activex HTMLFILe（IE），基于multipart 编码发送 XHR 基于长轮询的XHR
18 页面的可见性（page Visibility API）有哪些用途？
通过 visibilitystate 的值检测页面当前是否可见，以及打开网页的时间等；在页面被切换到其他后台进程的时候，自动暂停音乐或视屏的播放；
19 如何在一个页面上实现一个原型可点击的区域？
1 map+area或则svg 2 border-radius 3 纯js实现 需要求一个点不在圆上的简单算法，获取鼠标坐标等等
20 实现不使用border画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果
<div styele=" height:1px;overflow:hidden;background:red"></div>
21 网页验证码是干嘛的，是为了解决什么安全问题。
区分用户是计算机还是人的公共全自动程序，可以防止恶意破解密码，刷票 论坛灌水；
有效防止黑客对某一注册用户用特定的程序暴力破解方式不断尝试登陆
22 title与h1 的区别 b 与strong的区别 i与em的区别？
title属性没有明确的意义只是表示是个标题，h1则表示层次明确的标题，对页面信息的抓取也有很大的影响
strong是表明重点内容，有语气加强的含义，使阅读设备阅读网络时<strong>会重读而<b>是展示强调内容
i内容为展示位斜体 em表示强调文本
23 介绍一下标准的css的盒子模型？低版本的IE的盒子模型有什么不同的？
1）有两种 IE盒子模型 w3c标准模型
2）盒模型：内容（content），填充（padding），边界（margin），边框（border）；
3）区别 IE盒模型的content部分 包括border 和content
24 css选择符有哪些？哪些属性是可以继承的？
1） id选择器（#id）
2）类选择器（.myclass）
3） 标签选择器（div h1 p）
4）相邻选择器（h1 + P）
5）子代选择器（ul > li）
6)后代选择器（li a）
7）通配符选择器（*）
8）属性选择器（a[ rel = " external " ]）
9)伪类选择器（a：hover，li：nth-child）
可继承的样式： font-size font-family color ul li dl dd dt
不可继承的样式：border padding margin width height
25 css优先级算法如何计算？
优先级就近原则，同权重情况下样式定义最近者为准 样式载入最后载入的定位为准
优先级为： ！important >id > class > tag important 比内联优先级高
26 css3新增加的伪类的选择器？
:first-of-type :last-of-type :only-of-type :only-child :nth-child() :after :before :enabled :disabled :checked
27 display有哪些值？说明他们的作用？
block：像块类型元素显示
none：缺省值，像行内元素类型一样显示
inline-block 象行内元素一样显示，但其内容向像块级元素一样显示
list-item：象块内元素一样显示，并添加样式列表标记
table：此元素会作为块级表格来显示
inherit ：来规定应该从父集元素继承display属性的值
28 position的值 relative 和absolute 定位原点是？
absolute：生成绝对定位的元素，相对于值不为static的第一父元素进行定位。
fixed（老IE不支持）生成绝对定位的元素，相对于流浏览器窗口进行定位
relative 生成相对定位的元素，相对于其正常位置进行定位
static 默认值没有定位元素出现在正常的流中（忽略 top bottom left right z-index 声明 ）
inherit 规定从父元素继承 position 属性的值
29 css3有哪些新特性？
1）新增加了各种css选择器
2）圆角 （border-radius：8px）
3）多列布局 （multi-column layout）
4）阴影和反射（shadow /Reflect）
5）文字特效（text-shadow）
6）文字渲染（text-decoration）
7）线性渐变（gradient）
8）旋转 （transform） 增加了旋转，缩放，定位，倾斜，动画，多背景
30 用纯css创建一个三角形的原理是什么？
把上，左，右，三条边隐藏（颜色为transparent）
#demo{ width：0； height：0； border-width：20px； border-style：solid； border-color：transparent transparent red transparent； }
31 经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？
）pnng位图片在IE6浏览器上出现背景，解决方案是做成PNG8
