Java Web 前端简介

一. 初识Web前端

1. 前端开发概述

1.1 前端开发职责

前端开发的主要职责是将数据以美观的样式呈现出来，核心工作就是开发网页程序

1.2 核心三问

在学习前端之前，需要明确以下三个核心问题：

网页由哪些部分组成？
- 文字、图片、音频、视频、超链接、表格等元素
网页背后的本质是什么？
- 前端程序员编写的前端代码（在前后端分离的开发模式中）
前端代码如何转换成网页？
- 通过浏览器 进行解析和渲染。浏览器中负责此功能的核心组件称为浏览器内核

注意：浏览器内核差异

市面上有众多浏览器（Chrome、Edge、Firefox、Safari等），不同浏览器的内核不同，对相同代码的解析效果可能存在差异

为了保证用户体验，需要制定统一的Web标准，让各大浏览器厂商共同遵守

2. Web标准与技术栈

2.1 Web标准三大组成部分

Web标准 （网页标准）大部分由 W3C（万维网联盟）负责制定，主要由以下三部分组成：
#mermaid-svg-Bi8yr4qSFsKOfke0{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-Bi8yr4qSFsKOfke0 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-Bi8yr4qSFsKOfke0 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-Bi8yr4qSFsKOfke0 .error-icon{fill:#552222;}#mermaid-svg-Bi8yr4qSFsKOfke0 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Bi8yr4qSFsKOfke0 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-Bi8yr4qSFsKOfke0 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Bi8yr4qSFsKOfke0 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Bi8yr4qSFsKOfke0 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-Bi8yr4qSFsKOfke0 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Bi8yr4qSFsKOfke0 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Bi8yr4qSFsKOfke0 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Bi8yr4qSFsKOfke0 .marker.cross{stroke:#333333;}#mermaid-svg-Bi8yr4qSFsKOfke0 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Bi8yr4qSFsKOfke0 p{margin:0;}#mermaid-svg-Bi8yr4qSFsKOfke0 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-Bi8yr4qSFsKOfke0 .cluster-label text{fill:#333;}#mermaid-svg-Bi8yr4qSFsKOfke0 .cluster-label span{color:#333;}#mermaid-svg-Bi8yr4qSFsKOfke0 .cluster-label span p{background-color:transparent;}#mermaid-svg-Bi8yr4qSFsKOfke0 .label text,#mermaid-svg-Bi8yr4qSFsKOfke0 span{fill:#333;color:#333;}#mermaid-svg-Bi8yr4qSFsKOfke0 .node rect,#mermaid-svg-Bi8yr4qSFsKOfke0 .node circle,#mermaid-svg-Bi8yr4qSFsKOfke0 .node ellipse,#mermaid-svg-Bi8yr4qSFsKOfke0 .node polygon,#mermaid-svg-Bi8yr4qSFsKOfke0 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Bi8yr4qSFsKOfke0 .rough-node .label text,#mermaid-svg-Bi8yr4qSFsKOfke0 .node .label text,#mermaid-svg-Bi8yr4qSFsKOfke0 .image-shape .label,#mermaid-svg-Bi8yr4qSFsKOfke0 .icon-shape .label{text-anchor:middle;}#mermaid-svg-Bi8yr4qSFsKOfke0 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-Bi8yr4qSFsKOfke0 .rough-node .label,#mermaid-svg-Bi8yr4qSFsKOfke0 .node .label,#mermaid-svg-Bi8yr4qSFsKOfke0 .image-shape .label,#mermaid-svg-Bi8yr4qSFsKOfke0 .icon-shape .label{text-align:center;}#mermaid-svg-Bi8yr4qSFsKOfke0 .node.clickable{cursor:pointer;}#mermaid-svg-Bi8yr4qSFsKOfke0 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-Bi8yr4qSFsKOfke0 .arrowheadPath{fill:#333333;}#mermaid-svg-Bi8yr4qSFsKOfke0 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-Bi8yr4qSFsKOfke0 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-Bi8yr4qSFsKOfke0 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Bi8yr4qSFsKOfke0 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-Bi8yr4qSFsKOfke0 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Bi8yr4qSFsKOfke0 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-Bi8yr4qSFsKOfke0 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-Bi8yr4qSFsKOfke0 .cluster text{fill:#333;}#mermaid-svg-Bi8yr4qSFsKOfke0 .cluster span{color:#333;}#mermaid-svg-Bi8yr4qSFsKOfke0 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-Bi8yr4qSFsKOfke0 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-Bi8yr4qSFsKOfke0 rect.text{fill:none;stroke-width:0;}#mermaid-svg-Bi8yr4qSFsKOfke0 .icon-shape,#mermaid-svg-Bi8yr4qSFsKOfke0 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Bi8yr4qSFsKOfke0 .icon-shape p,#mermaid-svg-Bi8yr4qSFsKOfke0 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-Bi8yr4qSFsKOfke0 .icon-shape .label rect,#mermaid-svg-Bi8yr4qSFsKOfke0 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Bi8yr4qSFsKOfke0 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-Bi8yr4qSFsKOfke0 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-Bi8yr4qSFsKOfke0 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-Bi8yr4qSFsKOfke0 .pink>*{fill:#FFD1DC!important;stroke:#FFB6C1!important;stroke-width:2px!important;color:#333!important;rx:15!important;ry:15!important;}#mermaid-svg-Bi8yr4qSFsKOfke0 .pink span{fill:#FFD1DC!important;stroke:#FFB6C1!important;stroke-width:2px!important;color:#333!important;rx:15!important;ry:15!important;}#mermaid-svg-Bi8yr4qSFsKOfke0 .pink tspan{fill:#333!important;}#mermaid-svg-Bi8yr4qSFsKOfke0 .blue>*{fill:#AEC6CF!important;stroke:#89CFF0!important;stroke-width:2px!important;color:#333!important;rx:15!important;ry:15!important;}#mermaid-svg-Bi8yr4qSFsKOfke0 .blue span{fill:#AEC6CF!important;stroke:#89CFF0!important;stroke-width:2px!important;color:#333!important;rx:15!important;ry:15!important;}#mermaid-svg-Bi8yr4qSFsKOfke0 .blue tspan{fill:#333!important;}#mermaid-svg-Bi8yr4qSFsKOfke0 .green>*{fill:#B5EAD7!important;stroke:#98D8C8!important;stroke-width:2px!important;color:#333!important;rx:15!important;ry:15!important;}#mermaid-svg-Bi8yr4qSFsKOfke0 .green span{fill:#B5EAD7!important;stroke:#98D8C8!important;stroke-width:2px!important;color:#333!important;rx:15!important;ry:15!important;}#mermaid-svg-Bi8yr4qSFsKOfke0 .green tspan{fill:#333!important;} HTML

负责网页的结构

(页面元素和内容)
CSS

负责网页的表现

(外观、位置、颜色等样式)
JavaScript

负责网页的行为

(动态交互效果)

2.2 前端技术栈与课程规划

前端开发学习内容采用分层设计，分为基础与进阶两个阶段学习：
#mermaid-svg-inWKvJQeGCpfm70S{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-inWKvJQeGCpfm70S .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-inWKvJQeGCpfm70S .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-inWKvJQeGCpfm70S .error-icon{fill:#552222;}#mermaid-svg-inWKvJQeGCpfm70S .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-inWKvJQeGCpfm70S .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-inWKvJQeGCpfm70S .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-inWKvJQeGCpfm70S .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-inWKvJQeGCpfm70S .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-inWKvJQeGCpfm70S .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-inWKvJQeGCpfm70S .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-inWKvJQeGCpfm70S .marker{fill:#333333;stroke:#333333;}#mermaid-svg-inWKvJQeGCpfm70S .marker.cross{stroke:#333333;}#mermaid-svg-inWKvJQeGCpfm70S svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-inWKvJQeGCpfm70S p{margin:0;}#mermaid-svg-inWKvJQeGCpfm70S .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-inWKvJQeGCpfm70S .cluster-label text{fill:#333;}#mermaid-svg-inWKvJQeGCpfm70S .cluster-label span{color:#333;}#mermaid-svg-inWKvJQeGCpfm70S .cluster-label span p{background-color:transparent;}#mermaid-svg-inWKvJQeGCpfm70S .label text,#mermaid-svg-inWKvJQeGCpfm70S span{fill:#333;color:#333;}#mermaid-svg-inWKvJQeGCpfm70S .node rect,#mermaid-svg-inWKvJQeGCpfm70S .node circle,#mermaid-svg-inWKvJQeGCpfm70S .node ellipse,#mermaid-svg-inWKvJQeGCpfm70S .node polygon,#mermaid-svg-inWKvJQeGCpfm70S .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-inWKvJQeGCpfm70S .rough-node .label text,#mermaid-svg-inWKvJQeGCpfm70S .node .label text,#mermaid-svg-inWKvJQeGCpfm70S .image-shape .label,#mermaid-svg-inWKvJQeGCpfm70S .icon-shape .label{text-anchor:middle;}#mermaid-svg-inWKvJQeGCpfm70S .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-inWKvJQeGCpfm70S .rough-node .label,#mermaid-svg-inWKvJQeGCpfm70S .node .label,#mermaid-svg-inWKvJQeGCpfm70S .image-shape .label,#mermaid-svg-inWKvJQeGCpfm70S .icon-shape .label{text-align:center;}#mermaid-svg-inWKvJQeGCpfm70S .node.clickable{cursor:pointer;}#mermaid-svg-inWKvJQeGCpfm70S .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-inWKvJQeGCpfm70S .arrowheadPath{fill:#333333;}#mermaid-svg-inWKvJQeGCpfm70S .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-inWKvJQeGCpfm70S .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-inWKvJQeGCpfm70S .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-inWKvJQeGCpfm70S .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-inWKvJQeGCpfm70S .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-inWKvJQeGCpfm70S .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-inWKvJQeGCpfm70S .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-inWKvJQeGCpfm70S .cluster text{fill:#333;}#mermaid-svg-inWKvJQeGCpfm70S .cluster span{color:#333;}#mermaid-svg-inWKvJQeGCpfm70S div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-inWKvJQeGCpfm70S .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-inWKvJQeGCpfm70S rect.text{fill:none;stroke-width:0;}#mermaid-svg-inWKvJQeGCpfm70S .icon-shape,#mermaid-svg-inWKvJQeGCpfm70S .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-inWKvJQeGCpfm70S .icon-shape p,#mermaid-svg-inWKvJQeGCpfm70S .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-inWKvJQeGCpfm70S .icon-shape .label rect,#mermaid-svg-inWKvJQeGCpfm70S .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-inWKvJQeGCpfm70S .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-inWKvJQeGCpfm70S .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-inWKvJQeGCpfm70S :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-inWKvJQeGCpfm70S .root>*{fill:#CBAACB!important;stroke:#B088B5!important;stroke-width:2px!important;color:#333!important;rx:15!important;ry:15!important;}#mermaid-svg-inWKvJQeGCpfm70S .root span{fill:#CBAACB!important;stroke:#B088B5!important;stroke-width:2px!important;color:#333!important;rx:15!important;ry:15!important;}#mermaid-svg-inWKvJQeGCpfm70S .root tspan{fill:#333!important;}#mermaid-svg-inWKvJQeGCpfm70S .base>*{fill:#FFE5B4!important;stroke:#FFD194!important;stroke-width:2px!important;color:#333!important;rx:15!important;ry:15!important;}#mermaid-svg-inWKvJQeGCpfm70S .base span{fill:#FFE5B4!important;stroke:#FFD194!important;stroke-width:2px!important;color:#333!important;rx:15!important;ry:15!important;}#mermaid-svg-inWKvJQeGCpfm70S .base tspan{fill:#333!important;}#mermaid-svg-inWKvJQeGCpfm70S .adv>*{fill:#FFD8B1!important;stroke:#FFC088!important;stroke-width:2px!important;color:#333!important;rx:15!important;ry:15!important;}#mermaid-svg-inWKvJQeGCpfm70S .adv span{fill:#FFD8B1!important;stroke:#FFC088!important;stroke-width:2px!important;color:#333!important;rx:15!important;ry:15!important;}#mermaid-svg-inWKvJQeGCpfm70S .adv tspan{fill:#333!important;} Web前端开发体系
Web前端基础

HTML / CSS / JS / Vue3 / Ajax / Axios
Web前端进阶

Vue工程化 / ElementPlus / Tlias案例

3. HTML & CSS 基础概念

3.1 什么是 HTML？

HTML (HyperText Markup Language)：超文本标记语言

超文本：超越了普通文本的限制，除了文字，还能定义图片、音频、视频等富媒体内容
标记语言 ：由预定义的标签 <标签名> 构成（如 <h1> 标题、<a> 超链接、<img> 图片）
运行机制：HTML代码直接在浏览器中运行，由浏览器内核负责解析

示例：

3.2 什么是 CSS？

CSS (Cascading Style Sheet)：层叠样式表

作用：用于控制页面的样式（表现），如颜色、大小、位置等
示例：通过给 <h1> 标签添加 style="color:red;"，即可将标题渲染为红色

示例：

4. HTML 快速入门

4.1 操作步骤

创建文件 ：新建文本文件，将后缀名改为 .html（如 01.快速入门.html）
准备资源 ：创建 img 文件夹，放入所需的图片资源（如 1.png）
编写骨架：使用编辑器或记事本打开，编写 HTML 基础结构
预览效果：保存文件，右键选择浏览器打开查看渲染效果

4.2 HTML 基础结构

HTML 拥有固定的基础骨架，代码如下：

html 复制代码

<html>
    <head>
        <title>HTML 快速入门</title>
    </head>
    <body>
        <!-- 网页的主体内容写在这里 -->
    </body>
</html>

<html>：根标签。=
<head>：定义网页头部，存放给浏览器看 的信息（如 CSS 样式、网页标题 <title>）
<body>：定义网页主体，存放给用户看的信息（如文字、图片、视频等）

4.3 核心内容编写示例

在 <body> 中添加标题和图片：