1.前端页面有哪三层构成，分别是什么?
前端页面主要由以下三层构成：
页面结构层：HTML，分为HTML4.0和HTML5.0两个版本
页面表示层：CSS，分为CSS2.0和CSS3.0版本
页面行为层：JavaScript，页面的脚本层
2.HTML与XHTML——二者有什么区别
1）文档结构
XHTML中的 <!DOCTYPE> 是强制性的
HTML中的 XML namespace 属性是强制性的，<html>、<head>、<title>以及 <body>标签也是强制必须存在的文档结构标记。
2）元素语法
XHTML 元素必须正确嵌套
XHTML 元素必须始终关闭
XHTML 元素必须小写
XHTML 文档必须有一个根元素
3）属性语法
XHTML 属性必须使用小写
XHTML 属性值必须用引号包围
XHTML 属性最小化也是禁止的
3.对WEB标准以及W3C的理解与认识
网页主要由三个部分组成，表现、结构和行为。
其中：
1）HTML是网页的结构和内容
2）CSS是网页的表现
3）JavaScript是网页的行为动作
以上这三个东西就形成了一个完整的网页，但是js改变时，会造成css和html的混乱，让这三个的界限不是那么清晰。这个时候，WEB标准就出来了，WEB标准一般是将这三部分独立分开，使其更具有模块化。
W3C一般指万维网联盟，是Web技术领域最具权威和影响力的国际中立性技术标准机构，对Web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点：
1）对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）
标签字母要小写
标签要闭合
标签不允许随意嵌套
2）对于CSS和JavaScript来说
尽量使用外链CSS样式表和JavaScript脚本。使结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版。
4.以前端角度出发做好SEO需要考虑什么？
1）什么是SEO？
SEO也就是Search Engine Optimization，搜索引擎优化。指的是通过对网站节后以及内容的调整优化网站的搜索，比如网站的推广、网站对客户的吸引度，网站品牌的建设，关键字搜索的排名等都会受到SEO的影响。
做好SEO，需要考虑到一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE robot 或叫 web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。
2）可以从哪些方面入手提高SEO？
1.Meta标签优化
主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。
2.如何选取关键词并在网页中放置关键词
搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。
3.了解主要的搜索引擎
虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如AOL网页搜索用的是Google的搜索技术，MSN用的是Bing的技术。
4.主要的互联网目录
Open Directory自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了主页外还抓取大量的内容页面。
5.按点击付费的搜索引擎
搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最典型的有Overture和百度，当然也包括Google的广告项目Google Adwords。越来越多的人通过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，你得学会用最少的广告投入获得最多的点击
6.搜索引擎登录
网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交（submit）到搜索引擎。如果你的是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如Yahoo要299美元），但是好消息是（至少到目前为止）最大的搜索引擎Google目前还是免费，而且它主宰着60％以上的搜索市场。
7.链接交换和链接广泛度（Link Popularity）
网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来Surfing（“冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。
5.什么是微格式
微格式（Microformats）是一种让机器可读的语义化 XHTML 词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。
通俗的讲，就是为现有的XHTML元素添加元数据和其他属性，增强其语义，方便网站搜索引擎。
rel
<a href="xx.html" rel="homepage">这是一个测试连接</a>
<a>标签更加直观易读，也易于搜索
6.市面上常用浏览器的内核分别是什么
浏览器内核又可以分成两部分：渲染引擎和 JS 引擎。渲染引擎负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。而JS 引擎则是解析 JavaScript 语言，执行 JavaScript 语言来实现网页的动态效果。
我们常用的浏览有如下几种：
IE: trident内核
Firefox：gecko内核
Safari：webkit内核
Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome:Blink(基于webkit，Google与Opera Software共同开发)
7.img的alt与title有何异同
alt：alt属性用来指定图片无法正确显示时的替换文字。
title：title属性为设置该属性的元素提供建议性的信息，一般作为图片提示信息。
src：src属性是指明图片的引用路径。
<img src="show.jpg" alt="该图片无法显示" title="点击图片可以查看详情">
8.Canvas和SVG
使用JavaScript来绘制图形的简单而强大的方法。可以用于绘制图形，合成制作照片或做动画。
Canvas
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（如谷歌地图）
复杂度高会减慢渲染速度
不适合游戏应用
9.<iframe>的优缺点
优点：
1）解决加载缓慢的第三方内容如图标和广告等的加载问题
2）可以将重复的内容被提取到子页面中，在主页中使用<iframe>标记将其引入
3）并行加载脚本
缺点：
1）<iframe>会阻塞主页面的Onload事件
2）即时内容为空，加载也需要时间
3）没有语意
10.HTML5的新特性有哪些
拖拽释放(Drag and drop) API
语义化更好的内容标签（header,nav,footer,aside,article,section）
多媒体标签audio,video可以在页面直接添加音视频
画布Canvas、svg是实现前端数据可视化必不可少的东西
地理(Geolocation) API
本地离线存储 localStorage，可长期存储数据，浏览器关闭后数据不丢失
sessionStorage 的数据在浏览器关闭后自动删除
表单控件：calendar、date、time、email、url、search
新的技术webworker、websocket、Geolocation
其中画布和地理api，本地存储用的比较的多。
12.cookie,sessionstorage,localStorage的区别
共同点：都是保存在浏览器端
区别：
1） 数据的存储及大小限制不同
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；
cookie数据大小不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2） 数据有效期不同
sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
3） 作用域不同
sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
localStorage 在所有同源窗口中都是共享的；
cookie也是在所有同源窗口中都是共享的。
13.CSS3的新特性有哪些
1）先从颠覆性的属性开始比如：rotate(旋转)，translate(位移)，scale(缩放)等
2）Css3的动画 animation
3）还有css3的过渡， transition: all 1s
4）再列举一些简单的属性比如说: border-radius(圆角)，box-shadow(盒子阴影)，border-shadow(边框阴影)等
5）新增了结构伪类选择器，像 first-child，nth-child(n)之类的
6）先从颠覆性的属性开始比如：rotate(旋转)，translate(位移)，scale(缩放)等
14.常见的几种页面布局方式
1） Flex弹性盒子
flex布局又称弹性盒子，简单代码量少，使用flex布局可以不用左右浮动。
Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，让你可以调节伸缩项目的相对大小和位置。例如，你可以确保伸缩容器中的多余空间平均分配多个伸缩项目，当然，如果你的伸缩容器没有足够大的空间放置伸缩项目时，浏览器会根据一定的比例减少伸缩项目的大小，使其不溢出伸缩容器。综合而言，Flexbox布局功能主要具有以下几点：
第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局；
第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；
第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；
第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
第五，可以控制元素在页面上的布局方向；
第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。
2）rem布局
rem根据页面宽度和的页面的根元素来控制大小，是移动端布局的常用方式之一。
3）响应式布局
响应式布局，一套代码适应pc和移动端，设置好几个尺寸分别的样式，根据页面的宽度来改变样式。
4）流式布局
流式布局也叫百分比布局。元素的宽、高、margin、padding不再用固定数值，改用百分比，这样元素的高、margin、padding 会根据页面的尺寸随时调整，以达到适应当前页面的目的。
◆ 百分比是基于元素父级的大小计算得来的；
◆ 元素的水平或者竖直间距都是相对于父级的宽度计算的.(margin&padding)；
◆ 边框不能用百分比设置。
5）浮动布局
浮动布局关键词，float，可以设置left或者right，他使元素脱离文档流进而达到布局的目的，也是目前一个比较主流的布局方式，但是使用浮动结束以后，别忘记清除浮动。
6）定位布局
定位布局也是目前比较常用的一种布局方式，关键词： position: fixed;
7）固定布局
固定布局，即将元素固定在一个位置，不随页面移动而移动。
position: relative;相对定位，相对于元素自身定位，不脱离文档流，相当于定义一个参照物，一般和绝对定位结合使用；
position: absolute;绝对定位，脱离文档流，一般和相对定位结合使用，如果不定义相对定位，将会相对于整个浏览器定位，所以定位布局，一般情况下都是相对定位和绝对定位结合着来，相对定位相当于划定一个势力范围，制定一个封闭的容器块，然后绝对定位就相对于相对定位来定位，从而达到有效的布局。
15.src与href的区别
src是source的缩写，指向外部资源的位置，例如js脚本，img图片和frame等
href是Hypertext Reference的缩写，指向网络资源所在位置
16.css动画和js动画的差异
1.JS动画
缺点
1）JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等，对其干扰可能会导致线程出现阻塞，从而造成丢帧的情况。
2）代码的复杂度高于CSS动画。
优点
1）JavaScript动画控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。
2）动画效果比css3动画丰富，有些动画效果，比如曲线运动、冲击闪烁、视差滚动效果，只有JavaScript动画才能完成。
3）CSS3有兼容性问题，而JS大多时候没有兼容性问题。
2.CSS动画
缺点
1）运行过程控制较弱，无法附加事件绑定回调函数。CSS动画只能暂停，不能在动画中寻找一个特定的时间点，不能在半路反转动画，不能变换时间尺度，不能在特定的位置添加回调函数或是绑定回放事件，无进度报告。
2）代码冗长。如果想用 CSS 实现稍微复杂一点动画，最后CSS代码都会变得非常笨重。
优点
浏览器可以对动画进行优化。
浏览器使用与 requestAnimationFrame 类似的机制，requestAnimationFrame比起setTimeout，setInterval设置动画的优势主要是：
A）requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说,这个频率为每秒60帧。
B）在隐藏或不可见的元素中，requestAnimationFrame不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。
17.css是什么？安装使用的步骤是？有哪几大特性?
1）scss是什么？
scss是css的预编译。
2）scss安装使用步骤
第一步：用npm下三个loader(sass-loader、css-loader、node-sass)；
第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss；
第三步：还是在同一个文件，配置一个module属性；
第四步：然后在组件的style标签加上lang属性，例如：lang="scss"；
3）scss有哪几大特性?
1.可以用变量，例如（$变量名称=值）；
2.可以用混合器；
3.可以嵌套；
18.有多少种清除浮动的方法
方式一：使用overflow属性来清除浮动。
方式二：使用额外标签法，在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响，弊端会增加页面的标签，造成结构的混乱
方法三：使用伪元素来清除浮动(after)
方法四：使用双伪元素清除浮动
19.浏览器是如何渲染页面的？
1）解析HTML文件，创建DOM树。
自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。
2）解析CSS。
优先级：浏览器默认设置<用户设置<外部样式<内联样式
3）将CSS与DOM合并，构建渲染树（Render Tree）
4）布局和绘制，重绘（repaint）和重排（reflow）
20.简述从浏览器地址栏输入url到显示页面的步骤？
1、在浏览器地址栏输入URL
2、浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤
3、浏览器解析URL获取协议，主机，端口，path
4、浏览器组装一个HTTP（GET）请求报文
5、浏览器获取主机ip地址，过程如下：
1）浏览器缓存
2）本机缓存
3）hosts文件
4）路由器缓存
5）ISP DNS缓存
6）DNS递归查询（可能存在负载均衡导致每次IP不一样）
6、打开一个socket与目标IP地址，端口建立TCP连接
7、TCP连接建立后发送HTTP请求
8、服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头部判断请求的服务程序
9、服务器检查HTTP请求头是否包含缓存验证信息，如果验证缓存新鲜，返回304等对应状态码
10、处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作
11、服务器将响应报文通过TCP连接发送回浏览器
12、浏览器接收HTTP响应，然后根据情况选择关闭TCP连接或者保留重用，关闭TCP连接
13、浏览器检查响应状态码：是否为1XX，3XX， 4XX， 5XX，这些情况处理与2XX不同
14、如果资源可缓存，进行缓存
15、对响应进行解码（例如gzip压缩）
16、根据资源类型决定如何处理（这里假设资源为HTML文档）
17、解析HTML文档，构件DOM树，下载资源，构造CSSOM树，执行js脚本
18、构建DOM树
19、解析过程中遇到图片、样式表、js文件，启动下载
20、构建CSSOM树
21、js解析
22、显示页面（HTML解析过程中会逐步显示页面）
21.前端如何进行项目优化？
减少请求数
1）合并样式、脚本文件
2）合并背景图片
3）CSS3图标、Icon Font
降低请求量
1）开启GZip
2）优化静态资源，jQuery->Zepto、阉割IScroll、去除冗余代码
3）图片无损压缩
4）图片延迟加载
5）减少Cookie携带
22.CSS有哪些选择器？
派生选择器（用HTML标签申明）
id选择器（用DOM的ID申明）
类选择器（用一个样式类名申明）
属性选择器（用DOM的属性申明，属于CSS2，IE6不支持，不常用，不知道就算了）
除了前3种基本选择器，还有一些扩展选择器，包括
后代选择器（利用空格间隔，比如div .a{ }）
群组选择器（利用逗号间隔，比如p,div,#a{ }）
23.设置DOM的CSS样式有几种方法？
CSS样式设置有三种方式：
外部样式表，引入一个外部css文件
内部样式表，将CSS代码放在 <head> 标签内部
内联样式，将CSS样式直接定义在 HTML 元素内部
如果这三种样式同时作用于DOM，优先级为：内联样式>内部样式>外部样式
24.CSS3中新增的动画效果
1、定义动画
@keyframes 动画名{
from{}
to{}
}
2、用动画属性 animation：动画名 时长 infinite;(简化设置属性)
animation-name 动画名称
animation-duration 动画时长
animation-delay 拖延时间
animation-timing-function 变化曲线
animation-iteration-count: 1 n infinite(无限次)
3、transform
移动 transform:translate(x轴移动像素,y轴移动像素)
缩放 transform：scale(宽度比例，高度比例)
旋转 transform:rotate(旋转的度数 deg)
拉长 transform：skew(x轴翻转度数 deg,y轴翻转度数 deg)
transform：rotateX(旋转度数deg) : 以x方向为轴，翻转
transform：rotateY(旋转度数deg) : 以y方向为轴，翻转
25.前端应该如何高质量完成工作?
1）首先划分成header、body、footer
2）实现效果图是最基本的工作，精确到2px；
3）与设计师，产品经理的沟通和项目的参与
4）做好的页面结构，页面重构和用户体验
5）处理hack，兼容、写出优美的代码格式
6）针对服务器的优化、拥抱 HTML5
