当前位置：网站首页 > 网站建设教程 > HTML教程 > 正文

web(4)--HTML多媒体标记使用

教程管理员发布于2023-09-28 13:54 HTML教程 149

简介： web(4)--HTML多媒体标记使用

一、学习目标

掌握web前端开发工具的使用方法；
熟悉HTML文档结构，熟悉多媒体标记的使用方法；
学会使用HTML完成简单的网页设计。

二、实验环境

VS Code,Win11

三、实验内容

设计一个图像画廊，采用无序列表加载五副图像，并利用marquee标记实现五副图像从右向左交替滚动显示。

设计中需要用到样式表如下所示：

<style type="text/css">

      img{width:100px;height:100px;border:2px #cc0066 ridge;}

      ul{list-style-type:none;}

      li{float:left;}

  </style>

四、html代码

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像画廊</title>
    <style type="text/css">
        img{width:100px;height:100px;border:2px #cc0066 ridge;}
        ul{list-style-type:none;}
        li{float:left;}
    </style>
</head>
<body align="center">
    <h2 aligen="center" style="color:pink;font-size:30px">图像画廊</h2>
    <hr size="2" width="100%" color="#f1a5fb">
    <marquee><u1>
        <li><img src="photo1.jpg"></li>
        <li><img src="photo2.jpg"></li>
        <li><img src="photo3.jpg"></li>
        <li><img src="photo4.jpg"></li>
        <li><img src="photo5.jpg"></li>
    </u1></marquee>
    <hr size="2" width="100%" color="#ef77d9">
 
</body>
</html>

五、心得体会

通过此次实验，我熟悉了HTML文档结构，熟悉多媒体标记的使用方法；并且增加了对img标记和图片引用的熟练度，通过这一次实验我学到了不少东西，同时还学会使用了marquee标记实现图像交替滚动。

标签：#阿里 #开发者 #标记 #多媒体 #社区 #web

web(4)--HTML多媒体标记使用

一、学习目标

二、实验环境

三、实验内容

四、html代码

五、心得体会

相关推荐

会员中心

下载中心

图片素材

关注微信

关于我们

QQ在线客服

关注微信领优惠