第1章 写下你的第一行代码

每一个大神都从Hello World开始 ｜ 课型：理实一体课 ｜ 建议课时：2节

🏠 返回总目录 / 第1章

🎯 学习目标

知识目标

  • 掌握HTML文档的基本结构（DOCTYPE、html、head、body）
  • 掌握标题、段落、换行、水平线等基础标签
  • 理解标签的嵌套关系与成对规则

能力目标

  • 能使用VS Code创建index.html并编写第一个网页
  • 能用Live Server实时预览页面效果
  • 能借助浏览器验证页面是否正确显示

德育目标

  • 培养"先跑起来再做好"的迭代意识
  • 养成写完即保存、及时预览验证的习惯

教学重点

  • HTML文档基本结构
  • h1-h6、p、br、hr标签的使用

教学难点

  • 理解head与body的分工（元信息vs可见内容）
  • 标签必须正确闭合与嵌套

💻 实例演示1个实例 · 可在线运行

▶ 我的第一个网页

包含六级标题、段落、水平线、强调的完整自我介绍页。

新窗口运行 下载源码

操作步骤

  1. 在VS Code中新建index.html
  2. 输入!并按Tab键生成HTML骨架
  3. 在<title>中写入"我的第一个网页"
  4. 在<body>中依次编写h1、p、hr、h2标签
  5. 使用strong和em强调关键词
  6. 保存后用Live Server打开预览
  7. 按F12对照Elements面板检查结构

效果观察点

  • 标题标签自带字号与加粗效果（h1最大）
  • 浏览器自动渲染默认样式
  • 注释不会在页面上显示
查看核心代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
  <h1>你好，世界！</h1>
  <p>这是我在三亚技师学院写下的<strong>第一个网页</strong>。</p>
  <hr>
  <h2>关于我</h2>
  <p>我是一名<em>网页设计与制作</em>专业的学生。</p>
  <h3>我的目标</h3>
  <p>参加世界技能大赛，成为一名优秀的前端工程师。</p>
  <!-- 注释：这里以后可以放照片 -->
</body>
</html>

📋 实习任务书

任务目标：独立完成人生第一个HTML页面，掌握骨架生成与基础标签

任务内容与评分
任务1：用Emmet生成HTML骨架，正确填写title（20分）
任务2：编写"我的学校"主题页面，包含至少三级标题（30分）
任务3：使用p、br、hr组织三段内容（20分）
任务4：添加两处注释说明代码意图（10分）
任务5：用strong/em各强调一处内容，页面无报错（20分）

自我评价

📚 课后作业与预习