一、学习目标

  1. 掌握web前端开发工具的使用方法；
  2. 熟悉HTML文档结构，熟悉多媒体标记的使用方法；
  3. 学会使用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>

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

五、心得体会

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