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

【JavaWeb】HTML常用标签

news 2026/3/27 2:31:33

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

为什么3分钟搞懂AI

炒又幕燃、RedisShake 核心介绍 RedisShake 是阿里云 Tair 开源团队推出的轻量级Redis数据处理工具&#xff0c;无需复杂依赖&#xff0c;部署简单、操作便捷&#xff0c;能适配自建Redis、云Redis等多种环境&#xff0c;解决Redis全生命周期的数据管理难题。 1.1 四大核心功能…...

编程新知 2026/3/27 1:54:38

百川2-13B-4bits量化版对比测试：OpenClaw日常任务执行效率报告

百川2-13B-4bits量化版对比测试&#xff1a;OpenClaw日常任务执行效率报告 1. 测试背景与动机 最近在折腾OpenClaw自动化工作流时&#xff0c;发现一个棘手问题&#xff1a;当任务链条较长时&#xff0c;本地部署的大模型显存占用会飙升到16GB以上&#xff0c;导致我的RTX 30…...

编程新知 2026/3/27 1:03:41

Windows资源管理器终极美化指南：一键添加惊艳毛玻璃效果

Windows资源管理器终极美化指南&#xff1a;一键添加惊艳毛玻璃效果 【免费下载链接】ExplorerBlurMica Add background Blur effect or Acrylic (Mica for win11) effect to explorer for win10 and win11 项目地址: https://gitcode.com/gh_mirrors/ex/ExplorerBlurMica …...

编程新知 2026/3/27 0:17:27

不止于仿真：用COMSOL LiveLink玩转超声相控阵动态聚焦与参数化扫描

超越静态仿真&#xff1a;COMSOL LiveLink在超声相控阵动态聚焦中的高阶应用 当超声相控阵技术遇上COMSOL的多物理场仿真能力&#xff0c;工程师们便获得了一把打开声波精准操控之门的钥匙。不同于传统静态仿真&#xff0c;动态聚焦与参数化扫描技术让声场控制如同探照灯般灵活…...

编程新知 2026/3/26 21:11:52

体验开发新范式：如何用快马平台的AI大模型将想法直接变成代码

最近尝试用AI辅助开发工具来快速实现一个任务管理应用&#xff0c;整个过程让我对现代开发方式有了全新认识。和大家分享一下这个有趣的实践经历&#xff1a; 需求分析阶段 传统开发需要先梳理功能清单&#xff0c;但这次我直接把自然语言描述输入到InsCode(快马)平台的AI对话框…...

编程新知 2026/3/26 20:23:44

Artisan咖啡烘焙专业级工具实战指南：从数据驱动到精准控制

Artisan咖啡烘焙专业级工具实战指南&#xff1a;从数据驱动到精准控制 【免费下载链接】artisan artisan: visual scope for coffee roasters 项目地址: https://gitcode.com/gh_mirrors/ar/artisan Artisan作为一款开源咖啡烘焙可视化软件&#xff0c;为专业烘焙师提供…...

编程新知 2026/3/26 20:21:44

电磁学核心概念与解题框架精讲（猴博士风格）

1. 电磁学基础概念拆解&#xff1a;从场强到电势 电场强度E和电势U是电磁学中最基础的两个物理量&#xff0c;就像描述一个人需要身高和体重两个指标一样。很多同学刚开始学电磁学时容易混淆这两个概念&#xff0c;我用一个简单的类比帮大家理解&#xff1a;想象电场强度就像山…...

编程新知 2026/3/26 20:17:43

Timer-S1 正式发布：首个十亿级时序基础模型，预测性能达到 SOTA

本文约3600字&#xff0c;建议阅读5分钟十亿级规模化的突破&#xff0c;首次将时间序列预测的串行本质&#xff0c;融入模型架构、数据、训练全流程&#xff01;在 AI 全面渗透各行业的背景下&#xff0c;工业企业对时序数据的应用需求已从基础查询计算&#xff0c;升级为设备状…...

编程新知 2026/3/26 20:11:42

ICML 2023亚马逊论文速览：自适应计算与差分隐私

机器学习 某机构在ICML 2023会议论文速览 在一系列主题中&#xff0c;某机构的研究融合了理论与实践的探索。 会议 ICML 2023 在今年的国际机器学习大会&#xff08;ICML&#xff09;上&#xff0c;某机构的研究人员发表了多篇关于赌博机问题和差分隐私的论文&#xff0c;这两个…...

编程新知 2026/3/26 20:05:37

从零到数据分析：用ClickHouse+DBeaver在Windows上复现一个电商用户行为查询

从零构建电商数据分析平台&#xff1a;Windows下ClickHouse与DBeaver实战指南 1. 为什么选择ClickHouse进行电商行为分析&#xff1f; 去年双十一期间&#xff0c;某头部电商平台通过实时分析用户点击流数据&#xff0c;在活动开始后30分钟内就调整了首页推荐策略&#xff0c…...

编程新知 2026/3/26 19:47:32