转载自 前端面试常考系列二
一、外部引用CSS有几种方式，有何区别
外部引用CSS的方式有两种分别是link和@import。
区别如下：
1、link是XHTML标签，除了加载CSS外，还可以定义RSS等其它事务；@import属于CSS范畴，只能加载CSS。
2、link引用CSS时，在页面载入时同时加载；@import引用CSS时，需要页面完全载入以后加载。
3、link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4、link支持使用Javascript控制DOM去改变样式；而@import不支持。
二、介绍一下data-*属性
data-*为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过getAttribute方法获取。
需要注意的是：data-*之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。
三、如何在页面上实现一个圆形的可点击区域
1、设置div的border-radius:50%。
2、<img>通过usemap映射到<map>的circle形<area>。
3、JS实现，获取鼠标点击位置坐标，判断坐标到圆点的距离是否不大于圆的半径，来判断点击位置是否在圆内。
四、SVG是什么，有哪些特点
SVG是什么：SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML，用于描述二维矢量图形的一种图形格式。 SVG是W3C在2000年8月制定的一种新的二维矢量图形格式，2003年1月14日成为W3C推荐标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，是一种和图像分辨率无关的矢量图形格式。
(1)可伸缩性：可以在不影响清晰度的情况下，任意缩放图像显示。
(2)文本独立：SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。
(3)较小文件：SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强，上传下载速度比较快。
(4)超强显示效果：SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。
(5)超级颜色控制：SVG图像提供了一个1600万种颜色的调色板，支持ICC颜色描述文件标准、RGB、渐变和蒙版。
(6)交互性和动态性：由于网络是动态的媒体，SVG要成为网络图像格式，必须要具有动态的特征，这也是区别于其它图像格式的一个重要特征。你可以在SVG文件中嵌入动画元素(如运动路径、渐现或渐隐效果、生长的物体、收缩、快速旋转、改变颜色等)，或通过脚本定义来达到高亮显示、声音、动画等效果。
五、介绍一下超链接target的属性
<a> 标签的 target 属性规定在何处打开链接文档。
一个<a>标签内如果包含一个target属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，并给新窗口一个指定的标记，然后将新的文档载入新窗口。从此以后，超链接文档就可以指向这个新的窗口。
参数值主要有：
1、_blank：浏览器总在一个新打开、未命名的窗口中载入目标文档。
2、_parent：这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
3、_self ：这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。
4、_top ：这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
六、介绍一下浏览器内核
浏览器内核主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎的功能是解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和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的分支）]
八、iframe有那些缺点
1、产生页面多，管理不方便。
2、浏览器的退后按钮失效。
3、框架过多导致服务器的HTTP请求增加。
4、小型移动端无法显示整个框架。
5、打印困难。
6、代码复杂，一些搜索引擎无法索引。
九、介绍一下label的作用
label往往出现在表单中，在表单中用label标签是为了提高用户体验。Label标签定义了表单控制间的关系。用户选择该标签时，和标签相关的表单控件自动获取焦点。
十、浏览器内多个标签页之间的通信如何实现
localStorage在一个标签页里面使用localStorage.setItem编辑内容；在另一个标签页里面监听storage事件，即可实现不同标签页之间的通信。
cookie+setInterval()将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。
十一、title与h3、b与strong、i与em有什么区别
title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响。
<b>标签对应 bold，即文本加粗，<strong>标签意思是加强字符的语气，表示该文本比较重要，为了标明重点而加粗。
iI是Italic(斜体)，即内容展示为斜体，em表示强调的文本。
十二、HTML全局属性有哪些
accesskey:设置快捷键，提供快速访问元素
class:规定元素的一个或多个类名（引用样式表中的类），多个类名用空格分开
contenteditable: 指定元素内容是否可编辑
contextmenu: 自定义鼠标右键弹出菜单内容
data-*: 为元素增加自定义属性 dir: 设置元素文本方向
draggable: 设置元素是否可拖拽
dropzone: 设置元素拖放类型： copy, move, link
hidden: 表示一个元素是否显示
id: 元素id，文档内唯一
lang: 元素内容的的语言
spellcheck: 是否启动拼写和语法检查
style: 行内css样式
tabindex: 设置元素可以获得焦点，通过tab可以导航
title: 元素相关的建议信息
translate: 元素和子孙节点内容是否需要本地化
一、外部引用CSS有几种方式，有何区别
外部引用CSS的方式有两种分别是link和@import。
区别如下：
1、link是XHTML标签，除了加载CSS外，还可以定义RSS等其它事务；@import属于CSS范畴，只能加载CSS。
2、link引用CSS时，在页面载入时同时加载；@import引用CSS时，需要页面完全载入以后加载。
3、link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4、link支持使用Javascript控制DOM去改变样式；而@import不支持。
二、介绍一下data-*属性
data-*为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过getAttribute方法获取。
需要注意的是：data-*之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。
三、如何在页面上实现一个圆形的可点击区域
1、设置div的border-radius:50%。
2、<img>通过usemap映射到<map>的circle形<area>。
3、JS实现，获取鼠标点击位置坐标，判断坐标到圆点的距离是否不大于圆的半径，来判断点击位置是否在圆内。
四、SVG是什么，有哪些特点
SVG是什么：SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML，用于描述二维矢量图形的一种图形格式。 SVG是W3C在2000年8月制定的一种新的二维矢量图形格式，2003年1月14日成为W3C推荐标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，是一种和图像分辨率无关的矢量图形格式。
(1)可伸缩性：可以在不影响清晰度的情况下，任意缩放图像显示。
(2)文本独立：SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。
(3)较小文件：SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强，上传下载速度比较快。
(4)超强显示效果：SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。
(5)超级颜色控制：SVG图像提供了一个1600万种颜色的调色板，支持ICC颜色描述文件标准、RGB、渐变和蒙版。
(6)交互性和动态性：由于网络是动态的媒体，SVG要成为网络图像格式，必须要具有动态的特征，这也是区别于其它图像格式的一个重要特征。你可以在SVG文件中嵌入动画元素(如运动路径、渐现或渐隐效果、生长的物体、收缩、快速旋转、改变颜色等)，或通过脚本定义来达到高亮显示、声音、动画等效果。
五、介绍一下超链接target的属性
<a> 标签的 target 属性规定在何处打开链接文档。
一个<a>标签内如果包含一个target属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，并给新窗口一个指定的标记，然后将新的文档载入新窗口。从此以后，超链接文档就可以指向这个新的窗口。
参数值主要有：
1、_blank：浏览器总在一个新打开、未命名的窗口中载入目标文档。
2、_parent：这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
3、_self ：这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。
4、_top ：这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
六、介绍一下浏览器内核
浏览器内核主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎的功能是解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和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的分支）]
八、iframe有那些缺点
1、产生页面多，管理不方便。
2、浏览器的退后按钮失效。
3、框架过多导致服务器的HTTP请求增加。
4、小型移动端无法显示整个框架。
5、打印困难。
6、代码复杂，一些搜索引擎无法索引。
九、介绍一下label的作用
label往往出现在表单中，在表单中用label标签是为了提高用户体验。Label标签定义了表单控制间的关系。用户选择该标签时，和标签相关的表单控件自动获取焦点。
十、浏览器内多个标签页之间的通信如何实现
localStorage在一个标签页里面使用localStorage.setItem编辑内容；在另一个标签页里面监听storage事件，即可实现不同标签页之间的通信。
cookie+setInterval()将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。
十一、title与h3、b与strong、i与em有什么区别
title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响。
<b>标签对应 bold，即文本加粗，<strong>标签意思是加强字符的语气，表示该文本比较重要，为了标明重点而加粗。
iI是Italic(斜体)，即内容展示为斜体，em表示强调的文本。
十二、HTML全局属性有哪些
accesskey:设置快捷键，提供快速访问元素
class:规定元素的一个或多个类名（引用样式表中的类），多个类名用空格分开
contenteditable: 指定元素内容是否可编辑
contextmenu: 自定义鼠标右键弹出菜单内容
data-*: 为元素增加自定义属性 dir: 设置元素文本方向
draggable: 设置元素是否可拖拽
dropzone: 设置元素拖放类型： copy, move, link
hidden: 表示一个元素是否显示
id: 元素id，文档内唯一
lang: 元素内容的的语言
spellcheck: 是否启动拼写和语法检查
style: 行内css样式
tabindex: 设置元素可以获得焦点，通过tab可以导航
title: 元素相关的建议信息
translate: 元素和子孙节点内容是否需要本地化
 - Python实现)
