html、CSS面试题（高频面试题）

前言
这里采用题目和答案分开的方式，方便测验自己对题目的理解能力

 

HTML

题目
1、 有哪些浏览器，内核分别是什么？

2 、quirks模式是什么？和standards模式有什么区别

3 、盒模型和怪异盒模型

4 、img中的alt和title有何异同？strong和em的异同

5 、你能描述一下渐进增强和优雅降级之间的不同吗？

6 、cookie、sessionStorage、localStorage的区别

7 、简述一下src和href的区别

8  、html5有哪些新特性（基本必问题）

9 、html语义化是什么

10 、xhtml和html的区别

11 、Doctype作用

12 、如何实现浏览器多个标签页之间的通信

13 、为什么利用多个域名来存储网站资源会更加有效

14 、块级元素和行级元素分别有哪些，还有内联元素有哪些

 

CSS
题目

1、CSS3新特性
2、CSS都有哪些选择器
3、什么是CSS hack
4、如何垂直居中一个浮动元素
5、css中link和@import的区别

HTML答案
1、有哪些浏览器，内核分别是什么？
IE浏览器    trident
火狐浏览器    gecko
谷歌浏览器    blink
Safari浏览器    webkit
2、 quirks模式是什么？和standards模式有什么区别
怪异模式，这种模式当考虑到了浏览器的兼容性，它会去判断浏览器是否支持新功能，支持就用新功能，不支持就用之前的功能。

3、盒模型和怪异盒模型
盒模型：就是常用的盒模型，宽高包含border和padding：width(height)=border+padding+width(height)
怪异盒模型：width+height。border和padding已经包含在width和height内

4、img中的alt和title有何异同？strong和em的异同
alt：当图片无法正常显示时，alt中内容用来替换文字
title：该属性为当鼠标划到图片上的值
strong：粗体，表示强调
em：斜体，更加重的强调

5、你能描述一下渐进增强和优雅降级之间的不同吗？
渐进增强：先针对低版本的浏览器构建页面，保证最基本的功能，再对高版本浏览器追加效果和功能
优雅降级：一开始就构建最高版本浏览器的完整功能，再针对低版本浏览器进行兼容

6、cookies、sessionStorage、localStorage的区别
cookie为会话跟踪技术，在一次会话开始到结束的整个过程，全程跟踪记录客户端的状态，例如登录信息，下载信息等等
cookie：大小为4k ，过期时间为自己设置的有效时间内，
sessionStorage：大小为5M，当浏览器关闭后数据就销毁
localStorage：大小为5M，可以在本地长期存储，除非主动删除数据，否则数据不会过期

7、简述一下src和href的区别
src为source的缩写，将制定的文件放入该位置，当浏览器解析到时浏览器会先加载完该文件内容，再去往下执行，这也是为什么js文件一般写在body体最后的原因（可以加快网页的访问速度）

href为Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素或当前文档之间的链接。当加载到此文件时会并行下载资源并不会停止对当前文档的处理。

8、 html5有哪些新特性（基本必问题）
音频视频 （audtio）（video）
表单控件datalist、datetime、output、month、week、time、emailurl等
画布canvas
localStorage、sessionStorage
地理API
9、html语义化是什么
当页面样式加载失败时可以让页面呈现出清晰的结构
有利于seo（搜索引擎优化），便于项目的开发和维护

10、xhtml和html的区别
XHTML模式语义更为严格：

所有标签都要有响应的结束标记
所有的标签必须合理嵌套
所有的属性都必须用引号括起来
图片中必须有说明文字
11、Doctype作用
告知浏览器用什么文档类型来解析这个文档

12、如何实现浏览器多个标签页之间的通信
文件合并、文件压缩、使用CDN托管

13、为什么利用多个域名来存储网站资源会更加有效
cdn缓存方便，节约cookie带宽，优化响应速度

14、块级元素和行级元素分别有哪些，还有内联元素有哪些
块级元素：div、ul、li、h1-h4、p
行级元素：span、b、a、abbr、em、i、sub、sup
内联元素：img、button、input

CSS答案
1、CSS3新特性
圆角，线性渐变，旋转，rgba，媒体查询，

2、 CSS都有哪些选择器
标签选择器，id选择器，类选择器，全局选择器，群组选择器，后代选择器

3、什么是CSS Hack
针对不同的浏览器写不同的css的过程

4、如何垂直居中一个浮动元素
若已知宽高

width: 200px;
height: 200px;
position: absolute;
top: 50%
left: 50%
margin-top: -100px;
margin-left: -100px;

若未知宽高

 margin: 0 auto
 position: absolute
 left: 0
 top: 0
 right: 0
 bottom: 0

5、 css中link和@import的区别
link属于html标签，@import是css中提供的
页面加载的时候link会被同时加载，但@import引用的css页面需要等页面加载完成后才会加载引用的css
@import不被ie5以下的浏览器兼容