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

【JavaWeb】HTML常用标签

news 2026/5/11 9:51:31

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

5分钟上手Efficient-KAN：高效Kolmogorov-Arnold网络实战指南

5分钟上手Efficient-KAN&#xff1a;高效Kolmogorov-Arnold网络实战指南 【免费下载链接】efficient-kan An efficient pure-PyTorch implementation of Kolmogorov-Arnold Network (KAN). 项目地址: https://gitcode.com/GitHub_Trending/ef/efficient-kan 还在为传统神…...

编程新知 2026/5/11 9:47:08

VideoDownloadHelper深度解析：破解主流视频平台下载限制的技术实战

VideoDownloadHelper深度解析&#xff1a;破解主流视频平台下载限制的技术实战 【免费下载链接】VideoDownloadHelper Chrome Extension to Help Download Video for Some Video Sites. 项目地址: https://gitcode.com/gh_mirrors/vi/VideoDownloadHelper 还在为无法保存…...

编程新知 2026/5/11 9:46:50

英雄联盟智能辅助工具Seraphine：三步快速上手的终极指南

英雄联盟智能辅助工具Seraphine&#xff1a;三步快速上手的终极指南 【免费下载链接】Seraphine 英雄联盟战绩查询工具 项目地址: https://gitcode.com/gh_mirrors/se/Seraphine 你是否厌倦了在英雄联盟排位赛中手忙脚乱地查询对手战绩&#xff1f;是否希望有一个智能助…...

编程新知 2026/5/11 9:21:26

词源探秘|从orient到panorama：解码英语单词背后的文明密码

1. 从日出东方到现代导航&#xff1a;ori词根的文明之旅 当古人第一次观察到太阳从东方升起时&#xff0c;拉丁语用"oriri"&#xff08;升起&#xff09;记录这个现象。这个词根演变为ori&#xff0c;像一条暗线贯穿人类文明&#xff1a; orient&#xff08;东方&a…...

编程新知 2026/5/11 8:18:16

DISTINCT 带 WHERE 仍全表扫描？两层优化刀法拆解

DISTINCT 带 WHERE 仍全表扫描&#xff1f;两层优化刀法拆解 引言&#xff1a;一个看似多余的 DISTINCT&#xff0c;藏着性能陷阱 几乎每个写过 SQL 的人都用过 DISTINCT。它的语义很简单——去掉重复行。但"简单"不等于"快"。在一个客户的生产环境中&…...

编程新知 2026/5/11 7:18:11

ACL 2026 | 未见伪造也能识别：「证链侦探」破解“泛化失灵”困局

AI 生成图像、AI 编造文本、图文协同伪造……今天的多模态虚假内容&#xff0c;已经越来越复杂。面对训练中没见过的新新闻域、新操纵方式、新组合套路&#xff0c;很多现有鉴伪模型往往就开始“掉链子”。问题的关键不只是伪造更多了&#xff0c;而是模型学到的东西太像“背答…...

编程新知 2026/5/11 7:05:26

LLMs之Benchmarks：《ProgramBench: Can Language Models Rebuild Programs From Scratch?》翻译与解读

LLMs之Benchmarks&#xff1a;《ProgramBench: Can Language Models Rebuild Programs From Scratch?》翻译与解读 导读&#xff1a;ProgramBench 把软件工程 agent 的评测从“局部修补”推进到“从零重建程序”&#xff0c;通过程序文档、行为级测试和 agent-driven fuzzing …...

编程新知 2026/5/11 5:31:01

定点FIR滤波器实现：系数量化与嵌入式优化

1. 定点FIR滤波器实现的核心挑战在数字信号处理领域&#xff0c;有限脉冲响应(FIR)滤波器因其绝对稳定性成为基础构建模块。与IIR滤波器不同&#xff0c;FIR系统仅依赖于当前和过去的输入样本&#xff0c;其传递函数不包含反馈回路。这种特性使得FIR滤波器在需要线性相位响应的…...

编程新知 2026/5/11 4:59:52

企者不立，跨者不行，SAP UI5 开发里的克制、分寸与长久之道

老子这句话放到 SAP UI5 开发里看，并不是在劝开发者不进取，也不是叫我们少写功能、少做创新。它真正提醒的是，企业级前端开发最怕一种姿态，脚尖踮得很高，步子跨得很大，心里急着证明自己聪明，手上急着把每一个需求都做成个性化杰作。SAP UI5 最终运行在 SAP Fiori Launch…...

编程新知 2026/5/11 4:11:30

ComfyUI MixLab节点库：提升AI图像工作流控制与自动化能力

1. 项目概述&#xff1a;一个为ComfyUI注入新活力的节点库如果你和我一样&#xff0c;是个深度依赖ComfyUI进行AI图像工作流搭建的创作者&#xff0c;那你一定经历过这样的时刻&#xff1a;面对一个复杂的创意想法&#xff0c;却发现官方节点或者现有社区节点库的功能组合起来总…...

编程新知 2026/5/11 3:56:41