视频和音频的方法和事件 视频、音频常用的方法 01 方法 描述 load() 加载媒体文件，为播放做准备。通常用于播放前的预加载，也会用于重新加载媒体文件。 play() 播放媒体文件。如果视频没有加载，则加载并播放；如果视频是暂停的，则变为播放。 pause() 暂停播放媒体文件。 canPlayType() 测试浏览器是否支持指定的媒体类型。 视频、音频常用的方法 HTML5为video和audio提供了接口方法，具体介绍如下表所示。 视频、音频常用的事件 02 视频、音频常用的事件 事件 描述 play 当执行方法play()时触发。 playing 正在播放时触发。 pause 当执行了方法pause()时触发。 timeupdate 当播放位置被改变时触发。 ended 当播放结束后停止播放时触发。 waiting 在等待加载下一帧时触发。 ratechange 在当前播放速率改变时触发。 volumechange 在音量改变时触发。 canplay 以当前播放速率，需要缓冲时触发。 canplaythrough 以当前播放速率，不需要缓冲时触发。 durationchang

CSS3选择器--属性选择器;CSS3选择器简介;使用选择器可以方便的定位于指定的元素，而不用使用额外的class或id，通过这种方式也可以让我们的代码和样式更加简洁、灵活、易控制。;属性选择器;属性选择器;E[att^=value]属性选择器;E[att^=value]属性选择器;E[att$=value]属性选择器;E[att$=value]属性选择器;E[att*=value]属性选择器;E[att*=value]属性选择器;总结;;谢

图像标记;图像标记;网页中常用图形格式;网页中常用图形格式;网页中常用图形格式;网页中常用图形格式;网页中常用图形格式;图像标记;图像标记;图像标记;（1）有的浏览器不能正常显示alt属性的内容。;绝对路径和相对路径;实际工作中，通常新建一个文件夹专门用于存放图像文件。;绝对路径和相对路径;绝对路径和相对路径;图像标记示例;总结;;感

CSS3选择器-- 伪元素选择器 伪元素选择器 01 伪元素选择器 所谓伪元素选择器，是针对CSS中已经定义好的伪元素使用的选择器。CSS中常用的伪元素选择器有:before伪元素选择器和:after伪元素选择器 :before选择器 :after选择器 :before选择器 描述 :before伪元素选择器用于在被选元素的内容前面插入内容。 语法格式 E:before{ content:文字/url(); } 说明 设置在对象前（依据对象树的逻辑结构）发生的内容必须配合content属性来指定要插入的具体内容。 :after选择器 描述 :after伪元素选择器用于在某个元素之后插入一些内容。 语法格式 E:after{ content:文字/url(); } 说明 :after选择器的使用方法与:before选择器相同。 总结 02 通过本小节知识了解 :before和:after选择器 掌握伪元素选择器的语法格式 能够熟练运用伪元素选择器 总结 THANKS

HTML5&CSS3网页制作：文本层次语义元素.pptx

HTML5&CSS3网页制作：文本外观属性.pptx

相对定位 相对定位 01 元素的定位 定位 属性 相对 定位 绝对 定位 固定 定位 静态 定位 描述 在CSS中，通过定位属性可以实现网页中元素的精确定位，元素的定位属性主要包括定位模式和边偏移两部分。 相对定位 描述 相对定位是将元素相对于自身原本的位置，通过偏移指定的距离，到达新的位置,元素仍然保持其未定位前的形状，它原本所占的空间仍保留。 说明 水平方向的偏移量由left或right属性指定 竖直方向的偏移量由top和bottom属性指定 语法格式 position： relative ; 相对定位 示例 定位前 定位后 相对定位 示例 top:150px left:260px 在文档流中的位置仍然保留着 /*设置相对定位*/ position: relative; top: 150px; left: 260px; 相对定位 实战：对“相对定位2”设置left: 150px ; top: 50px; top:50px left:150px 定位前 定位后 总结 02 熟知元素的相对定位是相对于自身原来的位置进行一定量的偏移 熟知掌握相对定位的语法格式能熟练运用 总结 THANK

页面交互元素 页面交互元素简介 01 页面交互元素 HTML5是一些独立特性的集合，它不仅增加了许多Web页面特性，而且本身也是一个应用程序。对于应用程序而言，表现最为突出的就是交互操作。 details元素和summary元素

...

...

定义 details元素规定了用户可见的或者隐藏的需求的补充细节。summary元素经常与details 元素配合使用，作为details 元素的第一个子元素，用于为details定义标题。 语法格式 details元素和summary元素 示例：实现如下效果 定义 progress元素 progress元素用于表示一个任务的完成进度。这个进度可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成。也可以用0到某个最大数字（如100）之间的数字来表示准确的进度完成情况（如进度百分比）。 语法格式 progress元素 说明 value：已经完成的工

嵌入视频和音频 音视频中的source元素;什么是source元素;什么是source元素;什么是source元素;用法示例;用法示例;总结;;小任务 ;THANKS

CSS核心基础--引入CSS样式;;引入CSS样式方式;引入CSS样式方式;引入CSS样式方式;;引入CSS样式 【内联方式】;引入CSS样式 【内联方式】;引入CSS样式 【链接方式】;引入CSS样式 【链接方式】;引入CSS样式 【嵌入方式】;引入CSS样式 【嵌入方式】;引入CSS样式 【导入方式】;;总结;谢