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

2021构建HTML5网页文件02HTML5多媒体技术01HTML5新增元素与属性目录CONTENTHTML5新增元素与属性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、details和summary元素的应用details元素常用于描述某文档或者领域的细节，而summary元素常与details元素配合使用，summary元素常定义为details标题，点击标题，会显示或隐藏details中的内容。案例引入details元素和summary元素的制作效果,任务3.1.4交互元素2、progress元素progress元素常表示页面完成任务的进度。其常用属性值有两个：value表示完成工作量的值；max:表示任务的总工作量。注意：value的值要小于或等于max属性的值，且都大于0。案例引入progress元素的使用效果,任务3.1.4交互元素3、meter元素案例引入meter元素的应用制作效果，,属性属性描述high表示被界定为高点的值low表示被界定为低点的值max表示最大值,默认值是1min表示最小值,默认值是0optimum表示设置怎样的度量值为最佳的值。如设置大的属性值,则意味越高越好。如果设置低的属性值,则意味着值越低越好value表示度量的值为了增强页面文本显示效果的生动性，常使用语义元素来进行修饰，主要包含time元素,mark元素和cite元素，【任务目标】【任务3.1.5】语义元素【知识解析】【任务3.1】HTML5新增元素与属性掌握文本语义元素的基本使用方法任务3.1.5语义元素1、time元素的应用time元素表示日期和时间，又能以一种可读方式显示给用户。其常用两个属性为datetime和pubdate。其中datetime属性用于可以被搜索或者应用程序可读取、可识别的时间或日期；ubdate属性常用于最近的父article元素内容的发布日期和时间，如没找到article元素，则指向整个文档案例引入time元素的用法制作效果,任务3.1.5语义元素2、mark元素的应用mark元素表示在文本中高亮度显示某些文字,该元素的用法与em和strong功能相似,都是强调修饰的作用案例引入mark元素的应用制作效果,任务3.1.5语义元素3、cite元素cite元素表示一个引用标记,常用于正文的参考文献引用说明,被标记的内容将以倾斜的样式显示,区别于其他文字。案例引入cite元素的应用制作效果,,全局属性表示其属性能适用于任何元素,在HTML5中常用的全局属性有draggable、hidden、spellcheck和contenteditable等【任务目标】【任务3.1.6】全局属性【知识解析】【任务3.1】HTML5新增元素与属性掌握全局属性的基本用法任务3.1.6全局属性1、draggable属性raggable属性表示该元素是否可以拖拽,其属性有true和false两个值,当值为true时表示该元素可以进行拖拽操作,反之则不能。实际在应用过程中，要想实现真正意义上的拖拽效果，要结合JavaScript脚本技术结合使用案例引入draggable属性的用法制作效果,,任务3.1.6全局属性2、hidden属性hidden属性表示该元素在页面中是否可以显示,在HTML5中属性值为hidden，例：hidden="hidden"，该元素将会被隐藏,反之去掉hidden则会显示任务3.1.6全局属性3、spellcheck属性spellcheck属性主要用于表单域中文本输入控件中内容及语言的检测功能。其有两个属性值，值为true时检测输入框中的语法值,反之不检测案例引入通过spellcheck属性用法制作效果,任务3.1.6全局属性4、contenteditable属性contenteditable属性表示当前定义的元素是否可编辑，但并没有真正意义上的内容编辑，当页面刷新时恢复原状，如想直接在页面上实现信息编辑效果则需结合复杂的JavaScript代码才能实现,当前仅在HTML5中指定该属性的值即可。属性值为true表示可编辑,为false表示不可编辑案例引入通过contenteditable属性制作效果,

HTML5多媒体技术02在HTML5中,audio元素用于嵌入音频文件，它默认支持三种音频格式，分别为Ogg、MP3和wav,其基本语法格式如下：<audiosrc="音频文件路径”controls="controls"></audio>src属性表示音频文件的路径,controls属性表示音频播放控件。<audio>和</audio>之间也可以插入文字，当浏览器不支持audio元素则显示文字【任务目标】【任务3.2.1】音频技术【知识解析】【任务3.2】HTML5多媒体技术掌握HTML5如何插入音频案例引入通过audio元素嵌入音频的效果属性属性值功能描述autoplayautoplay表示加载页面时自动播放音频looploop表示音频结束时自动循环播放preloadpreload表示音频在页面加载时进行加载,并预备播放。如果使用"autoplay",则忽略该属性。在HTML5中,video元素用于嵌入视频文件,它支持三种视频格式,分别为Ogg、WebM和MPEG4，其基本语法格式为：<videosrc="视频文件路径”controls="controls"/video>src属性表示视频文件的路径,controls属性表示视频播放控件。<video>和</video>之间也可以插入文字，当浏览器不支持video元素则显示文字。【任务目标】【任务3.2.2】视频技术【知识解析】【任务3.2】HTML5多媒体技术掌握HTML5如何插入视频案例引入通过video元素嵌入视频的效果,属性属性值功能描述autoplayautoplay表示加载页面时自动播放视频looploop表示视频结束时自动循环播放preloadpreload表示视频在页面加载时进行加载,并预备播放。如果使用"autoplay",则忽略该属性。post