wed前端，至少两个网页，用三种列表，有图文，有音视频

Web前端开发通常涉及构建响应式、交互性强的网站，其中包含文本、图片、音频和视频等多种媒体元素。对于创建两个包含不同列表类型的网页，我们可以选择HTML5结合CSS样式和JavaScript来实现。

1. **网页一：无序列表（Unordered List）**
- HTML结构：

     <div class="page1">
       <h1>页面标题</h1>
       <ul>
         <li><img src="image1.jpg" alt="图片1"> 文字描述1</li>
         <li><i class="fa fa-play-circle-o"></i> 音频1链接<audio controls></audio></li>
         <li>
           <video width="320" height="240" controls>
             <source src="video1.mp4" type="video/mp4">
           </video>
           视频描述1
         </li>
       </ul>
     </div>

- CSS样式（例如使用Bootstrap或自定义样式）：

     .page1 ul {
       list-style-type: disc;
       margin-left: 20px;
     }

2. **网页二：有序列表（Ordered List）**
- HTML结构：

     <div class="page2">
       <h1>另一个页面标题</h1>
       <ol>
         <li data-content="图文1"><img src="image2.jpg" alt="图片2"> 图文内容1</li>
         <li data-content="视频2链接"><iframe width="560" height="315" src="https://www.youtube.com/embed/video2" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></li>
         <li>
           <figure>
             <img src="image3.jpg" alt="视频预览">
             <figcaption>视频描述2</figcaption>
           </figure>
           <audio controls>
             <source src="video2.mp3" type="audio/mpeg">
           </audio>
         </li>
       </ol>
     </div>

- CSS样式：

     .page2 ol {
       list-style-type: decimal;
       margin-left: 40px;
     }

**相关问题--:**
1. 如何在HTML中添加自定义图标到无序列表项中？
2. 如何在网页中嵌入外部视频？有哪些常见格式？
3. 对于有音视频的项目，如何优化加载速度和用户体验？