《使用HTML5实现响应式布局》第二章-页面结构-理论学习资料.pptxVIP

第二章页面结构

理论内容结构标签概述常见的结构标签

1.结构标签概述网站的整体结构可以分为页眉、内容区块和页脚三大部分页眉内容区块页脚

2.常见的结构标签为实现清晰的文档结构，HTML5提供了相关的结构标签：页眉标签是header页脚标签是footer导航栏标签是nav内容区块标签是section文章标签是article侧边栏标签是aside

常见的结构标签常见的HTML5结构标签构成页面结构的示意图如下

header标签header标签可用于页面内任何特定独立部分的前言或导航助手bodyheader h1Web开发工作室/h1/header/body

footer标签footer标签表示当前区域内容的页脚，页脚通常包含版权信息、相关链接列表、作者信息或当前内容块结尾处的内容bodyheader/headerfooter!--省略--/footer/body

nav标签nav标签是一个可以用作页面导航的链接组，用于管理多个超链接bodyheadernav !--省略--/nav/headerfooter/footer/body

section标签section标签的作用是对页面上的内容执行分块，或对文章分段sectionheader!--省略--/headerfooter!--省略--/footer/section

article标签article标签是一个特殊的section标签，它比section标签具有更明确的语义，它代表一个独立的、完整的相关内容块sectionheader!--省略--/headerarticleheader!--省略--/headerfooter!--省略--/footer/article/section

aside标签aside标签用于表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用链接、侧边栏、广告、导航条以及类似的有别于主要内容的部分asidesection!--省略--/sectionsection!--省略--/section/aside

div标签除了使用HTML5的结构标签，还可以使用div制作页面的结构。div标签的名称来源于英文单词division，通常称其为HTML5的层或容器，常结合CSS实现网页布局技术。div通常使用id属性设置标签的标识，用于区分不同的内容结构区域。id是HTML5标签的标识，页面中的每个标签的id不能相同。

div标签div标签表达结构化布局页面排版的方法bodydivid=header--页眉--/divdivid=section--内容区块--/divdivid=footer--页脚--/div/bodyHTML5的结构标签本质是div标签，如header与divid=”header”表达的是相同的意思。只是header在语义上更为直观。div默认没有外观，由CSS3设置

div标签在HTML5中，与div标签相似的还有span标签，其写法是：span内容/span。div与span的区别是div占用一行宽度，而span占用宽度随内容宽度变换。在DreamweaverCC的设计视图中，可以看出其占位宽度及显示区别。div独占一行的块状结构特点span随内容的宽度变化，在一行显示内容

总结在大型网站中，一个网页通常由header、aside、section、footer等标签组成，本章详细讲解了这些标签的用法。实践部分使用网页结构标签制作新闻列表页面和博客内容网页。