web前端基础入门简介

最新推荐文章于 2025-05-24 09:42:13 发布

程序员菠萝

最新推荐文章于 2025-05-24 09:42:13 发布

阅读量817

点赞数 23

CC 4.0 BY-SA版权

文章标签：前端网络安全运维学习

本文链接：https://blog.youkuaiyun.com/xnxqwzy/article/details/145928000

web前端基础入门简介

一、web前端简介❤️

web前端专门从事基于浏览器（包括pc、mobile）作为运行访问环境的应用前端开发工作，是运行在PC端，移动端等浏览器上展现给用户浏览的网页。同时随着前端技术生态的发展，其运行载体已不限于在浏览器上，比如运行在桌面端的electron，运行在手机端的react native，flutter等等

二、web前端能做什么 🌿

最经典的是各种类型的网站：电子商务、企业门户、管理系统、社区平台等；
目前也是移动领域首选技术：WebApp、混编App、手机游戏、微信公众号、微信小程序等；
前端前沿的应用领域还有：数据可视化、3D建模和渲染、WebVR、WebAR等。

三、WEB前端知识体系包括哪些💯

前端基础知识：HTML5、CSS3、JavaScript/ECMAScript；
前端高阶内容：H5高级、响应式布局、Bootstrap框架；
移动端开发：移动端适配、WebApp、混编App、微信公众号、微信小程序；
三大主流框架：Vue.js、Angular、React.js及各自的生态圈；
全栈相关技术：Node.js、数据库、模块化和自动化构建、项目管理技术。

四、前端三剑客👻

HTML(超文本标记语言——HyperText Markup Language)是构成 Web世界的基石。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。
CSS层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML(标准通用标记语言下的一个应用)网页上使用，用来给HTML网页增加动态功能。

理解：html就像是房子的主题结构，css是将房子进行划分成屋子并进行粗装修，javascript就是确定细装修决定各个门走向，开关是做是开哪里的灯的还是水阀门。

五、前端相关概念🐼

5.1 第一类：初做一个静态页面

🤲 HTML（HyperText Markup Language 超文本标记语言）：用来描述网页的一种语言，它包含很多的“标签”和“纯文本”。——HTML 的结构决定这个页面是否稳定、规范、性能好不好；
👐HTML5：是 HTML 的新标准，它更加的语义化（且增加了许多语义化的标签）。我们近些年说的 H5 就是这个东西。——一般用来做移动端的页面；
🙌CSS（Cascading Style Sheets 层叠样式表）：用来控制 HTML 的表现。——CSS 决定页面好不好看、动画效果酷不酷炫；
👏 CSS3 ：最新的 CSS 标准，在 CSS 的基础上增加了一些属性，对动画效果、流媒体等资源有更好的支持。
总结：
HTML+CSS 是一个静态页面的基本组成。就好比一个女生在有基本的身体五官（HTML）后，又对自己打扮了下：化了妆、梳了发型、穿了好看的衣服（CSS）；而 HTML5+CSS3 可以满足更高级的动画效果，但只能兼容高级浏览器（对 IE 的兼容不好）。

5.2 第二类：让上边的静态页面动起来

🤝JavaScript ：它是一种很轻量级的编程语言，在上边的静态页面中插入 JavaScript，可以让页面“动”起来，实现交互；
👍jQuery ：它是 JavaScript 的一个函数库——不过，目前项目中我已经基本不用它了。
总结：
如果说 HTML+CSS 是一个人的皮肤五官毛发，再加点妆容、打扮，那么 JavaScript 就是这个人的关节、骨架、血液，能够让页面动起来，实现人机的“交互”；如果说 JavaScript是一块块砖，你要使用的时候就拿这些砖搭建房屋。那么 jQuery就是已经搭建好的各式各样的房屋，你只需要拿你想用的那一块去用就可以了——提高了开发效率。

5.3 第三类：让页面更新的更有效率

🤞AJAX（Asynchronous JavaScript and XML 异步的 JavaScript 和 XML）：
AJAX 是一种用于创建快速动态网页的技术；通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。