【HTML】练习三：Mozilla醒目页面

msmxsd

已于 2022-07-14 15:43:50 修改

阅读量577

点赞数 1

分类专栏： web前端开发文章标签：前端 html

于 2022-03-13 18:00:08 首次发布

本文链接：https://blog.csdn.net/qq_45943210/article/details/123462430

版权

根据MDN网站学习记录笔记

图片视频嵌入

项目准备
项目要求
代码片段展示
示例演示

项目准备

下载HTML和图片保存在本地设备，准备图片（将其中三张变为400px宽和120px宽重命名）和 mdn.svg 一起作为further-info区内资源链接的图标和网站页眉的火狐图标。
创建1200px宽的red-panda.jpg和600px宽的版本

项目要求

为 header 添加一个图标
为主 article 添加一个视频
为 further info 的链接添加响应式图片
一张小熊猫的艺术照

代码片段展示

  <body>
    <header>
      <h1>Mozilla</h1>
      <!-- 插入 <img> 元素，链接至较小的 Firefox 标志。 -->
      <img src="firefox_logo-only_RGB120.png" alt="Firefox logo">
    </header>

    <main>
      <article>
        <!-- 插入来自 Bilibili 的 <iframe> 元素 -->
            <iframe src="//player.bilibili.com/player.html?aid=3303261&bvid=BV1rs411d7hC&cid=5221343&page=2" scrolling="no" border="0" frameborder="no"