《HYLI5教程课件》_《HYLI5教程课件》_第三章 构建HTML5网页文件.pptxVIP

2021构建HTML5网页文件

02HTML5多媒体技术01HTML5新增元素与属性目录CONTENT

HTML5新增元素与属性01

在HTML5页面中的元素都是以结构化形式构成的，如header元素、nay元素、article元素等。【任务目标】【任务3.1.1】结构元素【知识解析】【任务3.1】HTML5新增元素与属性掌握结构元素的使用方法

header元素是引导作用的结构元素,通常运用在页面的头部。1、header元素通过header元素的用法完成效果的制作，如图3-1所示。）案例引入3.1.1结构元素

2、nav元素nav元素常用于页面的导航功能，使得页面导航元素更加明确nav元素目前常用于传统导航条、侧边导航、页内导航和翻页导航等几种场合。但并不是所有的链接组都要被放进nav元素，只需要将主要的和基本的链接放进nav元素即可。3.1.1结构元素

3、article元素3.1.1结构元素article元素常常用作页面中的独立文档，如日记、博客、新闻或评论等内容，该元素常常与section元素配合使用，一个页面中article元素可以出现多次。案例引入利用article元素完成效果的制作

3.1.1结构元素4、aside元素aside元素用来表示页面文章的附属信息,它可以是相关的侧栏信息、引用信息、广告和导航条信息等部分。aside元素用法常有两种：一是article元素内作为附属信息；二是在article元素之外作为附属信息案例引入aside元素的使用制作效果

3.1.1结构元素5、section元素section元素对页面上的内容进行分块,一个section元素通常由内容和标题组成。但需要注意以下3点：●不要将section元素用作div的特性，section元素并非容器。●如果article元素、aside元素或nav元素三个元素更符合,那就不使用section元素。●section元素使用时，块内容要有标题。案例引入section元素的使用效果

3.1.1结构元素6、footer元素footer元素常用于表示页面的底部内容。与header元素用法相似,一个页面中可以包含多个footer元素。同时,也可以在article元素或者section元素中使用footer元素。

为了让页面内容排列有序、分类清晰，如电商购物网站的分类导航内容等，可分别使用ul、ol和dl列表元素定义页面内容【任务目标】【任务3.1.2】列表元素【知识解析】【任务3.1】HTML5新增元素与属性学会如何使用列表元素创建列表

3.1.1列表元素1、ul元素ul元素表示无序列表，将网页中内容无序的呈现出来，没有级别、先后顺序之分，常用于页面的导航菜单功能案例引入通过ul元素完成无序列表的效果制作

3.1.1列表元素2、ol元素ol元素表示有序列表，将网页的内容信息有序的呈现出来，如页面中的信息排行榜等可以通过有序列表来定义案例引入通过ol元素及属性设置制作有序列表的效果

3.1.1列表元素3、dl元素dl元素表示定义列表，常用于对关键词、名词术语进行描述和解释,定义列表的列表项是没有任何项目符号标记案例引入利用dl定义列表元素制作效果

3.1.1列表元素4、列表的嵌套应用在使用列表时,列表项中也有可能包含若干子列表项,要想在列表项中定义子列表项就需要将列表进行嵌套案例引入通过列表元素完成列表嵌套效果制作

分组元素常用于对页面内容进行分组，分别为figure元素、figcaption元素和hgroup元素，【任务目标】【任务3.1.3】分组元素【知识解析】【任务3.1】HTML5新增元素与属性掌握分组元素的基本使用方法

任务3.1.3分组元素1、figure和figcaption元素应用figure元素常用于定义图像图片等流内容，一般是一个独立的区域。其定义的内容要与主体内容保持一致。而figcaption元素则常用于figure元素内的标题,该元素常放在figure元素的第一个或者最后一个子元素的位置。案例引入figure和figcaption元素应用效果

任务3.1.3分组元素2、hgroup元素hgroup元素常用于包含多个标题组，如h1-h6元素组合使用。通常，hgroup元素放在header元素中。案例引入hgroup元素的用法效果

HTML5是一些独立特性的集合,它不仅增加了许多Web页面特性,而且本身也是一个应用程序。对于应用程序而言,表现最为突出的就是交互操作。HTML5为操作新增加了对应的交互体验元素,在本节将详细介绍这些元素【任务目标】【任务3.1.4】交互元素【知识解析】【任务3.1】HTML5新增元素与属性掌握交互元素的基本使用方法

任务3.1.4交互元素1、de