1：初识HTML

难度系数：简单
相信你现在已经对前端有了初步的认识。也许现在的你还分不清 HTML、CSS 和 JavaScript 分别负责什么，也不知道一个网页究竟是怎样被写出来的。别担心！学习前端最好的方式之一，就是先亲手做出一个可以在浏览器中打开的页面。

接下来，请你从最基础的 HTML 开始，搭建一间属于自己的线上主题展览馆。在完成题目的过程中，你会逐渐认识网页的基本结构，以及各种 HTML 标签分别有什么作用。

遇到问题时，可以先阅读我们提供的教程，也可以根据报错信息和自己的需求搜索答案。前端知识很多，没有人能够一次记住所有内容，能够找到需要的信息并解决问题，也是一项很重要的能力。

祝你好运！

题目描述

题目背景

微光工作室准备搭建一个线上主题展览馆。

每位刚刚进入前端世界的同学，都可以在其中设计一间属于自己的展厅。展览的主题完全由你决定，可以是一款喜欢的游戏、一部电影、一位歌手、一项运动，也可以是你的家乡、校园生活、个人爱好，或者任何你愿意向别人介绍的内容

现在，请你使用 HTML 创建自己的主题展览馆，让第一次进入页面的参观者能够了解：你的展厅介绍了什么、有哪些内容，以及你为什么选择这个主题。

任务

建立一个完整的HTML页面

试着了解一个基础 HTML 文件通常由哪些部分组成，并完成网页的基本结构。

例如：
- 网页的标题应该写在哪里？
- <head> 和 <body> 中分别应该放什么？
- 浏览器标签页上显示的文字由什么决定？
- <!DOCTYPE html> 有什么作用？
将浏览器标签页中的页面标题设置为与你的主题有关的内容，例如：
```
我的游戏展览馆
欢迎来到成都
我的音乐收藏室
```
为展览馆安排清晰的内容

展览馆需要有一个明显的主标题，并围绕所选主题介绍一些内容。

你可以把展览馆分成几个不同的区域，例如：
- 展厅介绍/推荐内容/图片展示/我的感受/相关资料……
至少使用两级标题组织内容 ( <h1> 和 <h2>)
添加文字、图片与链接

试着在展览馆中加入以下内容：
- 使用段落介绍你的主题；
- 展示至少一张与主题有关的图片；
- 添加一个可以正常访问的外部链接；
- 使用列表整理一些内容。
例如，你可以列出：最喜欢的三首歌/推荐游玩的几个地点/游戏中的常用角色/一部作品的观看顺序/最近想学习的内容……

添加图片时，可以顺便了解一下：
- src 属性有什么作用？
- 什么是相对路径？
- 图片加载失败可能是什么原因？
- alt 属性可以用来做什么？
记得尽量避免将所有文件随意堆放，或者直接使用自己电脑中的绝对路径引用图片。想一想：为什么网页在你的电脑上能够显示，发送给别人后图片却可能消失？
为展览馆制作一个参观目录

当网页内容逐渐变多时，访问者可能很难快速找到自己感兴趣的部分。这时，我们可以在页面顶部制作一个简单的目录，点击目录中的文字后，跳转到页面中的对应区域。

例如：
```
展厅介绍 | 推荐内容 | 图片展示 | 我的感受
```
在完成这个功能时，你可能会用到：
- <a>
- href
- id
看看它们是怎样配合使用的。
添加一种结构化内容

请根据自己的主题，选择一种合适的方式整理信息。

你可以选择：
- 使用表格展示信息；
- 使用有序列表表示步骤或排名；
- 使用无序列表整理并列内容；
- 使用引用展示一句喜欢的话。
探索新的HTML标签

除了题目中已经提到的标签外，可以再自行查找并尝试使用你感兴趣的 HTML 标签。

例如，你可能会找到：
- 可以展开和收起内容的标签；
- 可以播放音频或视频的标签；
- 可以创建输入框和按钮的标签。
选择你觉得适合自己展览馆的，尝试把它加入网页即可。

本题主要学习 HTML，不要求提前学习 CSS 或 JavaScript。

页面看起来比较朴素是完全正常的。后面的题目会继续带你学习如何让网页变得更加美观，以及如何实现交互效果。

学习攻略

学习和了解什么是HTML标签（一个基础的 HTML 框架是怎样的，meta 标签、h1 标签、div 标签这些都是什么东西 ? ）
学习如何使用F12
HTML 教程 | 菜鸟教程
HTML|MDN
其他问题可以参考B站上的视频教程

本题提交方式

提交点这里

出题者Q&A方式

出题人：猫染

QQ：604716015

邮箱：604716015@qq.com