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

JavaWeb——HTML

article 2026/3/29 20:16:32

一、什么是HTML

HTML(HyperText Markup Language)：超文本标记语言

超文本：超越了文本的限制，比普通文本更强大。除了文字信息还可以定义图片，音频，视频等。
标记语言：由标签构成的语言
- HTML语言都是预定义好的。例如：使用<a>展示超链接，使用<img>展示图片，<video>展示视频。
- HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

二、HTML基础语法

HTML基本结构

<html><head><title>标题</title></head><body>  填写内容</body>
</html>

HTML标签不区分大小写
HTML标签属性值单双引号都可以
HTML语法松散

图片标签：<img src="..." width="-" height="-">

src：指定图像的url（绝对路径 / 相对路径）
width：图像的宽度（像素 / 相对于父元素的百分比）
height：图像的高度（像素 / 相对于父元素的百分比）

<html><head><title>HTML 快速入门</title></head><body><h1>Hello HTML</h1><img src="1.jpg"/> <!-- 等价于<img src="1.jpg></img> --></body>
</html>

标题标签：<h1> - <h6>

<h1>111111111111</h1>
<h2>111111111111</h2>
<h3>111111111111</h3>
<h4>111111111111</h4>
<h5>111111111111</h5>
<h6>111111111111</h6>

h1为一级标题，字体也是最大的； h6为六级标题，字体是最小的。

水平线标签：<hr>

布局标签：<span>

一个在开发网页时大量用到没有语义的布局标签。

超链接标签：<a href="..." target="..."></a>

href指定资源访问的url
target：指定在何处打开资源链接
- _self：默认值，在当前页面打开
- _blank：在新的空白页面处打开

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>document</title>
</head>
<body><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a><hr>
</body>
</html>

视频标签：<vedio src="..." controls="..." width="..." height="...">

src：视频的url
controls：显示播放控件
width：播放器的宽度
height：播放器的高度

音频标签：<audio>

src：音频的url
controls：显示播放控件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>document</title>
</head>
<body><!-- 正文 --><!-- 视频 --><video src="video/1.mp4" controls width="950px"></video><!-- 音频 --><audio src="audio/1.mp3" controls></audio><hr>
</body>
</html>

段落标签：<p>

换行标签：<br>

文本加粗标签：<b>/<strong>

表格标签：

<table>：定义表格整体，可以包裹多个<tr>
- border：规定表格边框的宽度
- width：规定表格的宽度
- cellspacing：规定单元之间的空间
<tr>：表格的行，可以包裹多个<td>
<td>：表格单元格(普通)，可以包裹内容，如果是表头单元格可以替换为<th>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-表格</title><style>td {text-align: center; /* 单元格内容居中展示 */}</style>
</head>
<body><table border="1px" cellspacing="0"  width="600px"><tr><th>序号</th><th>品牌Logo</th><th>品牌名称</th><th>企业名称</th></tr><tr><td>1</td><td> <img src="img/huawei.jpg" width="100px"> </td><td>华为</td><td>华为技术有限公司</td></tr><tr><td>2</td><td> <img src="img/alibaba.jpg"  width="100px"> </td><td>阿里</td><td>阿里巴巴集团控股有限公司</td></tr></table></body>
</html>

表单标签：<form>在网页中主要负责数据采集功能，如注册、登录等数据采集。

表单项：不同类型的input元素、下拉列表、文本域等
- <input>：定义表单项，通过type属性控制输入形式
- <select>：定义下拉列表
- <textarea>：定义文本域
属性：
- action：规定当提交表单时向何处发送表单数据,URL
- method：规定用于发送表单数据的方式，GET、POST等

<body><!-- form表单属性: action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面method: 表单的提交方式 .get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值post: 在消息体(请求体)中传递的, 参数大小无限制的.-->   <form action="" method="get">用户名: <input type="text" name="username">年龄: <input type="text" name="age"><input type="submit" value="提交"></form></body>

表单输入类型：

type取值	描述
text	默认值，定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
date / time / datetime-local	定义日期/时间/日期时间
number	定义数字输入框
email	定义邮件输入框
hidden	定义隐藏域
submit / reset / button	定义提交按钮/充值按钮/可点击按钮

<body><!-- value: 表单项提交的值 -->
<form action="" method="post">姓名: <input type="text" name="name"> <br><br>密码: <input type="password" name="password"> <br><br> 性别: <input type="radio" name="gender" value="1"> 男<label><input type="radio" name="gender" value="2"> 女 </label> <br><br>爱好: <label><input type="checkbox" name="hobby" value="java"> java </label><label><input type="checkbox" name="hobby" value="game"> game </label><label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>图像: <input type="file" name="image">  <br><br>生日: <input type="date" name="birthday"> <br><br>时间: <input type="time" name="time"> <br><br>日期时间: <input type="datetime-local" name="datetime"> <br><br>邮箱: <input type="email" name="email"> <br><br>年龄: <input type="number" name="age"> <br><br>学历: <select name="degree"><option value="">----------- 请选择 -----------</option><option value="1">大专</option><option value="2">本科</option><option value="3">硕士</option><option value="4">博士</option></select>  <br><br>描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br><input type="hidden" name="id" value="1"><!-- 表单常见按钮 --><input type="button" value="按钮"><input type="reset" value="重置"> <input type="submit" value="提交">   <br>
</form></body>

JavaWeb——HTML

一、什么是HTML HTML(HyperText Markup Language)：超文本标记语言超文本：超越了文本的限制，比普通文本更强大。除了文字信息还可以定义图片，音频，视频等。标记语言：由标签构成的语言 HTML语言都是预定义好…...

编程日记 2026/3/22 17:37:54

Spring DIIoC

一.IoC 1.简介什么是IoC？IoC，全称 Inversion of Control，控制反转。IoC是Spring的核心思想，Spring是⼀个“控制反转”的容器。如果我们需要一个对象，正常来说我们是通过new一个对象，这个时候我们依赖的…...

编程日记 2026/3/28 0:06:18

【前端基础】Day 2 CSS层叠样式表

目录 1.CSS简历 2.CSS 基础选择器 2.1标签选择器 2.2类选择器 2.3 id选择器 2.4通配符选择器 2.5总结 3.CSS字体属性字体属性总结 4.CSS文本属性 4.1颜色 4.2对齐文本 4.3装饰文本 4.4文本缩进 4.5行间距 4.6文本属性总结 5.CSS的引入方式 5.1内部样式表 …...

编程日记 2026/3/28 12:47:58

建易WordPress

建易WordPress是一家专业的WordPress建站服务提供商，专注于为企业和个人提供一站式的WordPress网站建设、维护、托管、运营推广以及搜索引擎优化(SEO)服务。服务内容 1. 网站建设提供模板建站和定制开发两种服务，满足不同客户的需求。模板建站价格为…...

编程日记 2026/3/25 23:56:42

计算机毕业设计SpringBoot+Vue.js汽车资讯网站(源码+文档+PPT+讲解)

温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 作者简介：Java领…...

编程日记 2026/3/29 12:54:57

nuxt常用组件库html-validator、@nuxtjs/i18n、@nuxt/image、@unocss/nuxt使用解析

html-validator 主要用于自动验证nuxt服务器呈现的HTML(SSR和SSG)，以检测可能导致水合错误的HTML常见问题，有助于减少水合错误，检测常见的可访问性错误。安装 npx nuxilatest module add html-validator配置若自动更新nuxt.config.ts配置文…...

编程日记 2026/3/28 18:36:28

Leetcode-最大矩形（单调栈）

一、题目描述给定一个仅包含 0 和 1 、大小为 rows x cols 的二维二进制矩阵，找出只包含 1 的最大矩形，并返回其面积。输入：matrix [["1","0","1","0","0"],["1","0&…...

编程日记 2026/3/25 17:17:10

Vue核心知识：动态路由实现完整方案

在Vue中实现动态路由，并结合后端接口和数据库表设计，是一个复杂的项目，需要多个技术栈和步骤的配合。以下将详细描述整个实现过程，包括数据库设计、后端接口设计、前端路由配置以及如何实现动态路由的功能。目录一、需求分析二…...

编程日记 2026/3/26 7:43:21

【Docker】使用Docker搭建-MySQL数据库服务

零、更换Docker镜像源因为国内现在封锁了Docker默认拉取镜像的站点（DockerHub），而且国内大部分Docker镜像站已全部下线，导致现在很多朋友在拉取镜像的时候会出现无法拉取的现象，这时候就需要进行更换Docker镜像源。可…...

编程日记 2026/3/28 6:08:00

DHCP配置和地址

DHCP：动态主机配置协议 DHCP系统组成 DHCP报文结构 DHCP报文类型 DHCP工作流程 DHCP租期更新 DHCP重绑定自动保留IP 租期设置建议 IP地址释放 DHCP地址池 DHCP配置 DHCP接口地址池配置 DHCP全局地址池配置...

编程日记 2026/3/26 8:03:54

基于trl复现DeepSeek-R1的GRPO训练过程

1. 引入 huggingface开发了强化学习训练Transformer的库trl（参考3），借助这个trl，可以用来做GRPO的强化学习训练。魔搭ModelScope社区的文章（参考2）给出了基于Qwen基座模型Qwen2.5-0.5B-Instruct&#xff0…...

编程日记 2026/3/28 6:07:58

常用的 pip 命令

pip 是 Python 的包管理工具，可用于安装、卸载、更新和管理 Python 包。以下是一些常用的 pip 命令： 1. 安装包安装最新版本的包 pip install package_namepackage_name 是你要安装的 Python 包的名称，例如 pip install requests 可以安装…...

编程日记 2026/3/28 18:12:38

基于C#的CANoe CLR Adapter开发指南

一、引言 CANoe 是一款广泛应用于汽车电子开发和测试的工具，它支持多种编程接口，方便开发者进行自定义扩展。CANoe CLR Adapter 允许我们使用 C# 语言与 CANoe 进行交互，充分利用 C# 的强大功能和丰富的类库。本文将详细介绍如何基于 C# 进行…...

编程日记 2026/3/25 3:45:27

eMMC安全简介

1. 引言术语“信息安全”涵盖多种不同的设计特性。一般而言， 信息安全是指通过实践防止信息遭受未经授权的访问、使用、披露、中断、篡改、检查、记录或销毁。信息安全的三大核心目标为机密性（Confidentiality）、完整性（Integr…...

编程日记 2026/3/28 18:32:00

从零开始用react + tailwindcss + express + mongodb实现一个聊天程序(六) 导航栏和个人信息设置

1.导航栏（navbar） 在components下面创建NavBar.jsx import { MessageSquare,Settings,User,LogOut} from "lucide-react" import {Link} from "react-router-dom" import { useAuthStore } from "../store/useAuthStore&qu…...

编程日记 2026/3/25 18:56:06

c#实现modbus rtu定时采集数据

以下是使用C#实现Modbus RTU定时采集数据的完整代码示例，包含定时任务、数据采集和异常处理： csharp 复制 using System; using System.IO.Ports; using System.Timers;public class ModbusRtuCollector : IDisposable {private readonly SerialPort _serialPort;private …...

编程日记 2026/1/19 5:10:35

【Python 语法】Python 数据结构

线性结构（Linear Structures）1. 顺序存储列表（List）元组（Tuple）字符串（String） 2. 线性存储栈（Stack）队列（Queue）双端队列&#xff08…...

编程日记 2025/9/16 4:19:14

数据库MySQL，在终端输入后，提示不是内部命令等

【解决问题】mysql提示不是内部或外部命令，也不是可运行的程序一般这种问题是因为没有在系统变量里面添加MySQL的可执行路径以下是添加可执行路径的方法： 第一步：winR输入services.msc 然后找到MySQL，右击属性并复制MySQL的可执…...

编程日记 2026/3/28 9:38:46

docker和containerd从TLS harbor拉取镜像

私有镜像仓库配置了自签名证书，https访问，好处是不需要处理免费证书和付费证书带来的证书文件变更，证书文件变更后需要重启服务，自签名证书需要将一套客户端证书存放在/etc/docker/cert.d目录下，或者/etc/containerd/c…...

编程日记 2025/12/15 7:45:52

《从0到1：用Python在鸿蒙系统开发安防图像分类AI功能》

在人工智能与移动应用深度融合的当下，类目标签AI功能成为众多行业提升效率和用户体验的关键技术。本文聚焦于HarmonyOS NEXT API 12及以上版本，以图像分类在智能家居安防领域的应用为例，为开发者详细阐述如何利用Python开发类目标签AI功能，助力鸿蒙技术在该领域的创新应用。…...

编程日记 2026/1/1 0:52:01

C语言生成二维码

1. 效果 2. 需要的代码（QRCode） qrcode.cqrcode.h 代码 3. 代码 #include <stdio.h> #include "qrcode.h"int main() {//拓展编码SetConsoleOutputCP(437);QRCode qrcode;uint8_t qrcodeBytes[qrcode_getBufferSize(3)];qrcode_initT…...

编程日记 2026/3/25 10:24:52

Spring Boot 消息队列（以RabbitMQ为例）

文章目录 RabbitMQ 简介与安装1. RabbitMQ 简介2. RabbitMQ 安装 Spring Boot 集成 RabbitMQ1. 创建 Spring Boot 项目2. 配置 RabbitMQ3. 定义消息队列和交换机4. 发送消息5. 接收消息6. 测试消息发送和接收 RabbitMQ 简介与安装 1. RabbitMQ 简介 RabbitMQ 是一个开源的消息…...

编程日记 2025/12/14 15:10:45

[Web 安全] PHP 反序列化漏洞 —— POP 链构造思路

关注这个专栏的其他相关笔记：[Web 安全] 反序列化漏洞 - 学习笔记-CSDN博客 0x01：什么是 POP 链？ POP 链（Payload On Purpose Chain）是一种利用 PHP 中的魔法方法进行多次跳转以获取敏感数据的技术。它通常出现在 CTF…...

编程日记 2026/3/28 1:05:50

商城源码的框架

商城源码的框架通常是基于某种Web开发框架或者电子商务平台来构建的。以下是一些常见的商城源码框架： WooCommerce：基于WordPress的电子商务插件，适用于小型到中型的在线商店。 Magento：一个功能强大和灵活的开源电子商务平台&am…...

编程日记 2025/12/17 15:26:13

记录深度学习中有用的终端命令

1 查看 CUDA 版本如果你安装了 CUDA 开发工具包，你可以使用 nvcc 命令来查看 CUDA 的版本。打开终端（或命令提示符），运行： nvcc --version 2. 监控 GPU 状态使用 nvidia-smi 命令，nvidia-smi 是一个…...

编程日记 2025/12/17 22:13:05

深度探索推理新境界：DeepSeek-R1如何用“自学”让AI更聪明？

今天我们要聊从1月初火到现在的AI模型——DeepSeek-R1。它就像一个“自学成材的学霸”，不用老师手把手教，就能在数学、编程、逻辑推理等领域大显身手！仔细阅读了深度求索发表的R1论文，发现它不仅揭秘了它的成长秘籍，还…...

编程日记 2026/3/28 14:47:11

2025春新生培训数据结构（树，图）

教学目标： 1，清楚什么是树和图，了解基本概念，并且理解其应用场景 2，掌握一种建图（树）方法 3，掌握图的dfs和树的前中后序遍历例题与习题 2025NENU新生培训（树&#…...

编程日记 2026/3/26 1:32:44

keil主题（vscode风格）

#修改global.prop文件，重新打开keil即可 # Keil uVision Global Properties File # This file is used to customize the appearance of the editor# Editor Font editor.font.nameConsolas editor.font.size10 editor.font.style0# Editor Colors editor.backgro…...

编程日记 2026/2/28 22:20:01

使用Hydra进行AI项目的动态配置管理

引言：机器学习中的超参数调优挑战在机器学习领域，超参数调优是决定模型性能的关键环节。不同的模型架构，如神经网络中的层数、节点数，决策树中的最大深度、最小样本分割数等；以及各种训练相关的超参数，像学习率、优化器类型、批量大小等，其取值的选择对最终模型的效果…...

编程日记 2026/3/25 15:15:27

低代码与开发框架的一些整合[3]

1.基本说明审批流程是企业内部运营的运行流程，与业务板块进行关联，在企业数智化过程中启动业务串联的作用，与AI业务模型及业务agent整合后，将大大提升企业的运行效率以及降低运营风险。近期对开源的近40个携带流程平台的项目进…...

编程日记 2026/3/22 18:12:41

一、什么是HTML

二、HTML基础语法

相关文章：