JavaWeb概述
JavaWeb概述：
- 使用Java语言开发基于互联网的项目
我们提一下C/S和B/S两种架构：
（1）C/S: Client/Server 客户端/服务器端
- 在用户本地有一个客户端程序，在远程有一个服务器端程序
- 如：QQ，迅雷...
优点：
- 用户体验好
缺点：
- 开发、安装、部署、维护麻烦
（2）B/S: Browser/Server 浏览器/服务器端
- 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
优点：
- 开发、安装、部署、维护简单
缺点：
- 如果应用过大，用户的体验可能会受到影响
- 对硬件要求过高
由于JavaWeb是使用Java语言开发基于互联网的项目，所以我们需要学习与B/S架构有关的知识
B/S架构中资源分为静态资源和动态资源：
（1）静态资源：使用静态网页开发技术发布的资源
特点：
- 所有用户访问，得到的结果是一样的。
- 如：文本，图片，音频、视频, HTML,CSS,JavaScript
如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源。
（2）动态资源：使用动态网页技术发布的资源。
特点：
- 所有用户访问，得到的结果可能不一样。
- 如：jsp/servlet,php,asp...
如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器，所以我们要先了解静态资源
我们要了解的静态资源有：
- HTML：用于搭建基础网页，展示页面的内容
- CSS：用于美化页面，布局页面
- JavaScript：控制页面的元素，让页面有一些动态的效果
HTML
HTML概念：是最基础的网页开发语言。
全称：Hyper Text Markup Language（超文本标记语言）
- 超文本：用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
- 标记语言：由标签构成的语言<标签名称>。如 html，xml，标记语言不是编程语言。
HTML快速入门
语法：
- html文档后缀名 .html 或者 .htm
- 标签分为
- 围堵标签：有开始标签和结束标签。如
<html> </html> - 自闭和标签：开始标签和结束标签在一起。如
<br/>
- 标签可以嵌套：需要正确嵌套，不能你中有我，我中有你
错误：
<a><b></a></b>正确：<a><b></b></a> - 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
- html的标签不区分大小写，但是建议使用小写
如：
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<FONT color='red'>Hello World</font><br/>
<font color='green'>Hello World</font>
</body>
</html>HTML常用标签
我只挑了一部分说，详细请在 菜鸟教程 中查看
文件标签：构成html最基本的标签
<html>：html文档的根标签。<head>：头标签。用于指定html文档的一些属性，引入外部的资源。<title>：标题标签。<body>：体标签。我们想要展示的内容写在体标签中。<!DOCTYPE html>：html5中定义该文档是html文档。<meta charset="UTF-8">：告知浏览器此页面属于什么字符编码格式，防止乱码<html lang="en">：向搜索引擎表示该页面是html语言，"lang"的意思是“language”，语言的意思，lang="en"表示此页面定义为英文网页，也可以写中文，只不过写中文打开浏览器后会跳出是否翻译当前界面的选项（可以不写，但如果去掉，可能部分浏览器不兼容）
<html lang="">常用的几个lang
lang | 说明 |
en | 英文 |
en-US | 英文（美国） |
zh | 中文 |
zh-CN | 中文（简体，中国大陆） |
zh-SG | 中文（简体，新加坡） |
zh-HK | 中文（繁体，香港） |
zh-MO | 中文（繁体，澳门） |
zh-TW | 中文（繁体，台湾） |
文本标签：和文本有关的标签
<!-- 注释内容 -->：注释标签<h1>to<h6>：标题标签 h1~h6：分别对应一到六级标题<p>：段落标签<br>：换行标签<hr>：展示一条水平线
| 说明 |
color | 颜色 |
width | 宽度 |
size | 高度 |
align | 对其方式 |
align的值 | 说明 |
center | 居中 |
left | 左对齐 |
right | 右对齐 |
<b>：字体加粗<i>：字体斜体<center>:文本居中<font>:字体标签
| 说明 |
color | 颜色 |
size | 大小 |
face | 字体 |
color属性定义 | 说明 |
red,green,blue... | 英文单词 |
rgb(值1，值2，值3) | 值的范围：0~255（与CSS结合使用） |
#值1值2值3 | 值的范围：00~FF之间。如：#FF00FF |
width属性定义 | 说明 |
数值 | 数值的单位默认是 px(像素)，如width='20' |
数值% | 占比相对于父元素的比例 |
图片标签
<img>：展示图片
| 说明 |
src | 指定图片的位置 |
height | 规定图像的高度 |
width | 规定图像的宽度 |
代码：
<!--展示一张图片 img-->
<img src="./微信图片_20230124125716.jpg" width='500' height='500'>src中的值我们一般填相对路径
相对路径：以.开头的路径
./：代表当前目录../:代表上一级目录
列表标签
有序列表：
<ol>：定义有序列表<li>：定义列表的项目
无序列表：
<ul>：定义无序列表<li>：定义列表的项目
<ol>和<ul>中可以用type属性规定使用哪种项目符号。
链接标签
<a>：定义一个超链接
| 说明 |
href | 指定访问资源的URL（统一资源定位符） |
target | 指定打开资源的方式 |
target的值 | 说明 |
_self | 默认值，在当前页面打开 |
_blank | 在空白页面打开 |
div和span（与CSS结合使用）
<div>:每一个div占满一整行。是一个块级标签<span>：文本信息在一行展示。是一个行内标签，也是内联标签
(与CSS结合使用)
语义化标签
html5中为了提高程序的可读性，提供了一些标签
<header>：页眉<footer>：页脚
表格标签
<table>：定义表格
| 说明 |
width | 宽度 |
border | 边框 |
cellpadding | 定义内容和单元格的距离 |
cellspacing | 定义单元格之间的距离。如果指定为0，则单元格的线会合为一条 |
bgcolor | 背景色 |
align | 对齐方式 |
<tr>：定义行
| 说明 |
bgcolor | 背景色 |
align | 对齐方式 |
<td>：定义单元格
| 说明 |
colspan | 合并列 |
rowspan | 合并行 |
<th>：定义表头单元格<caption>：表格标题<thead>：表示表格的头部分<tbody>：表示表格的体部分<tfoot>：表示表格的脚部分
表单标签
表单概念：用于采集用户输入的数据的，用于和服务器进行交互。
<form>：定义了HTML文档的表单。
| 说明 |
action | 规定当提交表单时向何处发送表单数据 |
method | 规定用于发送表单数据的 HTTP 方法 |
method的值 | 说明 |
get | 默认。将表单数据（form-data）以名称/值对的形式附加到 URL 中：URL?name=value&name=value |
post | 以 HTTP post 事务的形式发送表单数据（form-data） |
get特点：
- 请求参数会在地址栏中显示，会封装到请求行中
- 请求参数大小是有限制的，4kb左右
- 不太安全
post特点：
- 请求参数不会再地址栏中显示，会封装在请求体中
- 请求参数的大小没有限制
- 较为安全
注意：表单项中的数据要想被提交，必须指定其name属性。
表单项标签
<input>：定义输入控件。
| 说明 |
type | type 属性规定要显示的 |
placeholder | placeholder 属性规定可描述输入 |
checked | checked 属性规定在页面加载时应该被预先选定的 |
type的值 | 说明 |
text | 默认。定义一个单行的文本字段（默认宽度为 20 个字符） |
password | 定义密码字段（字段中的字符会被遮蔽） |
radio | 定义单选按钮 |
checkbox | 定义复选框 |
file | 定义文件选择字段和 "浏览..." 按钮，供文件上传 |
hidden | 定义隐藏输入字段 |
type与按钮相关的值 | 说明 |
submit | 定义提交按钮，可以提交表单 |
button | 定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本），不可以提交表单 |
image | 定义图像作为提交按钮，可以提交表单，使用 |
reset | 定义重置按钮，重置按钮会清除表单中的所有数据 |
与radio相关的注意事项：
1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
3. 可以使用checked属性，可以指定默认值与checkbox相关的注意事项：
1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
2. checked属性，可以指定默认值<label>： 定义 input 元素的标注
注意：label的for属性一般会和 input 的 id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。
<select>: 定义选择列表（下拉列表）<option>：<select>的子元素，定义选择列表中的选项<textarea>： 定义多行的文本输入控件（文本域）
| 说明 |
cols | 规定文本区域内可见的宽度 |
rows | 规定文本区域内可见的行数 |
