手摸手教你编写你人生中第一个HTML页面

很高兴你能看到这个专栏！俗话说得好，相逢即是缘分，没准你和我在上一世也曾有过五百次的回眸，才得此一面。说的有点恶心了，咱还是书归正传，说说这个专栏吧。

这个专栏主要讲的是 HTML 和 CSS 的页面开发技术。在真正讲中内容之前，想先和你磨叨磨叨这个专栏是写给谁的，为什么要写这个专栏，还有就是学完这个专栏之后你能得到什么。

如是有缘人，还请你慢下脚步，细听我慢慢与你道来。如你没有兴趣或是不需要这个专栏，也没有关系，咱们也不耽误彼此时间，各走各路，各找各妈。没准什么时候，兜兜转转地咱们又见面了，待那时你再驻下脚步来听听也不迟。

你适合学习这个专栏吗

HTML 和 CSS 是作为前端程序员的入门内容，所以显而易见地这个专栏主要是写给前端小白的。希望可以作为前端小白在入门前端开发的第一个学习资料，或者是辅助阅读内容的。

当然了，如果你已经是前端程序员，想拿这个专栏来进行查漏补缺，也不是不可以的。随便还可以给我提提建议和想法，让我把这个专栏再进一步的完善和优化。也算是一件美事儿！

所以，总的来说这个专栏算是针对两类朋友吧：

• 前端小白想入门前端开发的
• 前端程序员想再查漏补缺的

如果是上面这两类朋友就请继续往下看吧。如果不是，那就请你自己斟酌一下是不是要继续往下看吧！

为什么要写这个专栏

其实呢，一说到前端入门的 HTML 和 CSS 的教程、书籍和视频基本上已经烂大街了都。那为什么还要写这样一个专栏呢？根据我将近十年的培训讲师的经历，我可以很负责地告诉你，现在绝大多数的资料对小白来说都不够友好。

第一点，现在市面上基本都是大而全的内容。其实很多内容在实际工作里面根本就用不上，或者说用的真的很少。然后，你会为了这些内容花上更多的时间和精力来学习。但最后你会发现，如果将来你在工作中真的用到了这些内容，现去学习也是没有什么问题，而且学习成本要比你入门的时候少了很多。

第二点，很多书籍和视频都是很少更新的，或者说更新的频率是很低的。也就是说，基本上你学习的这些资料都是过时了的！虽然有些在线教程是比较新的，但是基本上也很少会进行持续更新的。可能这个时候你会问了，那你这个专栏不一样的吗？答案还真不是，我会一直更新这个专栏。即使不是更新版本、内容，也会不断地完善和优化原本的内容的。说的大一点，我是希望可以把这个专栏写成像《JavaScript权威指南》这样经典的前端学习资料的！

第三点，也是最后一点，也是最最重要的一点。作为前端程序员和前端讲师，我一直不理解一个事儿，就是为什么学习的时候要把 HTML 和 CSS 拆开来学习。即使有些书籍包含了 HTML 和 CSS 的内容，但还是拆开分别来写的。这也是我个人的一个想法，就是应该把 HTML 和 CSS 整合在一起，按照应用场景来做。比如可以有一章叫做“文本”，里面包含了HTML元素和CSS样式内容，但都是围绕“文本”这个核心内容的。

基于上面的这些想法和思考，于是就有了这个专栏了！

学完这个专栏你能得到什么

一开始的时候，我就说了，这个专栏是专门讲 HTML 和 CSS 的。所以，简单来说，学完之后你会掌握 HTML 和 CSS 的技术知识点。

再有，咱们都知道 HTML 和 CSS 是构建静态页面的核心，所以，你也会掌握构建静态页面的能力。

当然了，这里需要说明白的是，在这个专栏里面，咱不会讲 HTML5 的一些高级新特性，比如 WebStorage、音视频、Canvas 这些。也不会讲 CSS3 的一些高级新特性，比如 transform、transition 这些属性。为啥？因为这些内容会在别的专栏里面专门讲。

还有的就是，在这个专栏里面，可能我不会讲案例。因为案例我有别的想法，可能会专门搞一个案例库之类的。这样你就可以配合着这个专栏来进行学习了~ 当然，现在只是个想法！如果你觉得在这个专栏讲案例是有必要的，我后期也可以再进行补充。

还有一个事儿是想和你说的，就是等到这个专栏的内容基本不会大改动的时候，我会根据文字内容来制作视频的。毕竟现在已经进入视频时代了，咱也不能和时代违背不是？！

这个专栏都有哪些内容

最后，咱们再来说说这个专栏的具体内容吧！废话不多说，咱们直接上目录和链接吧：

第一章 带你先来入个门吧

1. HTML：初次见面，先做个自我介绍
2. 你还在用IDE？快来看看VSCode吧
3. HTML：你和我的第一次，就这样简单吗
4. CSS：一个HTML形影不离的闺蜜
5. 想搞定HTML，那就先搞定CSS吧

第二章 选择器：CSS和HTML的纽带

1. 选择有很多种，CSS提供了哪些呢
2. 基本选择器：样式设计的必备工具
3. 层级选择器：利用关系来达到目标
4. 群组选择器：人多肯定好办事儿
5. 伪类选择器：可以预设未来某种状态
6. 伪元素选择器：真实与虚伪只隔一个选择器

第三章 颜色：这个世界的色彩是怎样构成的

1. 你真的了解颜色吗？可不一定哦
2. CSS中的颜色其实很简单，不信你看
3. 表示一个颜色居然有这么多种方式
4. 你是否能看清这个世界，取决于透明度

第四章 单位：相对与绝对之间的博弈

1. 你知道长度是取决于值和单位的吗
2. 像素：一个构成图像的最小单位
3. 百分比：一个有参考对象的单位
4. em与rem：一字之差，却相差千里

第五章 文本：呈现信息的最简形式

1. 结构化元素：构建页面的最基本元素
2. 字体样式：文字也是可以缤纷多彩的
3. 文本样式：文字也是可以很优美的

第六章 链接：两个平行世界之间的通道

1. 链接元素：通往另一个页面的大门
2. 一个页面中也可以进行定位传送
3. 动态伪类选择器：未来的一切都是安排好的
4. 目标伪类选择器：让你的目标变得不一样

第七章 图像：正所谓一图胜千言

1. 图像元素：引入一张图片竟如此之简单
2. 背景不仅可以显示颜色，也可以显示图像
3. 雪碧图：一种偷懒并且很好用的小技巧

第八章 列表：让一切变得有序

1. 列表元素：简约而不简单的清单
2. 列表样式：清单也可以很美观的
3. 计数器：制作复杂清单的手段

第九章 表格：让信息的展示清晰易懂

1. 表格元素：结构化的方式展示信息
2. 表格样式：让表格变得更多样化
3. 结构伪类选择器：快速查找手段

第十章 盒子：将简单应用到极致

1. 掌握HTML页面中元素的本质
2. 边框也可以玩出花样吗？可以的
3. 边距：作用与问题并存
4. 一个盒子还要分这么多情况

第十一章 显示与隐藏：就像白天与黑夜

1. display属性：一个身兼数职的CSS属性
2. visibility属性：一个专一且长情的CSS属性

第十二章 内容溢出：这是个问题吗？是吗？

1. overflow属性：一个自带隐藏作用的CSS属性
2. text-overflow属性：只为解决文本溢出情况

第十三章 定位：将HTML页面变成一个坐标轴

1. 理解HTML页面默认的排序规则很重要
2. 浮动：一个让元素漂浮起来的技术
3. 定位：使用坐标轴确定位置的方式

第十四章 继承与层叠：接近CSS规则的本质

1. 继承与非继承：一个值得讨论的问题
2. 层叠：理解CSS到底是怎么玩出来的

第十五章 布局：就像盖楼时的设计图纸一样

1. 居中布局：怎么让元素到中间来
2. 多列布局：实际没有你想的那么简单（上）
3. 多列布局：实际没有你想的那么简单（中）
4. 多列布局：实际没有你想的那么简单（下）
5. 全屏布局：设计思路远比实现重要的多

第十六章 表单：只进不出？那岂不是貔恘

1. 表单很重要，但组件更重要
2. <input>元素：给你意想不到多的功能
3. <textarea>元素：再复杂的功能都源于它
4. <select>元素：可以选择一个，也可以选择多个
5. <form>元素：看不到的，往往更重要
6. 表单验证：让它来告诉你应该输入什么