HTML标签嵌套规则和扁平化

HTML标签嵌套规则

块级元素

div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul ...

特点：总是在新行上开始，高度、行高以及顶和底边距都可控制，宽度缺省是它的容器的100%，除非设定一个宽度

功能：主要用来搭建网站架构、页面布局、承载内容

行内元素

span、a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、strike、strong、sub、sup、textarea、tt、u、var ...

特点：和其他元素都在一行上，高、行高及顶和底边距不可改变，宽度就是它的文字或图片的宽度，不可改变

功能：用于加强内容显示,控制细节，例如：加粗、斜体等等

嵌套规则：

（1）块级元素与块级元素平级、内嵌元素与内嵌元素平级

（2）块元素可以包含内联元素或某些块元素，但内联元素不能包含块元素，它只能包含其它的内联元素

（3）有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素(h1、h2、h3、h4、h5、h6、p、dt)

（4）块级元素不能放在标签p里面

（5）li 标签可以包含 div 标签，因为li 和 div 标签都是装载内容的容器

（6）a标签中不能嵌套a标签

小结：为了提高浏览器的渲染效率，我们应该尽少的嵌套标签，要扁平化

扁平化（Flat Design）：2008年由Google提出概念

概念的核心意义是：去除冗余、厚重和繁杂的装饰效果。而具体表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素，这样可以让“信息”本身重新作为核心被凸显出来。同时在设计元素上，则强调了抽象、极简和符号化。

优点

1）降低移动设备的硬件需求，延长待机时间；

2）可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生；

3）随着网站和应用程序在许多平台涵盖了越来越多不同的屏幕尺寸，创建多个屏幕尺寸和分辨率的skeuomorphic设计既繁琐又费时。设计正朝着更加扁平化的设计，你可以一次保证在所有的屏幕尺寸上它会很好看。扁平化设计更简约，条理清晰，最重要的一点是，更好的适应性。

缺点

扁平化反对者认为：

1）降低用户体验，在非移动设备上令人反感；

2）缺乏直观，需要一定的学习成本；

3）传达的感情不丰富，甚至过于冰冷。

在扁平化设计目前最有力的典范是微软的Windows以及Windows Phone和Windows RT的Metro界面。【首个实践者：Microsoft（微软）】