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

news2025/1/2 3:25:22

前言

前端开发里面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://www.coloradmin.cn/o/686067.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

5.6.3 套接字

5.6.3 套接字 我们先以示例引入套接字的基本内容,我们知道在邮政通信的时候我们需要在信封上写明我们的收件地址,比如北京市海淀区双清路30号清华大学8444号某某某收,这其中我们需要一个物理地址“北京市海淀区双清路30号”,一个…

SpringBoot 如何使用 Ehcache 作为缓存?

SpringBoot 如何使用 Ehcache 作为缓存? 在现代的应用程序中,缓存是一个非常重要的概念。缓存可以帮助我们加速应用程序的响应时间,减少数据库或其他服务的负载,并提高系统的可扩展性和容错性。Spring Framework 提供了强大的缓存…

Linux下的su指令和last指令

文章目录 1 切换用户命令(su)2 查看本机的所有登录记录(last)3 退出当前登录账户(exit) 1 切换用户命令(su) su 命令可以切换成不同的用户身份,命令格式如下&#xff1a…

【文本SR:轻量级:残差注意力】

A Lightweight Deep Residual Attention Network for Single Image Super Resolution (一种用于单幅图像超分辨率的轻量级深度残差注意力网络) 本文将稀疏编码技术应用于基于学习的文本图像超分辨率(SR)中,以提高光学…

浅析做好数据安全风险评估的重要性

一、被忽略的数据安全风险 快速问答 你知道公司内有多少数据资产吗? 这些数据资产中哪些数据更为重要? 如何保护公司数据资产,防止数据泄露&劫持等事件发生? 如果你一问三不知的话,也许你该好好思考数据安全这项…

数据库系统概论(三)数据库设计、数据库恢复技术、并发控制

作者的话 前言:总结下知识点,自己偶尔看一看。 一、数据库设计 数据库设计是指对于一个给定的应用环境,构造(设计)优化的数据库逻辑模式和物理结构,并据此建立数据库及其应用系统 1.1概述 1.1.1数据库设计…

mysql 简单定位慢查询并分析SQL执行效率

实际的日常开发工作中可能会遇到某个新功能在测试时需要很久才返回结果,这时就应该分析是不是慢查询导致的,如果确实有慢查询,就需要来学习怎么找到慢查询和怎么分析 SQL 执行效率? 定位慢 SQL 有如下两种解决方案: …

ClickHouse-简单了解

文章目录 前言数据库引擎数据表引擎Log 系列Integration 系列Special 系列MergeTree 系列 ClickHouse 数据类型ClickHouse 常用的函数 前言 什么是 ClickHouse?简单来说它是一个高性能,面向列的SQL数据库管理系统(DBMS)&#xff…

嵌入式知识分享——GDB程序调试方法说明

前 言 本指导文档适用开发环境: Windows开发环境:Windows 7 64bit、Windows 10 64bit Linux开发环境:Ubuntu 18.04.4 64bit 虚拟机:VMware15.1.0 U-Boot:U-Boot-2020.04 Kernel:Linux-5.4.70 Linux…

接口调用重放测试-业务安全测试实操(21)

接口调用重放测试。 接口调用遍历测试 接口调用重放测试 测试原理和方法 在短信、邮件调用业务或生成业务数据环节中,如短信验证码、邮件验证码、订单生成、评论提交等,对业务环节进行调用(重放) 测试。如果业务经过调用(重放) 后多次生成有效的业务或数据结果,可判断为存在…

PMP®证书增持 CSPM-2证书,哪里办理?

2023年6月起,持有PMP证书的朋友可以直接增持一个同等级证书CSPM-2,不用重新考试,不用重新学习,原PMP证书不影响正常使用,相当于多了一个国标项目管理领域的证书。 第一步准备资料 1、填写能力评价表 2、提供2张2寸蓝底…

在 Jetson Nano 上安装 ncnn 深度学习框架。

Install ncnn deep learning framework on a Jetson Nano. Introduction.RTTI.CMake 3.18.4.Dependencies.Benchmark.Introduction. 本页面将指导您在 Jetson Nano 上安装腾讯的 ncnn 框架。由于 ncnn 框架面向移动设备(例如 Android 手机),因此它不支持 CUDA。然而,大多数…

考虑储能的电价套利收益模型研究(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

C语言笔记-1 编译过程字节数

文章目录 C 基础语法注意 C 其他知识点编译过程编译器数据模型区别32/64位机器中,各数据类型所占位数assert() 断言(宏)用法总结与注意事项 C 基础语法 注意 if(a表达式) 判断的就是a的值,而不是判断这个赋值操作的成功与否。 查…

项目经理告诉你,项目管理的基本原则

张伟初升为项目经理,正面临着职业生涯中的挑战。他意识到项目经理的责任是复杂而艰巨的,因此在工作中经常犯错。他发现自己的表达不够清晰,思维混乱;花费大量时间制作的文字记录重点不突出,缺乏逻辑。这些问题破坏了他…

韶音open fit开放式耳机怎么样?和南卡OE Pro相比哪个值得入手的呢?

最近南卡新上线了一款南卡OE Pro,官方宣称佩戴上0压无感,是音质体验最好的耳机,究竟有没有这么好用呢?正好我手头上也有了南卡OE Pro,试用了几天,那么下面我就来给大家对比一下耳机圈内这两款热门的开放式耳…

AI智能服务未来可能的场景

一、产业结构 ChatGPT大模型技术变革加速人工智能产业的变迁 1.投资热 2.产业结构:硬件-云平台-智能应用-应用提供 智能服务产业未来会是一个从算力到服务分发全流程的结构 二、Al智能无处不在的未来,产业将如何演变? 1.技术:…

【正点原子STM32连载】 第四十二章 DS18B20数字温度传感器实验 摘自【正点原子】STM32F103 战舰开发指南V1.2

1)实验平台:正点原子stm32f103战舰开发板V4 2)平台购买地址:https://detail.tmall.com/item.htm?id609294757420 3)全套实验源码手册视频下载地址: http://www.openedv.com/thread-340252-1-1.html# 第四…

IEEE Vis会议内容整理

IEEE Vis 2017 IEEE 2017的VIS会议主题按论文的类型划分为三类:可视分析(VAST)、信息可视化(InfoVis)、科学可视化(SciVis)。因为可视化研究的涉及的方向越来越多,已超出了这三个主…

python爬虫学习简记

目录 页面结构的简单认识 爬虫概念理解 urllib库使用 爬虫解析工具xpath JsonPath Selenium requests基本使用 scrapy 页面结构的简单认识 如图是我们在pycharm中创建一个HTML文件后所看到的内容 这里我们需要认识的是上图的代码结构,即html标签包含了hea…