web前端面试题（HTML&CSS）上答案详解

总结了一下遇到的面试上的问题，希望能帮助到大家【歪脖树】

1.你能描述一下你制作一个网页的工作流程吗？

第一步：项目需求评审（明确需求）

第二步：等待ui设计师提供psd（项目需求技术调研）

第三步：等到ui设计师设计稿通过以后，给前端制作静态html＋js（自己在浏览器或者移动设置上浏览，查看是否有兼容问题）

以上为基本制作流程

以下几步为项目对接－一直到发布到线上的过程

第四步：前后台数据对接完成－测试没有问题以后，提交测试环境（任务给测试人员）

第五步：修改测试返回的问题（直到测试通过为准）

第六步：测试发送测试报告以后，提交预生产环境，先试着跑1到2周，观察情况（测试回归任务检验开发任务是否正常）－－－如果不正常返回给响应的开发人员进行修复。

第七步：正式上线（一般在凌晨更新上线）－－主要原因：减少更新项目对用户影响。

第八步：测试人员回归－－前端同时参与回归－－后端也参与回归（如果有问题就悲催了，解决bug，没有问题项目运行正常－－回家睡觉）

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

优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

参考文档：https://segmentfault.com/a/1190000000800711#articleHeader30

3.请解释一下什么是语义化的HTML。
语义化的HTML使用每个html标签都特定的用途，例如p标签放大段文字，h1~h6常用于标题，strong加粗强掉….。

语义化的好处：

1：去掉或样式丢失的时候能让页面呈现清晰的结构：

html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。

2.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.

3.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.

4.你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.

5.便于团队开发和维护

4.你如何对网站的文件和资源进行优化？

1.文件合并

2.文件最小化/文件压缩

3.使用 CDN托管

4.缓存的使用（多个域名来提供缓存）

5.为什么利用多个域名来存储网站资源会更有效？
使用多个域名的原因主要有以下方面：

1.将请求图片的url使用单独的域名,因为图片资源对网站来说是重要的一部，同时带宽要求高（主要做cdn加速）

2.静态资源单独的域名（如：css文件，js文件）

3.其中某个域名崩溃用户也能通过其他郁闷访问网站

6.请说出三种减低页面加载时间的方法
1、压缩css、js文件
2、合并js、css文件，减少http请求
3、外部js、css文件放在最底下
4、减少dom操作，尽可能用变量替代不必要的dom操作

7.什么是FOUC？你如何来避免FOUC？

如果使用import方法对CSS进行导入,会导致某些页面在Windows下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC.
原因大致为：
1，使用import方法导入样式表。

2，将样式表放在页面底部

3，有几个样式表，放在html结构的不同位置。其实原理很清楚：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。解决方法：使用LINK标签将样式表放在文档HEAD中更多

8.文档类型的作用是什么？你知道多少种文档类型声明方式？
影响浏览器对html代码的编译渲染
dtd三种方式

1过渡的(Transitional)

是要求非常宽松的DTD，一般的情况下网页中会使用这个，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

2严格的(Strict)

要求严格的DTD，对页面的标签使用非常严格，页面里几乎不准使用 inline-style的 CSS样式。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

3框架的(Frameset)

专门针对框架页面设计使用的DTD，以前Table满街走的年代很流行这种DTD，如果你的页面中包含有框架，需要采用这种DTD。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" >

4适用于手机浏览器的DTD（已经不用了）

1.你常使用的HTML标签有哪些？

h1-h6 header footer navarticlespan p a div img ul li ol li dl dt dd br strong等

注意：不要只关注问题的字面意思，要深刻的去理解考官为什么要出这个题的目的

参考思路：

1.对标签的理解

2.对浏览器兼容问题的理解

3.对h5新增标签的理解，以及h5新增的属性有哪些？？？

4.对新技术的关注以及是否自己验证过

2.说下你对标签语义化的理解。

“语义化”是指在人为更少的干预下让机器更好的理解和收集信息网页信息；标签的语义化可以让人们更直观认识标签和属性的作用。特别是HTML5规范以后，新出现的许多标签如header、footer、article等，使html正在朝着更加健壮的语义化的HTML结构发展。

标签语义化的好处有：

(1)能让页面呈现清晰的结构;

(2)有利于SEO的优化，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重；

(3)便于团队开发和维护,提高开发效率，甚至实现模块化开发;

(4)屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。

3.你知道的html行级元素和块级元素标签分别有哪些？

块级元素会从新的一行出现，行内元素在一行并排显示；行级元素不能设置width与height.

块级元素有：h1~h6、ul、li、ol、dl、dt、dd、p、div、form、等

行内元素有：a、span strong等

特殊元素具有行和块的属性：img、input、table

4.常用浏览器的内核有哪些？

一、Trident内核代表产品Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。

二、Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。

三、WebKit内核代表作品Safari、Chromewebkit是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。

四、Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。

主流浏览器所使用的内核分类

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等

Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

Presto内核：Opera7及以上

Webkit内核：Safari,Chrome等

典型的双核浏览器包括：

搜狗2.0：Trident内核和WebKit内核

傲游3.0Beta：Trident和WebKit内核

QQ浏览器5：Trident内核和WebKit内核

使用双核浏览器时，可以自动/手动切换内核来浏览网页。

关于不要再叫我IE11地址：http://liulanmi.com/news/5546.html

5.为什么要清除浮动，有哪些方式？

这里其实是面试的陷阱（归根结底需要多浏览器兼容性的问题了如指掌）

一个块级元素的高度如果没有设置height，那么其高度就是由里面的子元素来撑开的，如果子元素使用浮动，脱离了标准的文档流，那么父元素的高度会将其忽略，如果不清除浮动，父元素会出现高度不够，那样如果设置border或者background都得不到正确的解析。

清除浮动的方法：区分以下哪些是最好的方案（1~5不可取）

1)在浮动元素下加子元素<div class="clear"></div>然后设置样式.clear{ height:0px;font-size:0;clear:both;}；

2)在浮动元素下面（与浮动元素同级）加<br clear="all"/>

3)给浮动元素的父级也加浮动(这种情况当父级margin:0 auto时不居中)

4)给父级加display:inline-block;(同方法2,不居中,只有IE6,7居中)

5)给浮动元素父级加overflow:auto;

6）经典用法

.clear,.clear-all{clear:both;font-size:0;height:0;line-height:0;overflow:hidden}

.fix:after,.clearfix:after{clear:both;content:" ";display:block;font-size:0;height:0;visibility:hidden}

.fix,.clearfix{*zoom:1}

6.SGML（标准通用标记语言）和HTML（超文本标记语言），XML（可扩展标记语言）和HTML的之间有什么关系？

SGML（标准通用标记语言）是一个标准，告诉我们怎么去指定文档标记。他是只描述文档标记应该是怎么样的元语言，HTML是被用SGML描述的标记语言。

因此利用SGML创建了HTML参照和必须共同遵守的DTD，你会经常在HTML页面的头部发现“DOCTYPE”属性，用来定义用于解析目标DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" “http://www.w3.org/TR/html4/strict.dtd">

现在解析SGML是一件痛苦的事情，所以创建了XML使事情更好。XML使用了SGML，例如：在SGML中你必须使用起始和结束标签，但是在XML你可以有自动关闭的结束标签。

XHTML创建于XML，他被使用在HTML4.0中。你可以参考下面代码片段中展示的XML DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">