这一关不写复杂代码,只帮你把"网页到底是什么"这件事想明白。想清楚了,后面每一关你都知道自己在干什么,而不是死记硬背。
1.1 你在地址栏敲回车,发生了什么
打开浏览器,在最上面的地址栏输入 www.baidu.com 再按回车,页面就出来了。这背后其实是一条很简单的链路:
你的浏览器 → 问"这个网址在哪台机器上?" → 找到 服务器 → 服务器把 网页文件 发回来 → 浏览器画给你看
记住三个角色就够了:浏览器(看网页的软件)、服务器(存网页文件、随时发给别人的电脑)、网址(服务器的门牌号)。我们整个教程要做的,就是"造一个网页文件,放到服务器上,再给它一个网址"。
1.2 分清三个词:网站、网页、首页
| 词 | 是什么 | 打个比方 |
|---|---|---|
| 网页 | 一个 HTML 文件,你在浏览器里看到的一"页" | 一本书里的一页纸 |
| 网站 | 一堆相关网页 + 图片样式,合起来的整体 | 一整本书 |
| 首页 | 网站的入口那一页,文件名固定叫 index.html | 书的封面/目录页 |
现在就记住 index.html 这个名字。以后每个网站都要有一个叫它的文件当入口,浏览器访问一个网址时默认就是去找 index.html。
1.3 安装并认识你的工具:VS Code
写网页用"代码编辑器"。VS Code 免费、好用、几乎人手一个,中职课堂也普遍用它。
- 1
下载安装
去官网 code.visualstudio.com,下载对应系统版本,一路"下一步"装好。
- 2
建一个项目文件夹
在桌面新建文件夹
my-site。VS Code 菜单 File → Open Folder 打开它。 - 3
新建第一个文件
在左侧文件区点"新建文件"图标,输入名字
index.html回车。你已经迈出第一步了。
常用快捷键:Ctrl/Cmd + S 保存(改完一定要保存!)、Ctrl/Cmd + Z 撤销。
1.4 认识 HTML 标签的"形状"
HTML 就是用一个个标签把内容"包"起来,告诉浏览器"这段是什么"。最常见的形状是一对尖括号,一开一合:
<h1>这是大标题</h1>
<p>这是一个段落。</p><h1>是开始标签,</h1>是结束标签(多了个斜杠/)。- 中间夹的"
这是大标题"就是内容。 - 标签要成对、正确闭合,顺序不能乱——先开的后关。
先认识三个就够本关用了:<h1> 大标题、<p> 段落、<h2> 小一点的标题。下一关(关卡 2)会一次学很多标签。
1.5 学会"偷看"别人网页:开发者工具
浏览器自带一个"透视眼",能看到任何网页背后的 HTML。这是前端最常用的学习工具:
- 在任意网页按 F12(或 Ctrl/Cmd + Shift + I)打开开发者工具。
- 点左上角的小箭头图标(选择元素),再去点页面上的任意文字或图片。
- 右侧就会高亮显示:哦,原来这块内容是用这些标签写的!
遇到喜欢的效果,别只是"好看",按 F12 看看它怎么写的——这是进步最快的习惯。
✏️ 动手练一练
下面是一个在线代码编辑器:左边改代码,右边立刻看效果(边打字边刷新)。不用装任何东西,就在这里练。
- 把
<h1>里的文字改成你的名字。 - 在
<p>里写一句自我介绍。 - 再复制一行
<p>...</p>,写上你的爱好。
<h1> 和 </h1> 要成对。📝 随堂小测
点一下选项就能知道对错,答错可以再试。
Q1 浏览器最上面地址栏里输入的那串字符,我们叫它什么?
地址栏里的是网址(URL),它指向服务器上的某个页面。
Q2 下面哪个是 HTML 标签的正确写法?
HTML 用尖括号 < >,开始 <p>、结束 </p> 成对出现。
Q3 打开浏览器"开发者工具"最常用的快捷键是?
F12 打开开发者工具;Ctrl+S 是保存,Alt+F4 是关闭窗口(别乱按 😄)。
✅ 本关通关清单
全部打勾,就可以进入关卡 2 了(勾选会自动保存在这台电脑上)。