If you're seeing this message, it means we're having trouble loading external resources on our website.

如果你被网页过滤器挡住,请确保域名*.kastatic.org 和 *.kasandbox.org 没有被阻止.

主要内容

单元：HTML/CSS 入门: 网页制作

HTML 的介绍

了解什么是 HTML 以及如何创建带有标记文本和图像的网页。
学习
HTML 基础知识
(打开弹窗)
快速提示：HTML 标签
(打开弹窗)
挑战：写一首诗
(打开弹窗)
HTML：文本强调
(打开弹窗)
挑战：学习文本标签
(打开弹窗)
HTML：列表
(打开弹窗)
挑战：学习列表
(打开弹窗)
HTML：图像
(打开弹窗)
挑战：包含照片的游记
(打开弹窗)

CSS 的介绍

了解如何编写简单的 CSS 规则，根据元素、类或 ID 进行选择，以及更改页面的颜色。
学习
CSS 基础
(打开弹窗)
简明提示：通过标签的名字进行选择
(打开弹窗)
挑战：彩色怪物
(打开弹窗)
挑战：季节性的 id
(打开弹窗)
挑战：苹果和香蕉 class
(打开弹窗)
项目：旅游网页
(打开弹窗)
练习
使用简单的CSS 选择器
4 个问题

## 更多 HTML 标签

了解如何制作链接、表格和注释。
学习
Challenge: Links for learning
(打开弹窗)
挑战：到处跳
(打开弹窗)
挑战：餐桌
(打开弹窗)
项目：菜谱
(打开弹窗)

CSS 文本属性

了解如何设置文本的样式, 如字体系列、大小、间距和对齐方式。
学习
挑战：花哨的字体系列
(打开弹窗)
挑战：超大号字体
(打开弹窗)
挑战：有名的字体
(打开弹窗)
项目：博客
(打开弹窗)
练习
运用 CSS 文本属性
4 个问题

网站开发工具

了解如何使用其他编辑器开发网页, 以及如何使用浏览器开发人员工具调试网页。
学习
用浏览器的编程员的工具
(打开弹窗)
在可汗学院之外建网页
(打开弹窗)
在服务器上托管你的网站
(打开弹窗)
在 Github 上托管你的网站
(打开弹窗)

CSS 布局

了解如何将 HTML 的 span 和 div 元素结合 CSS 属性 （如位置和浮点） 一起使用，以更改网页的布局。
学习
挑战: 分组
(打开弹窗)
Challenge: The overflowing ocean
(打开弹窗)
挑战: 盒子模型
(打开弹窗)
挑战: 定位星球
(打开弹窗)
挑战：漂浮的云朵
(打开弹窗)
规划您的网页
(打开弹窗)
项目: 活动邀请
(打开弹窗)
练习
运用 CSS 布局属性
5 个问题

更多 CSS 选择器

了解更复杂的选择器——使用多个类，将元素与类、后代选择器、分组选择器和动态伪类结合起来。
学习
挑战: 一个优雅（Classy）的画廊
(打开弹窗)
挑战: 元素的类
(打开弹窗)
挑战: 可汗的后裔
(打开弹窗)
挑战: 分组动物
(打开弹窗)
练习
CSS 专用性规则
4 个问题

进一步学习

你能做什么来继续学习 HTML 和 CSS？
学习
网页设计
(打开弹窗)
下一步要学习什么
(打开弹窗)
练习
验证 HTML
4 个问题

关于本单元

了解如何使用HTML和CSS制作网页。 HTML是您用整理内容的标记语言，用于告诉浏览器有关标题、列表、表格等的内容。CSS是您为页面设置样式的样式表语言，用于告诉浏览器更改颜色、字体、布局等。