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

【Java Web】HTML 标签 总结

news 文章来源：https://blog.csdn.net/m0_73381672/article/details/132849672 2024/12/28 12:24:27

目录

1.HTML

2.标签

   1. head  标签

        1.图标

        2.样式居中

   2. body 标签

1.注释  ：     

2.加载图片

3.加载视频

效果

4.区域

效果

5.上下跳转，页面跳转

效果

 6.表格

效果

7.有序列表，无序列表

效果

8.登录

效果

9.按钮

10.多选框 单选框

效果

11.文本框

效果

12.下拉列表

效果

1.HTML

概念：HTML（Hypertext Markup Language ) 超文本标记语言。

HTML 不是一种编程语言，而是一种标记语言。
Html主要用来描述网页中所需要的组件，例如：文本框、表格、图片、视频等等，也对网页进行排版。
HTML的源文件，称为“网页”，通常以.html或者.htm为结尾。
可以使用任意文本编辑器编辑，需要使用浏览器执行。

访问：https://www.w3school.com.cn/

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!-- write your code -->
</body>
</html>

2.标签

   1. head  标签

<head>

      头部标签...

 </head>

        1.图标

<link rel="icon" href="icon.png" type="image/x-icon"> <!-- 图标 -->

例如

        2.样式居中

<link href="style01.css" rel="stylesheet">  是需要额外写.css代码的

         或者

<body style="text-align: center"> <!-- 也是样式居中 -->write code...
</body>

   2. body 标签

<body>

      body标签...

</body>

1.注释  ：     

 <!-- 注释内容· -->

2.加载图片

<img width="303" src="image.png" alt="加载不出来时显示这段话"> <!-- 加载图片 -->

3.加载视频

<iframe src=""> </iframe>
例如
<iframe src="//player.bilibili.com/player.html?aid=873301164&bvid=BV1YN4y1Q7L7&cid=1261762527&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>HTML</title><link rel="icon" href="icon.png" type="image/x-icon">
</head>
<body><!-- 注释 --><img width="303" src="image.png" alt="asddd"> <!-- 加载图片 --><!-- 加载视频 --><iframe src="//player.bilibili.com/player.html?aid=873301164&bvid=BV1YN4y1Q7L7&cid=1261762527&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</body>
</html>

效果

 

4.区域

<div></div> 分区

<span></span> 每个区域中分几部分 

<p></p> 文章分段

<br> 换行

<hr> 分割线

<h1>我是一级标题</h1>

<h2>我是二级标题</h2>

<h3>我是三级标题<h3>

...

<p>我是正文</p>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!-- write your code --><div>我是第一个区域</div><div><span>我是第二个区域的第一部分</span><span>我是第二个区域的第二部分</span></div><p>我是第一段文字</p><p>我是第二段文字</p><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><p>我是正文</p>
</body>
</html>

效果

5.上下跳转，页面跳转

<a href="https://www.bilibili.com/">点击小破站</a>

<a href="#test">点击到达底部</a>

<div id="test">底部</div>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!-- write your code --><a href="#test">点击到达底部</a><br><a href="https://www.bilibili.com/">点击小破站</a><br><img width="800" src="image.png" alt="加载中"><img width="800" src="image.png" alt="加载中"><img width="800" src="image.png" alt="加载中"><img width="800" src="image.png" alt="加载中"><img width="800" src="image.png" alt="加载中"><img width="800" src="image.png" alt="加载中"><img width="800" src="image.png" alt="加载中"><img width="800" src="image.png" alt="加载中"><img width="800" src="image.png" alt="加载中"><div id="test">底部</div>
</body>
</html>

效果

 6.表格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!-- write your code --><!-- 表格 --><table border><thead> <!-- 表头 --><tr><th>学号</th><th>姓名</th><th>性别</th></tr></thead><tbody> <!-- 表体 --><tr><td>0001</td><td>张伟</td><td>男</td></tr><tr><td>0001</td><td>张伟</td><td>男</td></tr></tbody></table>
</body>
</html>

效果

7.有序列表，无序列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!-- ul无序列表 --><ul><li>一号</li><li>二号</li><li>三号</li><li>四号</li><li>五号</li></ul><!-- ol有序列表 --><ol><li>一号</li><li>二号</li><li>三号</li><li>四号</li><li>五号</li></ol>
</body>
</html>

效果

8.登录

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body style="text-align: center">   <!-- 居中 --><h2>登录网站</h2>  <!-- 二号标题 --><div><label>账号：<input type="text" placeholder="Username..."></label></div><div><label>密码：<input type="password" placeholder="password..."></label></div><div><label><input type="checkbox">我同意...</label></div><div><br>  <!-- 换行--><button> 取消 </button><button> 登录 </button></div><div><a href="https://www.bilibili.com/">忘记密码</a> <!-- 跳转到改密码页面 --></div><div><label>日期：<input type="date" placeholder="Username..."></label></div><div><label>日期：<input type="datetime-local"></label></div><div><label>文件:<input type="file"></label></div></body>
</html>

效果

9.按钮

<div><br><button> 取消 </button><button> 登录 </button>
</div>

                                    

10.多选框 单选框

<label><!-- 单选框 --><input type="checkbox">  我同意本网站的隐私政策
</label>
<label><br> <br><!-- 多选框 --><input type="radio" name="role">学生
</label>
<label><input type="radio" name="role">老师
</label>

效果

                      

11.文本框

<div><label><h2>文本框</h2><textarea placeholder="说点什么..." cols="60"rows="10"></textarea></label>
</div>

效果

12.下拉列表

<!-- 创建一个下拉列表 --><label>登录身份：<select><option>教师</option><option>学生</option><option>管理员</option></select></label>

效果

                             

 

相关文章：

【Java Web】HTML 标签 总结

目录 1.HTML 2.标签 1. head 标签 1.图标 2.样式居中 2. body 标签 1.注释 &#xff1a; 2.加载图片 3.加载视频 效果 4.区域 效果 5.上下跳转&#xff0c;页面跳转 效果 6.表格 效果 7.有序列表&#xff0c;无序列表 效果 8.登录 效果 9.按钮 10.多选框…...

编程日记 2023/9/13 21:15:23

前端面试的话术集锦第 4 篇：进阶篇下

这是记录前端面试的话术集锦第四篇博文——进阶篇下，我会不断更新该博文。❗❗❗ 1. 浏览器Eventloop和Node中的有什么区别 众所周知JS是⻔⾮阻塞单线程语⾔，因为在最初JS就是为了和浏览器交互⽽诞⽣的。 如果JS是⻔多线程的语⾔话，我们在多个线程中处理DOM就可能会发⽣问…...

编程日记 2023/9/13 21:13:21

mmap详解

想写一篇文章&#xff0c;详细的介绍一下mmap&#xff0c;主要是原理、用法、mmap泄露来进行介绍。说到mmap&#xff0c;首先得从堆空间说起。 申请堆空间 其实&#xff0c;不管是 32 位系统还是 64 位系统&#xff0c;内核都会维护一个变量 brk&#xff0c;指向堆的顶部&…...

编程日记 2023/9/13 21:11:19

项目02—基于keepalived+mysqlrouter+gtid半同步复制的MySQL集群

文章目录 一.项目介绍1.拓扑图2.详细介绍 二.前期准备1.项目环境2.IP划分 三. 项目步骤1.ansible部署软件环境1.1 安装ansible环境1.2 建立免密通道1.3 ansible批量部署软件1.4 统一5台mysql服务器的数据 2.配置基于GTID的半同步主从复制2.1 在master上安装配置半同步的插件,再…...

编程日记 2023/9/13 21:09:18

【EI征稿】第二届机械电子工程与人工智能国际学术会议（MEAI 2023）

第二届机械电子工程与人工智能国际学术会议&#xff08;MEAI 2023&#xff09; The 2nd International Conference on Mechatronic Engineering and Artificial Intelligence 2023年第二届机械电子工程与人工智能国际学术会议&#xff08;MEAI 2023&#xff09;计划将于2023年…...

编程日记 2023/9/13 21:08:17

ros2 学习launch文件组织工程 yaml配置文件

简单范例 功能描述 使用launch文件&#xff0c;统一管理工程&#xff0c;实现img转点云&#xff0c;发送到img_pt的topic&#xff0c;然后用reg_pcl节点进行subscribe&#xff0c;进行点云配准处理&#xff0c;输出融合后的点云到map_pt的topic。最后由rviz2进行点云展示。 …...

编程日记 2023/9/13 21:04:11

奇舞周刊第 505 期：实践指南-前端性能提升 270%!

记得点击文章末尾的“ 阅读原文 ”查看哟~ 下面先一起看下本期周刊 摘要 吧~ 奇舞推荐 ■ ■ ■ 实践指南-前端性能提升 270% 当我们疲于开发一个接一个的需求时&#xff0c;很容易忘记去关注网站的性能&#xff0c;到了某一个节点&#xff0c;猛地发现&#xff0c;随着越来越多…...

编程日记 2023/9/13 21:03:10

【C++】泛型编程 | 函数模板 | 类模板

一、泛型编程 泛型编程是啥&#xff1f; 编写一种一般化的、可通用的算法出来&#xff0c;是代码复用的一种手段。 类似写一个模板出来&#xff0c;不同的情况&#xff0c;我们都可以往这个模板上去套。 举个例子&#xff1a; void Swap(int& a, int& b) {int tmp …...

编程日记 2023/9/13 21:02:09

web前端——简单的网页布局案列

✨博主&#xff1a;命运之光 &#x1f338;专栏&#xff1a;Python星辰秘典 &#x1f433;专栏&#xff1a;web开发&#xff08;简单好用又好看&#xff09; ❤️专栏&#xff1a;Java经典程序设计 ☀️博主的其他文章&#xff1a;点击进入博主的主页 目录 问题背景 解决样例 …...

编程日记 2023/9/13 21:00:08

线程安全问题(3)--- wait()，notify()

前言 在多线程的环境下&#xff0c;我们常常要协调多个线程之间的执行顺序&#xff0c;而为了实现这一点&#xff0c;Java提供了一些方法来帮助我们完成这一点。 一&#xff0c;wait() 作用&#xff1a; 使当前线程进入等待状态 释放当前的锁 (即该方法必须和 synchrnized 关键…...

编程日记 2023/9/13 20:58:06

【Android知识笔记】进程通信（一）

一、Android Framework 用到了哪些 IPC 方式 Linux 的 IPC 方式有： 管道Socket共享内存信号信号量消息队列管道通信 管道是基于pipefs文件系统实现的，也就是多个进程通过对同一个文件进行读写来实现进程间通信。半双工，单向的，通过 pipe(fds) 系统函数调用可得到一对文件描…...

编程日记 2023/9/13 20:56:04

存储空间压缩6倍 ，多点DMALL零售SaaS场景降本实践

&#x1f9d1;‍&#x1f4bc; 作者简介 冯光普&#xff1a;多点 DMALL 数据库团队负责人&#xff0c;负责数据库稳定性建设与 DB PaaS 平台建设&#xff0c;在多活数据库架构、数据同步方案等方面拥有丰富经验。 杨家鑫&#xff1a;多点高级 DBA&#xff0c;擅长故障分析与性能…...

编程日记 2023/9/13 20:54:02

BGP路由属性

任何一条BGP路由都拥有多个路径属性&#xff08;Path Attributes&#xff09;&#xff0c;当路由器通告BGP路由给它的对等体时&#xff0c;该路由将会携带多个路径属性&#xff0c;这些属性描述了BGP路由的各项特征&#xff0c;同时在某些场景下也会影响BGP路由优选的决策。 一…...

编程日记 2023/9/13 20:53:01

Java面试常用函数

1. charAt() 方法用于返回字符串指定索引处的字符。索引范围为从 0 到 length() - 1。 map.getOrDefault(num, 0) :如果map存在num这个key&#xff0c;则返回num对应的value&#xff0c;否则返回0. Arrays.sort(nums); 数组排序 Arrays.asList("a","b",&q…...

编程日记 2023/9/13 20:48:57

linux编译curl库（支持https）

openssl下载和编译 https://www.openssl.org/source/old/ 解压 tar -xvf openssl-3.0.1.tar.gz cd openssl-3.0.1/配置 ./config如果是编译静态库加入 -fPIC no-shared 如果指定安装路径，使用 --prefix=/usr/local/openssl/选项指定特定目录 编译和安装 make sodu make i…...

编程日记 2023/9/13 20:47:56

Ei Scopus检索 | 2024年第三届能源与环境工程国际会议(CFEEE 2024)

会议简介 Brief Introduction 2024年第三届能源与环境工程国际会议(CFEEE 2024) 会议时间&#xff1a;2024年9月1日-3日 召开地点&#xff1a;新西兰奥克兰 大会官网&#xff1a;https://www.cfeee.org/ 2024年第三届能源与环境工程国际会议(CFEEE 2024) 将于2024年12月12日至1…...

编程日记 2023/9/13 20:46:55

thinkphp6（tp6）创建定时任务

使用 thinkphp6 框架中提供的命令行形式实现定时任务 一、创建一个自定义命令类文件 php think make:command Hello 会生成一个 app\command\Hello.php 命令行指令类&#xff0c;我们修改内容如下&#xff1a; <?php declare (strict_types1);namespace app\command;use …...

编程日记 2023/9/13 20:44:53

【学习笔记】C++ 中 static 关键字的作用

目录 前言static 作用在变量上static 作用在全局变量上static 作用在局部变量上static 作用在成员变量上 static 作用在函数上static 作用在函数上static 作用在成员函数上 前言 在 C/C 中&#xff0c;关键字 static 在不同的应用场景下&#xff0c;有不同的作用&#xff0c;这…...

编程日记 2023/9/13 20:43:52

攻防世界-web-file_include

1. 题目描述 打开界面&#xff0c;如下代码&#xff1a; 代码很简单&#xff0c;从参数中获取到filename然后include这个filename 2. 思路分析 2.1 首先参考常见做法&#xff0c;将参数设置为php://filter/readconvert.base64-encode/resourceflag.php&#xff0c;看是否有…...

编程日记 2023/9/13 20:42:51

C语言的函数指针、指针函数， 函数数组

函数指针 是指向函数的指针&#xff0c;它允许您在程序运行时动态选择要调用的函数。函数指针可以像普通变量一样传递、存储和使用&#xff0c;这使得它们在许多编程场景中非常有用&#xff0c;如回调函数、函数表、插件架构等。 以下是一个简单的例子来说明函数指针的概念&a…...

编程日记 2023/9/13 20:38:47

笔记本开启WiFi

笔记本开启WiFi 为了节省流量&#xff1a;笔记本开启WiFi 条件 支持热点的电脑&#xff1b;我的是华硕飞行堡垒7。 注意事项 笔记本连接公司网络&#xff0c;公司网络通常都在监管下的&#xff0c;手机连接wifi后&#xff0c;刷抖音、购物网站&#xff0c;公司后台会捕获你…...

编程日记 2023/9/13 20:36:45

力扣第37天----第322题、第279题

力扣第37天----第322题、第279题 文章目录 力扣第37天----第322题、第279题一、第322题--零钱兑换二、第279题--组合总和 Ⅳ 一、第322题–零钱兑换 ​ 整体思路&#xff0c;跟前面的几道完全背包差不多&#xff0c;就不具体解释了。有一些细节要注意&#xff0c;见代码注释。…...

编程日记 2023/9/13 20:35:44

【ArcGIS Pro二次开发】(67)：处理面要素空洞

这个一个简单的小功能。 有些面要素可能会存在空洞&#xff0c;这个工具的目的就是获取面要素的空洞&#xff0c;或者去除空洞获取要素的边界。 这个功能其实在之前做拓扑功能的时候就已经有了&#xff0c;这次只是单独把它提取出来。因为有时候会单独用到这个功能。 一、要实…...

编程日记 2023/9/13 20:33:42

FPGA-结合协议时序实现UART收发器（一）：UART协议、架构规划、框图

FPGA-结合协议时序实现UART收发器&#xff08;一&#xff09;&#xff1a;UART协议、架构规划、框图 记录FPGA的UART学习笔记&#xff0c;以及一些细节处理&#xff0c;主要参考奇哥fpga学习资料。 本次UART主要采用计数器方法实现&#xff0c;实现uart的稳定性发送和接收功能…...

编程日记 2023/9/13 20:32:41

web请求cookie中expires总结

用意 cookie 有失效日期 "expires"&#xff0c;如果还没有过失效期&#xff0c;即使重新启动电脑&#xff0c;cookie 仍然不会丢失 注意&#xff1a;如果没有指定 expires 值&#xff0c;那么在关闭浏览器时&#xff0c;cookie 即失效。 设置 如果cookie存储时间大…...

编程日记 2023/9/13 20:31:40

如何学习Java核心知识

Java作为一门广泛应用于软件开发的编程语言&#xff0c;拥有着强大的生态系统和丰富的资源&#xff0c;是值得投入时间和精力去学习的。以下是一些建议&#xff0c;帮助你系统地学习Java核心知识。 1. 学习Java语言基础&#xff1a; 学习Java语言基础是学习Java的第一步&…...

编程日记 2023/9/13 20:30:38

【AWS】如何用SSH连接aws上的EC2实例（虚拟机）？

目录 0.环境 1.连接结果示例 2.SSH连接思路 3.具体步骤 1&#xff09;安装并运行ssh服务 2&#xff09;启动ssh服务 3&#xff09;在AWS上找到正在运行的EC2实例&#xff0c;并且根据提供的ssh连接语句进行连接 0.环境 windows 11 64位 前提&#xff1a; 有aws账户&…...

编程日记 2023/9/13 20:28:36

数据结构——看完这篇保证你学会队列

数据结构——队列 一、队列的概念二、队列的实现方式三、队列所需要的接口四、接口的详细实现4.1初始化4.2销毁4.3入队4.5出队4.6获取队头元素4.7获取队尾元素4.8获取队列元素个数4.9判空 五、完整代码5.1Queue.h5.2Queue.c5.3test.c 一、队列的概念 队列&#xff1a;只允许在…...

编程日记 2023/9/13 20:27:34

开源免费缺陷管理工具：对比6款

在软件开发环境中&#xff0c;缺陷管理工具是关键的基础设施。例如&#xff0c;在构建一个电商平台时&#xff0c;这些工具能系统地跟踪从发现到解决的各个问题阶段。它们支持多用户协作&#xff0c;实现信息和状态的实时共享。通过数据分析&#xff0c;这些工具还能帮助团队识…...

编程日记 2023/9/13 20:24:30

Weblogic反序列化漏洞

文章目录 1、搭建环境2、漏洞特征3、漏洞利用1)获取用户名密码2)后台上传shell 4、检测工具 1、搭建环境 漏洞环境基于vulhub搭建–进入weak_password的docker环境 sudo docker-compose up -d拉取靶场 2、漏洞特征 404特征Weblogic常用端口&#xff1a;7001 3、漏洞利用…...

编程日记 2023/9/13 20:23:29

wordpress主题 ux/seo销售是做什么的

在获取创建页面数据后需要在编辑页面调取之前提交的数据&#xff0c;在使用这个插件后发现无法动态赋值&#xff0c;查找资料后发现需要先销毁实例&#xff0c;$(’#target’).distpicker(‘destroy’); 第一步 引入js文件<script src"js/distpicker.data.js">…...

编程日记 2024/12/28 9:48:59

模板网站的网站如何打开里面的其他网站/世界互联网峰会

二、什么是循环依赖 循环依赖直白点就是发生在两个类&#xff0c;你引用我&#xff0c;我引用你的状态&#xff0c;如图&#xff1a; 三、如果不依赖于Spring自己解决循环依赖如何解决 以上图为例&#xff0c;假设&#xff0c;我们能够创建完成AService之后&#xff0c;放置到…...

编程日记 2024/12/28 6:43:52

怀柔做网站的吗/查询网

Linus Torvalds在新西兰奥克兰举办的开源会议Linux.conf.au Conference上称&#xff0c;“某些人以为我是好人&#xff0c;在发现不是之后感到震惊。我不是一个好人。我也不在乎你们。我在乎的是技术和内核——那才是对我重要的 东西。”Torvalds随后写了二封邮件进一步阐述他对…...

编程日记 2024/12/28 6:14:35

供别人采集的网站怎么做/市场营销毕业论文5000字

先解释一下为什么要用腾讯地图实现自动定位&#xff1f; uniapp可以通过uni.getLocation获取用户定位&#xff0c;但是获取到的定位没有中文地址&#xff0c;所以我们需要通过第三方SDK例如高德地图或者腾讯地图来获取中文定位信息。 之所以使用腾讯地图&#xff0c;因为开发的…...

编程日记 2024/12/28 4:30:40

成都网站建设推荐安徽秒搜科技/苏州搜索引擎优化

1. 要先引用jquery 2. ichecker分好多主题&#xff0c;每个主题带好几种颜色&#xff0c;在配置的时候最好指定一下。 比如引入了square主题的blue颜色演示&#xff0c;配置项中checkboxClass就写icheckbox_square-blue&#xff0c;好像写成icheckbox_square也是可以的。不过本…...

编程日记 2024/12/28 3:24:43

做石膏选图形的网站/免费发布推广平台

历史版本 C#作为微软2000年以后.NET平台开发的当家语言&#xff0c;发展至今具有17年的历史&#xff0c;语言本身具有丰富的特性&#xff0c;微软对其更新支持也十分支持。微软将C#提交给标准组织ECMA&#xff0c;C# 5.0目前是ECMA发布的最新规范&#xff0c;C# 6.0还是草案阶段…...

编程日记 2024/12/27 21:38:47