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

在这里插入图片描述

文章目录

    • 前言
    • 🌍一.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 软件开发架构简述

  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:abc@163.com? 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开发的道路上越走越远，创造更多优秀的网页应用！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/67034.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

点亮一个esp32 的led

点亮一个esp32 的led

最近入了一个ESP32 兄弟们&#xff0c;这玩意还可以&#xff0c;买来肯定是给它点亮啊对吧 我就是点灯侠&#x1f387; &#x1f62d;千万不要不接天线啊&#xff0c;不然你会一直找不到你的wifi 1.点灯第一步你得有IDE Arduino 就是这个绿东西 可是怎么下载安装呢&#xff…
阅读更多...
CI/CD 流水线

CI/CD 流水线

CI/CD 流水线 CI 与 CD 的边界CI 持续集成CD&#xff08;持续交付/持续部署&#xff09;自动化流程示例&#xff1a; Jenkins 引入到 CI/CD 流程在本地或服务器上安装 Jenkins。配置 Jenkins 环境流程设计CI 阶段&#xff1a;Jenkins 流水线实现CD 阶段&#xff1a;Jenkins 流水…
阅读更多...
HTB：Bastion[WriteUP]

HTB：Bastion[WriteUP]

目录 连接至HTB服务器并启动靶机 信息收集 使用rustscan对靶机TCP端口进行开放扫描 将靶机TCP开放端口号提取并保存 使用nmap对靶机TCP开放端口进行脚本、服务扫描 使用nmap对靶机TCP开放端口进行漏洞、系统扫描 使用nmap对靶机常用UDP端口进行开放扫描 使用enum4linux…
阅读更多...
Springboot——钉钉（站内）实现登录第三方应用

Springboot——钉钉（站内）实现登录第三方应用

文章目录 前言准备1、创建钉钉应用&#xff0c;并开放网页应用2、配置网页应用各项参数发布版本 前端改造后端逻辑1、获取应用免登录 Access_token2、通过免登录 Access_token 和 Auth_Code 获取对应登录人信息 注意事项 前言 PC端的钉钉中工作台&#xff0c;增加第三方应用&a…
阅读更多...
马斯克的Grok-2 Beta APP在苹果应用商店上限了，Grok-2安装尝鲜使用教程

马斯克的Grok-2 Beta APP在苹果应用商店上限了，Grok-2安装尝鲜使用教程

马斯克的Grok-2 Beta APP 已经上线苹果商城了&#xff0c;移动端的Grok挺好用的&#xff01;无需登录即可使用&#xff01; &#xff08;文末有安装教程&#xff09; 实测之后&#xff0c;Grok-2 绘画方面个人感觉比GPT-4的绘画还要强一些。而且速度还挺快&#xff0c;可以多次…
阅读更多...
深入理解 C 语言中浮点型数据在内存中的存储

深入理解 C 语言中浮点型数据在内存中的存储

文章目录 一、浮点型数据存储格式&#xff08;IEEE 754 标准&#xff09;二、举例说明单精度浮点数存储过程三、绘图说明四、双精度浮点数存储示例&#xff08;以1.5为例&#xff09; 在 C 语言的世界里&#xff0c;数据类型丰富多样&#xff0c;而浮点型数据用于表示实数&…
阅读更多...
hutool糊涂工具通过注解设置excel宽度

hutool糊涂工具通过注解设置excel宽度

import java.lang.annotation.*;Documented Retention(RetentionPolicy.RUNTIME) Target({ElementType.METHOD, ElementType.FIELD, ElementType.PARAMETER}) public interface ExcelStyle {int width() default 0; }/*** 聊天记录*/ Data public class DialogContentInfo {/**…
阅读更多...
自定义日期转换配置

自定义日期转换配置

文章目录 1.日期问题出现原因以及解决方案概述1.图示2.三种解决方案概述1.对于表单数据 application/x-www-form-urlencoded2.对于JSON数据1.使用JsonFormat注解2.自定义Jackson日期转换配置 2.解决方案common-web-starter1.目录2.BaseController.java 使用InitBinder解决表单数…
阅读更多...
Ubuntu更改内核

Ubuntu更改内核

需求背景&#xff1a; 由于软件需要在较低版本或者指定版本才可以运行 版本&#xff1a; 配置文件&#xff1a; vi /etc/default/grub 启动界面&#xff1a; 可运行版本&#xff1a; 解决方案&#xff1a; 方案1、更改启动顺序 sudo vi /etc/default/grub 方案2、调整启动顺…
阅读更多...
Android系统定制APP开发_如何对应用进行系统签名

Android系统定制APP开发_如何对应用进行系统签名

前言 当项目开发需要使用系统级别权限或frame层某些api时&#xff0c;普通应用是无法使用的&#xff0c;需要在AndroidManifest中配置sharedUserId&#xff1a; AndroidManifest.xml中的android:sharedUserId“android.uid.system”&#xff0c;代表的意思是和系统相同的uid&a…
阅读更多...
解决idea中无法拖动tab标签页的问题

解决idea中无法拖动tab标签页的问题

1、按 Ctrl Alt S 打开设置&#xff0c;找到路径 File | Settings | Appearance & Behavior | Appearance 2、去掉勾选 Drag-and-drop with Alt pressed only 即可
阅读更多...
【芯片封测学习专栏 -- D2D 和 C2C 之间的区别】

【芯片封测学习专栏 -- D2D 和 C2C 之间的区别】

请阅读【嵌入式开发学习必备专栏 Cache | MMU | AMBA BUS | CoreSight | Trace32 | CoreLink | ARM GCC | CSH】 文章目录 OverviewD2D&#xff08;Die-to-Die&#xff09;互联D2D 定义D2D 特点D2D 使用场景 C2C&#xff08;Chip-to-Chip&#xff09;互联C2C 定义C2C 特点C2C 使…
阅读更多...
SQL美化器优化

SQL美化器优化

文章目录 1.目录2.代码 1.目录 2.代码 package com.sunxiansheng.mybatis.plus.inteceptor;import org.apache.ibatis.executor.statement.StatementHandler; import org.apache.ibatis.mapping.*; import org.apache.ibatis.plugin.*; import org.apache.ibatis.reflection.*…
阅读更多...
CC工具箱使用指南：【类Json文本转面要素】

CC工具箱使用指南：【类Json文本转面要素】

一、简介 有一些面要素是通过Json数据存储的&#xff0c;但有可能在某些转化过后&#xff0c;变成了文本信息存储在字段里&#xff0c;如下截图&#xff1a; 字段值中保存了完整的点坐标信息。 工具要做的是将这点坐标信息提取出来&#xff0c;创建成面要素。 二、工具参数介…
阅读更多...
英伟达Project Digits赋能医疗大模型：创新应用与未来展望

英伟达Project Digits赋能医疗大模型：创新应用与未来展望

英伟达Project Digits赋能医疗大模型&#xff1a;创新应用与未来展望 一、引言 1.1 研究背景与意义 在当今数字化时代&#xff0c;医疗行业作为关乎国计民生的关键领域&#xff0c;正面临着前所未有的挑战与机遇。一方面&#xff0c;传统医疗模式在应对海量医疗数据的处理、复…
阅读更多...
力扣 岛屿数量

力扣 岛屿数量

从某个点找&#xff0c;不断找相邻位置。 题目 岛屿中被“0”隔开后 &#xff0c;是每一小块状的“1”&#xff0c;本题在问有多少块。可以用dfs进行搜索&#xff0c;遍历每一个点&#xff0c;把每一个点的上下左右做搜索检测&#xff0c;当检测到就标记为“0”表示已访问过&a…
阅读更多...
An FPGA-based SoC System——RISC-V On PYNQ项目复现

An FPGA-based SoC System——RISC-V On PYNQ项目复现

本文参考&#xff1a; &#x1f449; 1️⃣ 原始工程 &#x1f449; 2️⃣ 原始工程复现教程 &#x1f449; 3️⃣ RISCV工具链安装教程 1.准备工作 &#x1f447;下面以LOCATION代表本地源存储库的安装目录&#xff0c;以home/xilinx代表在PYNQ-Z2开发板上的目录 ❗ 下载Vivad…
阅读更多...
Windows下调试Dify相关组件(2)--后端Api

Windows下调试Dify相关组件(2)--后端Api

1.部署依赖的服务&#xff08;代码最外层的docker目录&#xff09; 1.1 将middleware.env.example复制&#xff0c;并改名为middleware.env。 1.2 查看docker-compose.middleware.yaml&#xff0c;有5个服务 db&#xff1a;postgres数据库。 redis&#xff1a;redis缓存。 sa…
阅读更多...
CSS | CSS实现两栏布局（左边定宽 右边自适应，左右成比自适应）

CSS | CSS实现两栏布局（左边定宽 右边自适应，左右成比自适应）

目录 一、左边定宽 右边自适应 1.浮动 2.利用浮动margin 3.定位margin 4.flex布局 5.table 布局 二、左右成比自适应 1:1 1flex布局 table布局 1:2 flex布局 <div class"father"><div class"left">左边自适应</div><div class"r…
阅读更多...
Spring Framework 5.3.x源码构建 （jdk-1.8, gradle 7.5.1, idea2024.3）

Spring Framework 5.3.x源码构建 （jdk-1.8, gradle 7.5.1, idea2024.3）

1、下载jdk安装并配置环境变量&#xff08;自行百度&#xff09; https://www.oracle.com/java/technologies/downloads/#java8 2、下载spring-framework源码&#xff0c;切换分支到5.3.x https://github.com/spring-projects/spring-framework.git 备用地址 https://gitco…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023