HTML网页模版公开课，如何快速入门？-网页设计-锦华智联科技

HTML网页模板公开课

课程名称： 从零开始：用HTML搭建你的第一个网页

（图片来源网络，侵删）

课程目标：

目标学员： 零基础的编程初学者、对网页制作感兴趣的学生、希望了解前端基础的开发者。

课程时长： 约60-90分钟

第一部分：开篇导论 (5分钟)

（图片来源网络，侵删）

1 什么是网页？
- 展示几个优秀网站（如淘宝、知乎、GitHub），让学员直观感受网页。
- 网页是由文字、图片、链接、视频等多种元素组成的，用于在互联网上展示信息的文档。
2 什么是HTML？
- Hyper Text Markup Language (超文本标记语言)。
- 通俗解释： HTML是搭建网页的“骨架”或“乐高积木”，它不负责美观（那是CSS的工作），只负责告诉浏览器“这里是一级标题”、“这里是一张图片”、“这里是一个链接”。
3 我们将学到什么？
本节课将带你用最简单的工具,亲手搭建一个属于自己的、结构清晰的网页。

第二部分：准备工作 (5分钟)

1 我们需要的工具
- 浏览器： Chrome, Firefox, Edge (任意一个现代浏览器即可)。
- 代码编辑器： 强烈推荐 Visual Studio Code (VS Code)，它免费、强大且对初学者友好。
  - （可选演示） 如何安装VS Code，并安装一个名为 "Live Server" 的插件，它可以实时预览我们写的网页。
2 创建我们的第一个项目
- 在电脑上新建一个文件夹,命名为 my-first-webpage。
- 用VS Code打开这个文件夹。

第三部分：HTML的骨架 (15分钟)

1 最简单的HTML文件
- 在VS Code中，新建一个文件，命名为 index.html。.html 后缀非常重要！
- 在文件中输入以下内容：
```
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
</body>
</html>
```
2 解析“骨架”的每一部分
- <!DOCTYPE html>：文档类型声明，告诉浏览器，这个文件是用HTML5标准编写的，必须放在最前面。
- <html>：根元素，包裹了整个页面的所有内容，是所有其他标签的“家”。
  - lang="zh-CN"：属性，告诉浏览器这个页面的主要语言是中文，这对SEO（搜索引擎优化）和屏幕阅读器很重要。
- <head>：头部，它像大脑，包含了页面的“元信息”（metadata），这些信息不会直接显示在页面上，但非常重要。
  - <meta charset="UTF-8">：字符编码声明，确保浏览器能正确显示中文、英文等所有字符。必须写！
  - <title>：，显示在浏览器标签页上，也是搜索引擎收录时的重要参考。
- <body>：主体，它像身体，包含了所有用户在浏览器窗口中能直接看到的内容，比如文字、图片、链接等。

第四部分：填充内容 - 常用HTML标签 (25分钟)

1 标题与段落

动手实践： 在 <body> 中添加：

<h1>欢迎来到我的个人主页</h1>
<p>这是一个段落，HTML通过标签来定义内容的结构。</p>
<h2>关于我</h2>
<p>我是一名前端开发爱好者，正在学习如何构建精彩的网页。</p>

2 文本格式化
- <strong> 或 <b>：加粗文本。
- <em> 或 <i>：斜体文本。
- <br>：换行标签（单标签）。
- <hr>：水平分割线（单标签）。
- 动手实践： 修改段落内容，体验不同标签效果。

3 列表

无序列表： <ul> (Unordered List) + <li> (List Item)

<h3>我的爱好</h3>
<ul>
    <li>编程</li>
    <li>阅读</li>
    <li>看电影</li>
</ul>

有序列表： <ol> (Ordered List) + <li> (List Item)

<h3>学习计划</h3>
<ol>
    <li>学习HTML基础</li>
    <li>学习CSS样式</li>
    <li>学习JavaScript交互</li>
</ol>

4 链接与图片
- <a>：锚点标签，用于创建链接。
  - href 属性：指定链接的目标地址（可以是网址，也可以是页面内的其他位置）。
  - target="_blank"：属性，让链接在新标签页中打开。
```
<a href="https://www.google.com" target="_blank">访问谷歌</a>
```
- <img>：图片标签，用于在页面中显示图片。
  - src 属性：图片的路径（可以是网络地址，也可以是本地文件）。
  - alt 属性：图片的替代文本，如果图片无法加载，会显示这段文字；它对屏幕阅读器（视障人士使用）至关重要。
```

<img src="images/profile.jpg" alt="我的个人照片">
```

第五部分：整合与优化 (10分钟)

1 完整的HTML模板
- 将我们之前写的所有代码片段整合在一起,形成一个完整的 index.html 文件。
- 强调： 代码的缩进和嵌套非常重要，这能让代码结构清晰，易于阅读和维护。
2 HTML模板的核心思想
- 可复用性： 这个“骨架”结构（<!DOCTYPE>, <html>, <head>, <body>）是所有HTML页面的基础，未来我们只需要修改 <body> 里的内容，就能快速创建新页面。
- 结构化： 我们用 <h1>, <p>, <ul> 等标签清晰地定义了内容的类型和层级，这既是给浏览器看的，也是给开发者（未来的你）看的。

第六部分：总结与展望 (5分钟)

1 本节课回顾
- 我们学习了HTML的定义和作用。
- 我们掌握了HTML的标准“骨架”结构。
- 我们学会了用标题、段落、列表、链接、图片等常用标签来构建网页内容。
2 下一步去哪里？
- CSS (层叠样式表)： 我们的网页现在还很朴素，下一步就是学习CSS，为这个“骨架”穿上漂亮的“衣服”，控制颜色、字体、布局等。
- JavaScript： 当网页穿上衣服后，我们还需要JavaScript来赋予它“灵魂”，实现交互功能，比如点击按钮、弹出提示、制作动画等。
Q&A 互动环节

互动性： 多提问，多让学员动手，在讲解每个标签后，都留出时间让大家在自己的电脑上尝试。
可视化： 始终保持浏览器和编辑器窗口的可见，实时展示代码的输入和浏览器页面的变化，这种即时反馈对初学者非常有效。
比喻教学： 多使用比喻，如“骨架”、“衣服”、“大脑”、“身体”，让抽象的概念变得具体。
鼓励为主： 对于初学者，犯错是正常的，要耐心解答问题，多给予鼓励，建立他们的学习信心。
提供资源： 课后可以分享一份简单的速查表，列出所有讲过的标签和属性，方便学员复习。可以直接用于公开课的备课，希望能帮助你成功完成一堂精彩的HTML入门课！