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.rhkb.cn/news/520.html

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

相关文章

iostat命令详解

iostat命令详解

iostat 命令是 I/O statistics(输入/输出统计)的缩写&#xff0c;用来报告系统的 CPU 统计信息和块设备及其分区的 IO 统计信息。iostat 是 sysstat 工具集的一个工具&#xff0c;在 Ubuntu 系统中默认是不带 iostat 命令的&#xff0c;需要自行安装&#xff1a; $ sudo apt in…
阅读更多...
【数据库系统概论】数据库恢复技术

【数据库系统概论】数据库恢复技术

目录 11.1 事务的基本概念 事务的定义 事务的开始与结束 事务的ACID特性 破坏ACID特性的因素 11.2 数据库恢复概述 11.3 故障的种类 1. 事务内部的故障 2. 系统故障 3. 介质故障 4. 计算机病毒 11.4 恢复的实现技术 如何建立冗余数据 数据转储 登记日志文件 11…
阅读更多...
通过Android Studio修改第三方jar包并重新生成jar包

通过Android Studio修改第三方jar包并重新生成jar包

最近接手了来自公司其他同事的一个Unity项目，里面有一个封装的jar包要改动一下，无奈关于这个jar包的原工程文件丢失了，于是自己动手来修改下jar包，并做下记录。 一、导入第三方jar包 1、新建项目EditJarDemo(项目名随便取) 2、新建libs文件夹，把你要修改的third.jar 复制…
阅读更多...
2025新年源码免费送

2025新年源码免费送

2025很开门很开门的源码免费传递。不需要馒头就能获取4套大开门源码。 听泉偷宝&#xff0c;又进来偷我源码啦&#x1f44a;&#x1f44a;&#x1f44a;。欢迎偷源码 &#x1f525;&#x1f525;&#x1f525; 获取免费源码以及更多源码&#xff0c;可以私信联系我 我们常常…
阅读更多...
数据分析思维（十一）：应用篇——用数据分析解决问题

数据分析思维（十一）：应用篇——用数据分析解决问题

此前篇章&#xff1a; 数据分析思维&#xff08;一&#xff09;&#xff1a;业务指标&#xff08;数据分析并非只是简单三板斧&#xff09; 数据分析思维&#xff08;二&#xff09;&#xff1a;分析方法——5W2H分析方法、逻辑树分析方法、行业分析方法 数据分析思维&#…
阅读更多...
基于Arduino平台，使用ESP32S3微处理器控制Servo时，内置Servo库无法使用

基于Arduino平台，使用ESP32S3微处理器控制Servo时，内置Servo库无法使用

基于Arduino平台&#xff0c;使用ESP32S3微处理器驱动Servo时&#xff0c;报以下问题&#xff1a; *WARNING: library Servo claims to run on avr, megaavr, sam, samd, nrf52, stm32f4, mbed, mbed_nano, mbed_portenta, mbed_rp2040, renesas, renesas_portenta, renesas_un…
阅读更多...
Linux ： Linux环境开发工具vim / gcc / makefile / gdb / git的使用

Linux ： Linux环境开发工具vim / gcc / makefile / gdb / git的使用

Linux环境开发工具的使用 一、操作系统的生态二、程序下载安装&#xff08;一&#xff09;程序安装方式&#xff08;二&#xff09;包管理器 yum / apt 运行原理 三、文本编辑器 vim&#xff08;一&#xff09;认识vim 下的操作模式&#xff08;二&#xff09;命令模式常用的快…
阅读更多...
HTML5 网站模板

HTML5 网站模板

HTML5 网站模板 参考 HTML5 Website Templates
阅读更多...
怎么抓取ios 移动app的https请求？

怎么抓取ios 移动app的https请求？

怎么抓取IOS应用程序里面的https&#xff1f; 这个涉及到2个问题 1.电脑怎么抓到IOS手机流量&#xff1f; 2.HTTPS怎么解密&#xff1f; 部分app可以使用代理抓包的方式&#xff0c;但是正式点的app用代理抓包是抓不到的&#xff0c;例如pin检测&#xff0c;证书双向校验等…
阅读更多...
记录一下vue2项目优化，虚拟列表vue-virtual-scroll-list处理10万条数据

记录一下vue2项目优化，虚拟列表vue-virtual-scroll-list处理10万条数据

文章目录 封装BrandPickerVirtual.vue组件页面使用组件属性 select下拉接口一次性返回10万条数据&#xff0c;页面卡死&#xff0c;如何优化&#xff1f;&#xff1f;这里使用 分页 虚拟列表&#xff08;vue-virtual-scroll-list&#xff09;&#xff0c;去模拟一个下拉的内容…
阅读更多...
【芯片封测学习专栏 -- 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 使…
阅读更多...
使用网页版Jupyter Notebook和VScode打开.ipynb文件

使用网页版Jupyter Notebook和VScode打开.ipynb文件

目录 正文 1、网页版Jupyter Notebook查看 2、VScode查看 因为总是忘记查看文件的网址&#xff0c;收藏了但分类众多每次都找不到……当个记录吧&#xff08;/捂脸哭&#xff09;&#xff01; 正文 此处以gitub中的某个仓库为例&#xff1a; https://github.com/INM-6/mu…
阅读更多...
Qt监控系统远程网络登录/请求设备列表/服务器查看实时流/回放视频/验证码请求

Qt监控系统远程网络登录/请求设备列表/服务器查看实时流/回放视频/验证码请求

一、前言说明 这几个功能是近期定制的功能&#xff0c;也非常具有代表性&#xff0c;核心就是之前登录和设备信息都是在本地&#xff0c;存放在数据库中&#xff0c;数据库可以是本地或者远程的&#xff0c;现在需要改成通过网络API请求的方式&#xff0c;现在很多的服务器很强…
阅读更多...
企业级PHP异步RabbitMQ协程版客户端 2.0 正式发布

企业级PHP异步RabbitMQ协程版客户端 2.0 正式发布

概述 workerman/rabbitmq 是一个异步RabbitMQ客户端&#xff0c;使用AMQP协议。 RabbitMQ是一个基于AMQP&#xff08;高级消息队列协议&#xff09;实现的开源消息组件&#xff0c;它主要用于在分布式系统中存储和转发消息。RabbitMQ由高性能、高可用以及高扩展性出名的Erlan…
阅读更多...
百度视频搜索架构演进

百度视频搜索架构演进

导读 随着信息技术的迅猛发展&#xff0c;搜索引擎作为人们获取信息的主要途径&#xff0c;其背后的技术架构也在不断演进。本文详细阐述了近年来视频搜索排序框架的重大变革&#xff0c;特别是在大模型技术需求驱动下&#xff0c;如何从传统的多阶段级联框架逐步演变为更加高…
阅读更多...
31_搭建Redis分片集群

31_搭建Redis分片集群

Redis的主从复制模式和哨兵模式可以解决高可用、高并发读的问题。但是依然有两个问题没有解决：海量数据存储问题、高并发写的问题。由于数据量过大，单个master复制集难以承担，因此需要对多个复制集进行集群，形成水平扩展每个复制集只负责存储整个数据集的一部分，这就是Red…
阅读更多...
如何用 ESP32-CAM 做一个实时视频流服务器

如何用 ESP32-CAM 做一个实时视频流服务器

文章目录 ESP32-CAM 概述ESP32-S 处理器内存Camera 模块MicroSD 卡槽天线板载 LED 和闪光灯其他数据手册和原理图ESP32-CAM 功耗 ESP32-CAM 引脚参考引脚排列GPIO 引脚哪些 GPIO 可以安全使用&#xff1f;GPIO 0 引脚MicroSD 卡引脚 ESP32-CAM 的烧录方式使用 ESP32-CAM-MB 编程…
阅读更多...
LS1046+XILINX XDMA PCIE调通

LS1046+XILINX XDMA PCIE调通

欢迎点赞收藏&#xff0c;欢迎私下讨论技术&#xff0c;分享技术 硬件平台 &#xff1a;NXP LS1046 XILINX FPGA 软件平台&#xff1a;LINUX 4.19.68 buildroot LS1046 PEX3 接 XILINX FPGA&#xff0c;linux使用designware的PCI主控制器。下载XILINX DMA驱动&#xff0c;解…
阅读更多...
golang常用标准库

golang常用标准库

输入与输出-fmt包时间与日期-time包命令行参数解析-flag包日志-log包IO操作-os包IO操作-bufio包与ioutil包strconv包模板-template包http包contextjson/xmlreflect反射官方标准库 输入与输出-fmt包 输入与输出 常用输出函数 Print、Printf、Println&#xff1a;直接输出内容 Sp…
阅读更多...
【物联网原理与运用】知识点总结（上）

【物联网原理与运用】知识点总结（上）

目录 名词解释汇总 第一章 物联网概述 1.1物联网的基本概念及演进 1.2 物联网的内涵 1.3 物联网的特性——泛在性 1.4 物联网的基本特征与属性&#xff08;五大功能域&#xff09; 1.5 物联网的体系结构 1.6 物联网的关键技术 1.7 物联网的应用领域 第二章 感知与识别技术 2.1 …
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023