1.2DIV+CSS页面布局 在ⅫHTML1.0之后,W3C开始大力推行Web标准,开发工程师基 本上都是用了DIV+CSS的布局方式,也叫做区块布局。但是,搜索引 擎去抓取页面的内容的时候,它只能猜测某个DIV内的内容是文章内 容容器,或者是导航模块的容器,或者是作者介绍的容器等等,整个 HTML文档结构定义的非常不清晰,仅仅是在展示和页面解析性能上 的到了提升。 使用区块进行布局典型结构如图6-2所示。 < div id=“ header”> < div class=“ article”> < div class=“ section”> 图6-2区块进行页面布局 1.3HTML5结构 HTML5新增了许多的结构元素,如图6-2所示的页面,通过HTM 5的结构元素,页面结构可以调整的非常清晰。如图6-3所示。 < headers <article> <astae> footer> 图6-3HTML5结构元素进行页面布局 通过上述的对比,通过HTML5结构元素,页面的结构就非常清 晰且容易理解。需要说明的是,现在上述的三种页面布局方式都是可 2《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn2 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 1.2 DIV+CSS 页面布局 在 XHTML 1.0 之后，W3C 开始大力推行 Web 标准，开发工程师基 本上都是用了 DIV+CSS 的布局方式，也叫做区块布局。但是，搜索引 擎去抓取页面的内容的时候，它只能猜测某个 DIV 内的内容是文章内 容容器，或者是导航模块的容器，或者是作者介绍的容器等等，整个 HTML 文档结构定义的非常不清晰，仅仅是在展示和页面解析性能上 的到了提升。 使用区块进行布局典型结构如图 6-2 所示。 1.3 HTML 5 结构 HTML 5 新增了许多的结构元素，如图 6-2 所示的页面，通过 HTML 5 的结构元素，页面结构可以调整的非常清晰。如图 6-3 所示。 通过上述的对比，通过 HTML 5 结构元素，页面的结构就非常清 晰且容易理解。需要说明的是，现在上述的三种页面布局方式都是可 图 6-2 区块进行页面布局 图 6-3 HTML 5 结构元素进行页面布局