Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%
解析：①HTML是SGML的一个实例，它的DTD作为标准被固定下来，因此，HTML不能作为定义其它置标语言的元语言。XML是SGML的一个子集，严格地讲，XML也还是SGML。与HTML不同的是，XML有DTD，因而也可以象SGML那样，作为元语言，来定义其它文件系统，或称其它置标语言。如果把置标语言分为元置标语言和实例置标语言的话，SGML和XML都是元置标语言，而HTML和由XML派生的XHTML都是实例置标语言。②SGML(standard general markup language)是一种在WEB发明之前就已存在的使用标记来描述文档资料的通用语言，它是一种定义标记语言的元语言，HTML和XML都是由SGML发展过来的.HTML(HyperText Markup Language)是SGML定义下的一个描述性的语言，是SGML的一个应用，它不能用来定义新的应用，HTML，用于一些Internet的短期的数据.HTMI文档格式非常松散，导致解析的复杂性增加，也导致了不同浏览器浏览的不同.XML(extend MarkUp Lanuage)是SGML的一个简化版本，是SGML的一个子集，严格意义上讲，XML就是SGML.如果一些数据要长期使用，并且要更多的一些结构，XML将更好.XML比HTML严格，如果出现语法错误，浏览器将不发解析显示
③ 标准答案：
SGML（标准通用标记语言）是一个标准，告诉我们怎么去指定文标记。他是只描述文档标记应该是怎么样的元语言，HTML是被用SGML描述的标记语言。因此利用SGML创建了HTML参照和必须共同遵守的DTD，你会经常在HTML页面的头部发现“DOCTYPE”属性，用来定义用于解析目标DTD“!DOCTYPE html PUBLIC ‘-//W3C//DTDHTML 4.01//EN’ ‘http://www.w3.org/TR/html4/strict.dtd’"现在解析SGML是一件痛苦的事情，所以创建了XML使事情更好。XML使用了SGML，例如：在SGML中你必须使用起始和结束标签，但是在XML你可以有自动关闭的结束标签。XHTML创建于XML，他被使用在HTML4.0中。你可以参考
下面代码片段中展示的XML DTD“Q!DOCTYPE html PUBLIC ‘-//W3C//DTD XHTML 1.0 Transitional//EN’‘http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd’>"
总之，SGML是所有类型的父类，较旧的HTML利用SGML，HTML4.0使用派生自XML的XHTML。
浮动的元素 脱离标准文档流（后面简称：脱标）。
浮动的元素可以并排（包含div之类块级元素），并且可以设置宽和高。因为行内元素不能设置宽和高是标准文档流的限制，所以脱标之后就没有这些限制。（绝对定位、固定定位也可以脱离标准文档流）
我们可以理解浮动的元素，先浮（脱标）再动（left），那么脱标之后，该元素就不占有标准文档流的空间，标准文档流的其他元素还是按照从上而下排列。这里可以理解成上下俩层空间的。
一个span元素浮动之后就可以设置宽和高，那么就代表在浮动的世界里，没有块级和行内元素之分。一个元素一旦浮动了，无论它是块级的还是行内的，就能够并排，能够设置宽和高。
清除浮动的原因：
1.因为浮动的元素实际上不占有高，那么没有高的盒子，就没有安全感。例如，想设置下margin都没有办法。
2.因为浮动的元素对其它元素有影响，该影响就是布局混乱。例如，想用2个ul做2行元素都没办法实现。
注意：没有高度的父盒子是管不住浮动的儿子的对其他元素的影响的。
清除浮动的方法：
1.给父盒子加高（height）
这个方法不推荐，因为网站开发过程中需要浮动的元素比较多，通过加高的方法会使得css代码变多，拖慢页面加载速度。
2.外墙法（在盒子外面添加一个带有clear：both属性的盒子）
3.内墙法（给盒子加上clear：both属性，推荐使用）
4.溢出影藏(overflow:hidden)
给一个盒子添加了overflow:hidden,该盒子就会有高度,也可以用来清楚浮动的影响.
引入方式： 行内样式、内部样式表、外部样式表。
一、行内样式
使用style属性引入CSS样式。
二、内部样式表
在style标签中书写CSS代码。style标签写在head标签中。
示例：
三、外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。
语法：
1、链接式
2、导入式
Link和@import的区别是 本质上，这两种方式都是为了加载css文件，但还是存在细微的差别。
差别1：老祖宗的差别，link属于XHTML标签，而@import完全是css提供的一种方式。
link标签除了可以加载css外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS。
差别2：加载顺序的差别：当一个页面被夹在的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再加载。所以有时候浏览@import加载CSS的页面时会没有样式（就是闪烁），网速慢的时候还挺明显。
差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题，完全兼容。
差别4：使用dom控制样式时的差别。当时用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的（不支持）。
差别5（不推荐）：@import可以在css中再次引入其他样式表，比如创建一个主样式表，在主样式表中再引入其他的样式表
选择器在你想应用一个样式的时候，帮助你去选择元素。
举例，下面是简单的被命名为“instro”的样式，他适用于HT
ML元素显示红色背景
应用上面的”intro”样式给div，我们可以使用”class”选择
器，如下图所示
My name is Shivprasad koirala
I write interview questions
假设，你有一个HTML段落标签，使用id是”mytext”，就和下面的片段中显示的那样p id='mytext’ThisisHTML interview questions
你可以使用”#“选择器和”id”的名字创建一种样式，并把CSS值应用到段落标签中，因此应用样式到“mytext”元素，我们可以使用”#mytext”，如下所示CSS列布局帮助你分割文本变为列，例如考虑下面的杂志新闻在一个大的文本中，但是我们需要在他们之间使用边界划分为3列，这里HTML5的列布局就有所帮助了为了实现列布局我们需要指定以下内容为了实现列布局我们需要指定以下内容·我们需要把text划分为多少列指定列数我们需要使用column-count，对于Chrome和firefox分别需要”webkit”和“moz-column”
CSS和模型是围绕在HTML元素周围的定义Border(边界)，padding(内边距)和margin(外边距)的矩形空间Border(边界）：定义了元素包含的最大区域，我们能够使边界可见，不可见，定义高度和宽度等；Padding（内边距）：定义了边界和内部元素的间距Margin：定义了边界和任何相邻元素的间距例如以下是简单的CSS代码定义了盒子的边界，内边距和外边距值.box{width:200px;border:10pxsolid#99c;padding:20px;margin:50px;}现在如果我们应用了以上的CSS到一个如下显示的DIV标签，你输出将会和下面图形中显示的那样。我已经创建两个测试“Some text”和“Some other text”，因此我们能看到多少margin(外边距)的属性功能
Some text
Some other text
这里面试官期待你回答两个Css的文本效果，以下是两种需要注意的效果阴影文本效果
.specialtext{text-shadow:5px5px5px#FF0000;}
文字包装效果
考虑以下会执行上百万次的繁重的循环代码
function SomeHeavyFunction()
{for(i=0;i<10000000000000;i++)
x = i +x;}
}
比方说上面的循环代码在HTML按钮点击以后执行，现在这个方法执行是同步的，换句话说这个浏览器必须等到循环完成才能操作<input type='button’οnclick=‘SomeHeavyFunction();’/>这个会进一步导致浏览器冻结并且没有相应，屏幕还会显示如下的异常信息
如果你能移动这些繁重的循环到Javascript文件中，采用异步的方式运行，这意味着浏览器不需要等到循环接触，我们可以有更敏感的浏览器，这就是web worker的作用Web worker帮助我们用异步执行Javascript文件
Web worker线程不能修改HTML元素，全局变量和Window.Location一类的窗口属性。你可以自由使用Javascript数据类型，XMLHttpRequest调用等。
(1)、父级div定义 height 原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。 优点：简单、代码少、容易掌握 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题 建议：不推荐使用，只建议高度固定的布局时使用
(2)、结尾处加空div标签 clear:both 原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度 优点：简单、代码少、浏览器支持好、不容易出现怪问题 缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好 建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法
(3)、父级div定义 伪类:after 和 zoom 原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题 优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等） 缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。 建议：推荐使用，建议定义公共类，以减少CSS代码。
(4)、父级div定义 overflow:hidden 原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 优点：简单、代码少、浏览器支持好 缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。 建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
(5)、父级div定义 overflow:auto 原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度 优点：简单、代码少、浏览器支持好 缺点：内部宽高超过父级div时，会出现滚动条。 建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。
/首字母大写/
.a {text-transform:capitalize;}
/全都是大写/
.b {text-transform:uppercase;}
/全都是小写/
.c {text-transform:lowercase;}
首先是因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
其次初始化CSS样式可以提高编码质量，保持代码的统一性，如果不初始化整个页面做完很糟糕，重复的CSS样式很多。去掉标签的默认样式如：margin,padding，其他浏览器默认解析字体大小，字体设置。
如果权重相同，则最后定义的样式会起作用
id 权重为 100，类和伪类权重为 10，元素和伪元素全重为 1
否定伪类选择器 :not() 的权重:它的权重是由括号内的内容决定
如果两个选择器作用在同一元素上，则权重高者生效
CSS2 规范中规定: !important 用于单独指定某条样式中的单个属性。对于被指定的属性，有 !important 指定的权重值大于所有未用 !important 指定的规则。
伪元素
::first-letter 将样式 添加到文本的首字母
::first-line 将样式添加到文本的首行
::before 在某元素之前插入某些内容
::after 在某元素之后插入某些内容
给div设置一个宽度，然后添加margin:0auto属性
div{width:200px；margin:0auto;}
居中一个浮动元素确定容器的宽高宽500高300的层设置层的外边距
.div{Width:500px；height:300px；//高度可以不设
Margin:-150px00-250px;
position:relative;//相对定位
background-color:pink;//方便看效果
left:50%;top:50%；}
1.id选择器（#myid）
2.类选择器（.myclassname)
3.标签选择器（div,h1.p)
4.相邻选择器（hl+p）
5.子选择器（ul<li）
6.后代选择器（li a）
7.通配符选择器（*）
8.属性选择器（a[rel=’external’])
9.伪类选择器（a：hover.li：nth-child)
可继承的样式：font-size font-family color,UL LI DL DD DT;
不可继承的样式：border padding margin width height;优先级就近原则，同权重情况下样式定义最近者为准；
载入样式以最后载入的定位为准；
优先级为： !important > id > class > tag
important 比 内联优先级高
CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个p元素的每个p元素。
p:last-of-type 选择属于其父元素的最后p 元素的每个p元素。
p:only-of-type 选择属于其父元素唯一的p元素的每个p元素。
p:only-child 选择属于其父元素的唯一子元素的每个p元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个p元素。
:enabled ：disabled 控制表单控件的禁用状态。
：checked 单选框或复选框被选中。
IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；
发生概率：100%
解决方案：使用CSS通配符*，设置内外补丁为0
*{ margin: 0; padding: 0;}
块属性标签float之后，又有横向的margin值，在IE6中显示会比设置的大（IE6双边距bug）发生概率：90%
解决方案：在float标签样式控制中加入display:inline;
设置较小的高度标签（一般小于10px），在IE6，IE7，遨游中超出自己设置的高度发生概率：60%
解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度。
行内标签设置display:block;后又采用float布局，再设置横向margin值时，在IE6中显示会比设置的大（IE6双边距bug）发生概率：20%
解决方案：在display:block;后面加上display:inline;display:table;
图片默认有间距发生概率：20%
解决方案：使用float为img布局
标签最低高度设置min-height不兼容发生概率：5%
解决方案：例如要设置一个标签的最小高度为200px
{ min-height: 200px;
height: auto!important;
height: 200px;
overflow: visible;}
透明度兼容设置发生概率：主要看你要写的东西设不设透明度
解决方案：一句话
transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
}
opacity:0.5;This is the “most important” one because it is the currentstandard in CSS. This will work in most versions of Firefox, Safari, andOpera.This would be all you need if all browsers supported current standards. Which,of course, they don’t.
filter:alpha(opacity=50);This one you need for IE.
-moz-opacity:0.5;You need this one to support way old school versions of theMozilla browsers like Netscape Navigator.
-khtml-opacity:0.5;This is for way old versions of Safari (1.x) when therendering engine it was using was still referred to as KTHML, asopposed to thecurrentWebKit.
Box Model的bug描述：给一个元素设置了高度和宽度的同时，还为其设置margin和padding的值，会改变该元素的实际大小。
解决办法：在需要加 margin和padding的div内部加一个div,在这个div里设置margin和padding值。
IE6中的列表li楼梯状bug描述：通常在li中的元素（比如a）设置了浮动float，但li本身不浮动。
解决办法：
ul li{float:left;}
或 ul li{display:inline;}
10.li空白间距
描述：在IE下，会增加li和li之间的垂直间距
解决办法：给li里的a显式的添加宽度或者高度
li a{width:20px;}
或者
li a{display:block;float:left;clear:left;}
或者
li {display:inline;}
li a{display:block;}
或者
在每个列表li上设置一个实线的底边，颜色和li的背景色相同
11.overflow：auto;和position:relative的碰撞
描述：此bug只出现在IE6和IE7中，有两个块级元素，父元素设置了overflow：auto;子元素设置了position:relative;且高度大于父元素，在IE6-7中子元素不会被隐藏而是溢出。
解决方案：给父元素也设置position:relative;
12.浮动层的错位
描述：当内容超出外包容器定义的宽度时会导致浮动层错位问题。在Firefox、IE7、IE8及其他标准浏览器里,超出的内容仅仅只是超出边缘;但在IE6中容器会忽视定义的width值,宽度会错误地随内容宽度增长而增长。如果在这个浮动元素之后还跟着一个浮动元素,那么就会导致错位问题。
解决方案：overflow：hidden;
13.IE6克隆文本的bug
描述：若你的代码结构如下
…
很有可能在IE6网页上出现一段空白文本
解决方案：
使用条件注释
删除所有注释
在注释前面的那个浮动元素加上 display：inline；
14.IE的图片缩放
描述：图片在IE下缩放有时会影响其质量
解决方案：img{ -mg-interpolation-mode:bicubic;}
15.IE6下png图片的透明bug
描述：使用透明图片,使用png24或png32图片在IE6下面显示图片会有一层淡蓝色的背景。
解决方案：
.img{
background:url(‘http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png’);
_background:0;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png’,sizingMethod=‘scale’);
}
img{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png’,sizingMethod=‘scale’);}
或
16.透明背景bug
描述：在IE浏览器中，框架不会自动把背景设为透明
解决方案：
在iframe调用的content.html页面中设置
body{background-color: transparent;}
16.禁用IE默认的垂直滚动条
解决方案：
html{
overflow:auto;
}
GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
POST：一般用于修改服务器上的资源，对所发送的信息没有限制。
GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，
也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更安全
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
HTPP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（ssL或TsL），这个时候，就成了我们常说的HTTPS。默认HTTP的端口号为80，HTTPs的端口号为443。
因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有。https之所以比http安全，是因为他利用。1/t1s协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性
当发送一个服务器请求时，浏览器首先会进行缓存过期判断。浏览器根据缓存过期时间判断缓存文件是否过期。情景一：若没有过期，则不向服务器发送请求，直接使用缓存中的结果，此时我们在浏览器控制台中可以看到200OK(from cache），此时的情况就是完全使用缓存，浏览器和服务器没有任何交互的。
情景二：若已过期，则向服务器发送请求，此时请求中会带上①中设置的文件修改时间，和Etag
然后，进行资源更新判断。服务器根据浏览器传过来的文件修改时间，判断自浏览器上一次请求之后，文件是不是没有被修改过；根据Etag，判断文件内容自上一次请求之后，有没有发生变化
情形一：若两种判断的结论都是文件没有被修改过，则服务器就不给浏览器发index.html的内容了，直接告诉它，文件没有被修改过，你用你那边的缓存吧——304Not Modified，此时浏览器就会从本地缓存中获取index.htm1的内容。此时的情况叫协议缓存，浏览器和服务器之间有一次请求交互。
情形二：若修改时间和文件内容判断有任意一个没有通过，则服务器会受理此次请求，之后的操作同①①只有get请求会被缓存，post请求不会
1、Cache-Control
Cache-Control属性是在服务器端配置的，不同的服务器有不同的配置，apache、nginx、IIS、tomcat等配置都不尽相同。
以Apache为例，在http.conf中做如下配置：
<filesMatch ”.(jpg|jpeg|png|gif|ico)$”>
Header set Cache Control max-age=16768000,public
<filesMatch ”.(css|js)$”>
Header set Cache Control max-age=2628000,public
问题：浏览器缓存的资源，若又想更新资源，如何实现？
解决：通过修改该资源的名称来实现。修改了资源名称，浏览器会当做不同的资源。
Expires属性也是在服务端配置的，具体的配置也根据服务器而定。
问题：可能存在客户端时间跟服务端时间不一致的问题。
解决：建议Expires结合Cache-Control一起使用。
