HTML

Doctype作用？标准模式与兼容模式各有什么区别？

1、<!DOCTYPE>声明位于HTML文档中的第一行，处于<html>标签之前，告知浏览器的解析器用什么文档标准解析。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
2、标准模式的排版和JS运行模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。

HTML5为什么只需要写<!DOCTYPE HTML>？

HTML5不基于SGML(标准通用标记语言)，因此不需要对DTD(文档类型定义)进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）
HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

首先：CSS规范规定，每个元素都有display属性，确定钙元素的类型，每个元素都有默认的display值，如div的display默认值为block，都是块级元素；span默认display属性值为inline，是行内元素。
1、行内元素：a、b、span、img、input、select、strong（强调的语气）
2、块级元素：div、ul、ol、li、dl、dt、dd、h1、h2、h3、h4、p
3、常见的空元素：br、hr、img、input、link、meta
不常用的空元素：area、base、col、command、embed、keygen、param、source、track、wbr

页面导入样式时，使用link和@import有什么区别？

1、link属于XHTML标签，除了加载CSS外，还能用于定义RSS，定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS。
2、页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。
3、import是CSS2.1提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。
4、link支持使用JS控制DOM改变样式，而@import不支持。

浏览器渲染页面的过程

window.onload和DOMContentLoaded的区别

介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎（layout或engine）和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等）、整理信息（加入CSS等），以及计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核。
JS引擎：解析和执行JS来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分额很明确，后来JS引擎越来越独立，内核就倾向于只是指渲染引擎。

常见的浏览器内核有哪些？

Trident内核：IE，MaxThon，TT，The World，360，搜狗浏览器等[MSHTML]
Gecko内核：Netscape6及以上版本，FF，MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上[Opera内核原为：Presto，现为：Blink]
Webkit内核：Safari，Chrome等[Chrome：Blink（Webkit的分支）]

简述一下你对HTML语义化的理解？

语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析
没有CSS样式也能正常阅读文档
搜索引擎的爬虫依赖HTML标记来确定上下文和各个关键字的权重，有利于SEO

iframe有哪些缺点？

iframe会阻塞主页面的onload事件
搜索引擎的检索程序无法解读这种页面，不利于SEO
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
使用iframe之前需要考虑两个缺点。如果需要使用iframe，最好是通过JS
动态给iframe添加src属性值，可以绕开以上两个问题。

label的作用是什么？怎么用？

label标签定义表单控件间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

<label for="Name">Number:</label>
<input type="text" name="Name" id="Name">

页面可见性可以有哪些用途？

通过visibilityState的值检测页面当前是否可见，以及打开页面的时间等
在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放

如何在页面上实现一个圆形的可点击区域？

1、map+area或者SVG
2、border-radius
3、纯JS实现，需要求一个点在不在圆上简单算法、获取鼠标坐标等

实现不使用border画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。

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

列举IE与其他浏览器不同的特性？

事件：触发事件的元素被认为是目标（target）。在IE中，目标包含在event对象的SRCElement属性；

获取字符代码：如果按键代表一个字符（shift、Ctrl、Alt除外），IE的keyCode会返回字符代码unicode，DOM中按键的代码和字符是分离的，要获取字符代码，需要使用charCode属性；

阻止某个事件的默认行为：IE中阻止某个事件的默认行为，必须将returnValue属性设置为false，火狐浏览器中需要调用preventDefault()方法。

停止事件冒泡，IE中阻止事件进一步冒泡，需要设置cancelBubble为true，火狐中需要调用stopPropagation()。

解析一下优雅降级和渐进增强？

优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是旧式浏览器，则代码会针对旧版本的IE进行降级处理，使之在旧式浏览器上以某种形式降级体验而不至于完全不能使用。
例如：border-shadow

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新版本浏览器才支持的功能，向页面增加不影响基础浏览器的额外样式和功能。当浏览器支持时，它们会自定地呈现出来并发挥作用。
例如：默认使用flash上传，但如果浏览器支持HTML5的文件上传功能，则使用HTML5实现更好的体验。

对web标准以及W3C的理解与认识

xhtml和html有什么区别

写出几种IE6 bug的解决方法