知了系列课|01课 — 10分钟用HTML写出自己专属的网页
时间：2023-07-21 10:18:01 | 来源：网站运营
时间：2023-07-21 10:18:01 来源：网站运营
知了系列课|01课 — 10分钟用HTML写出自己专属的网页：
适用于零编程基础的HTML&CSS课程，探索更大的世界，需要多大的勇气？
00 课前准备
00.01 索引- 知了学习社课程简介
- 本课程适用人群
- 课程的学习意义
- 课程设计模式
- HTML简介
- HTML工作环境
- 第一个网页“Hello,World”
- 课程作业
00.02 课前提问我们日常浏览的网页是怎样实现的？
01 知了学习社教程简介
知了学习社是一个交互式学习平台。课程学习资料均由专业人员及志愿者根据学科权威书目及热门公开课编写，第一版内容涵盖计算机、经济以及心理学等基础课程。全部课程的学习资料都以交互学习的形式，共享在知了APP（Android&IOS）。部分课程会以文章的形式预览给同学们！
02 本课程适用人群
- 想要拓宽视野，提升技能，脱离舒适区的同学
- 有兴趣接触互联网Web的相关知识
- 没有编写HTML代码的经验或者没有系统的接触过HTML
- 每周有3个小时以上的时间用来学习及实践HTML
如果，你符合以上要求，那么这一系列课程将是你通往Web网络世界的关键钥匙。这门课程足够基础，哪怕你之前从来没有学习过任何编程知识。只要你勤于思考，你仍然可以轻松应付课程中的全部内容。
03 本课程的学习意义
在学习完本课程后，你将收获哪些？
我们每天都在浏览着网页，我们的视线被网页中纷繁复杂的图片和文字所吸引。但是，可能你是否想象过，这一个个网页背后的模样?它们是如何实现的？是怎样一个过程让这些网页散发着魅力，让我们深陷其中？
在学习完本课程后，这一系列的问题，你都可以找到答案！
计算机没有类似于人类的智能，他们只能按照人类制定下的规矩来运行。如果，你给出的规定不足够的明确，你就会发现计算机的行为完全不符合你的预期，它没有办法足够灵活的处理你的指令。同时，只要你的指令足够正确清楚，计算机也绝不会出错。
这样一个完全基于规则的程序世界，与我们日常生活的世界的运行规律完全不同。在学习本课程后，你将从另一个视角来审视自己的学习生活、人际关系甚至爱情。这个视角难以言状，非要概括的话可以说这种视角“更抽象、更细致、更系统化”。
04 课程设计模式
本课程的教学模式来源于“PQ4R”学习理论，即预览（Preview），设问（Question）、阅读（Read）、反思（Reflect）、背诵（Recite）和回顾（Review）。知了学习社的课程内容都是基于以上的流程进行设计，通过这样的流程来学习，将会大幅提高你的学习效率。
- 预览（Preview），课程第一部分，将展示本章学习内容的索引，以便清晰快速的了解学习内容的架构
- 设问（Question），课程第二部分，会向你提出2-3个相关问题，即带着问题去阅读
- 阅读（Read），即课程正文
- 反思（Reflect），在阅读之后，你需要回答课前提出的几个问题，试试自己能否说出令人满意的答案。
- 背诵（Recite），这个部分需要同学们根据自身情况来选择背诵内容。
- 回顾（Review），课后练习
话不多说，让我们开始今天的课程把。
05 HTML简介
HTML的全称是超文本标记语言 (Hyper Text Markup Language)，这套标记语言是通过一套标记标签进行工作的。这种标记的意义在于将文本以及文本相关的其他信息结合起来，从而展现出关于文档结构和数据处理的细节。你可能不是很理解什么叫做文档结构和数据处理，让我们以古诗《春晓》举个例子你就明白了！
通常，我们看到的《春晓》应该是这个样子的。
春晓
孟浩然
春眠不觉晓，处处闻啼鸟。
夜来风雨声，花落知多少。
对于，人类来讲确实已经足够了，但是对于计算机来讲，这样的文本显然还不够结构化。比如，我想让计算机回答我这首诗的题目是什么？作者是谁？计算机显然没有办法给我正确的答案。如果，我想让计算机把所有古诗的题目加粗显示，作者用斜体显示，那就更为难它了！
但是，聪明的程序员们，为了解决这个问题。就发明了一种叫做HTML的标记语言来为文本附加一些信息，从而完成上述的艰巨任务。这套标记语言大概长成这个样子：
<题目> 春晓 </题目>
<作者> 孟浩然 </作者>
<诗句> 春眠不觉晓，处处闻啼鸟。</诗句>
<诗句> 夜来风雨声，花落知多少。</诗句>
这样一来，当我们想要计算机告诉我们古诗的题目时，它只要返还包含在<题目>和</题目>之间的内容就可以了，修改样式也是同样的道理。当然，这只是HTML标记语言强大功能的冰山一角。
好了，关于HTML的简介就先到这里，还有更有意思的等待着我们！
06 HTML工作环境
“工欲善其事，必先利其器”
其实，HTML的代码只要在文本编辑器中就可以了，我们不需要下载安装任何软件。只要你的电脑能创建txt文本文档就可以了。
但是为了有更好的编码体验，你也可以使用类似于sublime3这样的软件（无限期免费）来帮助我们。不过，如果你使用知了APP甚至可以在手机上交互式体验HTML编码。
07 第一个网页“Hello,World”
07.01 网页的构成一个简单的HTML网页的构成，就像我们之前的那篇“春晓”一样，有标记和内容就可以了。
HTML的标记方式就是使用HTML标签(HTML tag)来进行标记的，因为HTML的规则制定者为了使其更广泛的被接受，所以这些标签都是以英文命名的。
这些标签具有普遍的规律，总结起来就是：
- HTML标签是由尖括号包围的关键词，比如 <html>、<p>
- HTML标签通常是成对出现的，比如 <html> 和 </html>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
记住这样的规律后，我们就可以开始编写我们的第一个网页了。
07.02 <html>标签让我们先认识第一个标签<html>，这个标签用来标记整个HTML文档，所以我们的每一个网页的开始和结束时都要分别写上<html>标签和</html>的结束标签。你可以将其理解为是一种声明，“我要开始写HTML代码了”和“我代码写完了”。
07.03 <body>标签<body>标签是用来标记正文内容的，这个正文指的是显示在页面上面的信息。你可能会问，难道还有信息是不展示在页面上面的吗？答案是：是的。举个简单的例子，我们在浏览网页时，会发现每个网页的题目都不同，这个内容就没有显示在网页的页面上，而是显示在网页标签中！
标签页上的题目“知了学习社”
不在<body>标签内
所以，记得在你想要展现在页面上的内容前加上<body>标签，结束时加上</body>标签。
07.04 Hello,world!现在，我们在这一章需要用到的标签都已经学习完了，那么我们就开始运用它们吧！
让我们一起做一个网页，和世界打个招呼吧！（和世界打招呼，是每一个编程入门的传统）
由于，同学们可能是第一次接触HTML，所以在第一次实践的时候，教程会尽可能的详细。在之后的课程，就需要同学们勤于思考了！
- 打开文本编辑器，txt即可。
- 键入<html>，用来标记我们的文本是HTML编码。
- 键入<body>，用来标记我们展现在页面上的内容。
- 键入 Hello，World！，和世界打一个招呼。
- 键入</body>，标记内容结束。
- 键入</html>，标记HTML编码结束。
- 将txt文件保存格式为.html,并用浏览器打开。
txt下的代码 sublime下的代码（代码高亮）
浏览器打开文件后的样式
08 课程作业
写一个HTML网页，用来做一个自我介绍！
ps:欢迎大家加入知了学习社区,我们希望你在这个群中：
- 提交课后练习
- 课程内容答疑
- 共享学习笔记
- 与更优秀的人同行
知了学习社区(移动端)
在线咨询
