一.五大主流浏览器及四大内核有哪些?
现在国内常见的浏览器有：IE、Firefox、Safari、Opera、Google Chome、QQ浏览器、搜狗浏览器、百度浏览器、猎豹浏览器、UC浏览器、360浏览器、遨游浏览器、世界之窗浏览器等等。但目前最为主流浏览器有五大款，分别是IE、Firefox、Google Chrome、Safari、Opera。
浏览器最重要的部分是浏览器的内核。浏览器内核是浏览器的核心，也称“渲染引擎”，用来解释网页语法并渲染到网页上。浏览器内核决定了浏览器该如何显示网页内容以及页面的格式信息。不同的浏览器内核对网页的语法解释也不同，因此网页开发者需要在不同内核的浏览器中测试网页的渲染效果。
四大内核：
1、Trident内核，也称IE内核。
2、Webkit内核。
3、Gecko内核。
4、Presto内核。
各浏览器所用内核：
1、IE浏览器内核：Trident内核，也是俗称的IE内核；
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
4、Safari浏览器内核：Webkit内核；
5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；
6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；
7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
8、百度浏览器、世界之窗内核：IE内核；
9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；
---------------------------
主流浏览器的内核
Trident(IE内核)
Trident内核代表产品Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。国内很多的双核浏览器其中之一就是Trident，美名其曰“兼容模式”。代表：IE、傲游、世界之窗浏览器、Avant、猎豹安全浏览器、360极速浏览器、百度浏览器等。Window10发布后，IE将其内置浏览器命名为Edge（原名斯巴达），使用了新内核Edge引擎。
Gecko（Firefox）
Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。可惜这几年已经没落了，比如打开速度慢、升级频繁、猪一样的队友flash、神一样的对手Chrome。
Webkit（Safari）
苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。
WebKit内核代表作品Safari、Chromewebkit 是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。
Presto（Opera）
Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。在13年之后，Opera宣布加入谷歌阵营，弃用了Presto。
Blink（Chrome）
有Google和Opera Software开发的浏览器排版引擎，2013年4月发布，现在Chrome内核是Blink。Blink其实是webkit的分支，大部分国产浏览器最新版都采用Blink内核。
移动端的浏览器内核主要说的是系统内置浏览器的内核。
目前移动设备浏览器上常用的内核有Webkit、Blink、Trident、Gecko，其中苹果iOS平台主要是Webkit，Android4.4之前Android系统浏览器的内核是Webkit，Android4.4之后使用Blink，Windows Phone 8系统浏览器内核是Trident。
二.主流浏览器内核私有属性css前缀：
mozilla内核 (firefox,flock等) -moz
webkit内核(safari,chrome等) -webkit
opera内核(opera浏览器) -o
trident内核(ie浏览器) -ms
三.默认情况下，使用h1标签会形成什么效果?
加粗、大号文字
四.关于HTML语义化，你知道的都有哪些标签？
header、article、address都属于语义化明确的标签。
五.HTML标签有哪几种?
第一种:
块级标签：默认宽度100%(占满一行)；
块级标签自动换行(独占一行，右边不能有任何东西)；
块级标签可以使用CSS设置宽度高度！
常用的块状元素有：div、 p、 h1**h6、ol、ul、dl、table、address、blockquote、form
第二种:
行级标签：默认宽度由内容撑开(内容多宽、宽度就占多宽)；
行级标签不会自动换行(一行当中，从左往右依次排列)；
行级标签的宽度高度不能设置！ 常用的内联元素有：a、span、br、i、em、strong、label、q、var、cite、code
第三种:
常用的内联块状元素有：img、input。
六.解释一下utf-8和GBK和ISISO8859-2 字符集
charset 属性规定 HTML 文档的字符编码。
UTF-8（8-bit Unicode Transformation
Format）是一种针对Unicode的可变长度字符编码，又称万国码。UTF-8用1到6个字节编码UNICODE字符。用在网页上可以同一页面显示中文简体繁体及其它语言（如英文，日文，韩文）。
GBK是汉字编码，是双字节码，可表示繁体字和简体字。
ISO8859-2 字符集，也称为 Latin-2，收集了 东欧 字符。
七.添加样式的方式有
1.内联式：
即直接加在标签上的样式 如:<div style="100px;"></div>
2.导入样式：
@import url("css/style.css")
3.嵌入式：
即用
<style>.
classname { 100px;}
</style>
标签括起来写在页面中的样式。
4.外部引用式：
即将样式单独放到一个文件夹中，然后用link标签引入页面的形式，如：
<link rel="stylesheet" type="text/css" href="Css.css" />
八.onchange和onblur事件解释:
onchange 在元素值改变时触发。onchange 属性适用于：input、textarea 以及 select元素。
onblur 事件会在对象失去焦点时发生。支持该事件的 JavaScript 对象：button, checkbox,fileUpload, layer, frame, password, radio, reset, submit, text,textarea, window。
九.img标签中的alt属性的作用是
提供替代图片的信息，使屏幕阅读器能获取到关于图片的信息
十.关于置换元素和不可替换元素
1.置换元素：
浏览器根据元素的标签和属性，来决定元素的具体显示内容。 例如：浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看html代码，则看不到图片的实际内容；<input>标签的type属性来决定是显示输入框，还是单选按钮等。 (x)html中 的<img>、<input>、<textarea>、<select>、<object>都是置换元素。这些元素往往没有实际的内容，即是一个空元素。置换元素在其显示中生成了框，这也就是有的内联元素能够设置宽高的原因。
2.不可替换元素：
(x)html 的大多数元素是不可替换元素，即其内容直接表现给用户端（如浏览器）。例如：<label>label中的内容</label> 标签<label>是一个非置换元素，文字label中的内容”将全被显示。
十一.form表单中input元素的readonly与disabled属性描述
设置readonly = true，页面上无法修改内容，但是可以通过JavaScript修改,内容会被提交.设置disabled = true,无法修改内容，也不会被提交
十二.iframe的作用:
<iframe> 标签会创建包含另外一个文档的内联框架，有效地将另一个 HTML 页面嵌入到当前页中。加载别的网站内容，例如google广告，网站流量分析。在上传图片时，不用flash实现无刷新。跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源.与第三方域名下的页面共享cookie.
十三.放在HTML里的哪一部分JavaScripts会在页面加载的时候被执行？
在HTML body部分中的JavaScripts会在页面加载的时候被执行。
在HTML head部分中的JavaScripts会在被调用的时候才执行。
十四.关于HTML<form>标签的enctype属性：enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。
application/x-www-form-urlencoded 在发送前编码所有字符（默认）
multipart/form-data 不对字符编码。 在使用包含文件上传控件的表单时，必须使用该值。
text/plain 空格转换为 “+” 加号，但不对特殊字符编码。
十五.常见的浏览器端存储的方式
有时需要将网页中的一些数据保存在浏览器端，这样做的好处是，当下次访问页面时，不需要再次向服务器请求数据，直接就可以从本地读取数据。目前常用的有以下几种方法：
Cookie：cookie会随着每次HTTP请求头信息一起发送，无形中增加了网络流量，另外，cookie能存储的数据容量有限，根据浏览器类型不同而不同，IE6大约只能存储2K。
Cookie可以实现记录访问者的信息、在页面之间传递信息、自动识别用户。
Flash ShareObject：这种方式能能解决上面提到的cookie存储的两个弊端，而且能够跨浏览器，应该说是目前最好的本地存储方案。不过，需要在页面中插入一个Flash，当浏览器没有安装Flash控件时就不能用了。所幸的是，没有安装Flash的用户极少。
缺点：需要安装Flash插件。
Google Gear：Google开发出的一种本地存储技术。 缺点：需要安装Gear组件。
userData：IE浏览器可以使用userData来存储数据，容量可达到640K，这种方案是很可靠的，不需要安装额外的插件。缺点：它仅在IE下有效。
sessionStorage：sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
使用于Firefox2+的火狐浏览器，用这种方式存储的数据仅窗口级别有效，同一个窗口（或者Tab）页面刷新或者跳转，都能获取到本地存储的数据，当新开窗口或者页面时，原来的数据就失效了。缺点：IE不支持、不能实现数据的持久保存。
globalStorage：使用于Firefox2+的火狐浏览器，类似于IE的userData。 缺点：IE不支持。
localStorage： localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。ocalStorage是Web Storage互联网存储规范中的一部分，现在在Firefox3.5、Safari 4和IE8中得到支持。缺点:低版本浏览器不支持。
结论:Flash shareobject是不错的选择，如果你不想在页面上嵌入Flash，可以结合使用userData(IE6+)和globalStorage(Firefox2+)和localStorage(chrome3+)实现跨浏览器。
十六.Doctype作用？标准模式与兼容模式各有什么区别?
* !DOCTYPE声明位于位于HTML文档中的第一行，处于html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
* 标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
十七.HTML5 为什么只需要写 !DOCTYPE HTML？
* HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
十八.行内元素有哪些？块级元素有哪些？空(void)元素有那些？
* 行内元素：a span img input select
* 块级元素：div ul ol li dl dt dd h1 p
* 空元素：<br> <hr> <link> <meta>
十九.页面导入样式时，使用link和@import有什么区别？
* 相同的地方，都是外部引用CSS方式，
* 区别：
* link是xhtml标签，除了加载css外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS
* link引用CSS时候，页面载入时同时加载；@import需要在页面完全加载以后加载，而且@import被引用的CSS会等到引用它的CSS文件被加载完才加载
* link是xhtml标签，无兼容问题；@import是在css2.1提出来的，低版本的浏览器不支持
* link支持使用javascript控制去改变样式，而@import不支持
* link方式的样式的权重高于@import的权重
* import在html使用时候需要<style type="text/css">标签
二十.介绍一下你对浏览器内核的理解？ 常见的浏览器内核有哪些？
* 主要分成两部分：渲染引擎(Layout Engine或Rendering Engine)和JS引擎。
* 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
* JS引擎：解析和执行javascript来实现网页的动态效果。
* Ie(Ie内核) 火狐（Gecko） 谷歌（webkit,Blink） opera(Presto),Safari(webkit)
二十一.请描述一下 cookies，sessionStorage 和 localStorage 的区别？
* 共同点：都是保存在浏览器端，且是同源的。
* 区别:
1. cookies是为了标识用户身份而存储在用户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传递，而sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存。
2. 存储大小的限制不同。cookie保存的数据很小，不能超过4k，而sessionstorage和localstorage保存的数据大，可达到5M。
3. 数据的有效期不同。cookie在设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效，窗口和浏览器关闭也一直保存，用作长久数据保存。
4. 作用域不同。cookie在所有的同源窗口都是共享；sessionstorage不在不同的浏览器共享，即使同一页面；localstorage在所有同源窗口都是共享
二十二.简述一下你对HTML语义化的理解？
* 去掉或丢失样式的时候能够让页面呈现出清晰的结构。
* 有利于SEO和搜索引擎建立良好沟通，有助于爬虫抓取更多的信息，爬虫依赖于标签来确定上下文和各个关键字的权重。
* 方便其它设备解析。
* 便于团队开发和维护，语义化根据可读性
二十三.title与h1的区别、b与strong的区别、i与em的区别？
title属性没有明确意义，只表示标题；h1表示层次明确的标题，对页面信息的抓取也有很大的影响
strong标明重点内容，语气加强含义；b是无意义的视觉表示
em表示强调文本；i是斜体，是无意义的视觉表示
视觉样式标签：b i u s
语义样式标签：strong em ins del code
二十四.元素的alt和title有什么异同？
在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字。
二十五.HTML5 Canvas元素有什么用？
Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在HTML上进行图形操作，
<canvas id="canvas1" width="300" height="100">
</canvas>
二十六.新的HTML5文档类型和字符集是？
HTML5文档类型 <!doctype html>
HTML5使用UTF-8字符集<meta charset="UTF-8">
二十七.HTML5存储类型有什么区别？
HTML5能够本地存储数据，在之前都是使用cookie使用的，HTML5提供了下面两种本地存储方案：
localStorage用于持久化的本地存储，数据永远不会过期，关闭浏览器也不会丢失。
sessionStorage同一个会话的页面才能访问并且当会话结束后数据也会随之销毁，因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储.
二十八.为什么将CSS样式放在头部，将JS脚本放在底部
（1）浏览器为了更好的用户体验，渲染引擎会尝试尽快在屏幕上显示内容，不会等到所有的HTML元素解析之后再构建和布局DOM树，所以部分内容将被解析并显示。
（2）前端一般主要关心首屏的渲染速度，这也是为什么要提倡“图片懒加载”的原因。
（3）其实外部的JS和CSS文件是并行下载的。随着JS技术的发展，JS也开始承担起页面的渲染工作了。如果JS加载需要很长时间，会影响用户体验。所以需要将JS区分为承担页面渲染工作的JS和承担事件处理的JS。渲染页面的JS放在前面，事务处理的JS放在后面。
二十九HTML5中的应用缓存是什么？
一个最需要的事最终是用户的离线浏览，换句话说，如果网络连接不可用时，页面应该来自浏览器缓存，离线应用缓存可以帮助你达到这个目的
应用缓存可以帮助你指定哪些文件需要缓存，哪些不需要。
三十.什么是SVG（Scalable Vector Graphics可缩放矢量图形）？
SVG（Scalable Vector Graphics可缩放矢量图形）表示可缩放矢量图形。他是基于文本的图形语言，使用文本，线条，点等来进行图像绘制，这使得他轻便，显示更加迅速
三十一.什么是HTML5？
HTML5是最新的HTML标准，他的主要目标是提供所有内容而不需要任何的像flash，silverlight等的额外插件，这些内容来自动画，视频，富GUI等
HTML5是万维网联盟（W3C）和网络超文本应用技术工作组（WHATWG）之间合作输出的
三十二.HTML5的页面结构同HTML4或者更前的HTML有什么区别？
一个典型的WEB页面包含头部，脚部，导航，中心区域，侧边栏。现在如果我们想在在HTML4的HTML区域中呈现这些内容，我们可能要使用DIV标签。
但在Html中,我们使用
<header>
<footer>
<nav>
<article>
<section>
<aside>
另外还有:
<figure>
<figcaption>
<audio>
<canvas>
<summary>
三十三.超链接访问过hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}