index.html

﻿<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Mozilla 宣传主页</title>
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:400,700" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <header>
      <h1>Mozilla</h1>
      <!-- 插入 <img> 元素，链接至较小的 Firefox 标志。 -->
      <img src="firefoxlogo120.png" alt="较小的 Firefox 标志"/>
    </header>

    <main>
      <article>
        <!-- 插入来自 Bilibili 的 <iframe> 元素 -->
        <iframe width="400" height="225" src="https://www.youtube.com/embed/2QvFNeinowM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <h2>自由网络 尽情驰骋</h2>

        <p>Mozilla 是一个全球社区，这里聚集着来自五湖四海的 技术人员、思考者、建造者。我们致力于让 Internet 保持活力，保持畅通，人人皆可贡献，人人皆可创造。我们坚信：开放平台的协作对于人的发展至关重要，也决定着我们共同的未来。</p>

        <p>更多精彩信息，敬请点击下方图片。<a href="https://www.flickr.com/photos/mathiasappel/21675551065/">小熊猫照片</a>由 Mathias Appel 拍摄</p>
      </article>

      <div class="further-info">
        <!-- 插入包含 srcsets 和 sizes 属性的图像 -->
        <a href="https://www.mozilla.org/zh-CN/firefox/new/">
          <img srcset="firefoxlogo120.png 120w,
                       firefoxlogo400.png 400w" 
               sizes="(max-width: 480px) 300px,
                      800px"
          src="firefoxlog400.png" alt="">
        </a>
        <a href="https://www.mozilla.org/">
          <img srcset="firefoxaddons120.png 120w,
                       firefoxaddons400.png 400w" 
               sizes="(max-width: 480px) 300px,
                      800px"
          src="firefoxaddons400.png" alt="">
        </a>
        <a href="https://addons.mozilla.org/">
          <img srcset="mozilladinosaurhead120.png 120w,
                       mozilladinosaurhead400.png 400w" 
               sizes="(max-width: 480px) 300px,
                      800px"
          src="mozilladinosaurhead400.png" alt="">
        </a>
        <a href="https://developer.mozilla.org/zh-CN/">
          <img src="mdn.svg" alt="">
        </a>
        <div class="clearfix"></div>
      </div>

      <div class="red-panda">
        <!-- 插入照片元素 -->
      <picture>
      <source media="(max-width: 600px)" srcset="redpanda600.jpg">
      <source media="(min-width: 601px)" srcset="redpanda1200.jpg">
      <img src="redpanda1200.jpg" alt="">
      </picture>
      </div>

    </main>
  </body>
</html>