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

第二章页面结构

实践目标

搭建体育新闻列表网页

制作博客内容网页

任务一：搭建体育新闻列表网页

使用HTML5搭建体育新闻列表网页的文档结构。

体育新闻列表网页是以列表形式呈现最新的体育新闻

要求页面顶部包含导航链接、新闻标题、新闻内容预览、推荐浏览和页脚导航，使用HTML5的主体和非主体结构标签、文本标签、超链接标签来组织页面结构。

页面结构要清晰合理，标签的使用正确得当。

创建HTML5页面，修改页面标题。

创建页面的顶部菜单。

创建页面中部的新闻标题。

创建页面的页脚部分。

搭建体育新闻列表网页

搭建体育新闻列表网页

header

nav!--省略--/nav

/header

section

article

header!--省略--/header

footer!--省略--/footer

/article

article!--省略--/article

/section

section!--省略--/section

footer!--省略--/footer

网页导航链接

新闻1

新闻2

推荐

页脚

搭建体育新闻列表网页

使用HTML5的文档结构标签、文本标签、超链接标签，搭建网页的文档结构

任务二：制作博客内容网页

使用HTML5的主体结构标签制作博客的内容网页。

博客内容网页主要展示博客的正文明细，整个页面包括博客页的顶部标题区、导航链接、侧边栏、博客正文区、评论区。

使用HTML5的主体和非主体结构标签、文本标签和超链接标签组织页面结构。

页面结构要清晰合理，标签的使用正确得当

制作博客内容网页

使用header标签创建页面顶部区域，包含标题内容。

使用nav标签创建顶部区域的导航链接

使用article标签创建页面中部博客正文

使用aside标签创建页面的侧边栏。

使用div标签创建评论区域内容

页面的顶部区域

制作博客内容网页

header

hgroup!--省略--/hgroup

/header

nav!--省略--/nav

header、hgroup标签创建网页正副标题

nav标签创建页面链接

正文区域

制作博客内容网页

article

header!--省略--/header

section

article

header!--省略--

/article

article

header!--省略--/header

/article

/section

footer!--省略--/footer

/article

header标签创建文章列表标题

article标签创建文章1

article标签创建文章2

foot标签创建页脚

aside!--省略--/aside

footer!--省略--/footer

侧边区域和页脚

制作博客内容网页

aside标签创建侧边栏内容

foot标签创建页脚

制作博客内容网页

制作旅游博客的页面结构，使用HTML5的主体和非主体结构标签、文本标签和超链接标签组织页面结构

END