学习日记-HTML-day51-9.9
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+↓（复制行） | 快捷键组合易遗漏；需高频练习 |