HTML本来就是写文章用的（参见wikipedia），了解这点，很容易扫除两个障碍：1）当它是编程语言（或曰不是人话）2）非所见即所得。
第一部分学习目标是将女青年的一篇纯文字变成漂亮的页面。
讲解传统意义的排版工作对了解HTML和CSS的作用很有帮助。编辑拿到手写稿件，要在上面做各种标记，指示排版工人，那里要加重强调，哪里要断行⋯⋯ 另一方面，一份印刷品要有一致的风格：标准行距是多少，普通字体是啥，加重的字体是啥⋯⋯ 在电脑上做网页排版，前面的各种标记就是 HTML，后面的风格说明就是 CSS。
提供 HTML 文件框架（包括CSS文件引用），无需做详细解释，将纯文件拷进去，你将看到一陀⋯⋯ 然后，讲解三个标签 h1, p, em，请女青年自己把标题，段落和想着重的地方圈出来。此时页面至少能看了。
接下来是CSS，让女青年自己提需求，想把版式整成什么样（请自行祈祷），从修改背景颜色 (body background-color) 缩进 (p text-indent, h1 font-size) 到 em 的风格，这涉及基本selector概念，也用到了px，pt 和 em 等重要计量单位 （继续晒排版背景知识）。复杂点的效果就自行发挥了。
第一课完成之后，可引导女青年阅读w3schools上关于其他HTML标签和CSS选项的信息，以便其自行折腾。
后面几部分课程目标仍围绕排版，目标是能用HTML+CSS做出自己想要的版式效果。DIV+CSS+网格系统是一大部分，CSS更多特性探索是另一部分。
— 完 —
本文作者：布丁
【知乎日报】
你都看到这啦，快来点我嘛 Σ(▼□▼メ)
此问题还有 18 个回答，查看全部。
延伸阅读：
如果让你教一位文艺女青年CSS3，你会怎么给她讲第一课？
普通青年如何能追上文艺女青年？
