HTML
1. HTML、XML、XHTML 的区别
HTML：超文本标记语言，是语法较为松散的、不严格的Web语言；
XML：可扩展的标记语言，主要用于存储数据和结构，可扩展；
XHTML：可扩展的超文本标记语言，基于XML，作用与HTML类似，但语法更严格。
HTML与XML的区别？
（1）XML用来传输和存储数据，HTML用来显示数据；
（2）XML使用的标签不用预先定义
（3）XML标签必须成对出现
（4）XML对大小写敏感
（5）XML中空格不会被删减
（6）XML中所有特殊符号必须用编码表示
（7）XML中的图片必须有文字说明
2. 什么是HTML5以及和HTML的区别是什么
概念
HTML5是HTML的新标准，其主要目标是无需任何额外的插件如Flash、Silverlight等，就可以传输所有内容。它囊括了动画、视频、丰富的图形用户界面等。
HTML5是由万维网联盟（W3C）和Web Hypertext Application Technology Working Group 合作创建的HTML新版本。
区别
- 从文档声明类型上看：
HTML是很长的一段代码，很难记住。如下代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
HTML5却只有简简单单的声明，方便记忆。如下：
<!DOCTYPE html>
- 从语义结构上看：
HTML4.0：没有体现结构语义化的标签，通常都是这样来命名的<div id="header"></div>，这样表示网站的头部。
HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：<header><article><footer>。
拓展： 不输入，浏览器将无法识别html文件，因此html将无法正常工作。
3. HTML、XHTML和HTML5区别以及有什么联系
XHTML与HTML的区别
XHTML标签名必须小写；
XHTML元素必须被关闭；
XHTML元素必须被正确的嵌套；
XHTML元素必须要有根元素。
XHTML与HTML5的区别
HTML5新增了canvas绘画元素；
HTML5新增了用于绘媒介回放的video和audio元素；
更具语义化的标签，便于浏览器识别；
对本地离线存储有更好的支持；
MATHML，SVG等，可以更好的render；
添加了新的表单控件：calendar、date、time、email等。
HTML、XHTML、HTML5之间联系
XHTML是HTML规范版本；
HTML5是HTML、XHTML以及HTML DOM的新标准。
4. HTML5 为什么只需要写
这是因为HTML5不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为（让浏览器按照他们应该的方式来运行）而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
5. 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
行内元素： a, b, span, img, input, select, strong;
块级元素： div, ul, li, dl, dt, dd, h1-5, p等；
空元素：<br>, <hr>, <mg>, <link>, <meta>;
6. 页面导入样式时，使用link和@import有什么区别
link属于HTML标签，而@import是css提供的；
页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载；
@import只在IE5以上才能识别，而link是XHTML标签，无兼容问题；
link方式的样式的权重高于@import的权重。
7. 支持HTML5的浏览器有哪些
现在几乎所有现有的浏览器都支持HTML5，例如Chrome, Opera, Safari, IE, 火狐等；
8. Label 的作用是什么？ 怎么用？
label 标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
<label for="Name">Number:</label>
<input type=“text“ name="Name" id="Name"/>
9. 标签上title属性与alt属性的区别是什么
alt是为了在图片未能正常显示时（屏幕阅读器）给予文字说明。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。
10. 如何理解语义化标签
概念
语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。
语义化的好处:用正确的标签做正确的事情；
- 去掉或者丢失样式的时候能够让页面呈现出清晰的结构；
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
- 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
- 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
11. 文档声明（Doctype）和<!Doctype html>有何作用? 严格模式与混杂模式如何区分？它们有何意义?
文档声明的作用
文档声明是为了告诉浏览器，我们写的HTML文档当前使用什么版本的HTML来写的，这样浏览器才能按照我们声明的版本来正确的解析。
<!Doctype html>的作用
<!doctype html> 的作用就是让浏览器进入标准模式，使用最新的 HTML5标准来解析渲染页面；如果不写，浏览器就会进入混杂模式，我们需要避免此类情况发生。
严格模式与混杂模式的区分
严格模式： 又称为标准模式，指浏览器按照W3C标准解析代码；
混杂模式： 又称怪异模式、兼容模式，是指浏览器用自己的方式解析代码.混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作；
区分：
网页中的DTD，直接影响到使用的是严格模式还是浏览模式，可以说DTD的使用与这两种方式的区别息息相关。
如果文档包含严格的DOCTYPE ，那么它一般以严格模式呈现（严格 DTD ——严格模式）；
包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）；
DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现（DTD不存在或者格式不正确——混杂模式）；
HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容(HTML5 没有严格和混杂之分)。
总的来说，严格模式让各个浏览器统一执行一套规范.兼容模式保证了旧网站的正常运行。
12. 如何实现浏览器内多个标签页之间的通信
可以通过调用localstorge、cookies等本地存储方式。
13. webSocket如何兼容低浏览器
Adobe Flash Socket；
ActiveX HTMLFile (IE) ；
基于 multipart 编码发送 XHR；
基于长轮询的 XHR；
14. iframe有哪些优缺点
优点
iframe可以实现无刷新文件上传；
iframe可以跨域通信；
解决了加载缓慢的第三方内容如图标和广告等的加载问题。
缺点
iframe会阻塞主页面的Onload事件;
无法被一些搜索引擎索引到;
页面会增加服务器的http请求;
会产生很多页面，不容易管理。
15. src与href有什么区别
src用于替换当前元素；href用于在当前文档和引用资源之间确立联系；
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；而href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。
16. table的作用以及其优缺点
作用
可用于布局（已过时）；
用于显示批量数据；
优点
在某些场合，使用Table是100%的适合、恰当和正确。比如，用table做表格是完全正确的
缺点
Table要比其它html标记占更多的字节，会导致延迟下载时间，占用服务器更多的流量资源；
Table会阻挡浏览器渲染引擎的渲染顺序，这会导致延迟页面的生成速度，让用户等待更久的时间；
灵活性差，比如要通多td才能设置tr的border属性；
代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱；
混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱；
深层的嵌套，导致搜索引擎读取困难，同时还很大程度上增加了代码冗余；
不够语义。
17. 浏览器乱码的原因是什么？如何解决？
产生乱码的原因
网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码。反之也会出现乱码；
html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码；
浏览器不能自动检测网页编码，造成网页乱码。
解决办法
使用软件进行编辑HTML网页内容；
如果网页设置编码是gbk，而数据库储存数据编码格式是UTF-8，此时需要程序查询数据库数据显示数据前进程序转码；
如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单进行转换；
18. HTML和DOM有何关系？
HTML是死的，只是一个字符串；而DOM是由html解析而来，是活的，我们可以通过Javascript维护DOM。
19. property和attribute的区别是什么
property是DOM中的属性，是JavaScript里的对象;
attribute是HTML标签上的特性，它的值只能够是字符串;
简单的理解就是：Attribute就是DOM节点自带的属性，例如html中常用的id、class、title、align等；而Property是这个DOM元素作为对象，其附加的内容，例如childNodes、firstChild等。
20. HTML元素如何体现其嵌套关系
块级元素可以包含行内元素；
块级元素不一定能包含块级元素；
行内元素一般不能包含块级元素（a元素例外）
21. 几种Doctype文档类型
标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：分别是Strict、Transitional 以及 Frameset；
XHTML 1.0 规定了三种 XML 文档类型：分别是Strict、Transitional 以及 Frameset；
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页；
Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
22. html5有哪些新特性、移除了那些元素
新特性
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
拖拽释放(Drag and drop)API；
语义化更好的内容标签（header, nav, footer, aside, article,section）;
音频、视频API(audio, video);
画布(Canvas)API;
地理(Geolocation)API;
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除;
表单控件:calendar、date、time、email、url、search ;
新的技术webworker, websocket, Geolocation等；
移除元素
纯表现元素：
<basefont> 默认字体，不设置字体，以此渲染；
<font> 字体标签；
<center> 水平居中；
<u> 下划线；
<big>字体；
<strike>中横字；
<tt>文本等宽；
对可用性产生负面影响的元素：
<frameset>,<noframes>和<frame>；
23. Quirks模式是什么？它和Standards模式有什么区别？
Quirks模式，又称怪癖模式、诡异模式、怪异模式。
Quirks和Standards模式的区别
当我们在写程序时，遇到新旧功能不兼容的时候，如何做才能保证原来的接口不变，又可以提供强大的功能？
一般情况下可以通过增加参数和分支来解决。也就是当某个参数为true时，使用新功能，为false时使用旧功能，这样就能不破坏原有的程序，又能提供新功能。
IE6也是类似这样做的，它将DTD当成了这个“参数”，因为以前的页面大家都不会去写DTD，第一IE6就假定，如果写了DTD就意味这个页面将采用对CSS支持更好的布局，而如果没有就采用兼容之前的布局方式，这就是Quirks模式（怪癖，诡异，怪异模式）。
其与Standards的区别总体会有布局、样式解析、和脚本执行三个方面的区别：
盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border；
设置行内元素的高宽：在Standards模式下，给等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效；
设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的；
设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效,quirk模式下的解决办法，用text-align属性:
body{
text-align:center};
#content{
text-align:left}
quirk模式下设置图片的padding会失效
quirk模式下Table中的字体属性不能继承上层的设置
quirk模式下white-space:pre会失效
24. 前端页面构成及什么是前端的结构，样式和行为相分离？以及分离的好处是什么？
前端页面有哪三层构成：
a. 结构层：由 HTML 或 XHTML 之类的标记语言负责创建，仅负责语义的表达。解决了页面“内容是什么”的问题。
b. 表示层：由CSS负责创建，解决了页面“如何显示内容”的问题。
c. 行为层：由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题。
结构，样式和行为分离
小编的理解是： 若是将前端比作一个人来举例子，结构（HTML）就相当于是人体的“骨架”，样式就相当于人体的“装饰”，例如衣服，首饰等；行为就相当于人做出的一系列“动作”。
在结构，样式和行为分离，就是将三者分离开，各自负责各自的内容，各部分可以通过引用进行使用。
在分离的基础上，我们需要做到代码的：精简， 重用， 有序。
分离的好处
代码分离，利于团队的开发和后期的维护；
减少维护成本，提高可读性和更好的兼容性；
25. 对HTML5有什么了解？
良好的移动性，以移动设备为主；
响应式设计，以适应自动变化的屏幕尺寸；
支持离线缓存技术，webStorage本地缓存；
新增了canvas，video，audio等新标签元素；以及特殊内容元素：article，footer，header，nav，section等；以及表单控件：calendar，date，time，email，url，search等；
新增webSocket/webWork技术；
还有新增的地理位置等。
26. 如何对网站的文件和资源进行优化
文件合并（目的是减少http请求）；
文件压缩 （目的是直接减少文件下载的体积）；
使用缓存；
使用cdn托管资源；
gizp压缩需要的js和css文件；
反向链接，网站外链接优化；
meta标签优化（title, description, keywords）,heading标签的优化,alt优化；
27. Html5中datalist是什么
<datalist>标签，用来定义选项列表，与input元素配合使用该元素，来定义input可能的值。
datalist及其选项不会被显示出来，他仅仅是合法的输入列表值。
<input id="fruits" list="fruit" />
<datalist id="fruit">
<option value="apple">
<option value="orange">
<option value="banana">
</datalist>
28. Html5中本地存储概念是什么，有什么优点，与cookie有什么区别？
HTML5的Web storage的存储方式有两种：sessionStorage和localStorage。
sessionStorage用于本地存储一个会话中的数据，当会话结束后就会销毁；
和sessionStorage不同，localStorage用于持久化的本地存储，除非用户主动删除数据，否则数据永远不会过期；
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
区别：
从浏览器和服务器间的传递看： cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
从大小看： 存储大小限制不同，cookie数据不能超过4k，只适合保存很小的数据；而sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
从数据有效期看： sessionStorage在会话关闭会立刻关闭，因此持续性不久；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。而localStorage始终有效。
从作用域看： sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；而localStorage和cookie都是可以在所有的同源窗口中共享的。
29. 常见的浏览器内核有哪些
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎则：解析和执行javascript来实现网页的动态效果。
Trident内核：IE最先开发或使用的， 360浏览器；
Webkit内核：Google Chrome，Safari， 搜狗浏览器，360极速浏览器， 阿里云浏览器等；
Gecko内核： Mozilla FireFox (火狐浏览器) ，K-Meleon浏览器；
Presto内核：Opera浏览器；
30. Canvas是什么？怎样写Canvas？
概念
Canvas是HTML5的一个元素，它使用JavaScript在网页上绘制图形。Canvas是一个矩形区域。它的每一个像素都可以由HTML5语言来控制。使用Canvas绘制路径、框、圆、字符和添加图像有几种方法。
使用方式
如果要在我们的HTML文档中添加Canvas标签，我们需要ID、宽度和高度。下面是如何将基本Canvas标签写入HTML文档的示例。
<canvas id="myCanvas" width="100" height="100"> </canvas>
31. 使用HTML5需要遵守哪些规则
新的特性应该基于HTML、CSS、DOM和JavaScript,减少对外部插件的需求（如Flash）;
更好的错误处理；
更多的替换脚本的标志；
HTML5应与设备无关；
开发过程必须可视化；
32. Html5应用程序缓存和HTML浏览器缓存有什么区别
新的HTML5规范的应用缓存最关键的就是支持离线应用，允许浏览器在链接客户端时预取一些或全部网站资产，如HTML文件，图像，CSS以及JS等，预取文件加速了站点的性能。换句话说，应用程序缓存可以预取完全未被访问的页面，从而在常规的浏览器缓存中不可用。与传统的浏览器缓存比较，该特性并不强制要求用户访问网站。
33. 最新的HTML5标准中的API是什么
Canvas ：Canvas由HTML代码中定义的具有高度和宽度属性的可绘制区域组成。JavaScript代码可以通过一组完整的绘图函数访问该区域，这与其他常见的2D API类似，因此允许动态生成图形。Canvas 的一些预期用途包括构建图形、动画、游戏和图像合成。
媒体定时回放；
离线存储数据库；
文档编辑；
拖放；
跨文档消息传递；
浏览器历史管理；
MIME类型和协议处理程序注册；
34. LocalStorage本地存储在HTML5中有什么用途
localStorage本地存储相当于一个轻量级的数据库，可以在本地永久的储存数据（除非人为删除）。此外，还可以在断网情况下读取本地缓存的cookies。
使用localStorage保存数据： localStorage.setItem(key, value);
使用localStorage获取保存的数据: localStorage.getItem(key);
清除localStorage保存的数据： localStorage.removeItem(key);
清除全部localStorage对象保存的数据: localStorage.clear( );
35. 有关HTML5中新的输入类型属性
36. 对于web标准以及w3c有何理解与认识
于WEB而言：web标准简单来说可以分为结构、表现和行为。web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰；
于W3C而言： W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范，如下：
结构上的要求：
标签必须闭合、标签小写、不乱嵌套，可以提高搜索机器人对网页内容的搜索几率；
对于css和js来说：
建议使用外链css和js脚本，从而达到结构与行为、结构与表现的分离，提高页面的渲染速度，能更快地显示页面的内容；
样式与标签的分离，更合理的语义化标签，使内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件， 从而降低维护成本、改版更方便；
不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性；
总之，遵循w3c制定的web标准，能够使用户浏览者更方便的阅读，使网页开发者之间更好的交流。
37. 新的HTML5文档类型和字符集是什么
HTML5文档类型：<!doctype html>
字符集：HTML5使用的编码
38. 渐进增强和优雅降级之间的区别
渐进增强（progressive enhancement）：主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果，交互等方面的改进和追加功能，以达到更好的用户体验。
优雅降级 graceful degradation： 一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。
区别
优雅降级是从复杂的现状开始的，并试图减少用户体验的供给；而渐进增强是从一个非常基础的，能够起作用的版本开始的，并在此基础上不断扩充，以适应未来环境的需要；
降级（功能衰竭）意味着往回看，而渐进增强则意味着往前看，同时保证其根基处于安全地带。
39. 为什么利用多个域名来存储网站资源会更有效
CDN缓存更加方便；
突破浏览器并发限制；
节约cookie宽带；
节约主域名的连接数，优化页面下响应速度；
防止不必要的安全问题；
40. 自身对网页标准和标准制定机构重要性有何理解
小编个人觉得：网页标准和标准制定机构是让web更加规范，更加标准，健康的发展所必不可少的东西。
于开发者而言： 开发者可以遵循统一的开发标准，大大降低了开发难度，开发成本，从而也提高了代码的可阅读性以及易于后期维护；
于SEO而言： 对SEO更加友好，提升了搜索效率。
使用网页标准和标准制定机构，对于提高网站的易用性起着非常大的作用。
41. 哪些浏览器支持HTML5
几乎所有的高版本浏览器Safari，Chrome，Firefox，Opera，IE8以上都支持HTML5。
42. 为什么HTML5里面我们不需要DTD
HTML5没有使用SGML或者XHTML，HTML5是一个全新的东西，因此不需要参考DTD，对于HTML5，仅需放置下面的文档类型代码告诉浏览器识别这是HTML5文档就行。
43. .浏览器如何对HTML5的离线储存资源进行管理和加载
有线情况下：
（1），浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据 manifest文件的内容下载相应的资源并且进行离线存储。
（2），如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后 浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
在离线情况下： 浏览器直接使用离线缓存的资源；
44. 页面可见性（Page Visibility）API 可以有哪些用途
在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放。
45. HTML5的form如何关闭自动完成功能
给不想要提示的input是设置 autocomplete=off 即可。
46.讲讲输入完网址按下回车，到看到网页这个过程中发生了什么
a. 域名解析
b. 发起TCP的3次握手
c. 建立TCP连接后发起http请求
d. 服务器端响应http请求，浏览器得到html代码
e. 浏览器解析html代码，并请求html代码中的资源
f. 浏览器对页面进行渲染呈现给用户
47.网站重构的理解
重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。
a. 使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)
b. 对于移动平台的优化，针对于SEO进行优化
c. 减少代码间的耦合，让代码保持弹性
d. 压缩或合并JS、CSS、image等前端资源
48.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
a. 图片懒加载，滚动到相应位置才加载图片。
b. 图片预加载，如果为幻灯片、相册等，将当前展示图片的前一张和后一张优先下载。
c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技术，如果图片为css图片的话。
d. 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
49.请阐述table的缺点
a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。
b. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td
c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱
d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。
e. table需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。
50.HTTP和HTTPS
HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。
默认HTTP的端口号为80，HTTPS的端口号为443。
51.性能优化问题
代码层面：避免使用css表达式，避免使用高级选择器，通配选择器。
缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等
请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。
请求带宽：压缩文件，开启GZIP，
代码层面的优化
用hash-table来优化查找
少用全局变量
用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
用setTimeout来避免页面失去响应
缓存DOM节点查找的结果
避免使用CSS Expression
避免全局查询
避免使用with(with会创建自己的作用域，会增加作用域链长度)
多个变量声明合并
避免图片和iFrame等的空Src。空Src会重新加载当前页面，影响速度和效率
尽量避免写在HTML标签中写Style属性
移动端性能优化
尽量使用css3动画，开启硬件加速。
适当使用touch事件代替click事件。
避免使用css3渐变阴影效果。
可以用transform: translateZ(0)来开启硬件加速。
不滥用Float。Float在渲染时计算量比较大，尽量减少使用
不滥用Web字体。Web字体需要下载，解析，重绘当前页面，尽量减少使用。
合理使用requestAnimationFrame动画代替setTimeout
CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加
PC端的在移动端同样适用
52.cookie 和session 的区别：
1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
53.为什么HTTPS安全
因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有。https之所以比http安全，是因为他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性
54.请说出三种减少页面加载时间的方法。
1.优化图片
2.图像格式的选择
3.优化CSS
4.网址后加斜杠
5.标明高度和宽度
6.减少http请求（合并文件，合并图片）。
css
1.标签语义化
顾名思义，合理的标签干合适的事情
块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot
行级（display：inline）：a、span、small、strong、em、i、code、
行内块（display：inline-block）：img、input
区别：
1.行内元素与块级函数可以相互转换，通过修改display属性值来切换块级元素和行内元素，行内元素display：inline，块级元素display：block。
2.行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。
3.行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。
4.块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。
display还有none（隐藏dom）、flex（弹性）、table（表）
display：none和visibility：hidden、ocpacity：0（兼容用fliter）
filter滤镜：对比度、饱和度、阴影、色相、透明度
display：flex 响应式、兼容性
2.盒子水平垂直居中
项目中经常遇到这种需求，最开始xxx，喜欢用flex，后来发现xxx，在xx博客上突然发现xx更好，xx解决了兼容性（拒绝背书式）
（1）定位1：需要知道父的宽高
（2）定位2：需要父亲有宽高限定
（3）定位3：不需要父有具体宽高限制（兼容性不如上边Ie9+）
（4）display:flex（ie10+）
（5）js实现就是模拟css写样式
（6）固定宽高的父级 display：table-cell 子级inline-block
3.盒模型标准
标准盒模型（content-box）、ie怪异盒模型（border-box）、flex弹性伸缩盒模型、column多列盒模型
盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分
IE盒模型和W3C标准盒模型的区别：
（1）W3C标准盒模型：属性width，height只包含内容content，不包含border和padding
（2）IE盒模型：属性width，height包含content、border和padding，指的是content+padding+border。
在ie8+浏览器中使用哪个盒模型可以由box-sizing（CSS新增的属性）控制，默认值为content-box，即标准盒模型；如果将box-sizing设为border-box则用的是IE盒模型。如果在ie6，7，8中DOCTYPE缺失会将盒子模型解释为IE盒子模型。若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。
4.::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。
单冒号（:）用于CSS3伪类，双冒号（::）用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）
双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，比如:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。
想让插入的内容出现在其它内容前，使用::before，否者，使用::after；在代码顺序上，::after生成的内容也比::before生成的内容靠后。如果按堆栈视角，::after生成的内容会在::before生成的内容之上。
伪类一般匹配的是元素的一些特殊状态，如hover、link等，而伪元素一般匹配的特殊的位置，比如after、before等。
5.CSS 选择符有哪些？
（1）id选择器（#myid）
（2）类选择器（.myclassname）
（3）标签选择器（div,h1,p）
（4）后代选择器（h1p）
（5）相邻后代选择器（子）选择器（ul>li）
（6）兄弟选择器（li~a）
（7）相邻兄弟选择器（li+a）
（8）属性选择器（a[rel=“external”]）
（9）伪类选择器（a:hover,li:nth-child）
（10）伪元素选择器（::before、::after）
（11）通配符选择器（*）
6.伪类与伪元素的区别
CSS伪类：用于向某些选择器添加特殊的效果。
CSS伪元素：用于将特殊的效果添加到某些选择器。
css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。
伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
有时你会发现伪元素使用了两个冒号（::）而不是一个冒号（:）。这是CSS3的一部分，并尝试区分伪类和伪元素。大多数浏览器都支持这两个值。按照规则应该使用（::）而不是（:），从而区分伪类和伪元素。但是，由于在旧版本的W3C规范并未对此进行特别区分，因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。
7.CSS 中哪些属性可以继承？
每个CSS属性定义的概述都指出了这个属性是默认继承的，还是默认不继承的。这决定了当你没有为元素的属性指定值时该如何计算值。
当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值。只有文档根元素取该属性的概述中给定的初始值（这里的意思应该是在该属性本身的定义中的默认值）。
当元素的一个非继承属性（在Mozillacode里有时称之resetproperty）没有指定值时，则取属性的初始值initialvalue（该值在该属性的概述里被指定）。
有继承性的属性：
（1）字体系列属性
font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust
（2）文本系列属性
text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、text-transform、direction、color
（3）表格布局属性
caption-sideborder-collapseempty-cells
（4）列表属性
list-style-type、list-style-image、list-style-position、list-style
（5）光标属性
cursor
（6）元素可见性
visibility
（7）还有一些不常用的；speak，page，设置嵌套引用的引号类型quotes等属性
注意：当一个属性不是继承属性时，可以使用inherit关键字指定一个属性应从父元素继承它的值，inherit关键字用于显式地指定继承性，可用于任何继承性/非继承性属性。
8.CSS 优先级算法如何计算？
CSS的优先级是根据样式声明的特殊性值来判断的。
选择器的特殊性值分为四个等级，如下：
（1）标签内选择符x,0,0,0
（2）ID选择符0,x,0,0
（3）class选择符/属性选择符/伪类选择符 0,0,x,0
（4）元素和伪元素选择符0,0,0,x
计算方法：
（1）每个等级的初始值为0
（2）每个等级的叠加为选择器出现的次数相加
（3）不可进位，比如0,99,99,99
（4）依次表示为：0,0,0,0
（5）每个等级计数之间没关联
（6）等级判断从左向右，如果某一位数值相同，则判断下一位数值
（7）如果两个优先级相同，则最后出现的优先级高，!important也适用
（8）通配符选择器的特殊性值为：0,0,0,0
（9）继承样式优先级最低，通配符样式优先级高于继承样式
（10）!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。
计算实例：
（1）#demoa{color:orange;}/特殊性值：0,1,0,1/
（2）div#demoa{color:red;}/特殊性值：0,1,0,2/
注意：
（1）样式应用时，css会先查看规则的权重（!important），加了权重的优先级最高，当权重相同的时候，会比较规则的特殊性。
（2）特殊性值越大的声明优先级越高。
（3）相同特殊性值的声明，根据样式引入的顺序，后声明的规则优先级高（距离元素出现最近的）
9关于伪类 LVHA 的解释?
a标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类:link、:visited、:hover、:active；
当链接未访问过时：
（1）当鼠标滑过a链接时，满足:link和:hover两种状态，要改变a标签的颜色，就必须将:hover伪类在:link伪类后面声明；
（2）当鼠标点击激活a链接时，同时满足:link、:hover、:active三种状态，要显示a标签激活时的样式（:active），必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。
当链接访问过时，情况基本同上，只不过需要将:link换成:visited。
这个顺序能不能变？可以，但也只有:link和:visited可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题。
10.CSS3 新增伪类有那些？
（1）elem:nth-child(n)选中父元素下的第n个子元素，并且这个子元素的标签名为elem，n可以接受具体的数值，也可以接受函数。
（2）elem:nth-last-child(n)作用同上，不过是从后开始查找。
（3）elem:last-child选中最后一个子元素。
（4）elem:only-child如果elem是父元素下唯一的子元素，则选中之。
（5）elem:nth-of-type(n)选中父元素下第n个elem类型元素，n可以接受具体的数值，也可以接受函数。
（6）elem:first-of-type选中父元素下第一个elem类型元素。
（7）elem:last-of-type选中父元素下最后一个elem类型元素。
（8）elem:only-of-type如果父元素下的子元素只有一个elem类型元素，则选中该元素。
（9）elem:empty选中不包含子元素和内容的elem类型元素。
（10）elem:target选择当前活动的elem元素。
（11）:not(elem)选择非elem元素的每个元素。
（12）:enabled 控制表单控件的禁用状态。
（13）:disabled 控制表单控件的禁用状态。
(14):checked单选框或复选框被选中。
11.display 有哪些值？说明他们的作用。
block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
none 元素不显示，并从文档流中移除。
inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block默认宽度为内容宽度，可以设置宽高，同行显示。
list-item 像块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示。
inherit 规定应该从父元素继承display属性的值。
12.position 的值 relative 和 absolute 定位原点是？
absolute
生成绝对定位的元素，相对于值不为static的第一个父元素的paddingbox进行定位，也可以理解为离自己这一级元素最近的一级position设置为absolute或者relative的父元素的paddingbox的左上角为原点的。
fixed（老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。
relative
生成相对定位的元素，相对于其元素本身所在正常位置进行定位。
static
默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right,z-index声明）。
inherit
规定从父元素继承position属性的值。
13.CSS3 有哪些新特性？（根据项目回答）
新增各种CSS选择器 （:not(.input)：所有class不是“input”的节点）
圆角 （border-radius:8px）
多列布局 （multi-columnlayout）
阴影和反射 （Shadow\Reflect）
文字特效 （text-shadow）
文字渲染 （Text-decoration）
线性渐变 （gradient）
旋转 （transform）
缩放，定位，倾斜，动画，多背景
例如：transform:\scale(0.85,0.90)\translate(0px,-30px)\skew(-9deg,0deg)\Animation:
14.请解释一下 CSS3 的 Flexbox（弹性盒布局模型），以及适用场景？
Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
采用Flex布局的元素，称为Flex容器（flexcontainer），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flexitem），简称"项目"。
容器默认存在两根轴：水平的主轴（mainaxis）和垂直的交叉轴（crossaxis），项目默认沿主轴排列。
以下6个属性设置在容器上。
flex-direction属性决定主轴的方向（即项目的排列方向）。
flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为rownowrap。
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐。
align-content 只适用多行的flex容器（也就是flex容器中的子项不止一行时该属性才有效果），它的作用是当flex容器在交叉轴上有多余的空间时，将子项作为一个整体（属性值为：flex-start、flex-end、center时）进行对齐。
以下6个属性设置在项目上。
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认
值为auto，即项目的本来大小。
flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为01auto。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
15.用纯 CSS 创建一个三角形的原理是什么？
采用的是相邻边框连接处的均分原理。将元素的宽高设为0，只设置border，把任意三条边隐藏掉（颜色设为transparent），剩下的就是一个三角形。
.demo {
width: 0;
height: 0;
border: 20px solid transparent;
border-top: 20px solid skyblue;
}
16.CSS 多列等高如何实现？
（1）利用padding-bottom|margin-bottom正负值相抵，不会影响页面布局的特点。设置父容器设置超出隐藏（overflow:hidden），这样父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。
.Article {
overflow: hidden;
}
.Article>li {
float: left;
margin: 0 10px -9999px 0;
padding-bottom: 9999px;
background: #4577dc;
width: 200px;
color: #fff;
}
.Article>li>p {
padding: 10px;
}
（2）利用table-cell所有单元格高度都相等的特性，来实现多列等高。
.Article {
display: table;
width: 100%;
table-layout: fixed;
}
.Article>li {
display: table-cell;
width: 200px;
border-left: solid 5px currentColor;
border-right: solid 5px currentColor;
color
最低0.47元/天 解锁文章
838
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
