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

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

不想成熟的大叔
882 声望526 粉丝

为学习前端开发不再枯燥、困难和迷茫而努力。