标签：
a:什么是语义化？
语义化标签就是尽量使用有相对应的结构的含义的Html的标签
简单的来说就是机器可以理解的标签，eg:<p>标签计算机会将他理解成段落
作用：
1.结构更好,更利于搜索引擎的抓取（SEO的优化）和开发人员的维护(可维护性更高,因为结构清晰,so易于阅读).
2.更有利于特殊终端的阅读(手机,个人助理等）.
b:DOCTYPE模式？
DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。其中的DTD(例如xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。XHTML 1.0 提供了三种DTD声明可供选择：
* 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
* 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
* 框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
为什么要声明doctype？
简单来说就是为了支持不同版本的浏览器。
c:BFC与Haslayout
BFC（Block Formatting Context）直译为“块级格式化范围”。它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
通俗讲，BFC就是一种布局方式，在创建了 BFC后，其子元素会一个接一个地放置：盒子们自所在的 containing block 顶部起，水平方向上一个接一个撑满整个宽度，垂直方向上他们的起点是包含块的顶部，两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。在 同一个BFC中，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有间隔(即父元素的边框，非空内容，padding等)就会发生margin重叠，即margin会发生重合。更重要的是：创建BFC,能消除元素对相邻元素的布局影响，常见的应用 是：使用overflow:hidden创建BFC ,来清除浮动元素对后面元素的布局影响 。
2、如何创建BFC
当一个HTML元素满足下面条件的任何一点，都可以产生BFC：
float的值不为”none” (如：float:left/right)
overflow的值不为”visible”(如：overflow:hidden)
display的值为 “table-cell”, “table-caption”, or “inline-block”中的任何一个
position的值不为 “static” 或 “relative”中的任何一个(如：position:absolute)
3、BFC的作用
1.不和浮动元素重叠
2.清除元素内部浮动
只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了(IE Haslayout)。
3.嵌套元素Margin边距折叠问题的解决
按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如没有边框，非空内容，padding等)就会发生margin重叠。
因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠了。
上面的例子中我们用到了IE的zoom:1;实际上是触发了IE的layout。Layout 是 IE 浏览器渲染引擎的一个内部组成部分。在 IE 浏览器中，一个元素要么自己对自身的内容进行组织和计算大小， 要么依赖于包含块来计算尺寸和组织内容。为了协调这两种方式的矛盾，渲染引擎采用了 ‘hasLayout’ 属性，属性值可以为 true 或 false。 当一个元素的 ‘hasLayout’ 属性值为 true 时，我们说这个元素有一个布局（layout），或拥有布局。可以通过 hasLayout 属性来判断一个元素是否拥有 layout ，
如 object.currentStyle.hasLayout 。
hasLayout 与 BFC 有很多相似之处，但 hasLayout 的概念会更容易理解。在 Internet Explorer 中，元素使用“布局”概念来控制尺寸和定位，分为拥有布局和没有布局两种情况，拥有布局的元素由它控制本身及其子元素的尺寸和定位，而没有布局的元素则通过父元素（最近的拥有布局的祖先元素）来控制尺寸和定位，而一个元素是否拥有布局则由 hasLayout 属性告知浏览器，它是个布尔型变量，true 代表元素拥有布局，false 代表元素没有布局。简而言之，hasLayout 只是一个 IE 下专有的属性，hasLayout 为 true 的元素浏览器会赋予它一系列的效果。
特别注意的是，hasLayout 在 IE 8 及之后的 IE 版本中已经被抛弃，所以在实际开发中只需针对 IE 8 以下的浏览器为某些元素触发 hasLayout。
标签：
原文地址：http://www.cnblogs.com/fg19/p/4310047.html
