HTML CSS DIV网页设计与布局（第3版）（微课版） 课件 第5章 多媒体和列表_第1页
HTML CSS DIV网页设计与布局（第3版）（微课版） 课件 第5章 多媒体和列表_第2页
HTML CSS DIV网页设计与布局（第3版）（微课版） 课件 第5章 多媒体和列表_第3页
HTML CSS DIV网页设计与布局（第3版）（微课版） 课件 第5章 多媒体和列表_第4页
HTML CSS DIV网页设计与布局（第3版）（微课版） 课件 第5章 多媒体和列表_第5页
已阅读5页，还剩28页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第5章

多媒体和列表5.1多媒体元素

5.2视频元素

5.3音频元素

5.4无序列表

5.5有序列表

5.6嵌套列表

5.7定义列表

5.8目录列表

5.9小结

5.1多媒体元素HTML支持的多媒体文件格式如表5.1所示。多媒体格式文件扩展名说明AVI.aviAVI（AudioVideoInterleave）格式是由微软公司开发的WMV.wmvWMV（WindowsMediaVideo）格式是由微软公司开发的MPEG.mpg.mpegMPEG（MovingPictureExpertsGroup）格式是因特网上最流行的格式之一，并得到主流浏览器的支持QuickTime.movQuickTime格式是由苹果公司开发的RealVideo.rm.ramRealVideo格式是由RealMedia公司针对因特网开发的。该格式允许传输低带宽条件下的视频流，并且由于是低带宽优先的格式，因此，传输质量常会降低Flash.swf.flvFlash格式是由Macromedia公司开发的。这种文件格式需要对应浏览器安装Flash播放器插件MPEG-4.mp4MPEG-4（带H.264视频压缩）格式是一种针对因特网的格式，也是HTML支持的主要视频文件格式MIDI.mid.midiMIDI（MusicInstrumentDigitalInterface）格式是一种针对电子音乐设备（例如合成器和声卡）的格式。大多数流行的网络浏览器都支持MIDIRealAudio.rm.ramRealAudio格式是由RealMedia公司针对因特网开发的。该格式也支持视频WAV.wavWAV格式是由IBM公司和微软公司开发的WMA.wmaWMA（WindowsMediaAudio）格式的传输质量优于MP3，并可兼容大多数播放器。WMA文件可作为连续的数据流来传输，这使得它对于网络电台或在线音乐很实用MP3.mp3.mpgaMP3格式是网页开发中常用的音频格式5.2视频元素5.2.1插入视频元素

5.2.2循环播放视频

5.2.3自动播放视频

5.2.4设置视频封面5.2.1插入视频元素视频元素标签<video><videowidth="播放器宽度"height="播放器高度"src="源文件地址"type="源文件类型"

controls>【示例5-1】在页面中添加一个视频。1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>添加视频</title>5

</head>6

<body>7

<h3>添加并播放视频</h3>8

<videowidth="500"height="400"src="青蛙.mp4"type="video/mp4"controls></video>9

</body>10

</html>处理视频文件播放的兼容问题<videowidth="320"height="240"controls>

<sourcesrc="movie.mp4"type="video/mp4">

<sourcesrc="movie.ogg"type="video/ogg">

<sourcesrc="movie.webm"type="video/webm">您的浏览器不支持<video>标签。</video>5.2.2循环播放视频<video>标签的loop属性<videocontrolssrc="源文件地址"type="源文件类型"

loop></video>【示例5-2】视频文件循环播放1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>循环播放视频</title>5

</head>6

<body>7

<h3>循环播放视频</h3>8

<videowidth="500"height="400"src="青蛙.mp4"type="video/mp4"controlsloop>

</video>9

<videowidth="500"height="400"src="青蛙.mp4"type="video/mp4"controls></video>10

</body>11

</html>5.2.3自动播放视频<video>标签的autoplay属性<videocontrolssrc="源文件地址"type="源文件类型"

autoplay></video>【示例5-3】设置视频自动播放。1

<!DOCTYPEhtml>2

<html

xmlns="/1999/xhtml">3

<head>4

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5

<title>自动播放视频</title>6

</head>7

<body>8

<h3>自动播放视频</h3>9

<videowidth="500"height="400"src="青蛙.mp4"type="video/mp4"autoplaycontrols>

</video>10

</body>11

</html>5.2.4设置视频封面<video>标签poster属性<videocontrolssrc="源文件地址"type="源文件格式"

poster="图片地址"></video>【示例5-4】设置视频封面。1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>设置视频封面</title>5

</head>6

<body>7

<h3>设置视频封面</h3>8

<videowidth="500"

height="400"src="青蛙.mp4"type="video/mp4"poster="青蛙.png"controls>

</video>9

</body>10

</html>5.3音频元素音频元素标签<audio><audio

src="源文件地址">【示例5-5】为网页添加背景音乐。1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>添加音频文件</title>5

</head>6

<body>7

<h3>添加音频文件</h3>8

<audiosrc="鸟叫声.mp3"controls></audio>9

<audiosrc="河流声.mp3"autoplay></audio>10

</body>11

</html>5.4无序列表5.4.1无序列表结构

5.4.2无序列表的列表项样式

5.4.1无序列表结构创建无序列表<ul>

<li>无序列表项1</li>

<li>无序列表项2</li>

<li>无序列表项3</li>

…</ul>【示例5-6】创建无序列表。1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>在页面中使用无序列表</title>5

</head>6

<body>7

<ul>8

<li>JPG格式，用来保存超过256色的图像文件格式。</li>9

<li>GIF格式，采用LZW压缩，适用于商标、新闻标题等。</li>10

<li>PNG格式，一种非破坏性的网页图像文件格式。</li>11

</ul>12

</body>13

</html>5.4.2无序列表的列表项样式<ultype="符号取值">

<li>无序列表项</li>

<li>无序列表项</li>

<li>无序列表项</li>

…<ul>无序列表的type属性值有3种，其具体取值如表5.2所示。type的取值设置的符号样式设置效果disc圆点符号，为默认值●circle空心圆点○square方块■【示例5-7】设置不同的无序列表项符号。1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>在页面中设置无序列表的样式</title>5

</head>6

<body>7 在网页设计中可以使用多种格式的图像。8

<ultype="disc">9

<li>JPG格式，用来保存超过256色的图像文件格式。</li>10

<li>GIF格式，采用LZW压缩，适用于商标、新闻标题等。</li>11

<li>PNG格式，一种非破坏性的网页图像文件格式。</li>12

</ul>13

<hr/>14 在网页设计中可以使用多种格式的图像。15

<ultype="circle">16

<li>JPG格式，用来保存超过256色的图像文件格式。</li>17

<li>GIF格式，采用LZW压缩，适用于商标、新闻标题等。</li>18

<li>PNG格式，一种非破坏性的网页图像文件格式。</li>19

</ul>20

<hr/>21 在网页设计中可以使用多种格式的图像。22

<ultype="square">23

<li>JPG格式，用来保存超过256色的图像文件格式。</li>24

<li>GIF格式，采用LZW压缩，适用于商标、新闻标题等。</li>25

<li>PNG格式，一种非破坏性的网页图像文件格式。</li>26

</ul>27

</body>28

</html>5.5有序列表5.5.1有序列表结构

5.5.2有序列表的列表项样式5.5.1有序列表结构<ol>

<li>有序列表项1</li>

<li>有序列表项2</li>

<li>有序列表项3</li>

…</ol>【示例5-8】设置一个有序列表。1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>简单的有序列表</title>5

</head>6

<body>7 在Edge浏览器中禁止显示图片的步骤如下所示：8

<ol>9

<li>打开一个Edge浏览器窗口；</li>10

<li>选择工具栏中的“更多工具”｜“Internet选项”命令；</li>11

<li>在弹出的对话框中选择“高级”选项卡；</li>12

<li>在“高级”选项卡中取消勾选“显示图片”复选框；</li>13

<li>单击“确定”按钮，完成操作。</li>14

</ol>15

</body>16

</html>17

<body>5.5.2有序列表的列表项样式<oltype="符号取值">

<li>有序列表项</li>

<li>有序列表项</li>

<li>有序列表项</li>

…<ol>有序列表的type属性值有5种，其具体取值如表5.3所示。type的取值设置的符号样式1默认效果，以数字1、2、3……排列a以小写字母a、b、c……排列A以大写字母A、B、C……排列i以小写罗马数字i、ii、iii、iv……排列I以大写罗马数字Ⅰ、Ⅱ、Ⅲ、Ⅳ……排列【示例5-9】设置不同类型的有序列表项样式。1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>在页面中设置有序列表的序号类型</title>5

</head>6

<body>7 在网页设计时，一般需要按照如下步骤进行：8

<oltype="a">9

<li>需求分析，并根据用户的需求提出设计方案；</li>10

<li>按照设计方案进行模块设计；</li>11

<li>进行代码实现；</li>12

<li>进行测试，并进行安装和试运行。</li>13

</ol>14

<hr/>15 在网页设计时，一般需要按照如下步骤进行：16

<oltype="I">17

<li>需求分析，并根据用户的需求提出设计方案；</li>18

<li>按照设计方案进行模块设计；</li>19

<li>进行代码实现；</li>20

<li>进行测试，并进行安装和试运行。</li>21

</ol>22

</body>23

</html>5.6嵌套列表【示例5-10】列表的混合嵌套。1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>混合嵌套</title>5

</head>6

<body>7 第4章目录8

<ol>9

<li>…</li>10

<livalue="2">图片的对齐方式</li>11

<oltype="a">12

<li>水平对齐方式</li>13

<li>垂直对齐方式</li>14

<li>非标准的对齐方式</li>15

<ul>16

<li>顶端对齐方式</li>17

<li>绝对居中对齐方式</li>18

<li>底端对齐方式</li>19

</ul>20

</ol>21

<li>设置图片超链接</li>22

<oltype="a">23

<li>将整个图片设置为超链接</li>24

<li>将图片分为多个单击区域</li>25

</ol>26

<li><img>标签的其他属性</li>27

<li>…</li>28

</ol>29

</body>30

</html>5.7定义列表创建定义列表的语法格式如下。<dl>

<dt>名词1</dt>

<dd>名词解释1</dd>

<dt>名词2</dt>

<dd>名词解释2</dd>

<dt>名词3</dt>

<dd>名词解释3</dd>

……</dl>【示例5-11】定义列表的使用。1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>定义列表</title>5

</head>6

<body>7 在HTML中可以有以下几种列表：8

<dl>9

<dt>无序列表</dt>10

<dd>用于对项目出现次序不作要求的列表</dd>11

<dt>有序列表</dt>12

<dd>用于对项目出现次序有严格要求的列表</dd>13

<dt>

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论