缘于页面结构语义化的考虑，我们应该慎用div和span这两个通用元素，只有当划分页面结构模块时才使用div元素，因为模块本身是没有任何语义的，他仅代表一块独立的结构。如果想对段落内部分内联元素或文本应用某种特殊样式时，就可以使用span元素把他们独立封装在一个容器内。
div作为布局元素，它与表格一样是可以嵌套的。因为浏览器对于任何元素的解析方式都是一样的，一般从最里层开始，然后不断向外解析。当嵌套层级很深时，将会使浏览器消耗更多的资源对嵌套关系进行解析，势必会影响浏览器的速度。
对于一个上下三行的布局结构：
<div id="header"></div><div id="main"></div><div id="footer"></div>
为了实现页面固定宽度和居中显示效果，分别给三个div设置css样式就有点麻烦了，我们可以给它嵌套一个div层：
<div id="wrap"> <div id="header"></div> <div id="main"></div> <div id="footer"></div></div>
实际上这种增加一层div嵌套的方法，肯定会给浏览器的显示带来负担，我们可以将body元素作为一个外套,这样就能充分发挥body的作用，以免造成浪费。
<body id="wrap"> <div id="header"></div> <div id="main"></div> <div id="footer"></div></body>
又比如：要给上述顶部页眉部分加一个导航条：
<div id="wrap"> <div id="header"> <div id="logo"></div> <div id="banner"></div> <div id="nav"> <ul> <!--导航列表--> <li></li> <!--导航列表项--> <li></li> <!--导航列表项--> <li></li> <!--导航列表项--> </ul> </div> </div> </div>
上述代码是最优化的么？当然不是，ul元素与div元素一样都是块状元素，一个导航菜单外面嵌套两层元素，势必会产生代码冗余，如果没有被定义的特殊样式，我们完全可以这样写：
<body id="wrap"> <div id="logo"></div> <div id="banner"></div> <div id="nav"> <ul> <!--导航列表--> <li></li> <!--导航列表项--> <li></li> <!--导航列表项--> <li></li> <!--导航列表项--> </ul> </div> </body>
这种情况就是最优的。但是，这样做存在一定的风险，可能需要使用更多的css样式来控制整个元素的显示。如果多嵌套一层，对页面布局会有更大的帮助，能节省大量不必要的css控制代码，此时布局的功能重要性就远大于结构的功能性。
总之，在我们大力提倡尽力减少div元素的多次嵌套时，是针对当前网页设计中设计师乱套div元素的现状而说的，但并不是谈套色变，必要的嵌套是应该的，也是必须的！
补充：页面语义化操作：
1、XHTML结构的语义性
2、构建语义化页面操作
Tabellenfeld löschen
Was bedeutet „Hinzufügen' in Java?
Einführung in Streicher
So lösen Sie devc-chinesische verstümmelte Zeichen
Der Unterschied zwischen Javac und Java
So kaufen und verkaufen Sie Bitcoin im Land
So lösen Sie 404 nicht gefunden
Was sind die am häufigsten verwendeten Anweisungen in Vue?
