（HTML学习）MDN测验——构建网页内容

juice会blue

已于 2023-02-03 11:08:08 修改

阅读量126

点赞数

分类专栏：前端学习文章标签： html 学习前端

于 2023-02-03 11:00:34 首次发布

本文链接：https://blog.csdn.net/ED_LAI/article/details/128862290

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

该文介绍了网页的基本结构，包括页眉、导航栏、主内容、侧边栏和页脚，并详细讲解了HTML的<article>元素的用途，以及如何为图片添加链接。此外，还强调了代码的美观性和学习新元素时思考其语义的重要性。

摘要由CSDN通过智能技术生成

总结

网站架构
	1. 页眉header
	2. 导航栏nav
	3. 主内容main
	4. 侧边栏aside
	5. 页脚footer
<article>元素
	表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
	和<p>的关系。
为图片添加链接
	<a href="favorite-1.jpg"><img src="favorite-1_th.jpg" alt="..."></a>
改进
	1. 代码美观性：不同模块之间空行。
	2. 学习新元素时，思考是否有类似语义的元素，并找到二者的不同。

代码


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>观鸟网</title>
    <link href="https://fonts.googleapis.com/css?family=Long+Cang|Noto+Sans+SC:300" rel="stylesheet">
    <link rel="stylesheet" href="style.css">

    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
  </head>

  <body>
    <header>
      <h1>观鸟网</h1>
      <img src="dove.png" alt="一个鸽子剪影图片">

      <nav>
        <ul>
          <li><span>主页</span></li>
          <li><a href="#">开始</a></li>
          <li><a href="#">图片</a></li>
          <li><a href="#">设备</a></li>
          <li><a href="#">论坛</a></li>
        </ul>
      </nav>
    </header>

    <main>

      <article>
        <h2>欢迎</h2>

        <p>欢迎访问观鸟网虚拟站点。如果这是一个真实的网站，那么它就是观鸟爱好者的理想聚集地。无论你是一名期望学习观鸟知识的新手，还是一位希望分享体会、经验和图片的观鸟老手。</p>
        <p>时不我待！赶快带齐装备，关上电脑，去拥抱美丽的大自然吧！</p>
      </article>

      <aside>
        <h2>收藏照片</h2>

        <a href="favorite-1.jpg"><img src="favorite-1_th.jpg" alt="一只体型小巧的鸟，羽毛蓝绿色，爪黑白相间，黑色的喙细且锋利。点击缩略图查看完整照片。"></a>
        <a href="favorite-2.jpg"><img src="favorite-2_th.jpg" alt="一只美丽的孔雀的上半身图片，它的颈上覆盖蓝色的羽毛，有浅色的喙和蓝色的冠。点击缩略图查看完整照片。"></a>
        <a href="favorite-3.jpg"><img src="favorite-3_th.jpg" alt="一只大鸟的上半身图片，羽毛白色，浅色的喙细长而弯曲。点击缩略图查看完整照片。"></a>
        <a href="favorite-4.jpg"><img src="favorite-4_th.jpg" alt="一只成年鹈鹕，多数羽毛为白色，背部和腹部有少许黑色羽毛，又长又直的喙呈黄色，嘴下有一个喉囊可以暂时储存食物。点击缩略图查看完整照片。"></a>
      </aside>
    </main>

    <footer>
      <p>本虚拟站点采用 CC0 协议，代码所有内容均可任意修改和复用。原始版本由 Chris Mills 于 2016 年编写。Roy Tian 于 2019 年汉化。</p>
      <p><a href="http://game-icons.net/lorc/originals/dove.html">鸽子图标</a> 由 Lorc 绘制。</p>
    </footer>

  </body>
</html>