快捷搜索:  汽车  科技

html5常用标签使用实例(HTML5常见的基础标签)

html5常用标签使用实例(HTML5常见的基础标签)alt:图片加载失败时的说明 src:图片的相对路径 <body> <!-- img:图片标签 行内标签

1.img标签(非常重要)

Img元素可以向网页插入一副图像,支持的图片格式:jpg bmp gif png

语法:

<img src=”图片的路径” alt=”对图片说明的文字” width=”” height=”” title=”说明文字”/>

实例:

<body>

<!--

img:图片标签 行内标签

src:图片的相对路径

alt:图片加载失败时的说明

title:鼠标悬停时提示说明

width:宽 px %

height:高 px %

-->

<div>

<img src="https://img.aigexing.comimgs/1.jpg" width="200" alt="这是第一个手机" title="这是第一个手机"/>

<img src="https://img.aigexing.comimgs/2.jpg" width="200" alt="这是第二个手机" title="这是第二个手机"/>

</div>

</body>

html5常用标签使用实例(HTML5常见的基础标签)(1)

注意事项:

1. img 是行内标签,是单标签。

2. 多种图片格式都可以(jpg bmp png gif)

3. 当我们修改图片宽度时,高度会根据图片宽度等比例缩放(反之亦然)

2.audio标签

1.2.1 定义和用法

<audio>定义网页中的声音

语法:

<audio src=”音频文件的路径” autoplay=”autoplay”>

您的浏览器不支持audio标签

</audio>

实例:

<audio src="https://img.aigexing.comimgs/成功.mp3" autoplay="autoplay" controls="controls">

您的网页不支持音频播放 请升级您浏览器

</audio>

html5常用标签使用实例(HTML5常见的基础标签)(2)

html5常用标签使用实例(HTML5常见的基础标签)(3)

3.Video标签

语法:

<video src=”视频文件路径” controls=”controls”>

您的浏 览器不支持video标签,请升级

</video>

<!--

src:视频文件的路径

controls:视频播放器的控制条

height:视频控件的高度

poster:视频下载或加载时显示的图像

autoplay:页面加载及播放

-->

<video src="https://img.aigexing.comimgs/video.mp4" controls="controls" height="400" poster="imgs/1.jpg" autoplay="autoplay">

你的浏览器不支持

</video>

支持的格式:MPEG4、ogg、MebM

html5常用标签使用实例(HTML5常见的基础标签)(4)

html5常用标签使用实例(HTML5常见的基础标签)(5)

html5常用标签使用实例(HTML5常见的基础标签)(6)

4.Source标签

source标签一般用于video标签、audio标签定义媒体资源。允许视频或音频根据浏览器的兼容性进行选择。

(1).选择合适的视频播放

<video width="800" height="" controls="controls">

<source src="https://img.aigexing.comimgs/video.mp4" type="video/mp4"></source>

<source src="https://img.aigexing.comimgs/video.ogv" type="video/ogg"></source>

<source src="https://img.aigexing.commyvideo.webm" type="video/webm"></source>

<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">

<param name="movie" value="myvideo.swf" />

<param name="flashvars" value="autostart=true&file=myvideo.swf" />

</object>

当前浏览器不支持 video直接播放,点击这里下载视频: <a href="myvideo.webm">下载视频</a>

</video>

(2). 选择合适的音频播放

<audio>

<source src="https://img.aigexing.comimgs/video.mp3" type="audio/mp3"></source>

<source src="https://img.aigexing.comimgs/video.mp4" type="audio/mp4"></source>

</audio>

html5常用标签使用实例(HTML5常见的基础标签)(7)

视频素材

欢迎关注我的头条号,我将持续为大家更新web前端学习资料,谢谢

猜您喜欢: