自学web前端该怎么规划学习内容？

说白了，这就是学习前端需要做的事情。

首先打好基础。
HTML+CSS+JS是它的核心，不要乱搞。
阅读有关 MDN 的更多信息并访问 GitHub 以查找问题。

第一步学习 HTML5 和 CSS3 只需了解静态页面和响应式布局即可。
Canvas 和 webstorage 放在第一位。

第二步，搞JavaScript。
只需要能够操作 DOM 并理解异步编程。
先学jQuery，比较容易。

第三步是学习Node.js。
精通ES6 +并了解Express。
数据库MySQL是第一个摸到门的。

学习框架第四步。
你应该了解 Vue 和 React，并且你应该学习 TypeScript。

堆栈扩展的第五阶段。
小程序、Uni-Apps、eCharts等。

真正的竞争是关键。
PC商城、手机商城、后台管理，这些项目必须要做。

找工作时写一份出色的简历。
项目经验必须具体，结果必须数字化。
面试的问题就是这样，结束、事件委托和生命周期。
不要害怕算法题，就怕这几类题。

注意不要乱堆技术。
必须遵循代码标准并且可以使用ESLint。
闲逛开源社区并了解人们如何编写。

我们先开始，具体看具体问题。

对于程序员来说，你的人生规划是什么？

对于规划程序员的人生，我其实是有一些经验的。
让我们从职业发展开始。

老实说，当我刚进入这个行业时，我一头扎进了技术堆里，整天和 Java、Spring 和 Redis 打交道。
短期目标是打下坚实的基础。
比如，当时我擅长Java后端开发，决定了解Spring全家桶、MyBatis等主流技术栈。
我还记得每天熬夜学习这些东西。
有时我觉得这有点极端。

作为中期目标，我想发展成为架构师或管理职位。
我开始深入研究 Spring 和 Netty 等框架的源代码，以了解它们的设计模式和底层机制。
我还了解了微服务架构和DevOps流程，感觉自己的系统设计能力有了很大的提高。

我的长期目标是成为一名工程师或一般人力资源。
例如，你可以深入研究高并发或分布式系统等领域，或者结合业务理解和技术能力成为产品技术负责人或CTO。

在技能发展方面，我遵循分层学习方法。
首先，了解如何使用技术，然后了解原理，最后优化源代码。
例如，我开始使用SpringBoot进行开发，然后开始研究它的自动配置机制，最后尝试修改源代码来解决特定问题。

在生活管理方面，我认为健康管理非常重要。
为了预防职业病，我每周都会抽时间锻炼身体，比如跑步、游泳、做颈椎锻炼、伸展背部等。
还需要有规律的时间表。
我通常不会熬夜并定期休息。
调整饮食也很重要。
我正在尝试减少外卖并开始在家做饭。

财务规划也很重要。
我每个月存一些钱，学习理财知识。
消费的理性也很重要。
我区分“需要”和“想要”，以避免冲动消费。

在人际关系方面，我经常参加技术沙龙和行业峰会，通过GitHub、知乎等平台分享技术经验，扩大影响力。
亲密关系也很重要。
我努力平衡工作和生活，不会因为繁忙的工作而忽视伴侣的需求。

最后，关键节点提醒也很重要。
比如，加入公司一年内，我就积累了基础的技术栈，并参与了核心模块的开发。
加入公司大约三年后，我开始领导小型项目的设计并分享技术。
加入公司已经五年左右了，我已经明确了长远的方向，并通过工作变动和内部调动实现了角色的转变。

人生计划必须动态调整。
政策的变化和技术的进步都会影响职业道路。
因此，时刻保持灵活的头脑，定期审视自己的目标与现实的差距，灵活地修改自己的计划很重要。

深入理解CSS相邻兄弟选择器（+）：工作原理与正确应用

这些 CSS 同级选择器 (+) 让我陷入了很多陷阱。
给大家讲一个我经历过的真实情况。

当我去年建立一个电子商务网站时，我已经有了我需要的东西。
当您将鼠标悬停在产品图像上时，旁边会出现一个小描述。
起初我想写一些类似 .product:hover + .description{display:block;}
结果是什么？不客气！当我将鼠标悬停在其上时，描述根本没有响应。
我想知道CSS是否有什么问题。
我检查并发现 .product 和 .description 元素并不彼此相邻。
中间有一个
，logo放在里面。
情况如下。

产品描述

在这种情况下，+ 选择器当然不会匹配。
只有您旁边的弟弟妹妹被认出。
我当时就傻眼了，想了好久才弄清楚问题所在。

后来我不得不调整 HTML 结构，并将 .description 移到 .product 之后。

产品描述

这将使您的代码正常工作。
正如您所看到的，这是同级选择器的典型问题。
他们应该彼此相邻。

这是我遇到的另一种情况。
我曾经创建了一个新闻列表，当我将鼠标悬停在特定标题上时，我希望突出显示下面的摘要。
我写的是.title:hover + .summary{Background-color:yellow;}。

结果如何？完全没用啊！后来我发现标题和摘要之间有广告空间。
请参阅：

突发新闻

新闻详情...


在这种情况下，+ 选择器仍然不起作用。
我通过重新调整 HTML 结构并将 .summary 移到 .title 之后解决了这个问题。

所以使用+选择器时最重要的是元素应该彼此靠近并且它们之间不应该有其他元素。
否则，你的努力就会白费。

但是 ~ 选择器还有另一个混淆的陷阱。
有一次，在编写代码时，我想选择某个元素后面的所有同级元素。
我使用了+，它只选择了旁边的内容。
请参阅：
项目 1
项目 2
项目 3

使用 .item:hover + .item{opacity:0.5 ;} 选择项目 2 和项目 3 是错误的。
仅适用于 .item:hover 本身。
你应该使用 .item:hover ~ .item{opacity:0.5 ;}
总之，+ 选择器使用起来非常方便，但是如果不小心元素的顺序就很容易出现问题。
编写代码时，最好在编写 CSS 之前明确元素之间的兄弟关系。
这减少了出错的可能性。

看我举的例子。
去年的电商网站、产品照片、新闻列表、头条摘要等都是真实项目的情况。
这都是因为+选择器由于不注意元素的顺序而失败的。
因此，在编写 CSS 之前清理 HTML 结构非常重要。

如何用CSS布局让特定标签优先显示在第一行？

嘿，我以前做过 CSS 排序的事情，它真的很混乱。
您询问如何使“ddd”标签首先出现在第一行。
让我告诉你我遇到的陷阱和我发现的好方法。

上周一位客户问我，他的旧项目正在使用布局，他想修复列表开头的某个标签，但无论如何都不起作用。
当我看到代码时，哦，槽太深了。
我可以直接改变HTML结构而不需要移动，所以我想到了一个技巧。

方法一：使用screen:inner control（老式但有效）
想一想，内联布局不是允许元素并排出现吗？就像当你将一行人排成一列时，第一个是“ddd”。
代码简单而原始：
ddd
aaa
bbb

CSS .父级{ 显示方式：内嵌； /父元素成为行内元素/
效果是“ddd”应该在第一行，但是有什么问题呢？如果你的父元素内容太大或者子元素太宽，就会直接换行，第一行可能不是“ddd”。
我就遇到过这种情况。
在产品listing中，“ddd”明明是放在第一位的，但由于图片太大，“aaa”被挤到了下一行。
很烦人。

方法二：Flexbox顺序属性（神奇操作）
现在大多数项目都使用Flexbox，这个方法简直太神奇了。
根本不需要接触 HTML 结构，CSS 就完成了：
aaa
bbb
ddd

CSS .容器{ 显示：柔性； 弹性包裹：包裹； } .目标{ 顺序：-1 ； / 钥匙！将订单移至前面 /
你看，如果.target的order设置为-1 ，那么无论它是否是HTML中的第三个元素，它都会直接走到前面。
我尝试了一下，效果非常好。
即使换行符为“ddd”，它也始终位于第一行的最左边。
最好的是，你还可以为其他元素设置不同的 order 值，例如 order:2 、order:5 ，给你完全的控制权。
该方法兼容性好，现代浏览器都支持。

方法三：网格到网格布局（专用于复杂场景）
如果你正在规划一个包含大表格、多行多列的复杂布局，网格可能是最好的选择。
虽然比Flexbox更难理解，但控制力却很强：
aaa
bbb
ddd

CSS .grid-container { 显示：网格； 网格模板列：重复（3 ，1 fr）； / 三栏布局 / } .目标{ 网格行：1 ； /强制排1 / 网格列：1 ； / 可选：在第 1 列 /
我在后端管理系统中使用它。
各种部件按行排列，其位置必须精确控制。
“ddd”标签固定在第一行第一列，任何人都无法移动它。
不过目前Grid的兼容性比较差，老的浏览器可能不支持。

我的建议是：
每天就使用Flexbox订单，简单高效，不用HTML。
Flexbox 绝对足以满足你的场景。
如果您确实想创建特别复杂的表格布局，请考虑网格。

无论如何，这取决于你。
这就是我从这些陷阱中获得的全部经验。
如果你有更具体的需求，我帮你看看。
标签： web前端 CSS布局