1. 浏览器是怎么对 HTML5 的离线储存资源进?管理和加载的呢

• 在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest ?件，如 果是第?次访问 app ，那么浏览器就会根据manifest?件的内容下载相应的资源并且进? 离线存储。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使?离线的资 源加载??，然后浏览器会对?新的 manifest ?件与旧的 manifest ?件，如果?件没 有发?改变，就不做任何操作，如果?件改变了，那么就会重新下载?件中的资源并进? 离线存储。

• 离线的情况下，浏览器就直接使?离线存储的资源。

12. 请描述?下 cookies ， sessionStorage 和 localStorage 的区别？

• cookie 是?站为了标示?户身份?储存在?户本地终端（Client Side）上的数据（通常 经过加密） cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回 传递
• sessionStorage 和 localStorage 不会?动把数据发给服务器，仅在本地保存
• 存储??：

(1) cookie 数据??不能超过4k

(2) sessionStorage 和 localStorage 虽然也有存储??的限制，但? cookie ?得 多，可以达到5M或更?

• 有期时间：

(1) localStorage 存储持久数据，浏览器关闭后数据不丢失除?主动删除数据

(2) sessionStorage 数据在当前浏览器窗?关闭后?动删除

(3) cookie 设置的 cookie 过期时间之前?直有效，即使窗?或浏览器关闭

13. iframe有那些缺点？

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

14. WEB标准以及W3C标准是什么?

• 标签闭合、标签?写、不乱嵌套、使?外链 css 和 js 、结构?为表现的分离

15. xhtml和html有什么区别?

• ?个是功能上的差别 主要是 XHTML 可兼容各?浏览器、?机以及 PDA ，并且浏览器也能快速正确地编译??
• 另外是书写习惯的差

、在页面导入样式时，<link rel="" />和@import有什么区别？

相同的地方：link与@impor都是外部引用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">标签

2、cookies，sessionStorage和localStorage的区别

相同的地方：三者都是保存在浏览器端，且是同源的。

区别：

• cookies是为了标识用户身份而存储在用户本地终端上的数据；始终在同源（同源指在同一IP地址下）http请求中携带，即cookies在浏览器和服务器间来回传递；cookie保存的数据不能超过4k；cookie在设置的cookie过期时间之前一直有效，纵使窗口或者浏览器关闭。cookie在所有的同源（同源指在同一IP地址下）窗口都是共享；
• sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存；sessionstorage和localstorage保存的数据大，可达到5M；sessionstorage仅在浏览器窗口关闭之前有效；localstorage终身有效，数据存储于电脑本地，除非设置删除或手动删除；sessionstorage使用不同的浏览器数据不能共享；localstorage不管使用任何浏览器，同源（同源指在同一IP地址下）窗口都是共享

3、iframe框架有哪些优缺点？

优点：

• iframe可以将嵌入的网页按1比1比例展示出来。
• 多个网页引用iframe，只需要修改iframe里的内容，可以实现调用的每一个页面内容的更改。
• 网页中统一风格，整个系统中某个模块都是一样的，可以写成一个页面，使用iframe来嵌套引用，既而增加代码的复用性，比如头部和底部版本模块。
• 如果遇到加载缓慢的页面内容，可以由iframe嵌套使用来解决。

缺点：

• 浏览器搜索引擎的爬虫程序不能解读iframe嵌套页面。
• 页面模块框架中会出现滚动条。
• 使用框架结构时，保证设置正确的导航链接。
• 过多iframe嵌套页面会加重服务器的http请求

4、HTML的字符编码问题？

在网页中加上: <meta http-equiv="Content-Type" content="text/html;charset=utf8">

5、网页中常用的图像格式jpg、gif、png分别有什么不同？

• 当下浏览器支持的图像格式有jpeg，gif，png，bmp等。bmp文件的存储空间较大，而且传输较慢，在网页中通常不提倡使用；
• jpeg图像可以支持数百万种颜色，即使在传输过程中有数据丢失现象，在质量上也不会有明显的影响；
• png格式的图像具有高保真性和透明性以及文件体积小等特点，被广泛的应用于网页设计中；

6、在表单中，method属性有get和post种方式，有何区别？

• 使用get提交信息，表单中的信息会作为字符串自动附加在URL的后面，会在浏览器的地址栏中显示出来。get方式传输的数据量限制在2KB左右，但执行效率比较高。如：

https://www.toutiao.com/c/user/token/MS4wLjABAAAADo7gk7N9eKht44frWckoqrE3skubKkaup9cdZf6INSmOAL3BAX6m0GNmbREBDA4h/?source=list&log_from=0cad628c11931_1676558929580

• post需要对输入的信息进行包装，存入单独的文件中，不会附在URL后面，等待服务器取走，这种方式对信息量没有限制。

7、什么是超链接？

在一个简单的网址上提供应用程序（与必须先安装的本地应用程序或其他东西相比）。几乎任何网络内容都可以转换为链接，点击（或激活）超链接将使网络浏览器转到另一个网址，通过将文本（或其它内容，见块级链接) 包裹在 <a> 元素内，并给它一个 href 属性（也称为超文本引用或目标，它将包含一个网址）来创建一个基本链接。如

<a href="https://www.toutiao.com/c/user/token/MS4wLjABAAAADo7gk7N9eKht44frWckoqrE3skubKkaup9cdZf6INSmOAL3BAX6m0GNmbREBDA4h/?source=list&log_from=0cad628c11931_1676558929580">

8、对于 WEB 标准以及 W3C 的理解与认识问题？

• web 标准简单来说可以分为结构、表现和行为。结构主要是有 HTML 标签组成。通俗点说，在页面 body 里面我们写入的标签都是为了页面的结构。表现即指 css 样式表，通过 css 可以是页面的结构标签更具美感。行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是有 js 组成。
• web 标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。

9、网页验证码是干嘛的？

• 区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水
• 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试

10、WEB 标准以及 W3C 的理解与认识

• 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链 css 和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

览器兼容

浏览器

浏览器大战

第一次浏览器大战发生在上个世纪90年代，微软发布了它的IE浏览器，和网景公司的Netscape Navigator浏览器大打出手。 ?

第二次浏览器大战发生在20世纪。 ?

战争产物：Internet Explorer 9

13年市场比重

14年市场比重

15年市场比重

17年市场比重

19年市场比重

浏览器内核 ( 现代4大内核 )

Trident 代表作：IE

元老级内核之一，由微软开发，并于1997年10月首次在ie 4.0中使用，凭借其windows垄断优势，Trident市场占有率一直很高。然而垄断并非，没有竞争就没有进步，长期以往，Trident内核一度停滞不前，更新缓慢，甚至一度与W3C标准脱节。2011年，从ie 9开始，Trident开始支持HTML5和CSS 3，因此我们也经常会看到有些网站在浏览时会提示用户（在Internet Explorer 9.0+以上浏览效果最佳）。前端程序员做浏览器兼容一般也不再会考虑ie 8之前的浏览器了。

Gecko 代表作：Mozilla

元老级内核之一，由Netscape公司Mozilla组织开发。1998年，Netscape在于IE浏览器竞争失利之后，成立了非正式组织Mozilla，由其开发新一代内核，后命名为“Gecko”。FireFox也是这班人开发出来了，因此这也就是Mozilla一直使用的内核。 Gecko的特点是代码完全公开，因此其开发程度很高，全世界的程序员都可以为其编写代码，增加功能。

WebKit : 苹果 & 谷歌旧版本

这是苹果公司开发的内核，也是其旗下产品Ssfari浏览器使用的内核。Webkit引擎包含了WebCode排版引擎和JavaScriptCode解析引擎，分别是从KDE的KHTML和KJS衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统开发。 Chrome、360极速浏览器以及搜狗高速浏览器也使用Webkit作为内核（在脚本理解方面，Chorome使用自己研发的V8引擎）。

Blink : 代表作：谷歌 & 欧鹏

这是由Google和Opera Software开发的浏览器排版引擎，Google计算将这个渲染引擎作为Chromium计划的一部分，并且在2013年4月公布了这一消息。这一渲染引擎是开源引擎Webkit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用

Presto ( Opera前内核 已经废弃 )

为什么会出现浏览器兼容问题？

由于各大主流浏览器由不同的厂家开发，所用的核心架构和代码也很难重和，这就为各种莫名其妙的Bug(代码错误）提供了温床。再加上各大厂商出于自身利益考虑而设置的种种技术壁垒，都让CSS应用起来比想象得要麻烦。浏览器的兼容问题是我们必须去克服的。

CSS Bug、CSS Hack和Filter

• CSS Bug: CSS样式在各浏览器中解析不一致的情况，或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.
• CSS Hack: CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法，因为它们都属于个人对CSS代码的非官方的修改，或非官方的补丁。有些人更喜欢使用patch(补丁)来描述这种行为。
• Filter:表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，Filter是一种用来过滤不同浏览器的Hack类型。

常见的BUG

IE低版本常见CSS解析Bug及hack

1)图片有边框BUG

当图片加<a href=“#”></a>在IE上会出现边框

Hack:给图片加border:0;或者border:0 none;

2)图片间隙

div中的图片间隙BUG

描述：在div中插入图片时，图片会将div下方撑大大约三像素。

hack1:将</div>与<img>写在一行上；

hack2:将<img>转为块状元素，给<img>添加声明：display:block;

3) 双倍浮向（双倍边距）（只有IE6出现）

描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界（margin）加倍显示。

hack:给浮动元素添加声明：display:inline;

4)默认高度（IE6、IE7）

描述：在IE6及以下版本中，部分块元素拥有默认高度（在16px左右；）

hack1:给元素添加声明：font-size:0;

hack2：给元素添加声明：overflow:hidden;

非IE BUG

5)表单元素对齐不一致

描述：表单元素行高对齐方式不一致

hack:给表单元素添加声明：float:left;

6)按钮元素默认大小不一

描述：各浏览器中按钮元素大小不一致

hack1： 统一大小/（用a标记模拟）

hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉。

hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。

7)鼠标指针bug

描述：cursor属性的hand属性值只有IE9以下浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。

hack: 如统一某元素鼠标指针形状为手型，

应添加声明：cursor:pointer cursor: ;

auto默认

crosshair加号

text文本

wait等待

help帮助

progress过程

inherit继承

move移动

ne-resize向上或向右移动

pointer手形

8)透明属性

兼容其他浏览器写法：opacity:value;(value的取值范围0-1; 例：opacity:0.5;)

IE浏览器写法：filter:alpha(opacity=value);取值范围 1-100(整数)

过滤器

1.下划线属性过滤器

当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是在IE6及更低版本浏览器中会继续解析这个规则。

语法：选择符{_属性：属性值；}

2. !important

关键字过滤器 它表示所附加的声明具有最高优先级的意思。但由于IE6及更低版本不能识别它， 我们可以利用IE6的这个Bug作为过滤器来兼容ＩＥ６和其它标准浏览器。

语法：选择符{属性：属性值!important;}

3. *属性过滤器

当在一个属性前面增加了*后，该属性只能被IE7浏览器识别，其它浏览器混略该属 性的作用。

语法：选择符{*属性：属性值；}

4. ：IE版本识别；其它浏览器都不识别

语法：选择符{属性：属性值;}

5. >5. \0 : IE8 及以上版本识别；其它浏览器都不识别