1.Javaweb技术体系
知识点 |
核心内容 |
技术关联 |
BS架构 |
浏览器(Browser)与服务器(Server)交互模型，HTTP协议传输 |
前端技术栈（HTML/CSS/JS） + 后端技术栈（JAVA/Tomcat） |
Tomcat核心功能 |
Web服务（接收/解析HTTP请求） + 容器（解析Servlet/JAVA程序） |
Servlet容器、NIO/BIO多线程 |
前后端技术栈划分 |
前端（浏览器解析：HTML/CSS/JS/Vue/React） 后端（服务器解析：JAVA/Servlet/Spring） |
数据交互格式（JSON/XML） |
JAVA Web技术演进 |
单体架构（Servlet+JAVA Bean） → SSM框架 → Spring Boot+微服务 |
Spring Cloud Alibaba、分布式设计 |
数据库与中间件 |
MySQL/Oracle + Redis/MongoDB 消息队列（RabbitMQ/RocketMQ） |
分库分表、异步处理 |
前后端协作关键 |
数据通道打通：HTTP协议承载约定格式（如JSON） |
接口规范、跨域处理 |
学习路径 |
基础优先：JAVA核心（IO/多线程/网络）→ Servlet → Spring → 微服务 |
技术生态关联性 |
对比维度 |
传统SSM（开发复杂） vs Spring Boot（快速集成） 单体架构 vs 微服务（功能解耦） |
并发能力、维护成本 |
2.BS架构说明
知识点 |
核心内容 |
重点 |
BS架构 |
浏览器(browser)-服务器(server)组成的web架构，包含前端、后端、数据库三大部分 |
前端不仅限于浏览器，还包括小程序/APP等 |
前端技术栈 |
HTML+CSS+JavaScript构成所有前端技术的基础 |
Vue/React等框架本质是这三个基础的封装 |
后端技术栈 |
JAVA基础支撑Servlet/Spring/MyBatis等技术栈 |
不同语言(PHP/Go/.NET)有各自技术生态 |
技术演进规律 |
新瓶装旧酒：新技术本质是对基础技术的封装 |
前端框架(Vue)和JAVA框架(Spring Boot)都遵循此规律 |
学习重点 |
JavaScript是前端最核心难点，JAVA基础决定后端学习深度 |
Bootstrap实现响应式布局，jQuery是JS库 |
数据库技术 |
关系型(MySQL/Oracle)与非关系型(Redis/MongoDB)并存 |
数据库实现语言可能不同(如C++) |
3.官方文档
知识点 |
核心内容 |
重点 |
HTML教程 |
W3C提供的HTML基础教程，涵盖前端开发核心概念 |
区分HTML标签语义化使用场景 |
学习范围界定 |
非前端工程师只需掌握核心内容，重点在数据打通与维护 |
避免过度深入CSS/细节语法 |
网页组成原理 |
BS架构中网页的基础结构解析 |
动态渲染与静态页面的差异 |
4.网页组成
知识点 |
核心内容 |
重点 |
网页组成三要素 |
HTML（内容载体）、CSS（样式美化）、JavaScript（交互行为） |
HTML与CSS的解析差异（浏览器兼容性问题） |
HTML |
定义网页内容（文字/图片/标签如<div>、<p>、; ） |
标签语义化与嵌套规则 |
CSS |
控制样式（颜色/字体/布局），需浏览器解析 |
浏览器兼容性（火狐/Chrome/IE差异） |
JavaScript |
实现动态效果（下拉菜单/轮播图） |
事件监听与DOM操作 |
开发者工具 |
Ctrl+Shift+I调出调试面板（火狐/Chrome通用） |
实时修改CSS（如字体大小/背景色） |
实战演示 |
京东首页源码分析（HTML结构/CSS文件/JS脚本） |
压缩代码识别（非人工编写的CSS/JS） |
5.HTML介绍
知识点 |
核心内容 |
重点 |
HTML定义 |
超文本标记语言（HyperText Markup Language），可包含文字/图形/动画/声音/表格/链接等多媒体内容 |
"超文本"概念理解（超越纯文本的多媒体特性） |
HTML结构 |
由head（头部）和body（主体）两大部分组成 |
head与body的功能区分（head存放CSS/JS，body存放显示内容） |
运行方式 |
1. 本地打开：直接双击HTML文件; 2. 远程访问：浏览器→服务器请求→返回HTML解析 |
解析主体差异（浏览器解析而非服务器解析） |
开发调试 |
前端错误使用浏览器开发者工具调试，后端错误使用debug模式/日志分析 |
常见误区：混淆前后端错误定位责任 |
行业数据 |
浏览器市场份额（Chrome最高）、操作系统分布（Win10为主）、用户活跃时段（夜间高峰） |
数据获取渠道（百度统计等分析平台） |
6.HTML快速入门
知识点 |
核心内容 |
重点 |
HTML基础开发流程 |
使用IDEA创建JavaScript工程，编写简单HTML文件并运行 |
工程类型选择（JavaScript vs Java）、浏览器执行机制 |
HTML文档结构 |
<!DOCTYPE>声明、<html>语言地区、<head>字符集/标题、<body>内容 |
文档类型说明（<!DOCTYPE html>）与字符集（utf-8）的作用 |
开发工具对比 |
VS Code、Sublime Text、WebStorm、Dreamweaver、记事本 |
专业工具选择（IDEA适用性）、历史工具（Dreamweaver三件套） |
浏览器执行原理 |
HTML无需编译，直接由浏览器解释执行 |
与Java编译执行（.class文件）的核心差异 |
HTML注释与标签 |
<!--注释-->语法、<title>动态修改效果 |
注释格式（<!-- -->）与<title>对页面标签的影响 |
7.HTML基本结构
知识点 |
核心内容 |
重点 |
HTML文档类型说明 |
<!DOCTYPE html> 声明文档类型 |
区分HTML5与其他版本声明方式 |
HTML基本结构 |
包含<html>根标签、<head>（头信息）和<body>（主体） |
标签嵌套规则（如<head>必须包含<title>） |
标签语法 |
开始标签（如<head>）与结束标签（如</head>）配对 |
自闭合标签（如<img>）无需结束标签 |
头部内容（head） |
存放元数据（如<title>定义页面标题） |
meta标签的常见属性（charset、viewport等） |
主体内容（body） |
页面可视化内容容器 |
块级元素与行内元素的区别 |
HTML注释 |
<!-- 注释内容 -->，快捷键Ctrl+/生成 |
与Java注释（//或/* */）的语法差异 |
8.HTML标签基本说明
知识点 |
核心内容 |
重点 |
HTML标签基础 |
标签由尖括号包裹，分为双标签（开始+结束）和单标签（如<br/>、<hr/>） |
双标签与单标签的语法区别（结束符/） |
标签与元素关系 |
标签即元素，内容为标签间的文本（如<title>内容</title>） |
浏览器解析时区分标签与普通文本 |
常用HTML标签 |
head、title、div、span、img、table等 |
图像标签<img>和表格标签<table>的语法 |
浏览器解析逻辑 |
浏览器按标签语义渲染内容（如<hr>生成横线，; 强制换行） |
换行需用; ，源码中的换行符无效 |
学习建议 |
掌握常用标签，忽略冷门标签； 重点理解前后端数据交互 |
后端程序员需能看懂并维护前端代码 |
工具使用 |
在线/离线HTML手册查询标签用法（如标题、段落、样式标签） |
格式化快捷键（如Ctrl+Shift+L） |
9.HTML标签使用细节
知识点 |
核心内容 |
注意事项 |
标签嵌套规则 |
标签不能交叉嵌套，必须正确对应闭合 |
错误示例：<div><span></div></span> |
标签闭合要求 |
双标签必须正确关闭（如<span></span>） |
单标签（如; ）无需闭合 |
注释规范 |
注释不能嵌套（<!-- 注释 -->） |
嵌套注释会导致解析错误 |
HTML语法特性 |
语法较松散： - 属性值可不加引号; - 部分标签可不闭合 |
虽能运行但推荐规范写法 |
浏览器兼容性 |
不同浏览器对松散语法的解析差异 |
需遵循W3C标准保证兼容性 |
10.font标签
知识点 |
核心内容 |
重点 |
HTML <font>标签 |
用于修饰文字样式（颜色/字体/大小） |
已被CSS替代但仍需了解 |
<font>标签属性 |
color(颜色)/size(大小)/face(字体) |
属性顺序不影响效果 |
微软雅黑字体应用 |
通过face="微软雅黑"指定字体 |
需注意字体兼容性问题 |
文字颜色控制 |
使用color属性（如red/blue） |
十六进制色值也适用 |
字号调整方法 |
size属性接受像素值（如40px） |
与CSS单位规范差异 |
11.字符实体
知识点 |
核心内容 |
重点 |
字符实体概念 |
在HTML中显示特殊符号而非解析为标签的方法 |
区分字符实体与普通标签写法的差异 |
小于/大于符号表示 |
使用<表示<，>表示> |
浏览器默认解析尖括号为标签 |
空格字符实体 |
使用 表示连续空格 |
普通空格会被浏览器压缩为单个空格 |
HR标签文本显示 |
通过字符实体实现<hr/>的文本输出 |
直接书写会被解析为水平线 |
字符实体应用场景 |
显示HTML保留字符/特殊符号/连续空格 |
与CSS样式控制的区别 |
12.标题标签
知识点 |
核心内容 |
重点 |
HTML字符实体 |
小于符号(<)、大于符号(>)、and符号(&)、引号("/')、货币符号(¢/£/¥) |
实体名称与符号对应关系 |
标题标签体系 |
h1-h6标签的层级关系（h1最大，h6最小） |
大小顺序易混淆（需记住数字越小标题越大） |
标题对齐属性 |
align属性控制位置（left/center/right） |
属性值应用场景区分 |
标签语义化 |
标题标签的语义价值高于样式价值 |
与CSS样式控制的区别 |
开发工具演示 |
实时修改标签后闭合标签自动更新 |
开发工具辅助功能 |
13.超链接标签
知识点 |
核心内容 |
重点 |
超链接标签 |
用于创建从一个网页指向目标的连接关系，目标可以是网页/锚点/图片/邮件/文件/应用程序 |
href属性设置连接地址，target属性控制打开方式 |
href属性 |
指定超链接的目标地址，支持网址(http://)、邮件(mailto:)、文件路径等多种格式 |
邮件链接需使用mailto:协议前缀 |
target属性 |
控制打开方式： - _self(默认)：当前页替换; - _blank：新窗口打开 |
实际开发中_blank使用频率更高 |
锚点链接 |
跳转至同一网页的指定位置，需配合id属性使用 |
与外部链接的语法区别 |
邮件链接 |
点击自动调用系统默认邮件客户端，格式为mailto:邮箱地址 |
需注意不同操作系统对邮件客户端的调用差异 |
14.列表标签
知识点 |
核心内容 |
重点 |
无序列表(ul) |
- 使用<ul>标签包裹<li>项 - type属性控制符号样式(disc/circle/square) |
京东源码高频使用案例 与有序列表语法混淆风险 |
有序列表(ol) |
- 自动生成编号序列 - type属性控制编号类型(1/a/A/i/I) - start属性设置起始序号 |
罗马数字大小写区分(i vs I) 动态编号起始值实现技巧 |
列表嵌套应用 |
五虎将案例演示： - 无序列表实现人名罗列 - 有序列表实现字母/罗马数字编号 |
type属性值记忆要点 circle(空心圆)与square(实心方)实际效果对比 |
前端开发认知 |
"所见即所得"基础特性 静态页面高频使用场景提醒 |
简单语法与复杂应用场景的认知差异 |
15.图像标签
知识点 |
核心内容 |
重点 |
image标签基础用法 |
src属性指定图片路径，width/height控制尺寸 |
路径格式（相对/绝对路径） |
图片缩放原理 |
建议只指定width或height，浏览器会按比例自动缩放 |
同时指定宽高会导致图片变形 |
alt属性作用 |
图片加载失败时显示替代文本 |
不同浏览器显示差异（文本/图标+文本） |
border属性 |
设置图片边框厚度（单位px） |
实际开发中通常用CSS替代 |
路径定位方式 |
相对路径（./images/）和绝对路径（URL形式） |
本地文件路径与web路径的区别 |
HTTP资源访问 |
通过http://localhost:port/工程名/资源路径访问 |
实际开发常用URL定位资源 |
图片变形案例 |
width=400px height=1000px导致拉伸变形 |
需保持原始宽高比例 |
16.表格标签
知识点 |
核心内容 |
重点 |
表格标签（table） |
基本语法为 <table> 开始，</table> 结尾；常用属性：border（边框宽度）、cellspacing（单元格间隙）、cellpadding（填充大小） |
border 设为 0 时显示细线；cellspacing 和 cellpadding 的区别 |
行列结构（tr/td） |
tr 为行标签，td 为单元格标签；三行三列表格需嵌套 3 个 tr，每个 tr 含 3 个 td |
行列数量易混淆；td 内容决定自适应高度 |
表头标签（th） |
th 用于定义表头，内容自动加粗（如姓名、住址、邮件） |
与 td 的用法区别；需嵌套在 tr 内 |
样式控制 |
width（宽度，单位 px）、height（高度）、align="center"（居中） |
像素单位（px） 与分辨率相关；align 需写在 table 标签内 |
快捷键技巧 |
Ctrl+Shift+L（格式化代码）、Ctrl+D（删除行）、Ctrl+Shift+↓（复制行） |
快捷键组合易遗漏；需高频练习 |