html、CSS面试题（高频）

前言

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

HTML

题目

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

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

3盒模型和怪异盒模型

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

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

6cookie、sessionStorage、localStorage的区别

7简述一下src和href的区别

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

9html语义化是什么

10xhtml和html的区别

11Doctype作用

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内

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

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

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

渐进增强：先针对低版本的浏览器构建页面，保证最基本的功能，再对高版本浏览器追加效果和功能
优雅降级：一开始就构建最高版本浏览器的完整功能，再针对低版本浏览器进行兼容

6cookies、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

9html语义化是什么

当页面样式加载失败时可以让页面呈现出清晰的结构
有利于seo（搜索引擎优化），便于项目的开发和维护

10xhtml和html的区别

XHTML模式语义更为严格：

• 所有标签都要有响应的结束标记
• 所有的标签必须合理嵌套
• 所有的属性都必须用引号括起来
• 图片中必须有说明文字

11Doctype作用

告知浏览器用什么文档类型来解析这个文档

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以下的浏览器兼容