谈谈以前端角度出发做好SEO需要考虑什么？

  了解搜索引擎如何抓取网页和如何索引网页
  你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE robot 或叫 web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。
  Meta标签优化
  主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。
  如何选取关键词并在网页中放置关键词
  搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。
  了解主要的搜索引擎
  虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如AOL网页搜索用的是Google的搜索技术，MSN用的是Bing的技术。
  主要的互联网目录
  Open Directory自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了主页外还抓取大量的内容页面。
  按点击付费的搜索引擎
  搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最典型的有Overture和百度，当然也包括Google的广告项目Google Adwords。越来越多的人通过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，你得学会用最少的广告投入获得最多的点击。
  搜索引擎登录
  网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交（submit）到搜索引擎。如果你的是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如Yahoo要299美元），但是好消息是（至少到目前为止）最大的搜索引擎Google目前还是免费，而且它主宰着60％以上的搜索市场。
  链接交换和链接广泛度（Link Popularity）
  网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来Surfing（“冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。
  合理的标签使用

有哪项方式可以对一个DOM设置它的CSS样式？　

  外部样式表，引入一个外部css文件
  内部样式表，将css代码放在  标签内部
  内联样式，将css样式直接定义在 HTML 元素内部

CSS都有哪些选择器？

  派生选择器（用HTML标签申明）
  id选择器（用DOM的ID申明）
  类选择器（用一个样式类名申明）
  属性选择器（用DOM的属性申明，属于CSS2，IE6不支持，不常用，不知道就算了）
  除了前3种基本选择器，还有一些扩展选择器，包括
  后代选择器（利用空格间隔，比如div .a{  }）
  群组选择器（利用逗号间隔，比如p,div,#a{  }）
  那么问题来了，CSS选择器的优先级是怎么样定义的？
  基本原则：
  一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。
  复杂的计算方法：
  用1表示派生选择器的优先级
  用10表示类选择器的优先级
  用100标示ID选择器的优先级
  div.test1 .span var 优先级 1+10 +10 +1
  span#xxx .songs li 优先级1+100 + 10 + 1
  #xxx li 优先级 100 +1
  那么问题来了，看下列代码，
标签内的文字是什么颜色的？
  
  
  
 123 
  
  答案：red。与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在
中的先后关系无关。

CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？

  最基本的：
  设置display属性为none，或者设置visibility属性为hidden
  技巧性：
  设置宽高为0，设置透明度为0，设置z-index位置在-1000em

什么是Css Hack？ie6,7,8的hack分别是什么？

  答案：针对不同的浏览器写不同的CSS code的过程，就是CSS hack。
  示例如下：
     #test{   
          width:300px;   
          height:300px;   
          background-color:blue;      /*firefox*/
          background-color:red9;      /*all ie*/
          background-color:yellow;    /*ie8*/
          +background-color:pink;        /*ie7*/
          _background-color:orange;       /*ie6*/    }  
          :root #test { background-color:purple9; }  /*ie9*/
  @media all and (min-width:0px)
       { #test {background-color:black;} }  /*opera*/
  @media screen and (-webkit-min-device-pixel-ratio:0)
  { #test {background-color:gray;} }       /*chrome and safari*/

行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

  块级元素(block)特性：
  总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
  宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
  内联元素(inline)特性：
  和相邻的内联元素在同一行;
  宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。
  那么问题来了，浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？
  答案： 、 、 、 、。

什么是外边距重叠？重叠的结果是什么？

  外边距重叠就是margin-collapse。
  在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个多带带的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
  折叠结果遵循下列计算规则：
  两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
  两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
  两个外边距一正一负时，折叠结果是两者的相加的和。

rgba()和opacity的透明效果有什么不同？

  rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，
  而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

css中可以让文字在垂直和水平方向上重叠的两个属性是什么？

  垂直方向：line-height
  水平方向：letter-spacing
  那么问题来了，关于letter-spacing的妙用知道有哪些么？
  答案:可以用于消除inline-block元素间的换行符空格间隙问题。

如何垂直居中一个浮动元素？
// 方法一：已知元素的高宽

  #div1{
      background-color:#6699FF;
      width:200px;
      height:200px;
      position: absolute;        //父元素需要相对定位
      top: 50%;
      left: 50%;
      margin-top:-100px ;   //二分之一的height，width
      margin-left: -100px;
      }

//方法二:未知元素的高宽

#div1{
  width: 200px;
  height: 200px;
  background-color: #6699FF;

  margin:auto;
  position: absolute;        //父元素需要相对定位
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  }

那么问题来了，如何垂直居中一个?（用更简便的方法。）

  #container     //的容器设置如下
  {
      display:table-cell;
      text-align:center;
      vertical-align:middle;
  }

px和em的区别。

  px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
  浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

描述一个”reset”的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？

  重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的默认样式，如果你不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的性发生。
  你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。
  在这一方面，无法做每一个复位重置。它也确实有些超过一个重置，它处理了你永远都不用考虑的怪癖，像HTML的audio元素不一致或line-height不一致。

Sass、LESS是什么？大家为什么要使用他们？

  他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。
  例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。
  为什么要使用它们？
  结构清晰，便于扩展。
  可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
  可以轻松实现多重继承。
  完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

display:none与visibility:hidden的区别是什么？

  display : 隐藏对应的元素但不挤占该元素原来的空间。
  visibility: 隐藏对应的元素并且挤占该元素原来的空间。
  即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

CSS中link和@import的区别是：

  Link属于html标签，而@import是CSS中提供的
  在页面加载的时候，link会同时被加载，而@import引用的CSS会在页面加载完成后才会加载引用的CSS
  @import只有在ie5以上才可以被识别，而link是html标签，不存在浏览器兼容性问题
  Link引入样式的权重大于@import的引用（@import是将引用的样式导入到当前的页面中）

简介盒子模型：

  CSS的盒子模型有两种：IE盒子模型、标准的W3C盒子模型模型
  盒模型：内容、内边距、外边距（一般不计入盒子实际宽度）、边框

为什么要初始化样式？

  由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异
  但是初始化CSS会对搜索引擎优化造成小影响

BFC是什么?

  BFC（块级格式化上下文），一个创建了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题
  BFC是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用

html语义化是什么？

  当页面样式加载失败的时候能够让页面呈现出清晰的结构
  有利于seo优化，利于被搜索引擎收录（更便于搜索引擎的爬虫程序来识别）
  便于项目的开发及维护，使html代码更具有可读性，便于其他设备解析。

Doctype的作用？严格模式与混杂模式的区别？

  用于告知浏览器该以何种模式来渲染文档
  严格模式下：页面排版及JS解析是以该浏览器支持的最高标准来执行
  混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容

IE5-8不支持opacity，解决办法：

  .opacity {
      opacity: 0.4
      filter: alpha(opacity=60); /* for IE5-7 */
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
  }

IE6不支持PNG透明背景，解决办法: IE6下使用gif图片

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

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

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

  答：块级元素：div p h1 h2 h3 h4 form ul
  行内元素: a b br i span input select
  Css盒模型:内容，border ,margin，padding

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

  答：结构层 Html 表示层 CSS 行为层 js。

Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
（1）、 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

  （1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。  
  （2）行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p  
  （3）知名的空元素：      
  
鲜为人知的是： 
  

CSS的盒子模型？

  （1）两种， IE 盒子模型、标准 W3C 盒子模型；IE 的content部分包含了 border 和 pading;
  （2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

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）

可继承： font-size font-family color, UL LI DL DD DT;

不可继承 ：border padding margin width height ;

优先级就近原则，样式定义最近者为准;

载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important 比 内联优先级高
CSS3新增伪类举例：

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

元素的每个

元素。
p:last-of-type 选择属于其父元素的最后

元素的每个

元素。
p:only-of-type 选择属于其父元素唯一的

元素的每个

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

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

元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。

如何居中div,如何居中一个浮动元素?
给div设置一个宽度，然后添加margin:0 auto属性
div{

  width:200px;
  margin:0 auto;

}
居中一个浮动元素

确定容器的宽高 宽500 高 300 的层
设置层的外边距

.div {

Width:500px ; height:300px;//高度可以不设
Margin: -150px 0 0 -250px;
position:relative;相对定位
background-color:pink;//方便看效果
left:50%;
top:50%;

}

浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？

IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto；

png24为的图片在iE6浏览器上出现背景，解决方案是做成PNG8.

浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css

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

IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.

IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:

L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？

block 象块类型元素一样显示。
none 缺省值。向行内元素类型一样显示。

inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。

position的值

 *absolute 
   生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 
 *fixed （老IE不支持）
   生成绝对定位的元素，相对于浏览器窗口进行定位。 

relative

   生成相对定位的元素，相对于其正常位置进行定位。 

static 默认值。没有定位，元素出现在正常的流中
*（忽略 top, bottom, left, right z-index 声明）。

inherit 规定从父元素继承 position 属性的值。