想学习网站建设吗？试试我们免费的 4 小时 HTML 和 CSS 速成课程吧！
1. 引言
2. 什么是HTML和CSS？
3. 基本术语和语法
4. 让我们来编写一些 HTML 代码吧！
5.strong和emphasis
6. 文件命名和组织
7. 锚点和属性
8. CSS入门
9. CSS基础知识
10. 练习时间！
11. 回顾到目前为止的情况
12. 列表
13. 图片
14. 练习时间！
15. 内部 CSS
16. 外部 CSS
17. 类和ID
18. HTML 和 CSS 中的注释
19. 你目前只需要知道的标签
20. 盒模型简介
21. 页边距和内边距
22. 边界
23. 盒式模型总结
24. 基本布局
25. 基本布局——将元素居中放置在页面上
26. 使用 Flexbox 创建列
27. 从零开始创建布局 - HTML
28. 创建布局 - CSS
29. 接下来是什么？
今天我们很高兴与大家分享这门HTML和CSS速成课程。如果您对Web开发感兴趣，但不知道从哪里开始，那么这门课程非常适合您！
完全没有任何先决条件，你甚至不需要安装代码编辑器！Scrimba 会满足你的需求。
这门课程的讲师是才华横溢的凯文·鲍威尔。他是一位CSS的忠实拥趸，一位非常受欢迎的YouTube讲师，同时还在课堂上教授HTML和CSS。换句话说，你完全可以放心。
在本课程中，你将学习HTML和CSS的基础知识，并开始构建你的第一个网页。所有课程都将采用实践操作的方式，让你立即开始编写实际代码。
如果你想知道如何使用 Scrimba 编辑器，请直接观看这段视频，Kevin 会在那里解释使用方法。
1. 引言
在第一课中，凯文简要介绍了课程内容，并给出了一些建议，帮助你尽可能多地从课程中学习。
2. 什么是HTML和CSS？
在第二集中，凯文向我们介绍了 HTML 和 CSS，这些缩写词代表什么，以及 HTML 和 CSS 是如何紧密联系在一起的。
3. 基本术语和语法
Kevin 以一本书为例，讲解了 HTML 标记的工作原理，并介绍了诸如 `<div>`elements和 `<span> ` 之类的概念tags，以及如何使用它们。
4. 让我们来编写一些 HTML 代码吧！
在本视频教程中，Kevin 将介绍<!DOCTYPE html>如何让浏览器知道内容是 HTML，我们将编写第一个 HTML 网页，并在过程中学习一些基本元素！
<!DOCTYPE html>
<html>
<head>
<title>My first website</title>
</head>
<body>
<h1>My very first webpage</h1>
<h2>Websites are built with HTML</h2>
<p>HTML is a markup language that tells the browser what everything is</p>
<h2>They also use CSS</h2>
<p>I can't wait to start learning CSS!</p>
</body>
</html>
5.strong和emphasis
我们可以使用符号<em>来强调文本，并突出重点。<strong>
6. 文件命名和组织
在本部分中，凯文教给我们一些关于文件命名的良好实践，并就如何组织文件给出了很好的建议。
7. 锚点和属性
我们可以使用锚<a>元素链接到同一页面上的不同位置或另一个页面。要指定<a>链接位置，我们使用 `<link>` 标签attributes，而对于锚点，则使用 `<a>` 标签href。
<a href="https://scrimba.com">Link to Scrimba</a>
8. CSS入门
Kevin 向我们介绍了 CSS 语法以及 CSS 中属性和值的概念。property: value他讲解了如何使用语法来设置网页样式，并介绍了内联样式，使页面上的各个元素看起来更美观。
9. CSS基础知识
在本视频中，我们将学习字体大小、颜色、背景颜色和文本对齐方式。Kevin 将向我们介绍在 CSS 中指定颜色的四种不同方法，包括使用关键字、样式hex和rgb值hsl。
10. 练习时间！
好了，现在是个人练习时间。凯文给我们布置了一个任务，让我们创建一个关于自己的页面，并在过程中设置了一些HTML/CSS方面的挑战。
<!--
HTML
- h1 (the title of the page)
- An introductory paragraph
- Two h2s, each followed by a few paragraphs
- Inside the paragraphs, use strong and emphasis tags
- If you are feeling adventurous add a second page and link to it
CSS
- Change the color of the h1
- Change the text alignment of the h1
- Change the color of the h2s
- Change the font-size of the paragraphs
- If you added a link, change the color of it
-->
11. 回顾到目前为止的情况
在本期节目中，我们将快速回顾目前为止所学的关于HTML和CSS的所有内容。熟能生巧！
12. 列表
现在，Kevin 将向我们展示如何在 HTML 中使用<ol><code> 标签创建有序列表，以及<ul>使用 <code> 标签创建无序列表。
<ol>
<li>List item one</li>
<li>a second list item</li>
</ol>
<ul>
<li>bullet point</li>
<li>another bullet</li>
</ul>
点击图片即可查看演员表。
13. 图片
图片会自动闭合，而且两者<img>都有效<img />。凯文还解释了如何使用属性src以及alt如何alt帮助提高可访问性。
<img
src="images/dog-in-blanket.jpg"
alt="a dog wrapped in a blanket sitting on the road"
/>
14. 练习时间！
好了，现在是我们的第二次练习录像时间。凯文给我们布置了一个挑战：将一些 Markdown 文件转换为 HTML/CSS 网页。如果你不确定这markdown是什么，别担心，因为在这次练习中，凯文会一步步指导我们完成这项任务。
15. 内部 CSS
在本章中，Kevin 介绍了内部 CSS，这是编写内联 CSS 的一种替代方案。
内部 CSS 与 HTML 写在同一个文件中，但位于一个单独的<style>标签内。
<!DOCTYPE html>
<html>
<head>
<title>All about Earth and Mars</title>
<style>
h1 {
font-size: 60px;
}
p {
font-size: 24px;
color: steelblue;
}
</style>
</head>
<body>
<h1>Earth and Mars</h1>
<p>Earth and Mars are two planets within our solar system.</p>
</body>
</html>
点击图片即可查看演员表。
16. 外部 CSS
外部 CSS 是管理 CSS 的另一种方法。这次 Kevin 将向我们展示如何将 CSS 提取到一个单独的文件中，以及如何使用 `<style>` 标签将 CSS 样式表链接到 HTML 文件<link>。
<link href="css/style.css" rel="stylesheet" />
17. 类和ID
在本视频教程中，Kevin 重点介绍了 CSS 中的三种选择器类型以及何时应该使用哪种选择器。
/* Element selector */
a {
color: darksalmon;
}
/* Class selector */
.intro {
font-size: 24px;
}
/* ID selector */
#earth-title {
color: lightgreen;
}
18. HTML 和 CSS 中的注释
我们可以在HTML中添加注释：
<html>
<head>
<title>Comments!</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<h1>Comments!</h1>
<!-- My comment goes here -->
</body>
</html>
在 CSS 中：
/* TODO: change the color of the text to white */
body {
background: #333;
color: white;
}
/* Some more comments */
h1 {
color: red;
}
19. 你目前只需要知道的标签
在本课程的这一部分，凯文提醒我们，我们目前不需要了解所有内容，现阶段我们只需要知道以下标签：
h1 -> h6
p
strong and em
a
ul, ol, li
img
如果我们能够区分以下标签，那就太好了：
header
main
section
footer
nav
div
20. 盒模型简介
现在是时候来了解盒模型了。
大多数元素都是块级元素，这意味着它们的宽度是父元素的 100%，高度为 0。
这是一个精彩的讲解，凯文不仅简洁明了地解释了盒模型的工作原理，而且还帮助我们避免了即使是经验丰富的开发者也会不时陷入的常见陷阱。
21. 页边距和内边距
接下来是外边距和内边距。
外边距用于控制元素相对于周围元素的位置，而内边距用于控制元素内部内容的定位。Kevin
对 CSS 中设置内边距和外边距的多种方法进行了精彩的讲解。
/* */
padding-top: 20px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 50px;
/* Shorthand version would be */
padding: 20px 30px 40px 50px;
margin-top: 500px;
margin-left: 100px;
margin-right: 100px;
margin-bottom: 10px;
/* Shorthand version would be */
margin: 500px 100px 10px;
22. 边界
盒模型中的最后一个组成部分——边框。边框是添加到元素周围的元素。它们的设置方式与边距和内边距类似。
border-color: yellow;
border-width: 20px;
border-style: solid;
/* Shorthand version would be */
border: solid yellow 20px;
23. 盒式模型总结
在本章中，Kevin 帮助我们回顾了 CSS 盒模型，并提供了一个很好的可视化示例以供将来参考。
点击图片即可查看演员表。
24. 基本布局
现在我们可以开始创建一个非常基本的布局了。
点击图片即可查看演员表。
凯文将指导我们创建一个关于恐龙的页面，在那里我们可以将目前为止所学到的所有知识付诸实践。
25. 基本布局——将元素居中放置在页面上
在本章中，凯文向我们展示了如何将主要元素居中。这并不太难，但其中有一些需要注意的地方。
点击图片即可查看演员表。
26. 使用 Flexbox 创建列
目前为止，我们做得还不错。
在最后几期节目中，凯文介绍了一个小型毕业设计项目，即从零开始创建这个 HTML 布局。
很多设计都会在页脚使用分栏。在本期节目中，凯文将向我们展示如何使用分栏display: flex来创建这种简洁的布局。
点击图片即可查看演员表。
27. 从零开始创建布局 - HTML
在本视频教程中，Kevin 将设计分解成易于管理的部分，并带领我们完成 HTML 实现。
点击图片即可查看演员表。
在本视频教程中，我们将创建 HTML 标记。点击图片即可观看视频。
28. 创建布局 - CSS
在本课程的最后一部分，我们将编写 CSS 来创建最终布局。
29. 接下来是什么？
如果你一路看到这里，那就好好犒劳一下自己吧！恭喜你完成课程！我们学习了很多内容，你完全有理由为自己感到骄傲。
接下来该怎么办？凯文的第一个建议是安装一个文本编辑器。现阶段任何一款都行，以后随时可以更换。VS Code 非常流行，而且理由充分。
您还应该关注凯文即将推出的关于如何构建响应式网站的高级课程，所以务必订阅凯文的电子报。
祝您编程愉快 :)
文章来源：https://dev.to/scrimba/want-to-learn-to-build-websites-try-our-free-4-hour-crash-course-on-html-css-k21