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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

第三十六章 Spring之假如让你来写MVC——拦截器篇

第三十六章 Spring之假如让你来写MVC——拦截器篇

Spring源码阅读目录 第一部分——IOC篇 第一章 Spring之最熟悉的陌生人——IOC 第二章 Spring之假如让你来写IOC容器——加载资源篇 第三章 Spring之假如让你来写IOC容器——解析配置文件篇 第四章 Spring之假如让你来写IOC容器——XML配置文件篇 第五章 Spring之假如让你来写…
阅读更多...
IDEA中创建maven项目

IDEA中创建maven项目

1. IDEA中创建maven项目 在IDEA中创建Maven项目&#xff0c;前提是已经安装配置好Maven环境。如还未配置安装Maven的&#xff0c;请先下载安装。如何下载安装&#xff0c;可参考我另外篇文章&#xff1a;maven的下载与安装教程本篇教程是以创建基于servlet的JavaWeb项目为例子&…
阅读更多...
MACPA：fMRI连接性分析的新工具

MACPA：fMRI连接性分析的新工具

摘要 不同脑区的共同激活为它们之间的功能交互或连接提供了一个有价值的衡量指标。元分析连接模型(MACM)是一种经过充分验证的研究某一特定区域共激活模式的方法&#xff0c;该方法对基于任务的功能磁共振成像(task-fMRI)数据进行种子点(seed-based)元分析。虽然MACM是一种强大…
阅读更多...
React中createRoot函数原理解读——Element对象与Fiber对象、FiberRootNode与HostRootNode

React中createRoot函数原理解读——Element对象与Fiber对象、FiberRootNode与HostRootNode

【2024最新版】React18 核心源码分析教程&#xff08;全61集&#xff09; Element对象与Fiber对象 在 React 中&#xff0c;Element 对象 和 Fiber 对象 是核心概念&#xff0c;用于实现 React 的高效渲染和更新机制。以下是它们的详细解读&#xff1a; 1. Element 对象 定…
阅读更多...
【C】初阶数据结构1 -- 时间复杂度与空间复杂度

【C】初阶数据结构1 -- 时间复杂度与空间复杂度

目录 1 数据结构 2 算法 3 复杂度 1&#xff09; 时间复杂度 2&#xff09; 空间复杂度 4 提升算法能力的两点建议 1&#xff09; 画图 2&#xff09; 多实践&#xff0c;多上手写代码 重点一 数据结构的定义 1 数据结构 数据结构是计算机存储、组织数据的…
阅读更多...
TypeScript Jest 单元测试 搭建

TypeScript Jest 单元测试 搭建

NPM TypeScript 项目搭建 创建目录 mkdir mockprojectcd mockproject初始化NPM项目 npm init -y安装TypeScript npm i -D typescript使用VSCode 打开项目 创建TS配置文件tsconfig.json {"compilerOptions": {"target": "es5","module&…
阅读更多...
一.项目课题 ＜基于TCP的文件传输协议实现＞

一.项目课题 ＜基于TCP的文件传输协议实现＞

客户端代码 需要cJSON.c文件和cJSON.h文件 在这里插入代码片#include "myheadth.h" #include "myfun.h"#define TIME 10 int sockfd; void heartbeat(int signum) {cJSON* root cJSON_CreateObject();cJSON_AddStringToObject(root,"request"…
阅读更多...
C#调用OpenCvSharp实现图像的膨胀和腐蚀

C#调用OpenCvSharp实现图像的膨胀和腐蚀

图像膨胀和腐蚀操作属于图像处理中常用的形态学操作&#xff0c;其原理都是采用特定小矩形&#xff08;核矩形&#xff09;&#xff0c;将其中心位置与图像中的每个像素对齐后&#xff0c;对重合位置的像素执行特定处理后&#xff0c;将处理结果保存到中心位置对应的像素处&…
阅读更多...
新活动平台建设历程与架构演进

新活动平台建设历程与架构演进

01 前言 历时近两年的重新设计和迭代重构&#xff0c;用户技术中心的新活动平台建设bilibili活动中台终于落地完成&#xff01;并迎来了里程碑时刻 —— 接过新老迭代的历史交接棒&#xff0c;从内到外、从开发到搭建实现全面升级&#xff0c;开启了活动生产工业化新时代&#…
阅读更多...
一个好用的C++数据库操作库：OTL

一个好用的C++数据库操作库：OTL

目录 1.简介 2.OTL库的核心类 3.OTL使用 4.使用OTL时注意事项 4.1.多线程初始化 4.2.OTL支持连接池 4.3.大字段的读取方式 4.4.指定数据库类型 4.5.异常处理 5.下载地址 6.总结 1.简介 OTL&#xff08;Oracle, ODBC and DB2-CLI Template Library&#xff09;是一个…
阅读更多...
高级生化大纲

高级生化大纲

一&#xff0c;蛋白质化学&#xff1a; 蛋白质分离是生物化学和分子生物学研究中的一项基本技术&#xff0c;用于根据蛋白质的物理和化学特性将其从混合物中分离出来。 1. 离心分离法 离心分离法利用离心力来分离不同质量或密度的颗粒和分子。 差速离心&#xff1a;通过逐…
阅读更多...
linux网络 | http结尾、理解长连接短链接与cookie

linux网络 | http结尾、理解长连接短链接与cookie

前言&#xff1a;本节是http章节的最后一部分&#xff0c;主要解释一些小概念。讲解到了HTTP的方法&#xff0c;表单&#xff0c; 重定向等等。 现在废话不多说&#xff0c; 开始我们的学习吧。 ps&#xff1a;本节内容都是概念&#xff0c; 知道就行&#xff0c; 友友们放心观…
阅读更多...
金融项目实战 03|JMeter脚本实现手工接口测试

金融项目实战 03|JMeter脚本实现手工接口测试

目录 一、环境说明 1、项目环境搭建 2、Mock说明 二、构造测试数据 1、通过系统页面构造 2、通过接口构造 3、通过数据库构造【推荐】 4、案例&#xff1a;构造借款业务数据 三、JMeter执行接口测试用例 1、获取图片验证码、获取短信验证码 2、注册脚本 3、登录脚本…
阅读更多...
点赞系统设计（微服务）

点赞系统设计（微服务）

点赞业务是一个常见的社交功能&#xff0c;它允许用户对其他用户的内容&#xff08;如帖子、评论、图片等&#xff09;表示喜欢或支持。在设计点赞业务时&#xff0c;需要考虑以下几个方面&#xff1a; 一、业务需求 点赞业务需要满足以下特性&#xff1a; 通用&#xff1a;…
阅读更多...
网络原理一＞UDP协议详解

网络原理一＞UDP协议详解

UDP和TCP都是应用层中的重要协议&#xff0c;如果做基础架构开发&#xff0c;会用得多一些。 这一篇我们先简单聊一下的UDP TCP格式呈现&#xff1a; 我们知道UDP是一种无连接&#xff0c;面向数据报&#xff0c;全双工&#xff0c;不可靠传输特性的网络协议。 基本格式如图…
阅读更多...
时空笔记：CBEngine（微观交通模拟引擎）

时空笔记：CBEngine（微观交通模拟引擎）

CBEngine 是一个微观交通模拟引擎&#xff0c;可以支持城市规模的道路网络交通模拟。CBEngine 能够快速模拟拥有数千个交叉路口和数十万辆车辆的道路网络交通。 以下内容基本翻译自CBEngine — CBLab 1.0.0 documentation 1 模拟演示 1.0 模拟演示结构 config.cfg 定义了 roa…
阅读更多...
金融项目实战 04|JMeter实现自动化脚本接口测试及持续集成

金融项目实战 04|JMeter实现自动化脚本接口测试及持续集成

目录 一、⾃动化测试理论 二、自动化脚本 1、添加断言 1️⃣注册、登录 2️⃣认证、充值、开户、投资 2、可重复执行&#xff1a;清除测试数据脚本按指定顺序执行 1️⃣如何可以做到可重复执⾏&#xff1f; 2️⃣清除测试数据&#xff1a;连接数据库setup线程组 ①明确…
阅读更多...
20250112面试鸭特训营第20天

20250112面试鸭特训营第20天

更多特训营笔记详见个人主页【面试鸭特训营】专栏 250112 1. TCP 和 UDP 有什么区别&#xff1f; 特性TCPUDP连接方式面向连接&#xff08;需要建立连接&#xff09;无连接&#xff08;无需建立连接&#xff09;可靠性可靠的&#xff0c;提供确认、重传机制不可靠&#xff0c…
阅读更多...
导出文件，能够导出但是文件打不开

导出文件，能够导出但是文件打不开

背景&#xff1a; 在项目开发中&#xff0c;对于列表的查询&#xff0c;而后会有导出功能&#xff0c;这里导出的是一个excell表格。实现了两种&#xff0c;1.导出的文件&#xff0c;命名是前端传输过去的&#xff1b;2.导出的文件&#xff0c;命名是根据后端返回的文件名获取的…
阅读更多...
马斯克的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;可以多次…
阅读更多...
最新文章

Copyright @ 2022~2023