前端入门教程-概述-开发工具

55 阅读1分钟

1. 前端开发概述

前端开发主要负责网站的用户界面和用户体验,涉及以下核心技术:

  • HTML: 网页结构标记语言
  • CSS: 网页样式和布局设计
  • JavaScript: 网页交互和动态功能

- 第一阶段:基础三剑客

HTML基础
  • 标签、元素、属性
  • 文档结构和语义化
  • 表单和多媒体元素
CSS基础
  • 选择器和样式规则
  • 盒模型和布局
  • 响应式设计
JavaScript基础
  • 变量、数据类型、运算符
  • 函数和作用域
  • DOM操作和事件处理

第二阶段:框架学习

主流框架 React Vue.js Angular

首先学习这些概念知识之前首先安装开发工具
  1. 代码编辑器

代码编辑器是专门用于编写、编辑和管理源代码的软件工具,为程序员提供高效的代码开发环境。

简单理解为需要在这里写代码开发

代码编辑器有很多:Visual Studio Code,IntelliJ IDEA,WebStorm,Brackets,HBuilder等等

我用的是Visual Studio Code

官网下载地址:https://code.visualstudio.com/Download

Snipaste_2025-11-28_16-21-33.png 选择对应的操作系统 下载开始安装

选择我同意

Snipaste_2025-11-29_15-58-58.png 选择安装目录 我这里就安装在D盘Frontend目录下了

Snipaste_2025-11-29_16-07-48.png 这是给开始菜单添加快捷方式的 直接下一步

Snipaste_2025-11-29_16-09-23.png 勾选创建桌面快捷方式 然后下一步

Snipaste_2025-11-29_16-10-58.png 直接安装

Snipaste_2025-11-29_16-12-19.png 现在就可以开始编写前端代码了

image.png 手动创建一个文件夹 使用VSCode(Visual Studio Code)打开

Snipaste_2025-11-29_16-34-47.png

Snipaste_2025-11-29_16-35-00.png 选择打开此文件夹 Snipaste_2025-11-29_16-36-27.png 可以新建文件 然后在此编写前端代码 Snipaste_2025-11-29_16-54-02.png