HTML CSS常见的面试题
1 知道的网页制作会用到的图片格式有哪些
png-8
png-24
gif
jpeg
svg
Webp(重点)
webp是谷歌开发的一种旨在加载图片加载速度的图片格式，图片压缩体积大小只有jpeg的三分之二，并能节省大量的服务器带宽资源和数据空间。
2 SGML(标准通用标记语言) 和HTML (超文本标记语言)
SGML是一个用于定义标记语言的系统。为用户提供一种类似语法的机制，用于定义文档的结构和指示文档结构的标签
SGML声明。SGML声明指定义了应用程序中可能出现的字符和分隔符。
文档类型定义(DTD document type definition) 。 DTD定义了标记构造的语法，
描述标记所表达的语义。此规范还定义了无法在DTD中表达的语法的限制。
包含数据和标记的文档实例。每个实例都包含了一个对DTD的引用，用于解释它。
标准答案：
SGML是一个标准，告诉我们怎么去指定文档标记。他是只描述文档标记应该是怎么样的元语言HTML是被用SGML描述的标记语言你。
因此利用SGML创建HTML参照和必须共同遵守的DTD，你会经常在HTML页面的头部发现"DOCTYPE"属性，用来定义用于解析目标DTD
总之，SGML是所有类型的父亲，较旧的HTML利用SGML，HTML4.0使用派生自XML的XHTML
3 你对CSS中浮动的理解以及如何清除浮动？
设置了浮动属性的元素会脱离普通标准文档流的控制，移动到其父元素中指定的位置的过程，将块级元素放在一行，浮动会脱离标准流，不占位置，浮动只有左右浮动，没有上下浮动，浮动元素摆脱了块级元素和行内元素的限制，
清除浮动：
- 给浮动元素的父级标签添加overflow:hidden或者overflow:auto属性
- 为浮动元素的下一个兄弟元素添加clear:both属性。
- 父级div元素定义zoom
- 父级div定义height
4 CSS的引入方式？ Link和@import的区别？
- 外部链入一个CSS文件，在HTML头部分标明：
- 头部直接写入CSS：
- 直接在HTML标签里写入：
- 外接多个CSS文件时：
5 link和@import的区别：
link属于XHTML标签，而@import完全是CSS提供的一种方式
当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。
由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题
当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
5 CSS中的选择器?
选择器在你想要应用一个样式的时候，帮助你去选择元素，例如
类选择器：
.app{height:100px;width:100px}
<div class=app></div>
此外还有 ID选择器，标签选择器，等等
6 如何使用ID值来应用一个CSS样式？
您可以使用"#"选择器和"id"的名字一样来创建一个样式，并把CSS样式应用到段落标签中，例如：
<style>
#myid{
height:50px;
width:50px;
background-color:#0000cd;
}
<div id="myid"></div>
</style>
7 CSS中使用列布局是什么?
css列布局帮助你分割文本变为列，例如考虑下面的杂志新闻在一个大的文本中，但是我们需要在他们之间使用边界划分为3列，指定列数我们需要使用column-count，对于Chrome和Firefox分别需要"webkit"和"moz"
例如：
<style>
.app{
-moz-column-count:3;
-webkit-column-count:3;
column-count:3; //列数(栏数)
-moz-column-gap:30px;
-webkit-column-gap:30px;
column-gap:30px; //列间距(沟壑)
-moz-column-width:20px;
-webkit-column-wdith:20px;
column-width:20px; //栏的宽度
-moz-column-rule:5px #ff0000;
-webkit-column-rule:5px #ff0000;
column-rule:5px #ff00000; //(列样式)
}
</style>
<body>
<div class="app">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias consectetur n a m placeat pos simus sint laudantium id mollitia temporibu s nisi ut sed nesciunt aliquam! Explicabo voluptatem a ea ipsum dolorem ad?
</div>
</body>
8 你能解释一下CSS中的盒子模型吗？
css盒模型是围绕在HTML元素周围的定义border，padding和margin的矩形空间
border(边界)：定义了元素包含的最大区域，我们能够使边界可见，不可见，定义高度宽度等；
padding(内边距)：定义了边界和内部元素的间距；
margin(外边距)：定义了边界和任何相邻元素的间距；
样式为：
.app{
width:100px;
padding:20px; //内容与边界会相距20px
margin:30px; //边界与外部元素相距30px;
border:3px solid red; 边界样式 宽度3px solid(实线) 红色
}
9 你能解释一下CSS3中的文本效果吗？
两种需要注意的效果：
阴影文本效果：
.div{ text-shadow:5px 5px 5px #00ff00}
垂直偏移量，水平偏移量，模糊距离，阴影颜色；
文字包装效果：
.break{word-wrap:break-word}
10 什么是Web Workers？为什么我们需要它们？
考虑到以下会执行上百万次的繁重的循环代码
function myfun(){
for(var i=0;i<10000000;i++){
var x;
x = i+x;
}
}
比方说上面的循环代码在HTML按钮点击以后执行，现在这个方法执行是同步的，换句话说这个浏览器必须等到循环完成才能操作,这个会进一步导致浏览器冻结并且没有响应，
如果能移动这些繁重的循环到js中，采用异步方法，这意味着浏览器不需要等到循环接触，我们可以有更敏感的浏览器，这就是web workers的作业，它帮助我们用异步执行js文件
11 Web Workers线程的限制是什么？
Web Workers线程不能修改HTML元素，全局变量和Window.Location一类的窗口属性，你可以自由使用js数据类型，XMLHttpRequest调用等；
12 请列举几种可以清除浮动的方法
- 给浮动元素的父级标签添加overflow:hidden或者overflow:auto属性
- 为浮动元素的下一个兄弟元素添加clear:both属性。
- 父级div元素定义zoom
- 父级div定义height
13 display:none 和 visibility:hidden的区别？
display:none 不显示对应的元素，在文档流中不再分配空间(回流+重绘)(可以理解为消失)
visibility:hidden 隐藏对应元素，在文档流中仍然保留原来的空间(重绘) (可以理解为隐身/隐藏)
14 如何让一段文本中的所有英文首字母大写？
添加 text-transform：capitalize；//作用 首字母大写
15 为什么要初始化CSS样式？
因为浏览器兼容原因，有些浏览器默认自带边距，如果不初始化，页面显示效果有有所差异，
最简单的初始化:
*{ padding:0;margin:0;} //*代表全部/所有
16 CSS定义的权重：
- 权重规则：
- 元素选择符：1；
- class选择符：10；
- id选择符：100；
- 元素标签：1000；
17 列出display和position的值，并说明
display：
block ：像块元素一样显示(独占一行)
none：缺省值，像行内元素类型一样显示
inline-block：像行内元素一样像是，但其内容像块元素一样显示
list-item：像块元素一样显示，并添加样式列表标记
position：
absolute：绝对定位，相对于第一个带有position并且值不为static的父元素定位
fixed ：固定定位，相对于浏览器进行定位
relative ：相对定位，相对于自身正常位置进行定位
static 默认值，没有定位，
inherit：规定从父元素继承position属性的值。
18 CSS3新增伪类？
p：first-of-type 选择属于其父元素的首个p元素
p：last-of-type 选择属于其父元素的最后一个p元素
p：only-of-type 选择属于其父元素唯一的p元素
p：only-child 选择属于其父元素的唯一子元素
p：nth-child（）：
（num）选择属于其父元素的第num个p元素
（even）选择属于其父元素的位置为偶数的p元素
（odd）选择属于其父元素的位置为奇数的p元素
：enabled ：disabled 控制表单控件的禁用状态
：checked 单选框或复选框被选中
19 如何居中div? 如何居中一个浮动元素？
居中div；
.div{
width：200px;
margin:10px auto;
}
居中一个浮动元素
确定容器的宽高，设置层的外边距
.app{
width:500px;
height:300px;
margin：-150px 0 0 -250px;
position:relative;
left:50%;
top:50%;
}
20 CSS选择符有哪些？ 哪些属性可以继承？优先级？
选择符：
- id选择器 (# app)
- 类选择器(.app)
- 标签选择器(div)
- 相邻选择器(h1 + p)
- 子选择器 (ul < li)
- 后代选择器 (div p)
- 通配符选择器( * )
- 属性选择器( a[rel=“external”])
- 伪类选择器(a:hover li:nth-child)
可继承的：
font-sizefont-familycolorul lidl dd dt
不可继承：
borderpaddingmarginwidthheight
优先级就近原则，同权中情况下样式定义最近者为准；
载入样式以最后载入的定位为准
优先级为：
!important > id > class > tag
!important比内联优先级高(最高)
21 浏览器的内核分别是什么？
IE浏览器内核Trident、Mozilla的Gecko、Chrome的Blink(webkit的分支)、Opera的内核为Presto，现为Blink、Firefox的Gecko
22 常见兼容性问题？
png24位的图片在ie6浏览器上出现背景 —解决方案 做成png8
浏览器默认margin和padding不同 —解决方案 *{padding：0；margin：0；}
块属性标签float后，又有横行的margin情况下，在IE6显示的margin比设置的大 —解决方案 在float的标签样式控制中加入 display：inline-block将其转化为行内属性
设置较小高度标签（一般小于10px，在ie6，ie7，遨游中高度超出自己设置高度 —解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
23 GET和POST的区别，何时使用POST？
GET：一般用于信息获取，使用URL传递参数，对所发信息的数量也有限制，一般在2000个字符
POST：一般用于修改服务器上的资源，对所发送的信息没有限制。
GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，也就是说GET是通过地址栏来传值，而POST是通过提交表单来传值
然而，在以下情况下，请使用POST:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST没有数据量限制)
- 发送包含未知字符的用户输入时，POST比GET更稳定也更可靠。
24 渐进增强和优雅降级
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果，交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
25 HTTP 和 HTTPS
HTTP协议通常承载与TCP协议之上，在HTTP和TCP之间添加一个安全协议层(SSL或TSL),这个时候，就成了我们常说的HTTPS
HTTP默认端口号为80 HTTPS默认端口号为443
26 为什么HTTPS安全？
因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用https，密钥在你和终点站才有。https之所以比http安全，是因为他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等等。保障了传输过程的安全性
27 什么是Etag？
http协议规格说明定义Etag为"被请求变量的实体值"。另一种说法是，Etag是一个可以与web资源关联的记号(token)。典型的web资源可以一个web页，也可能是JSON或XML文档。
28 Expires 和Cache-Control
expires要求客户端和服务端的时钟严格同步，http1.1引入cache-control来克服EXpires头的限制，如果max-age和Expires同时出现，则max-age有更高级的优先级；
Cache-Control：no-cache，private max-age=0
ETag：abcde
Expires：Thu，15 Apr201420:20:00GMT
Pragma：private
Last-Modified：$now //RFC1123 format
ETag应用：
etag由服务器生成，客户端通过if-match或者说if-none-match这个条件判断请求来验证资源是否修改。常见的是使用if-none-match。请求一个文件的流程可能如下：
---- 第一次请求
1.客户端发起http get 请求一个文件；
2 服务器处理请求，返回文件内容和一堆Header，当然包括etag
---- 第二次请求
客户端发起http get 请求一个文件，注意这个时候客户端同时发送一个if-none-match头，这个头的内容就是第一次请求时服务器返回的etag：2e681a-6-5d0448402.服务器判断发送过来的etag和计算出来的etag匹配，因此if-none-match为false。不返回200，返回304，客户端继续使用本地缓存；流程很简单，问题是，如果服务器又设置了Cache-Control：max-age和Expires
答案是同时使用，也就是说在完全匹配if-modified-since和if-none-match即检查完修改时间和etag之后，
服务器才能返回304
为什么使用Etag请求头？
Etag主要为了解决Last-Modified无法解决的一些问题