《(61)--Web2.8 语义化布局.ppt》由会员分享，可在线阅读，更多相关《(61)--Web2.8 语义化布局.ppt（16页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、WebWeb设计与应用设计与应用2.8 HTML5的语义化布局Web设计与应用语义化布局l语义化布局语义化布局 专注内容与结构专注内容与结构 在HTML5之前，用，或者，用来指明导航链接、头部或者尾部。HTML5 提供了新的语义元素来明确一个Web页面的不同部分。根据W3C HTML5文档规范，一般认为HTML5中的主要布局标签有：header、nav、section、article、aside、footerheader标签 标签定义文档或者文档的一部分区域的页眉。元素应该作为介绍内容或者导航链接栏的容器。在一个文档中，可以定义多个 元素。注意：标签不能被放在、或者另一个 元素内部。l使用说明
2、使用说明header标签l示例代码示例代码l实现效果实现效果nav标签 标签定义导航链接的部分。并不是所有的HTML文档都要使用到元素。元素只是作为标注一个导航链接的区域。在不同设备上（例如手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求。l使用说明使用说明nav标签l示例代码示例代码l实现效果实现效果section标签标签定义文档中的节（片段、区段）。比如章节、页眉、页脚或文档中的其他分节部分。根据W3C HTML5文档：section 包含了一组内容及其标题。l使用说明使用说明section标签l示例代码示例代码l实现效果实现效果article标签 标签定义独立的内容。标签定义
3、的内容本身必须是有意义的且必须是独立于文档的其余部分，例如：论坛帖子、报纸文章、博客条目、用户评论等。l使用说明使用说明article标签l示例代码示例代码l实现效果实现效果aside标签 标签定义 标签外的内容。aside 的内容一般与附近的内容相关。l使用说明使用说明l示例代码示例代码l实现效果实现效果footer标签 标签定义文档或者文档的一部分区域的页脚。元素应该包含它页脚所包含的元素的信息。在典型情况下，该元素会包含文档的作者，著作权信息，使用条款的链接，联系信息等等。在一个文档中，可以定义多个 元素。l使用说明使用说明footer标签l示例代码示例代码l实现效果实现效果总结 这些布局标签，很难单个从页面的呈现效果来彼此区分。它们只是从语义上做了区分，并不是header标签就只能放在页面的顶部，footer标签只能放在页面的底部，其位置还得靠CSS控制。优点：优点：标签的定义与使用在网页结构上更加语义化，使得搜索引擎及程序开发人员能更加迅速的理解当前网页的整个结构，也使得网络爬虫之类的程序能快速定位到相应的位置。