讲清前端开发（入门）

学编程~ing的Ли

已于 2024-08-19 22:51:34 修改

阅读量325

点赞数 5

分类专栏：前端学习文章标签： html5 css 前端

于 2024-08-19 22:50:20 首次发布

本文链接：https://blog.csdn.net/m0_64782700/article/details/141336162

版权

1 篇文章 0 订阅

订阅专栏

前端开发：创建用户在网页或应用程序中直接与之交互的部分。

简单来说，就是负责打造用户在使用网站、网页应用或者移动应用时直接看到和与之交互的部分。打个比方，前端开发就像是给房子做装修。房子的框架结构已经有了，但是需要有人来把它变得美观、实用、方便用户居住。

前端开发主要涉及以下几个方面：

网页设计：决定网页的布局、颜色、字体、图片等元素的呈现方式，让网页看起来吸引人。
- 比如，一个购物网站的首页，要有清晰的分类导航，漂亮的商品图片展示。
用户交互：处理用户与网页的互动，比如点击按钮、填写表单、滚动页面等。
- 像在登录页面，输入用户名和密码后点击登录按钮能成功登录。
性能优化：让网页加载速度更快，提高用户体验。
- 减少图片的大小、压缩代码等操作都属于性能优化。

HTML（超文本标记语言）来构建网页的结构，CSS（层叠样式表）来美化网页的样式，以及 JavaScript 来实现网页的交互功能和动态效果。

具体了解前端开发

一、前端开发的具体工作内容

（我们可以把一个网站或应用比作一个商店。前端开发人员就像是商店的店面设计师和售货员。）

界面设计与布局
- 就像商店的装修和商品陈列，决定页面上各个元素的位置和样式。比如，网页的导航栏放在顶部还是侧边，文字大小、颜色和排版等。
- 使用 HTML 来搭建页面的结构框架，比如<div>标签划分不同的区域，<p>标签表示段落，<h1>到<h6>标签表示不同级别的标题。
样式美化
- 相当于给商店选择合适的装饰风格和色彩搭配，让页面看起来美观舒适。
- 借助 CSS 来设置元素的外观，例如，.button { background-color: blue; color: white; } 这段代码可以让按钮的背景变成蓝色，文字变成白色。
交互功能实现
- 好比售货员与顾客的交流互动，响应用户的操作。比如点击按钮后显示新的内容，输入信息后进行验证等。
- 通过 JavaScript 来编写脚本，实现各种动态效果和交互逻辑。比如 if (username === '') { alert('用户名不能为空'); } 这段代码用于检查用户名是否为空。
适配不同设备
- 确保商店在不同大小的店面（不同尺寸的屏幕，如电脑、平板、手机）都能正常展示且布局合理。
- 使用响应式设计技术，让页面能够自适应不同的屏幕分辨率。
性能优化
- 类似于保证商店的通道畅通，顾客能够快速进出，提高用户的访问速度和体验。
- 包括减少文件大小、优化图片、合理加载资源等。