前端零基础入门到上班：【Day1】什么是前端？

最新推荐文章于 2025-08-22 19:33:51 发布
最新推荐文章于 2025-08-22 19:33:51 发布
阅读量260 收藏 3
点赞数 4
CC 4.0 BY-SA版权
分类专栏： vue笔记 文章标签： 前端
软件技术NINI
本文链接：https://blog.csdn.net/2301_78133614/article/details/144698667

 

目录

【Day 1】什么是前端？

1. **前端的定义**

2. **前端的组成部分**

3. **前端开发的工作流程**

4. **前端开发的工具**

5. **前端的学习路径**

6. **总结**

【Day 1】什么是前端？

1. **前端的定义**


前端是指用户在浏览器中看到和交互的部分，主要涉及网页的结构、样式和行为。它是Web开发的一个重要组成部分，与后端（服务器端）相对应。

2. **前端的组成部分**


前端开发通常包括以下几个核心技术：

- **HTML（超文本标记语言）**：
  - 用于创建网页的基本结构和内容。
  - HTML元素通过标签（如`<div>`, `<p>`, `<h1>`等）来定义页面的不同部分。

- **CSS（层叠样式表）**：
  - 用于控制网页的视觉表现，包括布局、颜色、字体和间距等。
  - CSS使得开发者能够将样式与内容分离，提高代码的可维护性。

- **JavaScript**：
  - 一种编程语言，用于为网页添加交互性和动态功能。
  - JavaScript可以操作DOM（

了解本专栏 订阅专栏 解锁全文 超级会员免费看
前端实战】硬核赛博朋克风格数据大屏开发教程 | Vue2.0+ECharts零基础入门“ “从0到1打造高颜值数据分析系统 | Vue2.0可视化项目实战（含完整源码）“ “前端开发必学：用Vue2.
南北极之间
12-26 461
前端实战】硬核赛博朋克风格数据大屏开发教程 | Vue2.0+ECharts零基础入门" "从0到1打造高颜值数据分析系统 | Vue2.0可视化项目实战（含完整源码）" "前端开发必学：用Vue2.0开发炫酷赛博朋克风格数据大屏（小白也能学会）" "【超详细教程】Vue2.0销售数据可视化系统开发实战 - 赛博朋克风格设计"前端实战】硬核赛博朋克风格数据大屏开发教程 | Vue2.0+ECharts零基础入门" "从0到1打造高颜值数据分析系统 | Vue2.0可视化项目实战（含完整源码）" "前端开发必
AI时代下如何学习前端之第4篇：【实战】用ChatGPT学前端_一周零基础到项目上手
指尖动听知识库
07-04 246
《AI对话式学习：7天前端速成实战指南》摘要 本文提出了基于ChatGPT的颠覆性前端学习方法，将传统3-6个月的学习周期压缩至7天。核心创新点在于采用"项目驱动+AI对话"模式，通过深度提问、即时反馈和代码生成实现高效学习。文章详细设计了7天学习路径：从项目理解到组件开发、状态管理、工具链使用，直至项目部署。特别强调"对话式深度学习"理念，通过构建"提问-理解-应用"的闭环，取代传统的被动接受式学习。文中提供了与AI对话的具体模板和代码示例，展示
前端零基础入门到上班：Day7——表单系统实战全解析
m0_61118741的博客
04-18 1164
alert("用户名至少3位！");alert("密码至少6位！");} });"submit"alert("用户名至少3位！");alert("密码至少6位！");} });functionealert("用户名至少3位！");alert("密码至少6位！");} });alert("用户名至少3位！");alert("密码至少6位！");} });constalert("用户名至少3位！");alert("密码至少6位！");
前端零基础入门到上班:【Day8】JavaScript 基础语法入门
m0_61118741的博客
04-27 667
JavaScript是一门脚本语言，最初为了让网页动起来而诞生。随着发展，它不仅能操作网页（DOM），还能做服务器开发（Node.js）、小程序开发、桌面应用、移动端应用等等。解释型语言，无需编译，浏览器直接执行弱类型语言（变量类型可以变化）面向对象、函数式编程主要运行在客户端（也能在服务器端运行）💬简单记忆JavaScript 让网页动起来 + 也能做服务器和 App！console.log("你好！");greet();
前端零基础入门到上班:【Day5】HTML 和 CSS
m0_61118741的博客
10-25 1310
HTML（HyperText Markup Language）是用于创建网页的标准标记语言。它通过标签定义网页的各个部分，包括文本、图像、链接、列表等。
前端零基础入门到上班:【Day2】开发环境VSCode安装
m0_61118741的博客
10-25 1109
Visual Studio Code 是由 Microsoft 开发的一款轻量级、跨平台的代码编辑器，具备强大的功能和扩展性。它支持多种编程语言，拥有智能代码补全、语法高亮、调试功能等，能够满足前端开发的绝大部分需求。
前端零基础入门到上班:【Day4】HTML 多媒体与表单深度教程
m0_61118741的博客
10-25 1273
通过本节的学习，您掌握了 HTML 中的多媒体和表单标签的全面应用。以下是课后练习，帮助巩固所学内容。
前端零基础入门到上班：Day6 —— CSS 布局大法，彻底掌握盒模型 + 浮动 + Flex
m0_61118741的博客
04-17 715
元素脱离正常文档流，向左/右浮动。Flex 是一种一维布局系统，擅长横向/纵向排列、居中对齐、弹性间距、响应式卡片布局等。技术简介场景适配响应式导航栏、卡片页PC + 移动端calc()精准计算宽度多栏布局gapflex-wrap自然换行卡片电商产品页min-width控制溢出防止组件太小多端兼容。
前端零基础入门到上班：【Day9】DOM 操作 + 表单事件处理全攻略
m0_61118741的博客
07-07 494
前端DOM操作与表单事件处理摘要 本文介绍了JavaScript中DOM操作的核心知识和表单事件处理技巧。主要内容包括： DOM基础：文档对象模型的概念和作用 节点获取方法：通过id、class、tag等获取单个或多个元素 DOM操作：内容修改、属性操作、类名操作、样式修改和节点增删 事件处理：事件类型、绑定方法、事件对象和事件委托 表单处理：获取表单数据、输入验证和阻止默认提交行为 实战案例：完整的注册表单验证实现 这些知识是前端开发的基础核心技能，掌握后可以创建各种交互效果和表单验证功能。
前端零基础入门到上班:【Day3】从零开始构建网页骨架HTML
m0_61118741的博客
10-25 1504
是用于创建网页的标准标记语言。它通过不同的标签来组织和显示文本、图片、链接等内容，是网页结构的基础。与 HTML 搭配使用的还有。
前端零基础入门到上班：30天系统学习路线全公开（附目录导航）
m0_61118741的博客
04-18 773
📘 本专栏「前端零基础入门到上班」将从最基础的 HTML/CSS 讲起，逐步过渡到 JavaScript、Vue、Element UI、Axios、前后端联调、项目实战、面试题全解析，，真正做到手把手教学。
前端零基础入门：HTML基础与列表讲解
针对零基础入门的学习者，以下内容将帮助你建立起对HTML的初步理解。 首先，**文本格式化**部分介绍了常用的文本标签，如`<em>`用于强调文本，`<strong>`用于重要文本，`<ins>`表示添加的文本，`<del>`表示删除的...
Vue2全栈开发实战：打造完整在线教育平台，前端架构详解】 【高级前端项目：Vue2+Element UI在线教育系统，数据可视化与实时通讯】 【从入门到精通：Vue2教育平台项目完整教程，HTML+
南北极之间
12-14 844
Vue2全栈开发实战：打造完整在线教育平台，前端架构详解】 【高级前端项目：Vue2+Element UI在线教育系统，数据可视化与实时通讯】 【从入门到精通：Vue2教育平台项目完整教程，HTML+Vue2全栈开发实战：打造完整在线教育平台，前端架构详解】 【高级前端项目：Vue2+Element UI在线教育系统，数据可视化与实时通讯】 【从入门到精通：Vue2教育平台项目完整教程，HTML+Vue2全栈开发实战：打造完整在线教育平台，前端架构详解】 【高级前端项目：Vue2+Element UI在线教
css的white-space: pre
qq_51035159的博客
08-22 248
简单来说，这个组件的核心就是让用户能够粘贴任何文本内容（特别是配置文件、JSON等），并且保证粘贴的内容格式完全不变，然后可以原样发送给后端处理。- white-space: pre ：这是最关键的CSS属性，确保所有空格、制表符、换行符都被保留。- 用户粘贴的内容会完整存储在 inputJson.value 中，包括所有格式字符。- 使用Vue3的 v-model="inputJson" 实现双向数据绑定。- wrap="off" ：防止浏览器自动换行，保持原始的行结构。- 聚焦时的视觉反馈。
Vue 自定义指令
前端小巷子的博客
08-20 520
在 Vue 中，组件负责“可见”的 UI，自定义指令则负责“不可见”的底层 DOM 行为。当你需要直接操作节点、监听第三方库、或封装浏览器原生 API 时，指令往往比组件更轻量、更灵活。Vue 为自定义指令设计了五条钩子函数，覆盖从首次绑定到最终解绑的完整生存周期。
前端AI工具——TRAE
最新发布
2301_80841939的博客
08-22 407
Trae 是一款直接与 Cursor 形成竞争的、由中国团队开发的AI编程助手。它同样采用基于Visual Studio Code核心的编辑器，深度集成了AI功能。
前端别名与环境变量使用
m0_51511868的博客
08-21 650
wp:heading。
构建现代化电商网站：前端开发实战与代码解析
yzx991013的博客
08-21 1244
本文介绍了电商网站前端开发的核心技术与实践方案。主要内容包括：1）电商网站必备功能模块（商品展示、搜索过滤、购物车、用户系统）；2）推荐技术栈（React/Vue、TailwindCSS等）；3）通过代码示例详细演示了商品卡片组件、商品筛选功能和购物车系统的实现；4）提出响应式设计和性能优化建议（图片懒加载、代码分割等）。文章强调组件化开发、状态管理和持续优化是构建高质量电商平台的关键，为开发者提供了可直接应用的实用解决方案。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

软件技术NINI

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值