前端三大核心技术html/css/javascript

Posted on Edited on Views:

1.HTML（超文本标记语言）

1.1 定义

  • HyperText Markup Language，不是编程语言，而是标记语言
  • 由标签（Tag）和数据组成，负责网页的结构和内容
  • 超文本：包含图片、音频、视频等非文本内容

1.2 基本结构

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
    <h1>马哥教育欢迎您</h1>
</body>
</html>

1.3 核心作用

  • 定义网页内容和结构
  • 提供超级链接跳转
  • 浏览器负责渲染展示

2.CSS（层叠样式表）

2.1 诞生背景

HTML用于格式化文本后变得臃肿，需要将样式与内容分离。

2.2 发展历程

版本 时间 说明
CSS 1.0 1996年12月 基础样式
CSS 2.0 1998年5月 引入定位、浮动
CSS 3.0 陆续发布 模块化设计，每个模块独立增强

2.3 核心问题

不同浏览器引擎对CSS支持不一致，导致网页在不同浏览器中显示效果不同，跨浏览器兼容是长期难题。

3.JavaScript

3.1 历史

时间 事件
1994年 网景Netscape成立，意识到WEB需要动态技术
1995年9月 发布LiveScript测试版
1995年12月 更名为JavaScript
1997年 ECMAScript标准确立，JS成为其实现
2009年 Node.js诞生，JS可用于服务端

3.2 V8引擎的革命

  • Chrome浏览器发布V8引擎
  • 不再是解释执行，而是本地编译
  • JS运行速度堪比本地二进制程序
  • 催生了Node.js，JS成为前后端通用语言

4.同步 vs 异步

4.1 同步（传统模式）

用户提交请求 → 页面整个刷新 → 服务器返回完整HTML → 重新渲染
  • 缺点：浪费带宽、用户体验差、哪怕只改一个小字段也要重载整个页面

4.2 异步（Ajax）

用户操作 → 后台发送请求 → 只更新局部内容 → 页面不刷新

Ajax = Asynchronous JavaScript and XML

  • 通过 XMLHttpRequest 对象实现
  • 早期用XML传输数据，现在多用JSON
  • 实现前后端彻底分离
  • 改变了传统开发模式

5.技术演进脉络

静态网页（HTML+CSS）
      ↓
  动态网页需求
      ↓
  同步请求（整页刷新）
      ↓
  Ajax异步技术
      ↓
前后端分离（前端只负责渲染，后端只负责接口）
      ↓
现代前端框架（React/Vue/Angular）

6.前端与后端的关系

层级 技术 职责
前端 HTML/CSS/JavaScript 页面结构、样式、交互
后端 Servlet/JSP → Spring MVC → REST API 业务逻辑、数据处理
协议 HTTP/HTTPS 前后端通信
数据格式 JSON 前后端数据交换

前端专注于界面展现和用户体验，后端专注于业务逻辑和数据存储，通过API接口对接。