001JavaWeb概论与框架搭建【详细补充】

Web学习绪论

10天完成javaweb学习正在持续手打更新中…

JavaWeb

JavaWeb化繁为简

JavaWeb是使用Java语言开发的Web应用程序。它的作用主要包括提供跨平台的应用开发、实现动态网页内容、支持复杂的业务逻辑处理等。

JavaWeb的组成：

前端页面：前端页面通常使用HTML、CSS和JavaScript等技术来实现用户界面和交互效果。这些技术共同作用，提供了丰富的用户体验和直观的操作界面。
后端业务逻辑：后端业务逻辑由Java编写，主要通过Servlet、JSP（JavaServer Pages）、JavaBean等技术来处理。这部分负责响应客户端请求，执行必要的业务逻辑，并与数据库进行交互。
数据库：数据库用于存储和管理应用程序的数据，常用的数据库技术包括MySQL、Oracle等。数据库的选择依赖于应用的需求，如数据量、并发访问数和事务处理需求等。

JavaWeb的作用：

提供跨平台的应用开发：由于Java本身的跨平台特性，JavaWeb应用程序可以在不同的操作系统上运行，无需修改代码。
实现动态网页内容：JavaWeb利用JSP和Servlet等技术，可以根据用户的不同请求动态生成网页内容，提高用户体验。
支持复杂的业务逻辑处理：Java作为一种成熟的编程语言，支持面向对象编程，能够处理复杂的业务逻辑。
促进企业级应用的开发：JavaWeb技术栈中包括Spring、Hibernate等框架，这些都是构建大型企业级应用的有力工具。

第一节：JavaWeb网页设计

W3C标准：网页主要由三部分组成

结构：HTML
表现：CSS
行为：JavaScript

通过一定的学习，可以把JavaWeb网页设计简单分为三个部分，HTML、CSS、JS，他们分别是设计网页、样式、动态链接。

HTML为标签语言，想学习HTML可以过一遍标签使用过MD笔记的豆豆应该对标签很熟悉，这一部分大概2天稍微过一遍就可以了
CSS添加画面样式布局和渲染主要去学习：

1. HTML的各类基础标签
2. CSS的引入方式
3. 如何通过id、class、类....这些去锁定需要布局的样式
4. 熟悉各种排版布局的语句和功能
5. 有哪些套路总结【后期项目积累】

JS动态页面分为几个主要学习的部分、学习JS我们是要让网页动起来、比如点击这个按钮，会发生.....；鼠标移动到某个地方，会出现...反应主要学习：

1. 如何引入JS
2. 如何去绑定链接
3. 如何通过绑定的链接实现对HTML或CSS的更改

第二节：Web的数据处理

通过一定的学习，可以把JavaWeb网页设计部分的内容已经可以熟练运用了，这时候我们需要学习如何获取、调用、验证以及返回自己设计的网页中的数据，从而实现访问数据的长期保存和便捷更改

主要学习数据的保存、与数据库的连接

如何从网页端HTML和JS中获取数据
如何连接数据库
怎么将数据存入已经连接好的数据库中，并且做到随时调用存放好的数据

第三节：Web核心框架

这个时候正式开始搭建一个完整项目的学习

什么是 JavaWeb ?

Web:全球广域网，也称为万维网(www)，能够通过浏览器访问的网站
JavaWeb:是用Java技术来解决相关web互联网领域的技术栈

JavaWeb 技术栈：

- B/S 架构:Browser/Server，浏览器/服务器架构模式，它的特点是，客户端只需要浏览器，应用程序的逻辑和数
- advantage：易于维护升级:服务器端升级后，客户端无需任何部署就可以使用到新的版本

静态资源:HTML、CSS、JavaScript、图片等。负责页面展现
动态资源:Servlet、JSP等。负责逻辑处理
数据库：负责存储数据

[DOM对象](JavaScript(JS)的DOM对象(JS的Document对象)----什么是DOM对象?_document操作的dom-CSDN博客 Object Model 文档对象模型：将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD（增删改查）的动态操作。)

学前准备

软件：

浏览器：火狐、Edge

编译器：Visual Studio Code、Java IDEA、Tocat【Web服务器】

• 使用 Visual Studio Code 软件

vscode软件环境配置：

（1）安装VSCode：VSCode的官方网站（https://code.visualstudio.com/）

（2）安装必要的插件：

HTML CSS Support：允许在打开HTML文件时自动关联CSS文件。
Live Server：可以实时预览和调试HTML文件。
HTML Snippets：提供了一组快捷的HTML代码片段。
Auto Rename Tag：可以自动完成HTML标签的命名。

Java IDEA插件：

MyBatisX

HTML快速入门

HTML/CSS/JS 在线工具 | 菜鸟工具 (jyshare.com)

是一门超文本标记语言

由浏览器解析

HTML标签都是预定义好滴

HTML 标签参考手册 (w3school.com.cn)

<!DOCTYPE html>  		<!-- 文档类型声明 -->
<html lang="en">		 <!-- 表面HTML标签使用英文 -->
<head>					 <!-- 包含文档元数据开始 -->
<meta charset="utf-8">	 
<title>hello would</title> <!-- 设置标题 -->
</head>					 <!-- 包含文档元数据结束 -->
<body>					 <!-- 表示HTML文档内容的开始 -->
 
<h1>我的第一个标题</h1>	
 
<p>我的第一个段落。</p>

    
<p>hello would</p>

 
</body>					<!-- 表示HTML文档内容的结束 -->
</html>					<!-- 表示结束 -->

<meta charset="utf-8">	     
<!-- 声明字符编码 
meta标记用来描述一个HTML网页文档的属性，也称为元信息（meta-information），这些信息并不会显示在浏览器的页面中。例如作者、日期和时间、网页描述、关键词、页面刷新等。该标记位于文档的头部(其属性形式是“名称/值”对)。
meta属性主要分为两组:
    <meta name="" content="">-->
name属性用于描述网页，它是以“名称/值”形式的名称，name属性的值所描述的内容(值)通过content属性表示，便于搜索引擎机器人查找、分类。其中最重要的是description、keywords和robots。
<meta http-equiv="" content="">
<!--http-equiv属性与content属性
        http-equiv属性用于提供HTTP协议的响应头报文，它是以“名称/值”形式的名称，http-equiv属性的值所描述的内容(值)通过content属性表示，通常为网页加载前提供给浏览器等设备使用。其中最重要的是content-type charset提供编码信息，refresh刷新与跳转页面，no-cache页面缓存，expires网页缓存过期时间。
-->

快捷写法

HTM基础标签

文本标签

下面是页面上一些常见的文本标签：

1、标题标签： h1-h6

2、段落标签： p

3、文本格式化标签：br 、 hr、 pre

4、字形标签： b 、i、u、strong、mark、sup、sub

5、其它标签： div、span

6、特殊字符标签：以“&”开头，以“；”结尾，中间为相关字符编码

< body>

< body>标记属性-属性表:

特殊符号

特殊字符以“&”开头，以“；”结尾，中间为相关字符编码。

如用于声明标签的“<”和“>”，在页面上需要显示这两个符

号的时候需要进行特殊处理。

在HTML编码中，用“&lt;”表示“<”，用“&gt;”表示“>”

拓展：

符号代码			 |			表示的特殊符号
&#xff1a;			|			:
&nbsp;				|			' '

文本结构

文本格式化标签：br 、 hr、 pre

<br>		<!-- 表示文本强制换行 -->
<hr/>		<!-- 添加一条默认样式的水平线 -->
<hr color="red" align="left" size="5" width="600"/>
            <!-- 创建一条红色、左对齐、宽度为600的粗线条 -->
<pre>		<!-- 保留内容的编译器中原始文本格式 
            会完整保留设计者在源文件中所定义的格式，包括各种空格、缩进以及其他特殊格式。-->
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!-- 一段开始所需的空格 -->

字形

颜色

font标记素用来改变默认的字体、颜色、大小等属性，这些更改分别通过不同的属性定义完成。
基本语法 <font  face=""  size=""  color="" ></font>

颜色表示方法

在网页设计中，HTML提供了4种颜色设置方法：

使用RGB（R&#