学习前端开发,能抛弃HTML和CSS吗?

article/2025/7/4 23:03:21

前言

前端开发里面HTML和CSS是两个非常重要的核心技术,它们是构建网页和应用程序界面的基础。

HTML(超文本标记语言)是用于描述网页结构的标记语言,它定义了网页的内容、布局和元素。几乎所有的网页都使用HTML来组织和呈现内容,因此,理解和熟练运用HTML是至关重要的。

CSS(层叠样式表)是用于描述网页的外观和样式的语言。它控制网页的布局、颜色、字体、背景等方面的样式。通过CSS,你可以实现对网页的自定义外观和样式,使其更具吸引力和易于使用。

尽管有许多前端框架和工具可以帮助简化前端开发,例如React、Angular和Vue.js,但它们都是基于HTML和CSS的,了解HTML和CSS可以帮助你更好地理解和使用这些框架和工具,并能够灵活地进行自定义和样式化。因此,学习前端开发时,我建议不要抛弃HTML和CSS,而是将它们视为必不可少的技术栈组成部分,并花时间学习和熟练运用它们,掌握HTML和CSS将会让你的知识体系更加的全面。

下面是由前端三剑客HTML、CSS、JS开始的前端的学习路线,希望能帮助你们在前端的学习上提供些许的引导:

先放上前端学习的思维导图 :

学习前准备:编译器

编译器方面的选择推荐HBuilder X或者Vscode,运行环境在浏览器,推荐是chrome浏览器,当然H-builderX或者Vscode可以安装内置浏览器的插件

【下载地址】

vscode官网:https://code.visualstudio.com

HBuilder X官网:https://www.dcloud.io/hbuilderx.html

【必备插件】

vscode:https://www.php.cn/tool/vscode/475531.html

HBuilder X(由于网上没有看到特别满意的插件推荐,所以分享一下我自己安装的插件):

根据下列插件在“安装新插件”即可

第一阶段:前端三件套(HTML、CSS、Javascript)

文档教程

HTML 】w3school教程 :https://www.w3school.com.cn/html/index.asp

CSS 】w3school教程:https://www.w3school.com.cn/css/index.asp

JavaScript】w3school教程:https://www.w3school.com.cn/js/index.asp

视频教程

siki学院】HTML:https://www.sikiedu.com/my/course/206

siki学院】CSS: https://www.sikiedu.com/course/207

siki学院】JavaScript:https://www.sikiedu.com/course/212

黑马程序员】JavaScript入门到精通:https://www.bilibili.com/video/BV1Kq4y1e7d2/

黑马程序员】JS进阶webAPIs:https://www.bilibili.com/video/BV1AT4y1v75t/

黑马程序员】JS高级:https://www.bilibili.com/video/BV1DY41177dM/

!注意原生JS的学习非常重要,在你的原生JS没有达到一定造诣 (比如对原生Js有一个全面的理解,能靠自己独自完成对于一个页面功能的交互等)的时候,不要去盲目的学习其他Js库,不可否认J一些s库是非常优秀的,但它们也是建立于原生Js写出来的,原生Js在面试当中也是占了大头,所以一定要对原生Js有深层的认识后再去拓展。

一些优秀的Js库:有哪些必看的 JS 库? - 知乎

第二阶段:移动端开发&Ajax编程

文档教程

【AJAX】w3school教程:[https://www.w3school.com.cn/js/js_ajax_intro.asp

(w3school的网页当中能直接输入代码练习,可以直接显示页面效果,挺不错的)

视频教程

黑马程序员】移动端前端:https://www.bilibili.com/video/BV14J4114768/

黑马程序员】Ajax+Git零基础到精通:https://www.bilibili.com/video/BV1ZS4y1w7Yz/

第三阶段:前端主流框架

文档教程

Vue】菜鸟教程:https://www.runoob.com/vue2/vue-tutorial.html

【React】菜鸟教程:https://www.runoob.com/react/react-tutorial.html

【Angular】菜鸟教程:https://www.runoob.com/angularjs/angularjs-tutorial.html

【Bootstrap】菜鸟教程:https://www.runoob.com/bootstrap/bootstrap-tutorial.html

(三大框架一般至少掌握一种,国内用得多的是Vue和React,根据自己的需求学习,如果有时间可以都学一下)

视频教程

尚硅谷】Vue:https://www.bilibili.com/video/BV1Zy4y1K7SH

尚硅谷】React:https://www.bilibili.com/video/BV1wy4y1D7JT

尚硅谷】Angular:https://www.bilibili.com/video/BV1ts411E7qg

尚硅谷】Bootstrap:https://www.bilibili.com/video/BV1YW411T7yy

第四阶段:node.js全栈开发

文档教程

node.js】菜鸟教程:https://www.runoob.com/nodejs/nodejs-tutorial.html

视频教程

黑马教程】node.js:https://www.bilibili.com/video/BV1a34y167AZ

第五阶段:就业面试相关

HTML高频面试题:https://juejin.cn/post/6905294475539513352

CSS高频面试题:https://juejin.cn/post/6905539198107942919

JavaScript高频面试题(上篇):https://juejin.cn/post/6940945178899251230

JavaScript高频面试题(下篇):https://juejin.cn/post/6941194115392634888

Vue高频面试题:https://cloud.tencent.com/developer/article/1675622

React高频面试题:https://blog.csdn.net/sinat_17775997/article/details/82994810

第六阶段:项目实战

小米商城https://www.bilibili.com/video/BV1gs411c7AC/

网易云音乐https://www.bilibili.com/video/BV1c44y1g7ac/

哔哩哔哩移动端https://www.bilibili.com/video/BV1kS4y1b7du

超简单的微信小程序https://www.bilibili.com/video/BV13L4y1w729/

头条新闻vue客户端开发实战https://www.bilibili.com/video/BV1t3411N7aP/

Node听歌识曲https://www.bilibili.com/video/BV1Q


http://chatgpt.dhexx.cn/article/9RhpdotD.shtml

相关文章

前端如何学习?

首先,前端学习需要一个持续的过程,即使当前在从事前端开发的程序员,也需要不断进行知识结构上的更新,对于初学者来说,入门前端的时间往往取决于自己的前端学习规划,同时与自己的知识基础、能力特点和学习环境都有比较直接的关系。 前端学习1.前端学习方式和计划的确定 We…

零基础童鞋快速学习前端开发 ---- (1)

初识前端 1、前端开发简介2、前端开发如何入手学习?3、前端入门学习建议4、对初学者的建议5、小结一.前端开发简介 形成:从简单网页制作演变至功能强大的前端开发。 早期的网页设计制作主要内容都是静态死的页面,以文字图片为主&#xff0c…

新手该如何学习前端开发技术

现在有很多小伙伴选择学习web前端开发技术,但是小伙伴在选择web前端培训班学习之前有没有考虑过一个问题,自己选择学习前端开发的初衷是什么,为什么要学习web前端开发技术,是单纯的兴趣爱好还是以就业为目的的技术提升。小伙伴要考…

【个人学习记录】从0开始学习前端开发

提示:没有什么参考意义,只是个人学习的一个记录罢了。 为棕熊先生做一个独一无二的新闻网站 使用HTML、CSS、JavaScript做一个新闻网站,从设计网站开始。 前言 疫情原因,尝试新的有趣的东西,比如从头学一项技术&…

从零走向专业,腾讯前端大牛经验分享:如何快速学习前端开发?

很多同学想学习WEB前端开发,不过面对大量的前端学习资料(视频教程、网上教程、书籍)等,不知道从何处下手。 作为一个多年从事前端开发的程序员,为了让新手程序员少走点弯路,这里就分享腾讯前端大牛快速学习前端开发的经验: 一、前端学习思路 前端学习存在一个普遍的问题…

C语言求一个大数范围以内的素数(质数)既然如此简单

⭐本章简介 本章讲解一下C语言求素数的一个程序。5种求解方式,最后一种可以求大数! 有多种方法,难度依次增大(但是不会太大),程序的质量也依次增大。 ♾️目录 ⭐本章简介⭐求素数的方法💡暴力…

判断素数、输出100内素数 C语言初学

素数又称质数。所谓素数是指除了 1 和它本身以外,不能被任何整数整除的数,例如13就是素数,因为它不能被 2~12 的任一整数整除。 判断一个整数m是否是素数,只需把 m 被 2 ~ m-1 之间的每一个整数去除,如果都不能被整除&…

C语言:查找打印质数(素数)

这个题是很灵活的,有几种解法,也有很多种优化方法,这里,我来谈谈一种个人感觉比较容易理解的方法。 首先,要知道质数(素数)是什么? 质数(素数)是除了1和它本…

输出100 - 200之间的素数C语言

输出100 - 200之间的素数 素数就是质数,即除了1和它本身不再有求它因数的自然数 那么这道题的思路就是用100到200之间的数去除以比这个数小的所有数(除了1和它本身),如果有余数说明它不是一个素数 看下面代码: int m…

求素数C语言

求素数C语言 代码如下&#xff1a; #include<stdio.h> int main() {int i, n;printf("请输入一个数:"); scanf("%d", &n);for (i 2; i < n ; i){if (n%i 0)break;}if (n <1 ) printf("这不是素数\n");else if (i < n) pr…

QQ群 该页面暂时无法显示

如图&#xff0c;在使用QQ群文件时出现“该页面暂时无法显示”的错误信息。 首先检查IE能否正常使用。 打开IE果然显示了错误信息&#xff0c;按照说明改正代理服务器信息。QQ群即可正常使用。

qq群文件问题完美解决

1.点开设置 2.点击网络和Internet 3.点击网络和共享中心 4.点击你家的WiFi 5.点击属性 6.把这个前面的对勾取消掉 7.点击确定 8.完成操作

解决QQ或TIM下载群文件网路失败或者网速贼慢的办法

这几天项目上有些文件都放在了Q群上&#xff0c;可是发现只要稍微大一点的文件基本都是下载失败&#xff0c;不是网络错误就是下载半天才下好&#xff0c;现在介绍一下解决的办法&#xff1a; 1- 百度上搜索“群空间” 2- 登录你的QQ账号 3- 在右上角有我的QQ群&#xff0c;在…

解决PC端的的TIM群聊界面无法显示公告、文件、记录栏,不显示群消息

笔者的PC端TIM经常遇到各种“暂时无法显示”&#xff0c;公告、文件、记录栏&#xff0c;群消息都没了。 解决方法&#xff1a; 打开ie浏览器右上角齿轮->Internet选项->连接->局域网设置只勾选 自动检测设置把代理关了。 就能正常显示 转载自贴吧草上黑

电脑版QQ或TIM群文件无法显示,空白,加载不出来

问题描述 登陆电脑版QQ或者TIM后&#xff0c;点击群文件&#xff0c;显示无法打开。 解决办法 将代理服务器关闭&#xff0c;然后QQ或者TIM群文件就能打开啦。&#xff08;然后代理服务器自己确定是否再次开启&#xff09; 参考博文 参考博文1

QQ “安全检查未通过,禁止下载该文件” 解决方法

经评论区提醒&#xff0c;此方法可能已经不再适用。如有人成功解决了&#xff0c;或者没有成功解决&#xff0c;麻烦评论区告诉我一下。谢谢&#xff01; 在下载群文件的时候&#xff0c;偶尔会遇到上图的情况&#xff0c;明明是正经文件&#xff0c;却没有通过安全检查。解决方…

解决QQ群、讨论组上传文件,由于网络原因上传失败?

最近qq上传群文件老是失败&#xff0c;但是同事他们可以&#xff0c;目前已经解决QQ群、讨论组上传文件&#xff0c;由于网络原因上传失败&#xff1f;&#xff0c;做法如下&#xff1a; 输入regedit&#xff0c;打开注册表&#xff0c;然后找到这个位置HKEY_CURRENT_USER\Sof…

QQ头像无法加载,显示初始默认头像的解决方法

前言 终于。。终于&#xff01;查过那么多资料&#xff0c;翻过无数带有蛛丝马迹的信息&#xff0c;根本没有人能解决我遇到的这个问题&#xff0c;它是如此独特&#xff0c;如此难以排查&#xff01;&#xff01; 删过文件、改过网络配置、本地测试过相关数据接口、重装过QQ、…

安全检查未通过_QQ群文件未通过安全检查,禁止下载该文件解决办法(QQ收藏)

需要从群文件下载一个压缩包文件,可是却显示下载失败,具体原因为“QQ群文件未通过安全检查,禁止下载该文件”,按有的说法在设置里把安全防护的等级设置为最低,还是不行,手机也同样。 在将放弃的时候,发现直接用手机收藏群文件,然后用电脑登上qq去收藏里面下载完美解决。…

QQ群无法下载视频和图片解决方案

最近换的新电脑 登录QQ后发现在QQ群里的图片或视频无法下载 如图所示&#xff1a; 一开始以为还是 网络问题 导致无法下载 但是 不影响聊天和上传文件 &#xff1f;&#xff1f;&#xff1f; 意味着网络正常 想了下 新电脑 外置的硬盘一直未装 下载的路径改变了 重新定义的本…