当前位置：首页 > news >正文

Java Web开发基础：HTML的深度解析与应用

news 2025/9/19 15:56:04

在这里插入图片描述

文章目录

前言
🌍一.B/S 软件开发架构简述
🌍二.HTML 介绍
❄️2.1 官方文档
❄️2.2 网页的组成
❄️2.3 HTML 是什么
❄️2.4html基本结构

🌍三.HTML标签
1.html 的标签/元素-说明
2. html 标签注意事项和细节
3.font 字体标签
4.标题标签
5.超链接标签
6.图像标签
7.表格标签
8.div标签
9.p标签
10.span标签
11.表单

结语

🙋‍♂️ 作者：@whisperrr.🙋‍♂️

👀 专栏：Javaweb学习👀

💥 标题：Java Web开发基础：HTML的深度解析与应用💥

❣️ 寄语：比较是偷走幸福的小偷❣️

前言

在Java Web开发领域，HTML作为构建网页的基石，其重要性不言而喻。本文将解析HTML的核心概念、标签、属性以及在实际Java Web开发中的应用，旨在帮助新手入门掌握HTML的使用技巧。下面我们先了解一下什么是B/S框架.

🌍一.B/S 软件开发架构简述

B/S框架，意思是前端(Browser 浏览器)和服务器端(Server)组成的系统的框架结构。
B/S架构也可理解为web架构，包含前端、后端、数据库三大组成部分。
示意图

在这里插入图片描述

前端开发技术工具包括三要素：HTML、CSS 和 JavaScript，还有很多高级的前端框架，比如bootstrap、jquery，VUE 等。
后端开发技术工具主要有：Net、JAVA、PHP, Go 等
数据库主流的三种关系型数据库：Mysql、SQLserver、Oracle ，还有 Nosql 非关系型数据库：Redis、Mogodb 等。

🌍二.HTML 介绍

❄️2.1 官方文档

首先给大家推荐一个学习网站https://www.w3school.com.cn/html/index.asp

❄️2.2 网页的组成

结构(HTML)·HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
表现(CSS)·CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
行为(JavaScript/JQuery)·JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有购物网站中图片的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的

❄️2.3 HTML 是什么

HTML（HyperText Mark-up Language）即超文本标签语言(可以展示的内容类型很多)
HTML 文本是由 HTML 标签组成的文本，可以包括文字、图形、动画、声音、表格、链接等
HTML 的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

❄️2.4html基本结构

<!--文档类型说明 注释 -->
<!DOCTYPE html>
<!--使用语言的地区 en 表示英国美国 en-US-->
<html lang="en">
<!--html 头-->
<head>
<!--charset 文件的字符集-->
<meta charset="UTF-8">
<!--文件标题-->
<title>csdn</title>
</head>
<!--body 体，主体部分-->
<body>
<!--内容-->
hello
</body>
</html>

HTML 文件不需要编译，直接由浏览器进行解析执行
可以选择的浏览器，是你电脑安装有的浏览器, 如果没有安装这个浏览器，会报错

🌍三.HTML标签

1.html 的标签/元素-说明

HTML 标签用两个尖括号<>括起来
HTML 标签一般是双标签，如 <b> 和 </b> 前一个标签是起始标签, 后一个标签为结束标签
两个标签之间的文本是 html 元素的内容
某些标签称为"单标签",因为它只需单独使用就能完整地表达意思,如 <br/> <hr/>
HTML 元素指的是从开始标签到结束标签的所有代码。

2. html 标签注意事项和细节

标签使用细节:

标签不能交叉嵌套
标签必须正确关闭
注释不能嵌套

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签使用细节</title>
</head>
<body>
<!--标签不能交叉嵌套-->
<!--<div><span>tom</div></span> 错误用法-->
<div><span>tom</span></div>
<!--标签必须正确关闭-->
<span>jack</span>
<!--注释不能嵌套 -->
<font color="red">张飞</font>
<font color=blue>关羽</font>
<br/>
</body>
</html>

3.font 字体标签

font 标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)
(1)color 属性修改颜色
(2)face 属性修改字体
(3)size 属性修改文本大小

应用实例：在网页上显示北京，并修改字体为微软雅黑，颜色为蓝色。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font 标签</title>
</head>
<body>
<font color="blue" face="微软雅黑" size="3">北京</font>
</body>
</html>

4.标题标签

h1 - h6 都是标题标签
h1 : 最大 h6 : 最小
align: 属性是对齐属性
left: 左对齐(默认)
center :居中
right : 右对齐
代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<h1 align="left">标题 1</h1>
<h2 align="center">标题 2</h2>
<h3 align="right">标题 3</h3>
<h4>标题 4</h4>
<h5>标题 5</h5>
<h6>标题 6</h6>
</body>
</html>

5.超链接标签

超链接是指从一个网页指向一个目标的链接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

a 标签是超链接
href 属性设置连接的地址
target 属性设置哪个目标进行跳转
_self : 表示当前页面(默认值)
_blank : 表示打开新页面来进行跳转

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接标签</title>
</head>
<body>
<a href="https://www.sohu.com">搜狐</a><br/>
<a href="https://www.sohu.com" target="_self">搜狐_self</a><br/>
<a href="https://www.sohu.com" target="_blank">搜狐_blank</a><br/>
<a href="mailto:abc@163.com? subject=hello">abc@163.com</a><br/>
</body>
</html>

6.图像标签

img: 标签是图片标签,用来显示图片
src: 属性可以设置图片的路径
width: 属性设置图片的宽度
height: 属性设置图片的高度
border: 属性设置图片边框大小
alt: 属性设置当指定路径找不到图片时,用来代替显示的文本内容
相对路径:从工程名开始算
绝对路径:盘符:/目录/文件名

在 web 中路径分为相对路径和绝对路径两种:

相对路径: . 表示当前文件所在的目录,.. 表示当前文件所在的上一级目录,文件名 : 表示当前文件所在目录的文件,相当于 ./文件名 ./ 可以省略.
绝对路径: 正确格式是: http://IP 地址:port/工程名/资源路径,错误格式是: 盘符:/目录/文件名.

应用实例：使用 img 标签显示一张美女的照片。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<!-- 如果只是指定 width 或者 height 浏览器会按比例显示，不会变形 -->
<img src="x.png" width="300" border="1" alt="美女找不到"/><hr />
<img src="../1.png" width="300" border="1" alt="美女找不到"/><hr />
<img src="../aaa/1.png" width="100" border="1" alt="美女找不到"/><hr />
<!-- 如果同时指定 width height 自己要计算，否则图像会变形 -->
<img src="../aaa/1.png" width="200" height="80" alt="美女找不到"/><hr />
</body>
</html>

7.表格标签

table： 标签是表格标签
border： 设置表格标签
width： 设置表格宽度
height： 设置表格高度
align： 设置表格相对于页面的对齐方式
cellspacing： 设置单元格间距
tr ：是行标签
th ：是表头标签
td ：是单元格标签
align： 设置单元格文本对齐方式
b ：是加粗标签
合并列 : colspan=“列数”
合并行 : rowspan=“行数”
cellspacing : 指定单元格间的空隙大小 :0 表示没有空隙
bordercolor: 指定表格边框的演示
例题：

在这里插入图片描述

代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格(跨行跨列)</title>
</head>
<body>
<table border="1px" bordercolor="#E87EFA" cellspacing="0"
width="400px">
<tr>
<td align=center colspan="3">星期一菜谱</td>
</tr>
<tr>
<td rowspan=2>素菜</td>
<td>青草茄子</td>
<td>花椒扁豆</td>
</tr>
<tr>
<td>小葱豆腐</td>
<td>炒白菜</td>
</tr>
<tr>
<td rowspan=2>荤菜</td>
<td>油闷大虾</td>
<td>海参鱼翅</td>
</tr>
<tr>
<td>红烧肉<img width="100px" src="../2.png"/></td>
<td>烤全羊</td>
</tr>
</table>
</body>
</html>

8.div标签

标签可以把文档分割为独立的、不同的部分
是一个块级元素。它的内容自动地开始一个新行。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div 标签</title>
</head>
<body>
hello,world
<div>
<h3 style="color: blue">this is a h3</h3>
<a href="http://www.baidu.com">goto 百度</a>
</div>
</body>
</html>

9.p标签

标签定义段落
p 元素会自动在其前后创建一些空白。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>段落标签</title>
</head>
<body>
hello,world
<p>段落 1</p>
<p>段落 2</p>
<p>段落 3</p>
</body>
</html>

10.span标签

span 标签是内联元素，不像块级元素（如：div 标签、p 标签等）有换行的效果。
如果不对 span 应用样式，span 标签没有任何的显示效果
语法：内容

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>span 标签</title>
</head>
<body>
您的购物车有<sapn style="color: red;font-size: 40px">10</sapn>个商品
</body>
</html>

11.表单

form 标签就是表单
input type=text : 是文件输入框 value 设置默认显示内容
input type=password 是密码输入框 value 设置默认显示内容
input type=radio 是单选框 name 属性可以对其进行分组
checked="checked"表示默认选中 input
type=checkbox 是复选框 checked="checked"表示默认选中
input type=reset 是重置按钮 value 属性修改按钮上的文本
input type=submit 是提交按钮 value 属性修改按钮上的文本
input type=button 是按钮 value 属性修改按钮上的文本
input type=file 是文件上传域
input type=hidden 是隐藏域,当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏（提交的时候同时发送给服务器）
select 标签是下拉列表框
option 标签是下拉列表框中的选项
selected="selected"设置默认选中
textarea 表示多行文本输入框（起始标签和结束标签中的内容是默认值）
rows 属性设置可以显示几行的高度
cols 属性设置每行可以显示几个字符宽度

注意事项

一定一定使用 form 标签将 input 元素包起来
一定一定要给 input 元素设置 name 属性，否则，数据提交不到服务器
checkbox 是复选框，如果希望是同一组保证 name 属性一致
在 checkbox select radio 提交数据的时候是 value 属性的值

下面我们看一下题目:
在这里插入图片描述
代码演示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单综合案例</title>
</head>
<body>
<h1>用户注册信息</h1>
<form action="ok.html" method="get">用户名称：<input type="text" name="username"><br/>用户密码：<input type="password" name="password"><br/>确认密码：<input type="password" name="password"><br/>请选择你喜欢的运动项目：<br/><input type="checkbox" name="sport" value="篮球">篮球<br/><input type="checkbox" name="sport" value="足球" checked>足球<br/><input type="checkbox" name="sport" value="手球">手球<br/>请选择你的性别：<br/><input type="radio" name="gender" value="male">男<br/><input type="radio" name="gender" value="female">女<br/>请选择你喜欢的城市：<br/><select name="city"><option value="ah"  >安徽</option><option value="jx">江西</option><option value="bj">北京</option></select><br/>自我介绍：<textarea rows="6" cols="20"></textarea><br/>选择你的文件<input type="file" name="myfile"><br/><input type="submit" value="登录"><input type="reset" value="重置">
</form>
</body>
</html>

表单提交注意事项:

action 属性设置提交的服务器地址/资源
method 属性设置提交的方式 GET(默认值)或 POST
表单提交的时候，数据没有发送给服务器的三种情况：
(1)表单某个元素项(比如 text,password)没有 name 属性值
(2)单选、复选（下拉列表中的 option 标签）都需要添加 value 属性，以便发送给服务器中
(3)表单项不在提交的 form 标签

GET 请求的特点是：
(1)浏览器地址栏中的地址是：请求参数的格式是 action 属性[+?+请求参数] ：
name=value&name=valuehttp://localhost:63342/html/ok.htmlusername=jack&pwd1=111&pwd2=11&sport=lq&sport=sq&gender= male&city=bj&myfile=
(2)不安全
(3)它有数据长度的限制(不同的浏览器规定不一样，一般 2k)

POST 请求的特点是：
(1) 浏览器地址栏中只有 action 属性值, 提交的数据是携带在 http 请求中, 不会展示在地
址栏
(2) 相对于 GET 请求要安全
(3) 理论上没有数据长度的限制

结语

通过本文的深度解析，相信大家对HTML在Java Web开发中的应用有了更加全面的认识。掌握HTML不仅是成为一名优秀Java Web开发者的前提，也是构建美观、易用、兼容性强的网页的关键。然而，HTML的学习之路还很长，我们需要在实践中不断探索和积累，将理论知识转化为实际生产力。
随着Web技术的不断发展，HTML也在不断更新迭代，新的特性和标签层出不穷。作为一名开发者，我们要保持学习的热情，紧跟技术潮流，不断提升自己的技能水平。最后，祝愿大家在Java Web开发的道路上越走越远，创造更多优秀的网页应用！

文章目录

前言

🌍一.B/S 软件开发架构简述

🌍二.HTML 介绍

❄️2.1 官方文档

❄️2.2 网页的组成

❄️2.3 HTML 是什么

❄️2.4html基本结构

🌍三.HTML标签

1.html 的标签/元素-说明

2. html 标签注意事项和细节

3.font 字体标签

4.标题标签

5.超链接标签

6.图像标签

7.表格标签

8.div标签

9.p标签

10.span标签

11.表单

结语

相关文章：