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