很高兴你能看到这个专栏!俗话说得好,相逢即是缘分,没准你和我在上一世也曾有过五百次的回眸,才得此一面。说的有点恶心了,咱还是书归正传,说说这个专栏吧。
这个专栏主要讲的是 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 这些属性。为啥?因为这些内容会在别的专栏里面专门讲。
还有的就是,在这个专栏里面,可能我不会讲案例。因为案例我有别的想法,可能会专门搞一个案例库之类的。这样你就可以配合着这个专栏来进行学习了~ 当然,现在只是个想法!如果你觉得在这个专栏讲案例是有必要的,我后期也可以再进行补充。
还有一个事儿是想和你说的,就是等到这个专栏的内容基本不会大改动的时候,我会根据文字内容来制作视频的。毕竟现在已经进入视频时代了,咱也不能和时代违背不是?!
这个专栏都有哪些内容
最后,咱们再来说说这个专栏的具体内容吧!废话不多说,咱们直接上目录和链接吧:
第一章 带你先来入个门吧
第二章 选择器:CSS和HTML的纽带
- 选择有很多种,CSS提供了哪些呢
- 基本选择器:样式设计的必备工具
- 层级选择器:利用关系来达到目标
- 群组选择器:人多肯定好办事儿
- 伪类选择器:可以预设未来某种状态
- 伪元素选择器:真实与虚伪只隔一个选择器
第三章 颜色:这个世界的色彩是怎样构成的
- [你真的了解颜色吗?可不一定哦]()
- [CSS中的颜色其实很简单,不信你看]()
- [表示一个颜色居然有这么多种方式]()
- [你是否能看清这个世界,取决于透明度]()
第四章 单位:相对与绝对之间的博弈
- [你知道长度是取决于值和单位的吗]()
- [像素:一个构成图像的最小单位]()
- [百分比:一个有参考对象的单位]()
- [em与rem:一字之差,却相差千里]()
第五章 文本:呈现信息的最简形式
- [结构化元素:构建页面的最基本元素]()
- [字体样式:文字也是可以缤纷多彩的]()
- [文本样式:文字也是可以很优美的]()
第六章 链接:两个平行世界之间的通道
- [链接元素:通往另一个页面的大门]()
- [一个页面中也可以进行定位传送]()
- [动态伪类选择器:未来的一切都是安排好的]()
- [目标伪类选择器:让你的目标变得不一样]()
第七章 图像:正所谓一图胜千言
- [图像元素:引入一张图片竟如此之简单]()
- [背景不仅可以显示颜色,也可以显示图像]()
- [雪碧图:一种偷懒并且很好用的小技巧]()
第八章 列表:让一切变得有序
- [列表元素:简约而不简单的清单]()
- [列表样式:清单也可以很美观的]()
- [计数器:制作复杂清单的手段]()
第九章 表格:让信息的展示清晰易懂
- [表格元素:结构化的方式展示信息]()
- [表格样式:让表格变得更多样化]()
- [结构伪类选择器:快速查找手段]()
第十章 盒子:将简单应用到极致
- [掌握HTML页面中元素的本质]()
- [边框也可以玩出花样吗?可以的]()
- [边距:作用与问题并存]()
- [一个盒子还要分这么多情况]()
第十一章 显示与隐藏:就像白天与黑夜
- [display属性:一个身兼数职的CSS属性]()
- [visibility属性:一个专一且长情的CSS属性]()
第十二章 内容溢出:这是个问题吗?是吗?
- [overflow属性:一个自带隐藏作用的CSS属性]()
- [text-overflow属性:只为解决文本溢出情况]()
第十三章 定位:将HTML页面变成一个坐标轴
- [理解HTML页面默认的排序规则很重要]()
- [浮动:一个让元素漂浮起来的技术]()
- [定位:使用坐标轴确定位置的方式]()
第十四章 继承与层叠:接近CSS规则的本质
- [继承与非继承:一个值得讨论的问题]()
- [层叠:理解CSS到底是怎么玩出来的]()
第十五章 布局:就像盖楼时的设计图纸一样
- [居中布局:怎么让元素到中间来]()
- [多列布局:实际没有你想的那么简单(上)]()
- [多列布局:实际没有你想的那么简单(中)]()
- [多列布局:实际没有你想的那么简单(下)]()
- [全屏布局:设计思路远比实现重要的多]()
第十六章 表单:只进不出?那岂不是貔恘
- [表单很重要,但组件更重要]()
- [
<input>
元素:给你意想不到多的功能]() - [
<textarea>
元素:再复杂的功能都源于它]() - [
<select>
元素:可以选择一个,也可以选择多个]() - [
<form>
元素:看不到的,往往更重要]() - [表单验证:让它来告诉你应该输入什么]()
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。