web前端面试题之html&css篇

HTML&CSS面试题

ps：自己最近整理的一部分，不喜勿喷，有错忘指正，谢谢！！！

HTML部分

1.XHTML和HTML有什么区别
(1)HTML是一种基本的WEB网页设计语言，XHTML是一个基于XMl的置标语言
(2)最主要的不同
(3)XHTML元素必须被正确地嵌套。
(4)XHTML元素必须被关闭
(5)标签名必须用小写字母
(6)XHTMl文档必须拥有根元素

2.什么是语义化的html？
答：
(1)直观的认识标签对于搜索引擎的抓取有好处，用正确的标签做正确的事情！
(2)HTML语义化就是让页面的内容结构化，便于对浏览器，搜索引擎解析；
(3)在没有样式css情况下也以一种文档格式显示，并且是容易阅读。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO。
(4)在阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

3.简述一下对html语义化的理解
答：
(1)用正确的标签做正确的事情。
(2)html语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析；
(3)即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的；
(4)搜索引擎的爬虫也依赖于HTML标记确定上下文和各个关键字的权重，利用SEO;
(5)使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

4.常见的浏览器内核有哪些？
答：
(1)Trident内核：IE,MaxThon,TT,The Word,360,搜狗浏览器等。[又称为MSHTML]
(2)Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等；
(3)Presto内核：Opera7及以上。[Opera内核原为：Presto，现为：Blink]
(4)Webkit内核：Safari,Chrome等。[Chrome的:Blink(Webkit的分支)]

5.html5有哪些新特性，移除了哪些元素？如何处理html5新标签的浏览器兼容问题？如何区分html和html5？
答：
新特性：
(1)绘画canvas
(2)用于媒介回放的video和audio元素
(3)本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；
(4)sessionStorage的数据在浏览器关闭后自动删除
(5)语意化更好的内容元素，比如article,footer,header,nav,section
(6)表单控件：calendar,date,time,email,url,search
(7)新的技术webworker,websocktGeolocation

移除元素：basefont,big,center,font,s,strike,tt,u,frame,frameset,noframes;
处理兼容问题：IE8/IE7/IE6支持通过document,createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。

6.请描述一下cookies，sessionStorage（会话存储）和localStorage（本地存储）的区别？
答：
cookie在浏览器和服务器间来回传递。sessionStorage和localStorage不会；
sessionStorage和localStorage的存储空间更大；
sessionStorage和localStorage有更多丰富易用的接口；
sessionStorage和localStorage各自独立的存储空间；

区别：
(1)cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
(2)cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递。
(3)sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
存储大小：
(4)cookie数据大小不能超过4K。
(5)sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有期时间：
localStorage：存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage：数据在当前浏览器窗口关闭后自动删除
cookie：设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

7.如何实现浏览器内多个标签页之间的通信？
答：
(1)用localstorage,cookies等本地存储方式
(2)WebSocket、SharedWorker
(3)localstroge另一个浏览器上下文被添加、删除或修改时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。
(4)注意quirks:Safari在无痕迹模式下设置localstorge值抛出QuotExceededError的异常

8.Doctype？严格模式与混杂模式如何触发这两种模式，区分它们有何意义？
答：用于声明文档使用哪种规范（html/Xhtml）一般为严格过渡基于框架的html文档。
加入XML声明可触发，解析方式更改为IE5.5拥有IE5.5的Bug。

9.Html5有哪些操作可以seo优化？
答：title标签；meta标签；header标签；footer标签；元标签（meta标签）；导航标签（nav标签）；文章标签（article标签）；左或右侧标签（aside标签）

10.iframe的作用？
答：用法
1、iframe是用来在网页中插入第三方页面，早期的页面使用iframe主要是用于导航栏这种很多页面都相同的部分，这样在切换页面的时候避免重复下载。
优点
1、便于修改，模拟分离，像一些信息管理系统会用到 。
2、但现在基本不推荐使用。除非特殊需要，一般不推荐使用。
缺点
1、iframe的创建比一般的DOM元素慢了1-2个数量级
2、iframe标签会阻塞页面的的加载，如果页面的onload事件不能及时触发，会让用户觉得网页加载很慢，用户体验不好，在Safari和Chrome中可以通过js动态设置iframe的src属性来避免阻塞。
3、iframe对于SEO不友好，替换方案一般就是动态语言的Incude机制和ajax动态填充内容等。

11.前端页面有哪三层结构，分别是什么，作用是什么？
答：结构层、表示层、行为层
结构层：由HTML或者xhtml之类的标记语言负责创建
表示层：由css负责创建
行为层：由JavaScript语言负责创建

12.如何对网站的文件和资源进行优化？
答：文件合并
文件最小化/文件压缩
使用cdn托管
缓存的使用

13.写出集中IE6 bug的解决方法
答
(1)双边距BUG float引起的 使用display
(2)3像素问题使用float引用的使用display:inline -3px;
(3)超链接hover后点击失效，使用正确的书写顺序 link visited hover active
(4)le z-index问题给父级添加position:relative
(5)png 透明使用js代码改
(6)min-height最小高度 ！important解决
(7)select 在ie6下遮盖 使用iframe嵌套
(8)为什么没有办法定义1px左右的宽度器（IE6默认的行高造成的，使用over:hidden,zoom:0.08,line-height:1px）

14.为什么HTML只需要写！DOCTYPE HTML？
答：！Doctype声明位于HTML文档的第一行，处于html标签之前。告知浏览器的解析器用什么文档标准解析这个文档。doctype不存在或格式不正确会导致文档以兼容模式呈现。
标准模式的排版和JS运作模式都是该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式来显示，模拟老式浏览器的行为以防止站点无法工作。

15.Web Storage与Cookie相比存在的优势：
(1)、存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。
(2)、存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。
(3)、更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，如setItem,getItem,removeItem,clear等,使得数据操作更为简便。cookie需要自己封装。
(4)、独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。

16.web前端开发，如何提高页面性能优化？
答：
内容方面：
1.减少 HTTP 请求 (Make Fewer HTTP Requests)
2.减少 DOM 元素数量 (Reduce the Number of DOM Elements)
3.使得 Ajax 可缓存 (Make Ajax Cacheable)
针对CSS：
1.把 CSS 放到代码页上端 (Put Stylesheets at the Top)
2.从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)
3.精简 JavaScript 与 CSS (Minify JavaScript and CSS)
4.避免 CSS 表达式 (Avoid CSS Expressions)
针对JavaScript ：
1.脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)
2.从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)
3.精简 JavaScript 与 CSS (Minify JavaScript and CSS)
4.移除重复脚本 (Remove Duplicate Scripts)
面向图片(Image)：
1.优化图片
2.不要在 HTML 中使用缩放图片
3.使用恰当的图片格式
4.使用 CSS Sprites 技巧对图片优化

17.所了解的web攻击技术
答：
XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
SQL注入攻击
CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。

CSS部分

1.介绍一下标准的css的盒子模型。与低版本的ie的盒子模型有什么不同？
答：标准的盒子模型：宽度=内容的宽度（content）+border+padding+margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+margin

2.box-sizing属性
答：用来控制元素的盒子模型的解析模式，默认是content-box
content-box：W3C的标准盒子模型
border-box：IE传统盒子模型

3.css选择器有哪些？那些属性可以继承？ 特性是什么
答：css选择器有：类选择器 ID选择器 属性选择器 标签选择器 通配符选择器 响铃选择器 子选择器 后代选择器 伪类选择器
可继承的属性：font-size font-family color
不可继承的属性：border padding margin width height
优先级选择（遵循就近选择）：!Important > id > class > tag
!important的优先级比内联优先级高
css的三大特性：层叠性，继承性，优先级

4.css3新增伪类有哪些？
答：
(1)first-of-type：选择属于其父的首个元素
(2)last-of-type：选择属于其父的最后元素
(3)only-of-type：选择属于其父的唯一元素
(4)only-child：选择属于其父的唯一子元素
(5)nth-child（2）：选择属于其父的第二个子元素
(6)Enabled disabled 表单控件的禁用状态
(7)Checked：单选框或复选框被选中

5.如让居中div？如何居中一个浮动的元素？如何让绝对定位的div居中
答：
居中div：

border: 1px solid red;
margin: 0 auto; 
height: 50px;
width: 80px;

居中浮动元素：

border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px; 

绝对定位居中：

border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0; 

6.display有哪些值？作用是什么？
答：
(1)inline（默认）：内联
(2)None：隐藏
(3)Block：块显示
(4)Table：表格显示
(5)list-item：项目列表
(6)inline-block

7.position的值有哪些？
答：
(1)static（默认）：按照正常文档流进行排列
(2)Relative（相对定位）：不脱离文档流，参考自身静态位置
(3)Absolute（绝对定位）：参考最近一个部位static的父级元素定位
(4)Flexed：（固定定位）：参考对象事可视窗口

8.css3有哪些新特性？
答：
(1)rgba和透明度
(2)Background-image background-origin（context-box/padding-box/border-box）background-size background-repeat
(3)word-wrap（对长的不可分割的单词换行）word-wrap：break-word
(4)文字阴影：text-shadow：水平阴影 垂直阴影 模糊距离 阴影颜色
(5)font-face属性：定义自己的字体
(6)边框图片：borde-image：url（）30 30 round
(7)盒阴影：box-shadow：水平阴影 垂直阴影 模糊距离 阴影颜色
(8)媒体查询：定义两套css，根据当前浏览器的尺寸采用合适的属性
(9)新增各种css选择器（：not（.Input）：所有不是input的class的子节点 ）
(10)圆角：boder-radius
(11)多列布局：multi-column layout
(12)阴影和反射：shadow/reflect
(13)文字渲染：text-decoration
(14)线性渐变：gradient
(15)旋转：transform
(16)增加了旋转缩放定位倾斜动画多背景
(17)transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

9.解释一下css3的flex以及适用场景
答：flex是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。适用域移动前端开发，在Android和IOS上也完美支持

10.用纯css创建一个三角形
答：

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

11.常见的兼容性问题
答：不同浏览器的标签的默认margin和padding是不同的。使用*{margin：0；padding：0}
IE6双边距bug：块属性float后，又有横行的margin的情况下，在IE6显示的margin显示的比设置的大，使用display：inline将其转化为行内属性
渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}

设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

12.为什么要初始化css
答：因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有对css初始化，会导致出现浏览器页面显示差异

13.css的visibility属性有个collapse属性值？在不用的浏览器下有什么区别？
答：当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现是跟hidden一样的
(1)在chrome中，使用collapse值和使用hidden没什么区别
(2)在Firefox ，opera 和IE中，使用collapse和使用display：none没什么区别

14.display：none和visibility：hidden有什么区别？
答：display：none不显示对应的元素，在文档布局中不在分配空间
Visibility：hidden隐藏对应的元素，占用文档布局空间

15.position跟display、overflow、float这些特性相互叠加后会怎样？
答：
(1)display属性规定元素应该生成的文档类型；
(2)Position属性规定元素的定位类型
(3)Float属性是一种布局方式，定义元素在哪个方向浮动
类似于优先级机制：position：absolute/flexed的优先级最高，有它们时，float不起作用，display的值需要重新调整。Float或absolute定位的元素，只能是块级元素或表格

16.为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式有哪些？
答：浮动元素碰到包含它的边框或者浮动元素的边框停留，由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样，浮动元素会漂浮在文档流得块框上。
浮动带来得问题：
(1)父元素的高度无法被撑开，影响与父元素同级的元素
(2)与浮动元素同级的非浮动元素会跟随其后
(3)若非第一个元素浮动，则该元素之前的元素也会浮动，否则会影响页面显示的结构
清除浮动的方法：
添加额外标签，例如

使用 br 标签和其自身的 clear 属性，例如

父元素设置 overflow：hidden; 在IE6中还需要触发 hasLayout，例如zoom：1;
父元素也设置浮动
使用 :after 伪元素。由于IE6-7不支持 :after，使用 zoom:1 触发 hasLayout
清除浮动最佳实践（after伪元素闭合浮动）：

.clearfix:after{
    content: "\200B";
    display: table; 
    height: 0;
    clear: both;
  }
  .clearfix{
    *zoom: 1;
  }

17.css hack原理及常用hack
原理：利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。
常见的hack有 属性hack选择器hack IE条件注释

17.设置浮动元素后，display的值是多少？
答：block

18.移动端的布局用过媒体查询吗？
答：通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示

里边

CSS : @media only screen and (max-device-width:480px) {/css样式/}

19.使用过css预处理吗？
答：less 和sass

20.css优化、提高性能的方式有哪些？
答：
(1)避免过度约束
(2)避免后代选择器
(3)避免链式选择符
(4)使用紧凑的语法
(5)避免不必要的命名空间
(6)避免不必要的重复
(7)最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
(8)避免!important
(9)尽可能的精简规则，可以合并不同类里的重复规则

21.浏览器是怎样解析css选择器的？
答:css的解析是从右往左解析的。因为从左往右的匹配，如果遇到不符合规则的，就需要回溯，这样就降低了性能；从右往左一开始就把不符合规则的给剔除掉了，节省了性能

22.网页中应该使用奇数还是偶数的字体？为什么？
答：使用偶数字体。因为偶数字体相对更容易和web设计的其他部分构成比列关系。

23.margin和padding分别适合什么场景使用？
答：何时使用margin：
需要在border外侧添加空白
空白处不需要背景颜色
上下相连的两个盒子之间的空白，需要相互抵消时
何时使用padding：
需要在border内侧添加空白
空白处需要背景颜色
上下相连的两个盒子之间的空白，希望为两者之和

24.元素竖向的百分比设定时相对于容器的高度吗？
答：当按一个百分比设定一个元素的宽度的时候，它是相对于父容器的宽度设定的，但是设置竖向距离属性时，根据的也是父容器的宽度，而不是高度

25.全屏滚动的原理是什么？用到了css的哪些属性？
答：原理：有点类似轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现
使用属性；overflow：hidden；transition：all 1000ms ease

26.什么是响应式设计？响应式设计的原理是什么？如何兼容低版本IE？
答：响应式网站设计是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理
页面头部必须要 有meta 声明的viewport

27.视差滚动效果？
答：在网页下滚的时候，控制背景的移动速度比前景的移动速度缓慢来创建出3d效果。
Css实现：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本浏览器
jQuery实现;通过控制不同层的滚动速度，计算每一层的时间，控制滚动效果。优点是能够兼容到各个版本浏览器，效果可控性好；缺点是开发起来难度较高
插件实现方式：例如padding-scrolling，兼容性十分好

28.::before和:after中双冒号和单冒号有什么区别？解释一下这两个伪元素的作用
答:单冒号用于css3伪类，双冒号用于css3伪元素
::before就是以一个子元素的存在，定义在元素主体之前的一个伪元素，并不存在dom当中，只存在页面中。
:before和:after这两个伪元素是在css2.1里面新出现的，在css3中改为使用双冒号

29.对line-height的理解
答：行高是指一行文字的高度，具体说是两行文字之间基线的距离，css中高度起作用的是height和ling-height，没有定义height属性，最终其表现作用的一定是ling-height
单行文本垂直居中：把line-height值设置为height一样大小的值就可以实现单行文本垂直居中
多行文本垂直居中：需要设置display属性为inline-block

30.如何让chrome支持小于12px的文字？
答：p{font-size：10px；-webkit-transform：scale（0.8）//0.8是缩放比例}

31.如何让页面字体变得清晰？
答：-webkit-font-smoothing：antialiased

32.如何处理position：fixed在Android下无效
答：

33.如果需要手写动画，你认为最小的时间间隔是多久，为什么？
答：多数显示屏默认频率是60Hz，所以理论上是1/60*1000ms=16.7ms

34.li与li之间有看不见的空白间隔是什么引起的？有什么解决办法？
答：行框的排列会受到中间空白处（出车空格）等的影响，因为空格也属于字符，这些空白字符会应用样式，占据空间，所以会有间隔，把字符大小设置为0就没有空格了
解决方法：可以将全部li写在一排
浮动li，float：left
在ul中使用font-size：0（谷歌不支持），可以使用letter-sapcing：-3px

35.display：inline-block什么时候会显示间隙？
答：有空格的时候会有间隙，解决方法是移除空格
Margin正值的时候，解决办法是margin使用负值
使用font-size时候，解决方法是font-size:0或letter-sapcing：-3px或word-spacing：-3px。

36.有一个高度自适应的div，里面有两个div，一个高度为100px，希望剩下的那个填满剩下的高度
答：外层div：position：relative
高度自适应的div：position：absolute；top：100px；bottom：0；left：0；

37.解释一下png、jpg、gif这些图片格式，分别什么时候使用，有没有了解过webp？
答：png是便携式我网络图片，是一种无损数据压缩位图片格式，优点是压缩比例高，色彩清晰，大多数地方都可以使用；
Jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性压缩，在色调及颜色平滑变化上做的不错。在www上，被用来存储和传输照片的格式；
Gif是一种位图文件格式，以8为色重现真色彩的图像，可以实现动画效果。
Webp格式是谷歌在2010年推出的图片格式， 压缩率只有jpg的2/3，大小比png小了45%，缺点是压缩的时间更久了，兼容性不好，目前就chrome和opera支持。

38.style标签写在body后与body前有什么区别？
答：页面加载是自上而下的，优先加载样式
写在body标签后由于浏览器以逐行方式 对html文档进行解析，当解析到写在尾部的样式表会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（闪烁现象）

39.css属性overflow属性定义溢出元素内容区的内容会如何处理 ？
答:
(1)参数是scroll，出现滚动条
(2)参数是auto，子元素内容大于父元素时出现滚动条
(3)参数是visible，溢出的内容出现在父元素之外
(4)参数是hidden，溢出的元素会被隐藏

40.阐述一下css sprites
答：将一个页面涉及到的所有图片都包含到一张大图中去，然后利用css的background-image，background-repeat，background-position的组合进行背景定位。利用css sprites能很好的减少网页的http请求，从而大大地提高页面的性能；css sprites能够减少图片的字节。

41.link和@import的区别
答：link是html方式，@import是css方式
Link最大限度支持并行下载，@import过多嵌套会导致串行下载，出现FOUC现象（闪屏）
Link可以通过rel=”alternate stylesheet”指定候选样式
浏览器对link的支持早于@import，可以使用@impact对老浏览器隐藏样式
@import必须在样式规则之前，可以在css文件中引用其他文件
总体来说：link由于@import

42.外边距折叠
答：两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠
浮动元素或inline-block元素或绝对定位的元素的margin不会和垂直方向上的其他元素的margin折叠
创建了块级格式化上下文的元素，不会和它的子元素发生margin折叠
元素自身的margin-bottom和margin-top相邻的时候也会折叠

43.列举几种隐藏元素的方法
答：
(1)visibility：hidden，只是隐藏元素，依然会占据空间 如果绑定了事件，点击该区域不会触发事件 ，该属性会被后代继承，要想后代显示，就必须得设置visibility：visible
(2)opacity：0 只是隐藏元素，依然会占据空间 但是如果绑定了事件的，那么点击该区域会触发相应的事件
(3)position：absolute，将元素定位到屏幕以外
(4)display：none；不会占用空间
(5)transform：scale（0），将一个元素缩放到无限小，会占据空间
(6)