根据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" framespacing="0" allowfullscreen="true" width="400px" height="225px"> </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="firefox_logo-only_RGB120.png 120w,
firefox_logo-only_RGB400.png 400w"
sizes="(max-width:480px) 120px,
400px"
src="firefox_logo-only_RGB120.png" alt="this is a pic">
</a>
<a href="https://www.mozilla.org/">
<img srcset="firefox-addons120.jpg 120w,
firefox-addons400.jpg 400w"
sizes="(max-width:480px) 120px,
400px"
src="firefox-addons120.jpg" alt="this is a pic">
</a>
<a href="https://addons.mozilla.org/">
<img srcset="mozilla-dinosaur-head120.png 120w,
mozilla-dinosaur-head400.png 400w"
sizes="(max-width:480px) 120px,
400px"
src="mozilla-dinosaur-head120.png" alt="this is a pic">
</a>
<a href="https://developer.mozilla.org/zh-CN/">
<img src="mdn.svg" alt="this is a svg">
</a>
<div class="clearfix"></div>
</div>
<div class="red-panda">
<!-- 插入照片元素 -->
<picture>
<source media="(max-width: 600px)" srcset="red-panda600.jpg">
<source media="(min-width: 700px)" srcset="red-panda1200.jpg">
<img src="red-panda1200.jpg" alt="this is a pic of panda">
</picture>
</div>
</main>
</body>