HTML&CSS：构建网站不能不说的那些事儿

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

这个专栏主要讲的是 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. [表单验证：让它来告诉你应该输入什么]()