任务3 运用html5的新标签.pptVIP

任务3 : 运用HTML5的新标签 网页设计与制作(HTML+CSS+Javascript) 网页设计与制作课程组 目标 TARGET 知识目标 了解HTML5新标签； 掌握结构性标签； 掌握级块标签； 掌握页面交互标签； 掌握行内语义性标签; 掌握HTML5的全局属性。 1 任务描述 2 结构性标签 3 分组标签 4 页面交互标签 5 行内语义性标签 7 综合实例 8 任务实施 9 任务拓展 6 HTML5的全局属性 1 任务描述 Part 使用HTML5新标签优化网页 依据草图实现基本的HTML只是实现前端页面的一小步，HTML5 中所有的标签都是有结构性的。 本任务就是使用HTML5新标签来优化门户网站主页的页面文档。 任务描述：使用HTML5新标签优化网页 2 HTML5结构性标签 Part ◎HTML5结构性标签 ◎section标签 ◎nav标签 ◎article标签 ◎aside标签 ◎header标签 ◎footer标签 1 认知结构性标签 传统DIV+CSS布局 HTML5结构标签 结构性标签其实就是语义化的html网页框架。 结构性标签，标签本质上和div没有任何区别。 借助id与class，通过CSS样式来实现页面布局，没有标准的规范，有哪些信誉好的足球投注网站引擎只能去猜测某部分的功能，文档结构和内容不够清晰。 / 举例界面 / 举例代码 举例演示 【实例3-1】HTML5结构性标签。 举例： 2 section标签 定义和用法 section标签用于对网页的内容进行分区、分块，定义文档中的节。 比如章节、页眉、页脚或文档中的其它部分。一般情况下，section标签通常由内容和标题组成。 section h1section是什么？/h1 p用于对网页的内容进行分区、分块，定义文档中的节/p  /section 文档中的区段，解释了 “section的具体介绍” 注 意 section标签表示一段专题性的内容，一般会带有标题，没有标题的内容区块不要使用section标签定义。 根据实际情况，如果article标签、aside标签或nav标签更符合使用条件，那么不要使用section标签。 当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div标签而非section。 3 article标签 定义和用法 article是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。 article 这是一篇介绍HTML 5结构标签的文章 /article 例如：新闻提供者的一篇新的文章、一篇博客、一个用户评价等。 注 意 举例： article header h1这是一篇介绍HTML 5结构标签的文章/h1 h2HTML 5的历史/h2 p2017.02.20/p /header p文章内容详情/p /article Article标签会有标题部分，通常包含在header内，有时也会包含footer。 article可以嵌套，内层的article对外层的article标签有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论也可以以article的形式嵌入其中。 4 nav标签 nav ul lia href=#首页/a/li lia href=#学校新闻/a/li lia href=#院系设置/a/li lia href=#师资队伍/a/li /ul /nav 定义和用法 nav标签代表页面的一个部分，是一个可以作为页面导航的链接组，是navigator的缩写。 举例： nav ul lia href=#首页/a/li lia href=#学校新闻/a/li lia href=#院系设置/a/li lia href=#师资队伍/a/li /ul /nav nav标签可以应用于传统导航条、侧边栏导航、页内导航、翻页操作等场合。 5 aside标签 nav ul lia href=#首页/a/li lia href=#学校新闻/a/li lia href=#院系设置/a/li lia href=#师资队伍/a/li /ul /nav 定义和用法 aside标签用来装载非正文的内容，被视为页面里面一个单独的部分。 举例： aside标签可以被包含在article标签内作为主要内容的附属信息。 article h1文章标题/h1 p文