今天图老师小编要跟大家分享HTML文档结构对Div+CSS布局的意义，精心挑选的过程简单易学，喜欢的朋友一起来学习吧！
【 tulaoshi.com - Web开发 】
选择合适的、有意义的元素去描述你的内容，确保您所选择的是富有语义的类class和id特征值，以合适的标签来组织编写HTML文档，建立具有良好语义的结构。
相关精彩文章
用CSS控制浏览器滚动条样式源代码
[专题]谷歌浏览器:Google Chrome
主要就是我对结构和开发效率之间的矛盾的一个思考，css框架怎样才能不破环结构的一个疑问。而且对于结构和效率我的观点就是“拥有合理的结构，才是你web标准化的根本动机”，web是承载信息的，没有理由为了视觉效果，而破坏合理的结构。
Web标准的要把握几点：
使用结构化，语义化的标签
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）使用CSS分离出（X）HTML文档中的表现元素
依靠Javascript去增强，而不是替代，网站的特征（举个例子就是如果css做不了的，交给Javascript而不是替代css去做他能做的）
对于多样式组合的结构我一直是很反感的，可能我理解的不够深入，体会不到他的好处，或许合理的组合可以兼顾结构和开发效率，可是我没有发现，我就要抵触。
对样式组合方式是这样的
div class=”class1 class2 … classn”/div
举个布局例子
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）div class=”f-left w400 bgfff”
几个类组合成一个左浮动，宽400 背景为白色的一个区域
你可能拥有一个庞大的库，页面只需要任意的class的组合就可以完成，省去大部分花费在css上的时间，可是带来的是结构的混乱，改版的困难，甚至向后兼容受到限制。这样做和table布局没什么两样，只是代码看着好看而以，而且代码量相差也不会太大。在应用web标准初期，合理的table布局也是允许的。
如此多的class让我想起了table冗长的属性
TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=CENTER WIDTH=100% HEIGHT=100%
难道辛辛苦苦就是想使用div配合css模拟出一个table很容易实现的效果？而且达到和table布局一样的拙劣？
语义化也是结构的一个部分，语义除了合理的使用（X）HTML标记语言，id也是一个语义组成的部分，div的id就像一个即时贴，告诉你某个div的语义，告诉你这个区块的意义。
微格式（Microformat）是在标准 XHTML 代码中嵌入结构化数据的一种新方法。他的诞生也很明确的说明了web的结构永远是第一位，语义化的优势很现实的体现出来，div的属性规划也体现着语义，而不仅仅是一个传递给样式工作的接口。可以去看看ibm文档中心的一篇“使用 microformats 分离数据与格式”了解它的工作原理。
来源:https://www.tulaoshi.com/n/20160219/1621563.html
看过《HTML文档结构对Div+CSS布局的意义》的人还看了以下文章 更多>>
