HTML课程 Day2

第2章HTML课程 Day2
课程介绍
1. 图片与多媒体 img audio video（掌握）
2. 列表ul ol dl（掌握）
3. 表格 table（掌握）
一、图片与多媒体 img video audio （掌握）
本节的知识内容
Img标签
audio标签
video标签
source标签（了解）
1、img标签（重点中的重点）
1.1什么是img标签？
我们在网页中看到有图片展示，其实它就是用我们的这个img标签来实现的,那我们这个标签的语法是什么样的呢?我们来看一下。img元素向网页中嵌入一幅图像。
1.2为什么要使用img标签？
从技术上讲， 标签并不会在网页中插入图像，而是从网页上链接图像。 标签创建的是被引用图像的占位空间。
1.3怎么使用img标签？
基本语法：

必需的属性：
属性 值 描述
alt text 规定图像的替代文本，当图片加载失败时显示。
src URL 规定显示图像的 URL。

例子：

可选的属性：
属性 值 描述
height pixels
% 定义图像的高度。
width pixels
% 设置图像的宽度。
title 图片的说明(一般鼠标放到上面会显示相应的文字)

例子：

1.4注意事项
1.img是一个行内标签，并且是一个单标签（自关闭）
2.多种图片格式都认识（jpg,bmp,png,gif）
3.当我们修改图片的宽度时，高度会等比例进行缩放(反之亦然)
问题？
图片可以标记超链接吗？
课堂练习 标记一张自己的头像，点击之后，进入显示你详细个人信息的网页
2、audio标签
2.1 什么是audio标签？
标签用于定义网页中的声音，比如：我们在打开网页的是时候，有的网页里有一些背景音乐，或某些在线音乐网站上的歌曲在线播放，诸如这类的音乐或其他音频流就是用audio标签指定的。
2.2怎么使用audio标签？
基本语法：

您的浏览器不支持 audio 标签。

属性解释如下：
属性 值 描述
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
muted muted 规定视频输出应该被静音。
preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。
如果使用 “autoplay”，则忽略该属性。
src url 要播放的音频的 URL。

示例：

您的浏览器不支持audio标签

2.3 audio标签支持的音频格式
当前，audio 元素支持三种音频格式：
IE 9 Firefox .5 Opera 0.5 Chrome .0 Safari 3.0
Ogg Vorbis √ √ √
MP3 √ √ √
Wav √ √ √

2.4注意事项
可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

3、video标签
3.1什么是video标签
标签定义视频，比如电影片段或其他视频流。
3.2怎么使用video标签
基本语法：

您的浏览器不支持 video 标签。

提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

属性 值 描述
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 “autoplay”，则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

示例：

您的浏览器不支持video标签

3.4 支持的格式
Ogg、MPEG4、WebM

4、source标签（了解）
4.1 什么是source标签?
source标签为媒介元素（比如 和 ）定义媒介资源。备胎标签
4.2 为什么使用source标签?
允许规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
4.3 怎么使用source标签?
基本语法：

示例:
1.选择合适的音频播放：



您的浏览器不支持audio标签

示例:
2.选择合适的视频播放



您的浏览器不支持audio标签

4.4 注意事项
src的值为资源地址，type的值为资源的类型。可以指定多个资源，浏览器将自动选择支持的资源进行播放。
常用的类型：
用于视频：
video/ogg
video/mp4
video/webm
用于音频：
audio/ogg
audio/mpeg
5、小结
1.什么是audio标签？
2.什么是video标签？
3.什么是source标签？