Module 03 · Introduction to Application Development应用开发简介
Learning Front-End Development前端开发学习指南
🎵 通过本视频，您将能够：
- 讨论：网站前端开发中使用的主要语言
- 定义：创建响应式与自适应网站的重要性
- 识别：用于 Web 开发的各种 JavaScript 框架
前端开发简介
在现代互联网中，在线购物是最流行的服务之一。当您浏览页面、选择产品类别或对比产品时，您与网站的前端交互。前端开发者的任务是确保这些交互的流畅性和吸引力。
网站开发的核心语言
1. 超文本标记语言（HTML）
- 作用：构建网站的物理结构
- 包含元素：
- 文本
- 链接
- 图片/视频
- 分隔线
- 按钮
- 功能：
- 确保浏览器显示页面时的格式一致性
比喻：HTML 就像一座房子的框架。
2. 层叠样式表（CSS）
- 作用：为网站添加样式和设计
- 功能：
- 定义和管理字体、颜色、布局、动画等风格特性
- 实现一致的视觉效果与设计
- 支持跨浏览器兼容性，适配 PC、手机、iPad 等多种设备
比喻：CSS 就像为房子装饰室内设计。
3. JavaScript
- 作用：为网站添加交互性与动态内容
- 功能示例：
- 表单验证
- 图片轮播
- 下拉菜单
- 与 HTML 和 CSS 的关系：
- HTML 添加按钮
- CSS 美化按钮
- JavaScript 添加按钮功能
比喻：JavaScript 就像房子的家电和智能化设备。
现代前端扩展语言
| 语言 | 描述 |
|---|---|
| SASS | CSS 的扩展版本，支持变量、嵌套规则和内联导入，让样式表的创建更快更简便。 |
| LESS | 增强版 CSS，兼容所有 CSS 版本，通过 Less.js 将 LESS 转换为 CSS。 |
响应式与自适应设计
| 设计类型 | 描述 |
|---|---|
| 自适应设计 | 针对特定屏幕尺寸提供预先设计的版本，例如 PC 显示更多信息，手机显示更简洁。 |
| 响应式设计 | 根据访问设备自动调整尺寸和布局，例如手机上打开产品网站时，页面会适配小屏幕而不影响功能展示。 |
JavaScript 框架与工具
JavaScript 框架的定义
- 作用：提供预先编写的代码库，开发者可以调用其中的功能以快速开发设备响应型应用。
| 框架 | 特点 |
|---|---|
| Angular | Google 维护的开源框架，快速高效渲染 HTML 页面，内置路由和表单验证工具。 |
| React.js | Facebook 维护的 JavaScript 库，专注于构建和渲染页面组件，但需要第三方工具支持路由功能。 |
| Vue.js | 由社区维护，专注于用户界面，灵活可扩展，可用作库或框架，易于与其他框架集成。 |
总结与学习要点
- 网站核心语言：
- HTML：构建网站内容和结构
- CSS：定义网站样式
- JavaScript：添加网站交互性
- 现代扩展语言：SASS 和 LESS 提高了开发效率和样式管理的灵活性。
- 响应式与自适应设计：为不同设备提供最佳显示效果，提升用户体验。
- JavaScript 框架：如 Angular、React.js 和 Vue.js，简化了开发流程，适配现代应用需求。
🎵 感谢观看！通过掌握这些前端开发技能，开启构建美观、交互性强的网站之旅！ 🚀
