Bootstrap

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

在这里插入图片描述



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

👀 专栏:Javaweb学习👀

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

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

前言

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

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

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

在这里插入图片描述

  1. 前端开发技术工具包括三要素:HTML、CSS 和 JavaScript,还有很多高级的前端框架,比如bootstrap、jquery,VUE 等。
  2. 后端开发技术工具主要有:Net、JAVA、PHP, Go 等
  3. 数据库主流的三种关系型数据库: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 是什么

  1. HTML(HyperText Mark-up Language)即超文本标签语言(可以展示的内容类型很多)
  2. HTML 文本是由 HTML 标签组成的文本,可以包括文字、图形、动画、声音、表格、链接等
  3. 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>
  1. HTML 文件不需要编译,直接由浏览器进行解析执行
  2. 可以选择的浏览器,是你电脑安装有的浏览器, 如果没有安装这个浏览器,会报错

🌍三.HTML标签

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

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

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

标签使用细节:

  1. 标签不能交叉嵌套
  2. 标签必须正确关闭
  3. 注释不能嵌套
<!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:[email protected]? subject=hello">abc@163.com</a><br/>
</body>
</html>

6.图像标签

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

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

  1. 相对路径: . 表示当前文件所在的目录,.. 表示当前文件所在的上一级目录,文件名 : 表示当前文件所在目录的文件,相当于 ./文件名 ./ 可以省略.
  2. 绝对路径: 正确格式是: 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标签

  1. 标签可以把文档分割为独立的、不同的部分
  2. 是一个块级元素。它的内容自动地开始一个新行。
<!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标签

  1. 标签定义段落

  2. 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标签

  1. span 标签是内联元素,不像块级元素(如:div 标签、p 标签等)有换行的效果。
  2. 如果不对 span 应用样式,span 标签没有任何的显示效果
  3. 语法:内容
<!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>

表单提交注意事项:

  1. action 属性设置提交的服务器地址/资源

  2. method 属性设置提交的方式 GET(默认值)或 POST

  3. 表单提交的时候,数据没有发送给服务器的三种情况:
    (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开发的道路上越走越远,创造更多优秀的网页应用!

;