HTML 负责搭建网页骨架，定义页面里面有什么内容，比如文字、图片、按钮、标题、表格；CSS 负责美化网页外观，控制内容长什么样，比如颜色、大小、间距、位置、动画。简单理解，HTML 相当于房子的墙体门窗结构，CSS 相当于装修，刷漆、铺地砖、调整布局，两者分工独立但是搭配使用，做网页必须同时用到，不能互相替代，很多新手刚开始学习会混淆，以为写了 HTML 就自动有好看样式，实际上 HTML 原生样式非常朴素，必须引入 CSS 才能实现现代网页排版效果。
核心差异清单
- 作用定位不同
- 语法格式不同
- 功能能力不同
- 代码存放方式不同
- 维护思路不同
HTML 是超文本标记语言，属于结构层，只描述内容语义和层级，告诉浏览器这个元素是标题、段落还是图片。
CSS 是层叠样式表，属于表现层，只负责视觉渲染，不新增页面内容，只修改已有元素的显示效果。
HTML 使用标签，例如
标题
、段落
，由尖括号标签包裹内容。CSS 由选择器加属性值组成，例如 h1 {color: red; font-size: 32px;}，选择器选中 HTML 元素，再设置样式属性。
HTML 可以插入多媒体、超链接、表单，实现基础页面结构，不支持复杂排版美化。
CSS 可以做弹性布局、网格布局、圆角阴影、过渡动画、响应式适配手机屏幕，不能创建新的页面内容。
HTML 代码保存在 html 文件里面。
CSS 有三种引入方式，外部独立 css 文件，内部 style 标签写在 html 里面，还有行内 style 属性直接写在标签上，推荐使用外部 css 文件，方便统一管理。
HTML 修改的是内容本身，改文字、增删模块。
CSS 可以一次性统一修改全部同类元素样式，比如全部标题改颜色，只需要改一条 CSS 规则，不用逐个修改 HTML 标签。
对比表格
| 对比项目 | HTML | CSS |
|---|---|---|
| 层级 | 结构层 | 表现层 |
| 核心任务 | 定义网页内容 | 控制视觉样式 |
| 语法 | 尖括号标签 | 选择器 + 属性声明 |
| 能否新增内容 | 可以 | 不可以 |
| 典型代码 | 网页标题 | h2{color:#333} |
深度补充要点
第一 解耦优势，把 HTML 和 CSS 分开写，是前端开发规范，内容和样式分离，如果以后改版只改 CSS 文件，不需要改动 HTML 结构，代码更容易维护。
第二 配合关系，不是对立，网页渲染的时候浏览器先解析 HTML 生成 DOM 结构，再读取 CSS，把样式渲染到对应的 HTML 元素上。
第三 常见误区，CSS 不能独立运行展示完整网页，单独 css 文件打开不会显示页面内容，必须绑定 HTML 文件才能生效。
第四 拓展知识，后续还有 JavaScript，属于行为层，负责交互，点击、弹窗、动态数据，和 HTML、CSS 合称为前端三件套。
相关 FAQ
问题 1 CSS 和 HTML 有什么不同 可以只用 HTML 不用 CSS 吗
回答 1 CSS 和 HTML 有明确分工，可以只用 HTML，但是页面是浏览器默认原始样式，排版简陋，现代网页一般都会搭配 CSS 美化，不能用 HTML 实现全部 CSS 排版效果。
问题 2 CSS 和 HTML 有什么不同 CSS 可以单独写一个网页吗
回答 1 CSS 本身没有内容标签，不能单独生成网页，CSS 必须依附 HTML 元素才能渲染，所以 CSS 和 HTML 不能单独替代对方。
问题 3 CSS 和 HTML 有什么不同 外部 css 文件怎么使用
回答 1 CSS 和 HTML 分离开发时，外部 css 文件通过 link 标签引入到 HTML 里面，HTML 负责结构，CSS 文件存放全部样式规则，是推荐写法。
问题 4 CSS 和 HTML 有什么不同 响应式是靠谁实现
回答 1 网页手机自适应响应式主要依靠 CSS 媒体查询实现，HTML 只提供页面结构，响应式布局是 CSS 的功能。
免责声明
本文为前端基础概念科普，不同前端教材表述略有差异，实际开发请以 W3C 官方标准为准，本文仅做概念区分讲解，不涉及框架特殊语法拓展。
