JavaEE进阶之路：从Web架构原理到HTML标签全解析

一、什么是JavaEE？

[1.1 什么是web开发？](#1.1 什么是web开发？)

[2.2 Web⽹站的⼯作流程](#2.2 Web⽹站的⼯作流程)

[2.3 本专栏打算：](#2.3 本专栏打算：)

二、HTML基础

[2.1 认识 HTML 标签](#2.1 认识 HTML 标签)

[2.2 HTML 文件基本结构](#2.2 HTML 文件基本结构)

[2.3 标签层次结构](#2.3 标签层次结构)

[2.4 HTML 快速入门](#2.4 HTML 快速入门)

[2.4.1 开发工具](#2.4.1 开发工具)

[2.4.2 快速开发](#2.4.2 快速开发)

[2.5 HTML常见标签](#2.5 HTML常见标签)

[2.5.1 标题标签 h1-h6](#2.5.1 标题标签 h1-h6)

[2.5.2 段落标签: p](#2.5.2 段落标签: p)

[2.5.3 换行标签: br](#2.5.3 换行标签: br)

[2.5.4 图片标签: img](#2.5.4 图片标签: img)

[2.5.5 超链接: a](#2.5.5 超链接: a)

[2.5.6 表格标签](#2.5.6 表格标签)

[2.5.7 表单标签](#2.5.7 表单标签)

[2.5.7.1 form 标签](#2.5.7.1 form 标签)

[2.5.7.2 input 标签](#2.5.7.2 input 标签)

[2.5.7.3 select 标签](#2.5.7.3 select 标签)

[2.5.7.4 textarea 标签](#2.5.7.4 textarea 标签)

[2.6 无语义标签: div&span](#2.6 无语义标签: div&span)

三、下篇博客预告：

从本篇博客开始我将带大家学习JavaEE进阶相关的内容，了解真正企业级开发。

一、什么是JavaEE？

前⾯的课程中,学习的是Java基础,JavaEE初阶，主要学习Java的应⽤,也就是学习Java在企业中是如何应⽤的 Java更多场景是业务开发,更狭义点可以理解为web开发.所以咱们的学习也是围绕着如何使⽤Java来做web开发。

1.1 什么是web开发？

简单来说,就是可以通过浏览器来和我们的程序进⾏交互.⽐如京东,淘宝,天猫,美团等⽹站项⽬

2.2 Web⽹站的⼯作流程

⽬前⽤⼾对PC端应⽤的开发结构模式主要分为C/S和B/S结构.

（1）CS即Client/Server（客⼾机/服务器）结构.

常⻅的C/S架构的应⽤⽐如QQ，CCTALK，各种⽹络游戏等等，⼀般需要安装并且与服务器进⾏⽹络通信的都属于此类。

（2）BS即Browser/Server（浏览器/服务器）结构.

B/S架构全称是浏览器/服务器(Browser/Server)结构,分为Web浏览器、服务器程序、数据库服务三部分，可以理解为是对C/S架构⼀种改进,由于所有的业务逻辑都由服务器程序处理,所以客⼾端仅使⽤浏览器就可以完成所有操作，⼤大降低了客⼾端的维护成本.

我接下来讲的内容也将基于BS架构：

通过浏览器访问前端程序.前端程序返回前端代码.
前端程序调⽤后端程序,进⾏数据的获取(也可能由浏览器进⾏访问)
后端返回数据后,前端根据后端返回的数据进⾏⻚⾯渲染,显⽰⻚⾯

2.3 本专栏打算：

（1）前端Web开发 $了解$

HTML

CSS

JavaScript

JQuery

本部分的目标是能够借助网络看懂前端代码即可。不做深入学习。

（2）后端Web开发 $重点$

Maven

Spring家族框架: Spring, SpringBoot, Spring MVC

Mybatis

Linux

会带领⼤家从0到1完成项⽬的开发到部署

二、HTML基础

什么是HTML？

简单理解：就是由标签构成的语言。

也就是我们的学习重点在于标签🏷

HTML的标签都是提前定义好的，使用不同的标签，表示不同的内容。

类似飞书文档，Word文档

如果选中文本，点击标题1，就会使用标题1的样式来显示文本，上述标题1就是一个"标签"

比如下方代码：

html 复制代码

<h1>我是⼀级标题</h1>
<h2>我是⼆级标题</h2>
<h3>我是三级标题</h3>

2.1 认识 HTML 标签

HTML 代码是由 "标签" 构成的。形如：

html 复制代码

<h3>我是三级标题</h3>

标签名 (body) 放到 < > 中
大部分标签成对出现。<h1> 为开始标签，</h2> 为结束标签。
少数标签只有开始标签，称为 "单标签"。
开始标签和结束标签之间，写的是标签的内容。
开始标签中可能会带有 "属性"。id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码)。

html 复制代码

<h3 id="myId">我是三级标题</h3>

2.2 HTML 文件基本结构

html 复制代码

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
        hello world
    </body>
</html>

html 标签是整个 html 文件的根标签(最顶层标签)
head 标签中写页面的属性。
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题。

2.3 标签层次结构

父子关系
兄弟关系

html 复制代码

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
        hello world
    </body>
</html>

其中：

head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
title 是 head 的子标签。head 是 title 的父标签。
head 和 body 之间是兄弟关系。

可以使用 chrome 的开发者工具查看页面的结构。 F12 或者右键审查元素，开启开发者工具，切换到 Elements 标签，就可以看到页面结构细节。

标签之间的结构关系,构成了⼀个DOM树

DOM 是Document Object Mode(⽂档对象模型)的缩写

2.4 HTML 快速入门

2.4.1 开发工具

HTML 可以使用系统自带的记事本来编写，但是非常不方便，我们课程中使用前端专业的开发工具：Visual Studio Code。

官网：https://code.visualstudio.com
进行下载，安装即可。

2.4.2 快速开发

在 VS Code 中创建文件 xxx.html，直接输入 !，按 Enter 或 tab 键，此时能自动生成代码的主体框架。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

在 <body></body> 标签中，任意书写文字，按 Ctrl + s 保持文件，通过浏览器访问即可。如：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    第一个HTML页面
</body>
</html>

浏览器运行结果如下：

2.5 HTML常见标签

2.5.1 标题标签 h1-h6

有六个，从 h1 - h6。数字越大，则字体越小。

html 复制代码

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

2.5.2 段落标签: p

在HTML中，段落，换行符，空格都会失效，如果需要分成段落，需要使用专门的标签。

p 标签表示一个段落。

html 复制代码

<p>这是一个段落</p>

html 复制代码

<p>这是一个段落</p>
<p>这是一个段落</p>

注意:

p 标签描述的段落，前面没有缩进。(未来 CSS 会学)
自动根据浏览器宽度来决定排版。
html 内容首尾处的换行，空格均无效。
在 html 中文字之间输入的多个空格只相当于一个空格。
html 中直接输入换行不会真的换行，而是相当于一个空格。

2.5.3 换行标签: br

想要完成换行的话，也可以通过 <br/> 标签来实现。

br 是 break 的缩写，表示换行。

br 是一个单标签(不需要结束标签)
br 标签不像 p 标签那样带有一个很大的空隙。
<br/> 是规范写法，不建议写成 <br>

这是一个br标签

这是一个br标签

这是一个br标签

观察 <br> 标签和 <p> 标签的区别。

p标签: 段落之间有较大的间距。
br标签: 只是单纯的换行，行间距较小。

2.5.4 图片标签: img

img 标签必须带有 src 属性，表示图片的路径。

html 复制代码

<img src="rose.jpg">

此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中。

img 标签的其他属性

width/height: 控制宽度高度。高度和宽度一般改一个就行，另外一个会等比例缩放，否则就会图片失衡。
border: 边框，参数是宽度的像素，但是一般使用 CSS 来设定。

html 复制代码

<img src="rose.jpg" width="500px" height="800px" border="5px">

注意:

属性可以有多个，不能写到标签之前
属性之间用空格分割，可以是多个空格，也可以是换行。
属性之间不分先后顺序
属性使用 "键值对" 的格式来表示。

🌟关于目录结构:

对于一个复杂的网站，页面资源很多，这种情况可以使用目录把这些文件整理好。

相对路径 : 以 html 所在位置为基准，找到图片的位置。
- 同级路径: 直接写文件名即可 (或者 ./)
- 下一级路径: image/1.jpg
- 上一级路径: ../image/1.jpg
绝对路径 : 一个完整的磁盘路径，或者网络路径。例如
- 磁盘路径 D:/rose.jpg (最好使用 /，不要使用 \)
- 网络路径 https://img2.baidu.com/it/u=3359649605,3626874592&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=752

2.5.5 超链接: a

href: 必须具备，表示点击后会跳转到哪个页面。
target: 打开方式。默认是 _self。如果是 _blank 则用新的标签页打开。

html 复制代码

<a href="http://www.baidu.com">百度</a>

链接的几种形式:

外部链接: href 引用其他网站的地址

html 复制代码

<a href="http://www.baidu.com">百度</a>

内部链接 : 网站内部页面之间的链接。写相对路径即可。
在一个目录中，先创建一个 1.html，再创建一个 2.html

html 复制代码

<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>

<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>

空链接: 使用 # 在 href 中占位。

html 复制代码

<a href="#">空链接</a>

2.5.6 表格标签

table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
thead: 表格的头部区域
tbody: 表格的主体区域。

table 包含 tr, tr 包含 td

表格标签有一些属性，可以用于设置大小边框等。但是一般使用 CSS 方式来设置。这些属性都要放到 table 标签中。

align : 是表格相对于周围元素的对齐方式。align="center" (不是内部元素的对齐方式)
border: 表示边框。1 表示有边框(数字越大，边框越粗)，"" 表示没边框。
cellpadding: 内容距离边框的距离，默认 1 像素
cellspacing: 单元格之间的距离。默认为 2 像素
width / height: 设置尺寸。

注意，这几个属性，vscode 都提示不出来。

html 复制代码

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500">
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>18</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>11</td>
    </tr>
</table>

2.5.7 表单标签

表单是让用户输入信息的重要途径。

分成两个部分：

表单域: 包含表单元素的区域。重点是 form 标签。
表单控件: 输入框，提交按钮等。重点是 input 标签。

2.5.7.1 form 标签

html 复制代码

<form action="test.html">
    ... [form 的内容]
</form>

描述了要把数据按照什么方式，提交到哪个页面中。

关于 form 需要结合后端代码来进一步理解，后面再详细研究。

2.5.7.2 input 标签

各种输入控件，单行文本框，按钮，单选框，复选框。

type(必须有): 取值种类很多，button, checkbox, text, file, image, password, radio 等。
name: 给 input 起了个名字。尤其是对于单选按钮，具有相同的 name 才能多选一。
value: input 中的默认值。
checked: 默认被选中。(用于单选按钮和多选按钮)

下面介绍一些常用的类型：

1. 文本框

html 复制代码

<input type="text">

2. 密码框

html 复制代码

<input type="password">

3. 单选框

html 复制代码

性别:
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女

注意：单选框之间必须具备相同的 name 属性，才能实现多选一效果。

4. 复选框

html 复制代码

爱好:
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox"> 打游戏

5. 普通按钮

html 复制代码

<input type="button" value="我是个按钮">

当前点击了没有反应。需要搭配 JS 使用(后面会重点研究)。

html 复制代码

<input type="button" value="我是个按钮" onclick="alert('hello')">

6. 提交按钮

html 复制代码

<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>

提交按钮必须放到 form 标签内。点击后就会尝试给服务器发送请求。

2.5.7.3 select 标签

下拉菜单

option 中定义 selected="selected" 表示默认选中。

html 复制代码

<select>
    <option>北京</option>
    <option selected="selected">上海</option>
</select>

2.5.7.4 textarea 标签

html 复制代码

<textarea rows="3" cols="50">

</textarea>

文本域中的内容，就是默认内容，注意，空格也会有影响。

rows 和 cols 也都不会直接使用，都是用 css 来改的。

2.6 无语义标签: div&span

div 标签，division 的缩写，含义是分割

span 标签，含义是跨度

就是两个盒子。用于网页布局

div 是独占一行的，是一个大盒子。
span 不独占一行，是一个小盒子。

html 复制代码

<div>
    <span>咬人猫</span>
    <span>咬人猫</span>
    <span>咬人猫</span>
</div>
<div>
    <span>兔总裁</span>
    <span>兔总裁</span>
    <span>兔总裁</span>
</div>
<div>
    <span>阿叶君</span>
    <span>阿叶君</span>
    <span>阿叶君</span>
</div>

三、下篇博客预告：

基础语法都过了一遍，下一篇博客我将会把这些标签组合起来，写一个完整的"用户注册"页面代码练手，并且开始CSS的学习，期待一下。