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

JAVA EE(进阶)_HTML

article 2025/12/24 9:43:59

思如云烟，行若磐石。                                                  

                                                                                      ——陳長生.

 ❀主页：陳長生.-CSDN博客❀

📕上一篇：JAVA EE（进阶）_进阶的开端-CSDN博客

1.HTML

HTML（HyperText Markup Language）--超文本标记语言

由标签组成，可以进行网页的跳转操作

基础创建：

        由html标签，title标签，head标签，body标签组成

        html：用于定义网页中的内容及结构

        title：用来命名浏览器上方的信息列

                

        body：网页的内容

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body>
</html>

创建的快捷键：！+回车 /！+Tab

1.1标题标签

标题标签就如Word中的标题标签类似，Word中有标题1，标题2等等

Html中也有对应的h1,h2等

     <h1>标题1</h1>

     <h2>标题2</h2>

     <h3>标题3</h3>  

     <h4>标题4</h4>

     <h5>标题5</h5>

     <h6>标题6</h6>

1.2.图片标签

在网页中插入图片

<img src="" alt="">

<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.pVR4rdWmQnX04eLAdOEJYAHaN4?rs=1&pid=ImgDetMain" alt="玫瑰" title="玫瑰花"  width="100" height="200">

  • src：路径
  • alt：文本显示内容，（当图片错误时，会显示的内容）
  • title：当鼠标移动到图片的位置时，会显示的内容
  • width：宽度
  • height：高度

1.3.超链接


点击即跳转到其他页面

<a href="">_</a>

<a href="demo1.html">玫瑰图片链接</a>

  • href：链接
  • >：可命名链接名称

1.4.表格标签

可在浏览器中创建n行m列的表格

<table border="1" style="border-collapse:collapse">

        <tr>

            <td>第一行第一列</td>

            <td>第一行第二列</td>

            <td>第一行第三列</td>

        </tr>

        <tr>

            <td>第二行第一列</td>

            <td>第二行第二列</td>

            <td>第二行第三列</td>

        </tr>

</table>

  • border：表格
  • border：边框像素大小
  • style：边框样式
  • border-collapse:collapse：边框线合并
  • tr：行
  • td：列
  • 如果不想要边框线的话，直接删除style和border-collapse:collapse即可

1.5.表单标签

1.5.1.from标签

将内容合并在一块一起提交到某个页面

<form action=""></form>

  • action：表示要提到内容的目标路径

1.5.2.input标签

各种输入控件

<input type="">

  • type：input类型
1）文本框

<input type="text"     name="" id=""  placeholder="">

  • name：为类型，用于提交到后端
  • id：为唯一标识，用于提交到后端
  • placeholder：文本框中的灰色默认值
2）密码框

<input type="password" name="" id="" placeholder="">

  • name：为类型，用于提交到后端
  • id：为唯一标识，用于提交到后端
  • placeholder：文本框中的灰色默认值
3）单选框

<input type="checkbox" name="" id="" checked>

  • name：为类型，用于提交到后端
  • id：为唯一标识，用于提交到后端
  • checked：表示当前的单选框为默认选中状态
4）复选框

<input type="radio"    name="" id="" checked>

  • name：为类型，用于提交到后端
  • id：为唯一标识，用于提交到后端
  • checked：表示当前的复选宽为默认选中状态
5）普通按钮

<input type="button" value="" >

  • value：为按钮上显示的内容
6）提交按钮

<input type="submit">  

1.5.3.select标签

下拉列表框

<select name="" id="">

        <option value="">北京</option>

        <option value="">上海</option>

        <option value="">深圳</option>

 </select>

  • name：为类型，用于提交到后端
  • id：为唯一标识，用于提交到后端
  • option：表示当前选项的元素

1.5.4.textarea标签

可变化文本框

<textarea name="" id=""></textarea>

        

1.6.无语义标签

1.6.1.div

独占一行

<div></div>

不独占一行

1.6.2.span

<span></span>

1.7.练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body> <div><h1>用户注册</h1></div><div><table><tr><td>用户名</td><td><input type="text" placeholder="请输入用户名"></td></tr><tr><td>手机号</td><td><input type="text" placeholder="请输入手机号"></td></tr><tr><td>密码</td><td><input type="password" placeholder="请输入密码"></td></tr></table></div><div><input type="submit"> <span>已有账号</span><a href="#">登录</a></div></body>
</html>

相关文章：

JAVA EE(进阶)_HTML

思如云烟&#xff0c;行若磐石。 ——陳長生. ❀主页&#xff1a;陳長生.-CSDN博客❀ &#x1f4d5;上一篇&#xff1a;JAVA EE&#xff08;进阶&#xff09;_进阶的开端-CSDN博客 1.HTML HTML&#xff08;HyperText Mark…...

编程日记 2025/12/23 0:57:29

自定义类、元组、字典和结构体对比——AutoCAD C# 开发中建立不同对象之间的联系

以下是对它们的详细分析和对比&#xff1a; 1. 自定义类&#xff08;Class&#xff09; 优势 封装性强&#xff1a;可以定义字段、属性、方法和事件&#xff0c;实现复杂的行为和逻辑。继承与多态&#xff1a;支持继承体系&#xff0c;可通过接口或抽象类实现多态。引用类型…...

编程日记 2025/12/11 6:20:57

鸿蒙北向源码开发: 检查应用接口dts文件api规范性

开源鸿蒙5.0.2对应的api版本是14 5.0社区仓有工具检查接口规范性报告工具: interface/sdk-js/build-tools/api_check_plugin api_check_plugin是什么? 在解释api_check_plugin是什么之前得先知道 应用调用的api接口都是文件名后缀为.d.ts的文件,这些文件内部声明了arkts的a…...

编程日记 2025/12/20 10:14:39

谷歌 NotebookLM 即将推出 Sparks 视频概览：Gemini 与 Deep Research 加持，可生成 1 - 3 分钟 AI 视频

近期&#xff0c;谷歌旗下的 NotebookLM 即将推出一项令人瞩目的新功能 ——Sparks 视频概览。这一功能借助 Gemini 与 Deep Research 的强大能力&#xff0c;能够生成 1 - 3 分钟的 AI 视频&#xff0c;为用户带来全新的内容创作与信息获取体验。 NotebookLM&#xff1a;AI 笔…...

编程日记 2025/9/20 14:11:25

5月19日笔记

BGP的路由聚合 BGP&#xff08;Border Gateway Protocol&#xff0c;边界网关协议&#xff09;是互联网中用于在不同自治系统&#xff08;AS&#xff09;之间交换路由信息的一种协议。在BGP中&#xff0c;路由聚合是一种技术&#xff0c;它允许网络管理员通过减少路由表中冗余的…...

编程日记 2025/11/25 7:38:36

从基础到高级：网站反爬技术全景解析与第三方工具对比

网站反爬与用户行为检测实战指南：从基础防护到智能识别 在当今数据驱动的互联网时代，网站面临着日益复杂的爬虫攻击和恶意行为威胁。本文将系统性地介绍网站反爬与用户行为检测的技术体系，包括基本原理、防护策略、第三方组件选型以及真实案例分析，帮助开发者构建更加安全…...

编程日记 2025/12/2 8:16:23

Java面试实战：从Spring Boot到分布式缓存的深度探索

Java面试实战&#xff1a;从Spring Boot到分布式缓存的深度探索 场景介绍 在一家著名的互联网大厂&#xff0c;面试官老王正对求职者“水货程序员”明哥进行Java技术面试。明哥带着一点紧张和自信&#xff0c;迎接这场技术“拷问”。 第一轮&#xff1a;基础问题 老王&#…...

编程日记 2025/12/7 12:05:56

职坐标AIoT技能培训课程实战解析

职坐标AIoT技能培训课程以人工智能与物联网技术深度融合为核心&#xff0c;构建了“理论实战行业应用”三位一体的教学体系。课程体系覆盖Python编程基础、传感器数据采集、边缘计算开发、云端服务部署及智能硬件开发全链路&#xff0c;通过分层递进的知识模块帮助学员建立系统…...

编程日记 2025/12/23 1:04:58

pytorch小记（二十）：深入解析 PyTorch 的 `torch.randn_like`：原理、参数与实战示例

pytorch小记&#xff08;二十&#xff09;&#xff1a;深入解析 PyTorch 的 torch.randn_like&#xff1a;原理、参数与实战示例 一、函数签名与参数详解二、torch.randn_like vs torch.randn三、基础示例四、进阶用法与参数覆盖4.1 覆盖数据类型&#xff08;dtype&#xff09;…...

编程日记 2025/12/5 19:26:59

小结：网页性能优化

网页性能优化是提升用户体验、减少加载时间和提高资源利用率的关键。以下是针对网页生命周期和事件处理的性能优化技巧&#xff0c;结合代码示例&#xff0c;重点覆盖加载、渲染、事件处理和资源管理等方面。 1. 优化加载阶段 减少关键资源请求&#xff1a; 合并CSS/JS文件&a…...

编程日记 2025/12/21 23:18:47

8-游戏详情制作（Navigation组件）

1.1 需求 使用Navigation实现游戏主详情视图&#xff0c;从瀑布流容器中的游戏项&#xff08;游戏中心首页-游戏瀑布流列表&#xff09;点击游戏后进入游戏详情页&#xff0c;从游戏详情页可以返回游戏列表主页。 1.2 界面原型 从瀑布流组件进入&#xff1a; 游戏详情&#…...

编程日记 2025/12/20 14:27:49

Unity引擎源码-物理系统详解-其二

继续我们关于Unity的物理系统的源码阅读&#xff0c;不过这一次我们的目标是PhysX引擎——这个Unity写了一堆脚本来调用API的实际用C写成的底层物理引擎。 Github的地址如下&#xff1a;NVIDIA-Omniverse/PhysX: NVIDIA PhysX SDK (github.com) 下载后发现由三个文件组成&…...

编程日记 2025/12/22 13:00:39

1.3.3 数据共享、汇聚和使用中的安全目标

探索数据共享、汇聚与使用中的安全目标 在当今数字化时代&#xff0c;数据的价值愈发凸显&#xff0c;数据共享、汇聚与使用成为了推动业务发展、促进创新的重要环节。然而&#xff0c;在这一过程中&#xff0c;数据安全至关重要&#xff0c;我们需要明确并保障保密性、完整性…...

编程日记 2025/12/22 9:12:21

【Docker】Docker安装Redis

目录 1.下载镜像 1.1查看下载的镜像 2.创建挂载目录 3.创建容器并启动 4.测试连接 1.下载镜像 根据指令下载镜像文件 docker pull redis#上面指令是下载最新&#xff0c;如需下载指定版本可带版本号 docker pull redis:xxx 响应内容&#xff1a; 1.1查看下载的镜像 下载完…...

编程日记 2025/12/23 17:15:03

Oc语言学习 —— Foundation框架总结

1、NSString类 我们对一个NSString对象赋值的方法是直接将字符串常量赋给对象&#xff0c;例如&#xff1a;NSString *str "hello"; 因为我们的NSString是不可变的&#xff0c;所以我们只能通过一些方法来在我们原来的字符串后面追加或初始化我们的字符串来间接修改…...

编程日记 2025/12/22 9:09:52

react+html2canvas+jspdf将页面导出pdf

主要使用html2canvasjspdf 1.将前端页面导出为pdf 2.处理导出后图表的截断问题 export default function AIReport() {const handleExport async () > {try {// 需要导出的内容idconst element document.querySelector(#AI-REPORT-CONTAINER);if (!element) {message.err…...

编程日记 2025/12/21 1:13:16

LWIP的Socket接口

Socket接口简介 类似于文件操作的一种网络连接接口&#xff0c;通常将其称之为“套接字”。lwIP的Socket接口兼容BSD Socket接口&#xff0c;但只实现完整Socket的部分功能 netconn是对RAW的封装 Socket是对netconn的封装 SOCKET结构体 struct sockaddr { u8_t sa_len; /* 长…...

编程日记 2025/12/22 0:18:02

基于支持向量机（SVM）的P300检测分类

基于支持向量机&#xff08;SVM&#xff09;的P300检测分类MATLAB实现&#xff0c;包含数据预处理、特征提取和分类评估流程&#xff1a; %% P300检测分类完整流程&#xff08;SVM实现&#xff09; clc; clear; close all;%% 1. 数据加载与模拟生成&#xff08;实际应用需替换…...

编程日记 2025/12/19 23:12:51

Better Faster Large Language Models via Multi-token Prediction 原理

目录 模型结构&#xff1a; Memory-efficient implementation&#xff1a; 实验&#xff1a; 1. 在大规模模型上效果显著&#xff1a; 2. 在不同类型任务上的效果&#xff1a; 为什么MLP对效果有提升的几点猜测&#xff1a; 1. 并非所有token对生成质量的影响相同 2. 关…...

编程日记 2025/12/22 11:08:45

51c嵌入式※~合集7~Linux

我自己的原文哦~ https://blog.51cto.com/whaosoft/13926843 一、u-boot和bootloader~区别 Bootloader 比Bootloader从字面上来看就是启动加载的意思。用过电脑的都知道&#xff0c;windows开机时会首先加载bios&#xff0c;然后是系统内核&#xff0c;最后启动完毕。那…...

编程日记 2025/11/29 0:29:58

Spring的Validation，这是一套基于注解的权限校验框架

为了保证数据的正确性、完整性&#xff0c;作为一名后端开发工程师&#xff0c;不能仅仅依靠前端来校验数据&#xff0c;还需要对接口请求的参数进行后端的校验。 controller 全局异常处理器 在项目中添加一个全局异常处理器&#xff0c;处理校验异常 RestControllerAdvice p…...

编程日记 2025/12/22 9:08:13

MySQL - 如何突破单库性能瓶颈

数据库服务器硬件优化 我们来看看对数据库所在的服务器是如何进行优化的&#xff0c;服务器是数据库的宿主&#xff0c;其性能直接影响了数据库的性能&#xff0c;所以服务器的优化也是数据库优化的第一步。 数据库服务器通常是从 CPU、内存、磁盘三个角度进行硬件优化的&…...

编程日记 2025/12/22 9:11:28

基于 Vue 和 Node.js 实现图片上传功能：从前端到后端的完整实践

在开发一个社交分享平台时&#xff0c;图片上传功能是核心需求之一。本文将基于一个旅拍社交分享系统&#xff0c;详细解析其图片上传功能的实现原理和技术细节&#xff0c;包括前端处理、后端接收和数据库存储等环节。 1. 前端图片上传实现 在这个项目中&#xff0c;图片上传…...

编程日记 2025/12/20 15:19:38

go封装将所有数字类型转浮点型，可设置保留几位小数

封装转换方法 /* * * 将类型转浮点型&#xff0c;并保留小数 ToFloat(123, 2) ToFloat(3.5254, 0) */ func ToFloat(value interface{}, precision int) (float64, error) {var f float64var err errorswitch v : value.(type) {case float64:f vcase float32:f float64(v)c…...

编程日记 2025/8/19 5:27:54

Rust 学习笔记：关于 Vector 的练习题

Rust 学习笔记&#xff1a;关于 Vector 的练习题 Rust 学习笔记&#xff1a;关于 Vector 的练习题哪个调用会报错&#xff1f;以下代码能否通过编译&#xff1f;若能&#xff0c;输出是&#xff1f;以下代码能否通过编译&#xff1f;若能&#xff0c;输出是&#xff1f;以下代码…...

编程日记 2025/11/29 21:43:49

Linux 系统异常触发后自动重启配置指南

Linux 系统异常触发后自动重启配置指南 一、内核级自动重启配置 适用于内核崩溃&#xff08;Kernel Panic&#xff09;、硬件驱动故障等场景&#xff0c;通过 SysRq 和 Watchdog 实现快速恢复。 1. SysRq 强制重启 功能&#xff1a;通过触发内核崩溃或强制重启&#xff0c;绕…...

编程日记 2025/12/16 20:04:12

apisix透传客户端真实IP（real-ip插件）

文章目录 apisix透传客户端真实IP需求和背景apisix real-ip插件为什么需要 trusted_addresses&#xff1f;安全架构的最佳实践 示例场景apisix界面配置 apisix透传客户端真实IP 需求和背景 当 APISIX 前端有其他反向代理&#xff08;如 Nginx、HAProxy、云厂商的 LB&#xff…...

编程日记 2025/12/23 15:17:09

Oracle 数据库的默认隔离级别

Oracle 数据库的默认隔离级别 默认隔离级别&#xff1a;READ COMMITTED Oracle 默认使用 读已提交(READ COMMITTED) 隔离级别&#xff0c;这是大多数OLTP(在线事务处理)系统的标准选择。 官方文档 https://docs.oracle.com/en/database/oracle/oracle-database/19/cncpt/da…...

编程日记 2025/12/22 12:17:58

统计客户端使用情况，使用es存储数据，实现去重以及计数

这篇文件的重点在tshark、filebeat、和logstash。 需求&#xff1a;统计客户使用的客户端版本 实现工具&#xff1a;tshark 1.10.14&#xff0c;filebeat 8.17.0&#xff0c;logstash 8.17.0&#xff0c;elasticsearch 8.17.0&#xff0c;kibana 8.17.0 总体设计&#xff1a…...

编程日记 2025/10/28 4:52:30

代码随想录算法训练营第六十四天| 图论9—卡码网47. 参加科学大会，94. 城市间货物运输 I

每日被新算法方式轰炸的一天&#xff0c;今天是dijkstra&#xff08;堆优化版&#xff09;以及Bellman_ford &#xff0c;尝试理解中&#xff0c;属于是只能照着代码大概说一下在干嘛。 47. 参加科学大会 https://kamacoder.com/problempage.php?pid1047 dijkstra&#xff08…...

编程日记 2025/12/24 8:17:58