‘壹’ 前端页面由哪些页面构成，作用是什么
前端页面构成：
结构（HTML）、样式（CSS）、逻辑（JavaScript）
‘贰’ 前端的认识和理解
WEB前端是由网页设计与制作发展而来的，随着工作的细化，需要有人完成美工图到网页的制作，从而出现了WEB前端开发这个词。WEB前端开发主要是使用HTML、CSS、JavaScript技术，将美工提供的美工图转化为网页。同时，需要顾及SEO以及后台的数据。WEB前端，相当于是一个连接美工、后台以及用户的中间平台。
想入门web前端的伙伴都不太清楚关于web前端开发是什么意思，Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序（也就是浏览器端）的开发，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。WEB前端开发主要是使用HTML、CSS、JavaScript技术，将美工提供的美工图转化为网页。
我觉得前端开发就是给企业搭建门户类的网站，以后可以往设计或者更高级的开发师发展，也可以往技术类的管理发展，那么对于未来两年的计划你可以在边上班的时候利用空闲时间还可以多往更高层次的技术方面延伸，每天多学一点，因为技术是不断的更新。
‘叁’ HTML5面试中常会被问到的面试题有哪些
1.XHTML和HTML有什么区别
HTML是一种网页设计语言，XHTML是一个置标语言。两者最大的不同是：XHTML元素必须被正确嵌套;XHTML元素必须被关闭;标签名必须用小写字母;XHTML文档必须拥有根元素。
2.前端页面有哪三层构成，分别是什么?作用是什么?
结构层HTML，表示层 CSS ，行为层 js。
3.什么是语义化的HTML?
HTML语义化就是让页面的内容结构化，便于对搜索引擎解析;在没有样式的情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重。这样使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
4.Doctype作用?标准模式与兼容模式各有什么区别?
DOCTYPE作用是告知浏览器的解析器用什么文档标准解析这个文档。如果DOCTYPE不存在或者是格式上的不正确可以回会导致文档以兼容模式来呈现。标准模式和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以向后兼容的方式显示,模拟浏览器的行为以防止站点无法工作。
5. cookies，sessionStorage 和 localStorage 三者有何区别?
Cookie是在浏览器和服务器间来回传递的。sessionStorage和localStorage的存储空间比cookies会更大些;而且sessionStorage和localStorage相比cookies有更多的丰富易用的接口;另外，sessionStorage和localStorage都有它们各自独立的存储空间。
6.如何实现浏览器内多个标签页之间的通信?
调用localstorge、cookies等的本地存储方式可以实现浏览器内多个标签页之间的通信。
更多资讯，请及时关注本平台，小编会为您做详细的整理和总结。
‘肆’ 前端页面由哪三层构成，分别是什么作用是什么
网页分成三个层次，即：结构层、表示层、行为层。结构层（structurallayer）由HTML或XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”表示层（presentationlayer）由CSS负责创建。CSS对“如何显示有关内容”的问题做出了回答。行为层（behaviorlayer）负责回答“内容应该如何对事件做出反应”这一问题。这是Javascript语言和DOM主宰的领域。
‘伍’ 前端页面有哪三层构成，分别是什么作用是什么
最准确的网页设计思路是把网页分成三个层次，即：结构层、样式层、行为层。
HTML：结构层
网页的结构或内容层是该页面的基础HTML代码。正如房屋的框架为房屋的其他部分构建了一个坚实
的基础，HTML的坚实基础创建了一个可以在其上创建网站的平台。
结构层用于存储客户想要阅读或查看的所有内容。HTML结构可以包含文本和图像，它包括访问者用
于浏览网站的超链接。这是在符合标准的HTML5中编码的，可以包括文本，图像和多媒体（视频，音频等）。
网站内容的每个方面都应该在结构层中表示。这允许关闭JavaScript的客户或无法查看整个网站的
CSS访问权限的客户（如果不是所有功能）。
CSS：样式层
该层指示结构化HTML文档如何看待网站的访问者，并由CSS（层叠样式表）定义。这些文件包含有
关如何在Web浏览器中显示文档的样式说明。样式层通常包括基于屏幕大小和设备更改站点显示的
媒体查询。
网站的所有视觉样式都应位于外部样式表中。您可以使用多个样式表，但请记住，每个CSS文件都需
要HTTP请求才能获取它，从而影响站点性能。
JavaScript：行为层
行为层使网站具有交互性，允许页面响应用户操作或基于一组条件进行更改。JavaScript是行为层最
常用的语言，但CGI和PHP也经常被使用。
当开发人员引用行为层时，大多数都是指在Web浏览器中直接激活的层。您可以使用此图层直接与
DOM（文档对象模型）进行交互。在内容层中编写有效的HTML对于行为层中的DOM交互非常重
要。在构建行为层时，应该像使用CSS一样使用外部脚本文件来优化速度和性能。
(5)前端页面有哪三层构成扩展阅读：
分层的一些好处是：
共享资源：当您编写外部CSS或JavaScript文件时，站点上的任何页面都可以使用该文件。如果
您需要对该文件进行更改，也许更新网站上的某些排版样式，则使用该样式表的每个页面都会得到
更改。没有必要单独编辑网站的每个页面，这对于大型网站来说可能是一项艰苦的任务。
下载速度更快：首次由客户下载脚本或样式表后，Web浏览器会对其进行缓存。由于这些共享
资源现在包含在浏览器的缓存中，因此浏览器中请求的其他页面加载速度更快，从而提高了整体页
面速度和性能。
多人团队：如果您有多个人同时在网站上工作，您可以使用允许文件签入和签出的系统，以确
保每个人都使用最新版本。如果样式和行为与结构文档交织在一起，那就更难了。
搜索引擎优化：一个明确分离风格和结构的网站可能会对搜索引擎有更好的表现，因为它们可以更有效地抓取内容并理解页面而不会陷入视觉风格和行为信息。
辅助功能：外部样式表和脚本文件更易于人们和浏览器访问。屏幕阅读器等软件可以更轻松地
处理结构层中的内容，而无需处理无论如何都无法使用的样式。
向后兼容性：使用单独的开发层设计的站点更可能向后兼容，因为无法使用某些CSS样式或禁
用了JavaScript的浏览器和设备仍然可以查看HTML。然后，您可以使用支持它们的浏览器的功能逐
步增强您的网站。
‘陆’ web前端面试经常问到的面试题有哪些
Web前端经常被问到的面试题及答案
一、HTML+CSS
1.对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外
链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维
护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;
2.xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
用于声明文档使用那种规范(html/Xhtml)一般为 严格 过度 基于框架的html文档
加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug
4.行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border ,margin，padding
5.CSS引入的方式有哪些? link和@import的区别是?
内联 内嵌 外链 导入
区别 ：同时加载
前者无兼容性，后者CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式，后者不可
6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
标签选择符 类选择符 id选择符
继承不如指定 Id>class>标签选择
后者优先级高
7.前端页面有哪三层构成，分别是什么?作用是什么?
结构层 Html 表示层 CSS 行为层 js
8.css的基本语句构成是?
选择器{属性1:值1;属性2:值2;……}
9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)
二、Javascript
1.javascript的typeof返回哪些数据类型
Object number function boolean underfind
2.例举3种强制类型转换和2种隐式类型转换?
强制(parseInt,parseFloat,number)
隐式(== – ===)
3.split() join() 的区别
前者是切割成数组的形式，后者是将数组转换成字符串
4.数组方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除
5.事件绑定和普通事件有什么区别
6.IE和DOM事件流的区别
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题
7.IE和标准下有哪些兼容性的写法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
8.ajax请求的时候get 和post方式的区别
一个在url后面 一个放在虚拟载体里面
有大小限制
安全问题
应用不同 一个是论坛等只需要请求的，一个是类似修改密码的
9.call和apply的区别
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
10.ajax请求时，如何解释json数据
使用eval parse 鉴于安全性考虑 使用parse更靠谱
11.b继承a的方法
12.写一个获取非行间样式的函数
function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}
‘柒’ 谁能给我出一两道 web前端笔试题 上机题啥的，呵呵，比较常考的
[面试题] 某企业前端开发面试题
【HTML & CSS】
1. Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
2. 行内元素有哪些？块级元素有哪些？CSS的盒模型？
3. CSS引入的方式有哪些? link和@import的区别是?
4. CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？
5. 前端页面有哪三层构成，分别是什么？作用是什么？
6. css的基本语句构成是？
7. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？
8. 如何居中一个浮动元素?
9. 有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况！
10. 你怎么来实现下面这个设计图,主要讲述思路 （效果图省略）
11. 如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？
12. 你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？
【Javascript】
1. js是什么，js和html 的开发如何结合？
2. 怎样添加、移除、移动、复制、创建和查找节点
3. 怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别
4. 面向对象编程:b怎么继承a
5. 看看下面alert的结果是什么
view sourceprint?1.function b(x, y, a) {
.arguments[2] = 10;
.alert(a);
}
b(1, 2, 3);
如果函数体改成下面，结果又会是什么？
a = 10;
alert(arguments[2] );
6. 请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象
var obj = parseQueryString(url);
alert(obj.key0) // 输出0
7. ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?
8. 什么是闭包？下面这个ul，如何点击每一列的时候alert其index?
<ul id=”test”>
<li>这是第一条</li><li>这是第二条</li><li>这是第三条</li>
</ul>
9. 最近看的一篇Javascript的文章是？
10. 常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？
11.说说YSlow(可以详细一点)
答案在参考资料里面可以找到，答案在参考资料里面可以找到，答案在参考资料里面可以找到
‘捌’ web前端页面有哪三层构成，分别是什么作用是什么
最准确的网页设计思路是把网页分成三个层次，即：结构层、样式层、行为层。
HTML：结构层
网页的结构或内容层是该页面的基础HTML代码。
CSS：样式层
该层指示结构化HTML文档如何看待网站的访问者，并由CSS（层叠样式表）定义。
JavaScript：行为层
行为层使网站具有交互性，允许页面响应用户操作或基于一组条件进行更改
‘玖’ Web前端岗位面试题有哪些
1.对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；
2.xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
用于声明文档使用那种规范（html/Xhtml）一般为 严格 过度 基于框架的html文档
加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug
4.行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border ,margin，padding
5.CSS引入的方式有哪些? link和@import的区别是?
内联 内嵌 外链 导入
区别 ：同时加载
前者无兼容性，后者CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式，后者不可
6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
标签选择符 类选择符 id选择符
继承不如指定 Id>class>标签选择
后者优先级高
7.前端页面有哪三层构成，分别是什么?作用是什么?
结构层 Html 表示层 CSS 行为层 js
8.css的基本语句构成是?
选择器{属性1:值1;属性2:值2;……}
9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
Ie(Ie内核) 火狐（Gecko） 谷歌（webkit） opear(Presto)
10.写出几种IE6 BUG的解决方法
1.双边距BUG float引起的 使用display
2.3像素问题 使用float引起的 使用dislpay:inline -3px
3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
4.Ie 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）
11.标签上title与alt属性的区别是什么?
Alt 当图片不显示是 用文字代表。
Title 为该属性提供信息
12.描述css reset的作用和用途。
Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一
13.解释css sprites，如何使用。
Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量
14.浏览器标准模式和怪异模式之间的区别是什么?
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可显示为什么模式
15.你如何对网站的文件和资源进行优化?期待的解决方案包括：
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用
16.什么是语义化的HTML?
直观的认识标签 对于搜索引擎的抓取有好处
17.清除浮动的几种方式，各自的优缺点
1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）
2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）
3.是用afert伪元素清除浮动(用于非IE浏览器)
Javascript
1.javascript的typeof返回哪些数据类型
Object number function boolean underfind
2.例举3种强制类型转换和2种隐式类型转换?
强制（parseInt,parseFloat,number）
隐式（== – ===）
3.split() join() 的区别
前者是切割成数组的形式，后者是将数组转换成字符串
4.数组方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除
5.事件绑定和普通事件有什么区别
6.IE和DOM事件流的区别
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题
7.IE和标准下有哪些兼容性的写法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
8.ajax请求的时候get 和post方式的区别
一个在url后面 一个放在虚拟载体里面
有大小限制
安全问题
应用不同 一个是论坛等只需要请求的，一个是类似修改密码的
9.call和apply的区别
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
10.ajax请求时，如何解释json数据
使用eval parse 鉴于安全性考虑 使用parse更靠谱
11.b继承a的方法
12.写一个获取非行间样式的函数
function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}
13.事件委托是什么
让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
14.闭包是什么，有什么特性，对页面有什么影响
闭包就是能够读取其他函数内部变量的函数。
15.如何阻止事件冒泡和默认事件
canceBubble return false
16.添加 删除 替换 插入到某个接点的方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
17.解释jsonp的原理，以及为什么不是真正的ajax
动态创建script标签，回调函数
Ajax是页面无刷新请求数据操作
‘拾’ 前端框架有哪些
1. Twitter BootStrap （Apache v2.0；响应式）
时髦、直观并且强大的前端框架，让Web开发变得更加容易。
2. Foundation （MIT；响应式）
最先进的响应式前端框架。
3. 960gs（GPL&MIT；响应式）
960gs提供了一个简单的网格系统，适合快速开发。
4. Skeleton（MIT；响应式）
非常漂亮的Web模板，适合响应式、移动友好的开发。
5. 99lime HTML KickStart（Free）
适合网站快速开发的极简HTML构建模块。
6. Kube（Free；响应式）
面向专业人员的CSS框架。
7. Less Framework（MIT；响应式）
自适应的CSS网格系统。
8. Flameinwork（Free）
适合懒人开发者的前端微框架。
9. G5 Framework（Free）
(x)HTML5、CSS、PHP前端开发框架。
10. Easy Framework（Free）
Easy Framework是一个一体化前端解决方案，分structural、 presentational、interactive三层。
11. Blueprint（Free）
一个旨在减少开发时间的前端框架。
12. YAML（Creative Commons）
(x)HTML+CSS框架，适合开发现代化浮动布局。
13. BlueTrip（Free）
一个功能全面、并且美丽的CSS框架，适合于Blueprint搭配使用。
14. YUI3:Grids CSS（BSD）
YUI Grids CSS是最着名的CSS框架之一，是由Yahoo开发小组开发而成。 YUI Grids CSS为开发者提供了预先设置的四种不同页面宽度，六种不同的模板。
15. 52framework（Creative Commons）
对HTML5支持非常好，简单易用。
16. elastiCSS（MIT）
一个基于Web接口和印刷布局的简单CSS框架。
17. Emastic（Free）
一个与众不同的CSS框架。
18. Fluid 960 Gride System（GPL/MIT）
Fluid 960 Grid System的模版是根据Nathan Smith之前的作品而创建的。即960 Grid System：传承了MooTools和jQuery JavaScript libraries的效果。
19. xCSS（MIT）
一个面向对象的CSS框架，能让你的工作流更加简洁。xCSS基于CSS，可以在开发复杂样式时，提供面向对象的工作流。
20. EM CSS Framework（MIT/GPL）
EM CSS Framework提供了一个960px宽 + 12 列网格系统 + CSS的通用样式。