前端开发就业面试题

HTML+CSS篇

1.对WEB标准以及W3C的理解与认识。

标签闭合、标签小写、不乱嵌套、提升搜索机器人搜索概率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更普遍的设备所访问、更少的代码和组件，容易维护、改版方便，不须要变更页面内容、提供打印版本而不须要复制内容、提升网站易用性。

2.xhtml和html有什么区别？

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言。

最主要的不一样：

XHTML元素必须被正确地嵌套；

XHTML元素必须被关闭；

标签名必须用小写字母；

XHTML文档必须拥有根元素。

3.Doctype的做用？严格模式和混杂模式的区别？它们有什么意义？

1）<!DOCTYPE>声名位于文档的最前面，在 标签的前面，告知浏览器以何种模式来渲染文档。

2）严格模式的排版和JS运做模式都是以浏览器支持的最高的标准运行。按照W3C的标准来解析代码。

3）混杂模式是以宽松的，向后兼容的方式来解析代码。是指浏览器用本身的方式解析代码，模拟老式浏览器的行为以防止网站中止工做。

4）若DOCTYPE为声名或格式不正确，页面将会以怪异模式的方式解析。

5）Doctype标签可声明三种DLD类型，分别是严格型，过渡型，框架型。

4.行内元素有哪些?块级元素有哪些?CSS的盒模型?

**块级元素：**div p h1 h2 h3 h4 form ul

**行内元素：**a b br i span input select

**CSS盒模型：**内容、填充（padding）、边框（border）、外边界（margin）

5.CSS引入的方式有哪些? link和@import的区别是?

方式：

内联方式、嵌入方式、连接方式、导入方式。

区别：

1）link是XHTML标签，除了加载CSS外，还能够定义RSS等其余事务；@import属于CSS范畴，只能加载CSS。

2）link引用CSS时，在页面载入时同时加载；@import须要页面网页彻底载入之后加载。

3）link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

4）ink支持使用Javascript控制DOM去改变样式；而@import不支持。

6.CSS选择符有哪些?哪些属性能够继承?优先级算法如何计算?内联和important哪一个优先级高?

CSS选择符：

1）id选择器(# myid)

2）类选择器(.myclassname)

3）标签选择器(div, h1, p)

4）相邻选择器(h1 + p)

5）子选择器(ul > li)

6）后代选择器(li a)

7）通配符选择器( * )

8）属性选择器(a[rel = "external"])

9）伪类选择器(a: hover, li:nth-child)

可继承的样式：

1）font-size

2）font-family

3）color

4）text-indent

优先级算法：

1）优先级就近原则，同权重状况下样式定义最近者为准

2）载入样式以最后载入的定位为准

3）!important > id > class > tag

4）important 比 内联优先级高，但内联比 id 要高

7.前端页面有哪三层构成，分别是什么?做用是什么?

结构层 HTML：

由HTML或XHTML之类的标记语言负责建立。标签，也就是那些出如今尖括号里的单词，对网页内容的语义含义作出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”

表示层 CSS：

由CSS负责建立，CSS对“如何显示有关内容”的问题作出了回答。

行为层 JS：

负责回答“内容应该如何对事件作出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。

8.CSS的基本语句构成是?

选择器{属性 1:值 1;属性 2:值 2;……}

9.你作的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

Ie(Ie 内核)、火狐（Gecko）、谷歌（webkit）、opear(Presto)

10.标签上title与alt属性的区别是什么?

Alt当图片不显示时，用文字表明

Title 为该属性提供信息

11.描述css reset的做用和用途。

每一个浏览器都有一些自带的或者共有的默认样式，或形成一些布局上的困扰，css reset的做用就是重置这些默认样式，使样式表现一致。

为了让页面得到浏览器跨浏览器的兼容性，须要用重置文件css代码覆盖浏览器默认的样式来统同样式。

12.解释css sprites，如何使用。

css sprites：

精灵图（雪碧图），把一堆小图片整合在一张大图上，经过背景图片相关设置（背景图片、背景图是否重复、背景图定位），显示图片，减轻服务器对图片的请求数量

使用步骤：

1）制做一张具备多状态的拼合图片，须要按照必定规律处理

2）给要显示背景的盒（一个固定尺寸，宽width、高height），以背景的方式加载，让其局部显示

3）经过背景图定位（background-position）控制不一样的显示状态

13.浏览器标准模式和怪异模式之间的区别是什么?

所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器本身的方式解析执行代码，由于不一样浏览器解析执行的方式不同，因此咱们称之为怪异模式。

使用window.top.document.compatMode可显示为何模式。

14.你如何对网站的文件和资源进行优化?期待的解决方案包括：

1）文件合并

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

3）使用 CDN 托管

4）缓存的使用

5）GZIP压缩你的JS和CSS文件

15.什么是语义化的HTML？为何要作到语义化？

语义化的HTML就是写出的HTML代码，符合内容的结构化（内容语义化），选择合适的标签（代码语义化），可以便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

语义化的优势：

1）有利于SEO，有利于搜索引擎爬虫更好的理解咱们的网页，从而获取更多的有效信息，提高网页的权重。

2）在没有CSS的时候可以清晰的看出网页的结构，加强可读性。

3）便于团队开发和维护，语义化的HTML可让开发者更容易的看明白，从而提升团队的效率和协调能力。

4）支持多终端设备的浏览器渲染。

16.清除浮动的几种方式，各自的优缺点：

1）使用空标签清除浮动clear:both（理论上能清楚任何标签，增长无心义的标签）

2）使用overflow:auto（空标签元素清除浮动而不得不增长无心代码的弊端，使用 zoom:1 用于兼容 IE）

3）是用afert伪元素清除浮动（用于非 IE 浏览器）

17.如何居中div?如何居中一个浮动元素?

给div设置一个宽度，而后设置元素的左右外边距为 auto，好比，margin:0px auto。则能够实现 div 居中显示。 对于浮动元素，设置其左右外边距为关键字 auto 是无效的。此时，若是须要设置其居中显示，能够：

1）精确计算其左外边距并进行设置，实现居中显示

2）使用一个居中显示的 div 元素包含此浮动元素

18.CSS3新增伪类举例：

p:first-of-type 选择属于其父元素的首个元素的每一个元素。

p:last-of-type 选择属于其父元素的最后元素的每一个元素。 p:only-of-type 选择属于其父 元素惟一的元素的每一个元素。

p:only-child 选择属于其父元素的惟一子元素的每一个元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每一个元素。

:enabled :disabled 控制 表单控件的禁用态。

:checked 单选框或复选框被选中。

19.HTML5 的离线储存有几种方式?

localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 数据在浏览器关闭后自动删除。

20.请描述一下cookies，sessionStorage和localStorage的区别?

相同点：

都存储在客户端

不一样点：

1）存储大小

cookie数据大小不能超过4k。

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大。

2）有效时间

localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。

sessionStorage数据在当前浏览器窗口关闭后自动删除。

cookie设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭。

3）数据与服务器之间的交互方式

cookie的数据会自动的传递到服务器，服务器端也能够写cookie到客户端。

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

21.简述一下src与href的区别。

href是指向网络资源所在位置，创建和当前元素（锚点）或当前文档（连接）之间的连接，用于超连接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其余资源的下载和处理，直到将该资源加载、编译、执 行完毕，图片和框架等元素也如此，相似于将所指向资源嵌入当前标签内。这也是为何将js脚本放在底部而不是头部。

22.简述同步和异步的区别。

同步是阻塞模式，异步是非阻塞模式。

同步就是指一个进程在执行某个请求的时候，若该请求须要一段时间才能返回信息，那么 这个进程将会一直等待下去，直到收到返回信息才继续执行下去；

异步是指进程不须要一直等下去，而是继续执行下面的操做，无论其余进程的状态。当有消息返回时系统会通知进程进行处理，这样能够提升执行的效率。

23.HTML5为何只须要写 ？

HTML5不基于SGML，所以不须要对DTD进行引用，可是须要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；而HTML4.01基于SGML，因此须要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

24.CSS清除浮动的几种方法。

1）使用带clear属性的空元素

2）使用CSS的overflow属性

3）使用CSS的after伪元素

4）使用邻接元素处理