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

【JavaWeb】HTML常用标签

news 2026/2/4 22:01:53

HTML标签结构

HTML语言主要都是由标签构成的。

标签名 在 <> 中  如<body>

标签大部分成对出现，代表开始和结束 如 <body>标签中的内容</body>

少部分单个出现，叫单标签 </br> 代表换行

标签中可以加属性，多个属性之间使用空格隔开

HTML文件结构

<html><head><title>Document</title></head><body></body></html>

<html> </html> 是整个html文件的顶层标签(根标签)

<head> </head> 整个页面的属性

<title> </title> 页面的标题

<body> </body> 页面的内容 

HTML常见标签

注释标签

    <!--  --><!-- 上面这个标签就是注释 --><!-- 编译器中按 Ctrl + / 快速生成 --><!-- 在浏览器查看源码时可以看到注释 -->

标题标签

    <h1>一级标题</h1><h2>二级标题</h2><!-- 总共有六级标题 -->

  

段落标签

    <p>一个p标签之间就是一个段落</p><p>这是另外一个段落</p>

 

换行标签

    一个p标签之间就是一个段落</br>换行了，使用这个比<br>更为标准

 

格式化标签

    <b>加粗</b><strong>这也可以加粗</strong></br><i>倾斜</i><em>这也可以倾斜</em></br><del>删除线</del><s>这也是删除线</s></br><ins>下划线</ins><u>这也是下划线</u>

 

图片标签

    <!-- 测试图片标签 --><!-- src 图片的路径 --><!-- 路径可以是相对路径，也可以是绝对路径  表示方法都一样 --><!-- alt 当图片不能正确显示的时候显示alt中的内容 --><!-- width  图片的大小(只设置width 长和宽会按比例缩放) --><!-- border 图片的边框 --><!-- title 鼠标悬停出来的文字 --><!-- 属性可以有多个，之间用空格或回车分隔 --><img src="picture1.png" alt="宇航员" width="500px" border="5px"title="宇航员">

超链接标签

    <!-- a 超链接 点击后可以跳转到那个界面 --><!-- >< 中间的文字会显示到网页上 --><a href="https://www.bilibili.com/">点我跳到b站</a><!-- 点击目录中的html文件 --><a href="Test2.html">点我跳到Test2</a><!-- # 用这个符号占位 --><a href="#">我是一个空链接</a><!-- 内容还可以是文件，这样就可以下载 --><a href="picture1.png">点我查看宇航员图片</a><a href="picture1.7z">点我下载压缩包</a><!-- 链接中加图片 图片=链接 --><a href="https://www.bilibili.com/"><img src="picture1.png" width="100px"></a><!-- 点击链接后会生成一个新的标签页，而不是覆盖 --><a href="https://www.bilibili.com/" target="_blank">点我增加新的标签页</a>

 

表格标签

    <!-- 表格标签 --><!-- table 整个表格的开始和结束 --><!-- 表格中可以设置边框的属性，一般用CSS来设置 --><table align="ceter" border="1" cellpadding="20" cellspacing="0" width="500" height="500"><!-- tr 表示一行 --><tr><!-- th 表示表头中的一个单元格 --><th>姓名</th><th>学号</th></tr><tr><!-- td 表示一个单元格 --><td>张三</td><td>10001</td></tr><tr><td>李四</td><td>10002</td></tr><tr><td>王五</td><td>10003</td></tr></table>

 

列表标签

    <!-- 列表标签 --><!-- ul unordered list 无序列表 --><ul><!-- li 列表项 --><li>C语言</li><li>Java</li><li>大学物理</li><li>高等数学</li></ul><!-- ol ordered list 有序列表 --><ol><li>C语言</li><li>Java</li><li>大学物理</li><li>高等数学</li></ol><!-- dl 自定义列表 --><dl><!-- dt 小标题 --><dt>课程</dt><!-- dd 列表项 --><dd>C语言</dd><dd>Java</dd><dd>大学物理</dd><dd>高等数学</dd></dl>

  

表单标签

表单标签是用户输入的重要途径.

input标签

    <!-- 表单标签 --><!-- text 输入文本 --><input type="text"><br/><!-- password 输入密码 --><input type="password"><br/><!-- radio 单选框(默认可以多选) --><!-- name 必须相同才能实现多选一的效果 --><!-- checked 默认初始值选哪个 --><input type="radio" name="sex"> 男<input type="radio" name="sex" checked="checked"> 女<br/><!-- checkbox 多选框 --><input type="checkbox"> A<input type="checkbox"> B<input type="checkbox"> C<input type="checkbox"> D<br/><input type="button" value="这是个按钮"onclick="alert('按了按钮的结果')"><br/><input type="file"><br/>

 

 

 

select标签

     <!-- select 选择 --><select><!-- option 选择的选项 --><option>请选择年份</option><option>2001</option><option>2002</option><option>2003</option><option>2004</option><option>2005</option></select>

  

textarea标签

    <textarea cols="30" rows="10">写点内容</textarea>

 

无语义标签

    <div>div标签独占一行div标签除了表单标签不能模拟之外，剩下所有的标签基本上都可以模拟<span>aaa</span><span>bbb</span></div><div>另一个div<span>ccc</span><span>ddd</span></div>

有什么错评论区指出。希望可以帮到你。 

相关文章：

【JavaWeb】HTML常用标签

HTML标签结构 HTML语言主要都是由标签构成的。 标签名 在 <> 中 如<body> 标签大部分成对出现&#xff0c;代表开始和结束 如 <body>标签中的内容</body> 少部分单个出现&#xff0c;叫单标签 </br> 代表换行 标签中可以加属性&#xff0c;多个…...

编程日记 2023/5/31 13:52:25

python编程：查找某个文件夹下所有的文件，包括子文件加下的所有文件，读取指定类型的文件

目录 一、实现要求 二、代码实现 三、效果测试 一、实现要求 1、在电脑上有一个文件夹&#xff0c;该文件夹下面还有子文件夹&#xff0c;具体层级不清楚&#xff0c;需要实现将该文件夹下所有的文件路径读取出来&#xff1b; 2、在1的基础上&#xff0c;只需读取指定类型的文…...

编程日记 2023/5/31 13:52:22

测试外包干了5年，感觉自己已经废了····

前两天有读者想我资讯&#xff1a; 我是一名软件测试工程师&#xff0c;工作已经四年多快五年了。现在正在找工作&#xff0c;由于一直做的都是外包的项目。技术方面都不是很深入&#xff0c;现在找工作都是会问一些&#xff0c;测试框架&#xff0c;自动化测试&#xff0c;感…...

编程日记 2023/5/31 13:52:19

C++17 文件与目录操作 ＜filesystem＞

目录 路径操作 目录遍历 文件检查和操作 总结 每次写C进行目录操作时&#xff0c;我一般都是调平台的SDK&#xff0c;尤其是win32 api 非常难记&#xff0c;于是查一下文档看看有没有和Python中os模块一样好用的库。 于是发现 filesystem&#xff0c;从来没用过&#xff0…...

编程日记 2023/5/31 13:52:16

Python 如何安装 MySQLdb ?

人生苦短 我用python Python 标准数据库接口为 Python DB-API&#xff0c; Python DB-API为开发人员提供了数据库应用编程接口。 Python 数据库接口支持非常多的数据库&#xff0c; 你可以选择适合你项目的数据库&#xff1a; GadFlymSQLMySQLPostgreSQLMicrosoft SQL Serve…...

编程日记 2023/5/31 13:52:14

总被程序员坑？你需要了解API接口

编辑导读&#xff1a;程序员是公司里的技术岗&#xff0c;也是产品经理最密切的合作伙伴。但是&#xff0c;程序员能看懂产品经理的工作&#xff0c;产品经理却不一定能明白程序员的工作&#xff0c;因此也常常被无良程序员坑。本文就从API接口的维度&#xff0c;浅析API的概念…...

编程日记 2023/5/31 13:52:11

信息系统基本知识（四）新技术

大纲 信息系统与信息化信息系统开发方法常规信息系统集成技术软件工程新一代信息技术信息系统安全技术信息化发展与应用信息系统服务管理信息系统服务规划企业首席信息管及其责任 1.5 新一代技术 1.5.1 物联网 概念&#xff1a;&#xff08;The Internet of Things&#xf…...

编程日记 2023/5/31 13:52:09

jeesite多环境配置

jeesite多环境配置 参考网址&#xff1a; https://blog.csdn.net/shaoming314/article/details/129115912?spm1001.2014.3001.5501 开源项目地址&#xff1a; https://gitee.com/thinkgem/jeesite Spring Spring MVC mybatis Ehcache shiro mysql jsp (主要技术栈) 项目…...

编程日记 2023/5/31 13:52:06

项目中用到的知识点回顾---JWT(JSON Web Token)

1.JWT原理&#xff1a; JWT 的原理是&#xff0c;服务器认证以后&#xff0c;生成一个 JSON 对象&#xff0c;发回给用户&#xff0c;如下&#xff1b; {"姓名": "张三","角色": "管理员","到期时间": "2018年7月1日…...

编程日记 2023/5/31 13:52:04

string类常用函数

1&#xff08;substr函数&#xff09;&#xff1a;字符串截取函数&#xff0c;用于获取字符串的子串&#xff1a; //str.substr(begin&#xff0c;length)&#xff0c;用于截取str中以begin为下标长度为length的字串 string s“asd”; ss.substr(0,1);//结果为a。 2&#xff08…...

编程日记 2023/6/1 5:14:13

hexo静态网站部署到腾讯云cos

hexo支持很多部署方案&#xff0c;最直接的就是部署在GitHub Pages服务上&#xff0c;国内gitee、coding等代码托管平台也都支持静态网站服务&#xff0c;而且免费。 但是GitHub在国内访问不太稳定&#xff0c;国内的代码托管平台资源和服务也不太稳定&#xff0c;后来想了想&…...

编程日记 2023/5/31 13:52:02

Python高性能编程

一、进程池和线程池 1.串行 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 import time import requests url_lists [ http://www.baidu.com, http://fanyi.baidu.com, http://map.baidu.com, http://music.baidu.com/, http://tieba.baid…...

编程日记 2023/5/31 13:52:00

MVVM模式下如何正确【视图绑定+数据】

概述 我如何&#xff08;不在后面的代码中使用代码&#xff09;自动绑定到我想要的视图&#xff1f;据我了解&#xff0c;如果正确完成&#xff0c;这就是模式应该如何工作。我可以使用主窗口 xaml 中的代码实现这一切&#xff0c;我甚至正确创建了一个资源字典&#xff08;因…...

编程日记 2023/5/31 13:42:09

外包测试3年，离职后成功入职华为，拿到offer的那天我泪目了....

一提及外包测试&#xff0c;大部分人的第一印象就是&#xff1a;工作强度大&#xff0c;技术含量低&#xff0c;没有归属感&#xff01;外包工作三年总体感受就是这份工作缺乏归属感&#xff0c;心里总有一种落差&#xff0c;进步空间不大&#xff0c;接触不到核心技术&#xf…...

编程日记 2023/5/31 13:41:59

Qt Study

按钮->点击->窗口->关闭窗口 connect(信号的发送者&#xff0c;发送具体信号&#xff0c;信号的接收者&#xff0c;信号的处理); 信号处理函数称为槽 信号槽的优点&#xff0c;松散耦合&#xff0c;信号发送端和接收端本身是没有关联的&#xff0c;通过connect连接…...

编程日记 2023/5/31 13:41:51

JS混淆技术探究及解密方法分析

随着Web技术的快速发展&#xff0c;JavaScript被广泛应用于网页开发、移动应用开发等领域。然而&#xff0c;JavaScript代码很容易被反编译、解密&#xff0c;这给保护网站和应用程序的安全性带来了严重的挑战。为了解决这个问题&#xff0c;JS混淆技术应运而生。JS混淆就是将J…...

编程日记 2023/5/31 13:41:41

智慧制硅厂 Web SCADA 生产线

我国目前是全球最大的工业硅生产国、消费国和贸易国&#xff0c;且未来该产业的主要增量也将来源于我国。绿色低碳发展已成为全球大趋势和国际社会的共识&#xff0c;随着我国“双碳”目标的推进&#xff0c;光伏产业链快速发展&#xff0c;在光伏装机需求的带动下&#xff0c;…...

编程日记 2023/5/31 13:41:31

案例09-数据类型不一致导致equals判断为false

一&#xff1a;背景介绍 在判断课程id和班级id的时候如果一致就像课程信息进行更新&#xff0c;如果不一致就插入一条新的数据。其实两个变量的值是一致的但是类型是不一致的。这就导致数据库中已经有一条这样的数据了&#xff0c;在判断的时候结果为false&#xff0c;就有插入…...

编程日记 2023/5/31 13:41:27

springsecurity中的类

Authentication AuthenticationProvider 每一个AuthenticationProvider对应一个Authentication 很多个AuthenticationProvider 由一个 ProviderManager管理 ProviderManager implements AuthenticationManager 一个ProviderManager有很多个 AuthenticationProvider Usern…...

编程日记 2023/5/31 13:41:20

k8s配置管理

一、configmap 1.1 configmap概述 Configmap 是 k8s 中的资源对象&#xff0c;用于保存非机密性的配置的&#xff0c;数据可以用 key/value 键值对的形式保存&#xff0c;也可通过文件的形式保存。 1.2 configmap作用 我们在部署服务的时候&#xff0c;每个服务都有自己的配置…...

编程日记 2023/5/31 13:41:15

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2026/1/24 13:04:10

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2026/1/9 12:53:59

Linux云原生安全：零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/10/5 19:58:27

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

编程新知 2025/9/14 7:37:32

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

编程新知 2026/1/27 16:41:02

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

编程新知 2026/1/29 14:27:00

Go 并发编程基础：通道（Channel）的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

编程新知 2025/12/4 8:54:35

MFC 抛体运动模拟：常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时，我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。 问题一：历史轨迹与小球残影残留 现象 小球运动后，历史位置的 “残影”…...

编程新知 2026/1/29 12:12:12

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

编程新知 2026/1/29 5:24:50