【JavaWeb学习专栏 | HTML篇】html常用标签集锦（有这一篇就够了）

个人主页：兜里有颗棉花糖
欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 兜里有颗棉花糖 原创
收录于专栏【JavaWeb学习专栏】【Java系列】
希望本文内容可以帮助到大家，一起加油吧！！！💌
在这里插入图片描述

目录

  • 一、基本标签
  • 二、格式化标签
  • 三、图片标签（img）
  • 四、超链接标签（href）
  • 五、表格标签
  • 六、列表标签
    • 无序列表（ul）
    • 有序列表（ol）
    • 自定义列表（dl、dd、dt）
  • 七、表单标签（form）
    • form标签
    • input标签
  • 八、lable标签
  • 九、select标签
  • 十、textarea标签
  • 十一、无语义标签（div & span）

一、基本标签

注释标签
注释标签语法格式：<!-- 这是一个注释 -->
快捷键：ctrl + /

标题标签（h1-h6）
举例代码如下：
在这里插入图片描述
最终运行结果如下：
在这里插入图片描述

段落标签
语法格式：<p>这是第一个段落</p>
代码演示如下请看：
在这里插入图片描述
注意这里并没有给段落开头进行首行缩进。

换行标签
语法格式：<br/>
样例演示：
在这里插入图片描述
演示效果如下：
在这里插入图片描述

二、格式化标签

格式化标签：

// 加粗标签
方式1：<strong>将字体进行加粗</strong>
方式2：<b>将字体进行加粗</b>// 倾斜标签
方式1：<em>倾斜</em>
方式2：<i>倾斜</i>// 删除线标签
方式1：<del>删除线</del>
方式2：<s>删除线</s>// 下划线标签
方式1：<ins>下划线</ins>
方式2：<u>下划线</u>

三、图片标签（img）

这里用众多样例来解释img标签吧。
样例1：<img src="abc.jpg">要把表示abc.jpg这个图片文件放到和 html中的同级目录中
./表示当前目录；../表示上级目录

  • 相对路径：./abc.jpg表示当前目录.jpg图片；./img/abc/asd.jpg表示当前目录中有个文件夹img，该文件夹中有图片asd.jpg；../ajk.jpg表示上一级目录中有一个图片ajk.jpg。
  • 绝对路径：D://test1.jpg表示D盘中有文件test1.jpg。<img src="互联网中的图片链接">注意此用法必须联网才可以使用 。

下面来看img标签的其它属性：

  • alt：替换文本，当文本不能显示的时候，会显示一个可替换的文字（这里需要我们注意，只有当图片加载失败的时候，alt后面的文案才会显示；如果图片加载成功的话当然不会显示了alt后面的文案啦）。
  • title：当鼠标放到图片上的时候，就会有提示。
  • width/height：控制宽度和高度，由于高度和宽度是等比例缩放，所以我们一般给一个就可以，否则就会造成图片失衡。
  • border：表示边框：参数是宽度的像素，一般使用css来进行设定。

四、超链接标签（href）

超链接标签：a

  • href：表示点击后会跳转到哪个界面。
  • target：打开方式，默认是_self，如果是-blank的话就会用新的标签页打开。
    举个栗子1：<a href = "http://www.baidu.com">点击直接跳转到百度界面<a/>
    举个栗子2：<a href="html01.html">跳转到html01界面</a>

如果我们不做任何的跳转，只是停留在当前页面，可以使用#占位符
比如：<a href="#">这里表示空连接</a>

我们也可以给图片添加链接：
如下进行演示，请看：
在这里插入图片描述
点击图片可以直接跳转到我们需要的界面。

在新的标签页中打开一个网页：_blank

// 点击该图片会在新的标签页中跳转到百度界面
<a href = "http://www.baidu.com" target = "_blank"><img src = "img/maomibeijing1.png">
</a>

五、表格标签

以下是表格标签的基本使用方法：

  • table标签：表示整个表格
  • tr：表示表格的一行
  • td：表示一个单元格
  • th：表示表头单元格，但是会剧中加粗
  • thread：表格的头部区域（注意这里需要和th进行区分，范围要比th大），另外thread中的内容是加粗居中的。
  • tbody：表格当中的主体区域。

表格标签中的一些属性可以用于设置大小边框等，但是一般使用css方式。
table中包含了tr，tr中包含了td或者th。

下面来看table标签中的其它属性：

  • align是表格相对于周围元素的对齐方式，align = "center"(注意这里并不是内部元素的对齐方式)
  • border：边框。数字越大边框越粗，0表示没有边框。
  • cellpadding：内容距离边框的距离。默认为1像素。
  • cellspacing：单元格之间的距离默认为2像素。
  • width/height：注意尺寸。

好啦，举个栗子吧！！！

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border = "1" width = "500" height = "300" cellspacing = "0" cellpadding = "50" align = "center"><thread><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thread><tbody><tr><td>曹操</td><td>男</td><td>18</td></tr><tr><td>李白</td><td>男</td><td>19</td></tr><tr><td>李商隐</td><td>女</td><td>19</td></tr></tbody></table>
</body>
</html>

结果演示：
在这里插入图片描述

现在我们来看合并单元格操作：

  • 跨行合并: rowspan="n"
  • 跨列合并: colspan="n"

合并单元格的步骤：
第一步：确定是跨行合并还是跨列合并
第二步：找好目标单元格(跨列合并, 左侧是目标单元格; 跨行合并, 上方是目标单元格)
第三步：. 删除的多余的单元格

举一个合并单元格的栗子吧（还是以上述单元格为基础）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border = "1" width = "500" height = "300" cellspacing = "0" cellpadding = "50" align = "center"><thread><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thread><tbody><tr><td>曹操</td><td rowspan = "2">男</td><td>18</td></tr><tr><td>李白</td><td>19</td></tr><tr><td colspan = "2">李商隐/女</td><!-- <td>女</td> --><td>19</td></tr></tbody></table>
</body>
</html>

演示结果如下：
在这里插入图片描述

六、列表标签

可以使用快捷方式（当然其它情况也是可以使用的啦）：

  • shift + alt + 上下
  • ul>li*3
  • dl>dd>dt*3

无序列表（ul）

语法格式如下（ul li）：

<ul><li>项目1</li><li>项目2</li><li>项目3</li>
</ul>

演示结果如下：
在这里插入图片描述

我们可以修改无序列表中的每个元素前面中的编号类型，比如实心圆可以换成空心圆或者是实现方块。
总共有三种类型：disc（实心圆、浏览器默认）、circle（空心圆）、square（实心方块）
比如：<ul type = "circle">。

有序列表（ol）

语法格式如下：ol li

<ol><li>项目1</li><li>项目2</li><li>项目3</li>
</ol>

演示结果如下：
在这里插入图片描述

这里序号编号是可以进行修改的，比如可以是数字（默认）、也可以是大小写英文字母，也可以是大小写的罗马数字；另外我们也可以修改编号的其实位置是从哪里开始的。比如：<ol type = "A" start="9">中A表示序号编号为大写英文字母，起始位置是从I开始的。
在这里插入图片描述
如下我们来进行举例：
在这里插入图片描述

自定义列表（dl、dd、dt）

自定义列表：dl为总标签，dt为小标题，dd意思是围绕标题来进行说明。

举个栗子：

 <dl><dd>这是自定义列表的标题<dt>这是自定义列表内容1</dt><dt>这是自定义列表内容2</dt><dt>这是自定义列表内容3</dt></dd>
</dl>

演示结果如下：
在这里插入图片描述

列表标签使用注意事项：

  • 列表之间的元素是并列关系
  • ul/ol中只能放li，不能放其它标签，dl中只能放dt和dd
  • li标签中可以放其它标签
  • 列表中可以自带自己的样式，我们可以使用css来进行修改（比如列表编号的样式，或者我们可以直接删除列表编号）。

七、表单标签（form）

表单标签：表单标签可以用于实现用户和服务器之间的交互。当用户填写并提交表单时，表单数据会被发送到服务器，而服务器可以接收并处理这些数据。

表单标签可以分为两个部分：

  • 表单域: 包含表单元素的区域。form标签
  • 表单控件: 输入框, 提交按钮等。input标签

另外我们要注意一点：各种表单控件必须搭配表单域来进行使用。

form标签

form标签语法格式：

<form action="服务器地址">... [form 的内容]
</form>

由于form标签需要我们从服务器和网络编程的角度去进行理解，所以这里我们不做过多的介绍。

input标签

input标签用于在 HTML 表单中创建各种输入字段。

关于input标签中，有以下几点语法需要大家额外注意：

  • type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等。
  • name: 给 input 起了个名字. 尤其是对于单选按钮，具有相同的name才能实现多选一.。
  • value: input 中的默认值。
  • checked: 默认被选中. (用于单选按钮和多选按钮)。
  • maxlength: 设定最大长度。

常见表单控件如下：

  • 文本框：<input type="text">
  • 密码框：<input type="password">
  • 单选框
// 单选框之间必须具备相同的name属性,才能实现多选一效果
// checked="checked" :以下面代码为例性别默认选中男，如果下面两个input标签中实现了checked="checked"则会根据浏览器的不同来做出不同的选择
性别: 
<input type= "radio" name= "sex" checked = "checked">男
<input type= "radio" name= "sex">女
  • 复选框
爱好:
<input type= "checkbox">吃饭
<input type= "checkbox">睡觉
<input type= "checkbox">打豆豆
  • 普通按钮（需要搭配js，否则点击之后没有效果）：<input type = "button" value = "可是我只是一个普通的按钮哎">
<form action = "">姓名<input type = "text"><br>密码<input type = "password"><br>性别<input type = "radio" name = "gender" checked = "checked">男<input type = "radio" name = "gender">女<br>爱好<input type = "checkbox">吃饭<input type = "checkbox">睡觉<input type = "checkbox">打豆豆<br><input type = "button" value = "我是一个按钮"></form>
  • 提交按钮 & 清空按钮（提交和清空按钮必须在form标签内进行使用）：用于将用户在前端填写的数据提交到服务器中；而清空按钮会将 form 内所有的用户输入内容重置。举个栗子：
<form action = "https://www.baidu.com/">姓名：<input type = "text" name = "name"><input type = "submit"><input type = "reset">
</form>
  • 选择文件（点击提交文件之后会弹出对话框来进行文件的选择）：<input type="file">
    在这里插入图片描述

八、lable标签

lable标签：搭配 input 使用，点击label也能选中对应的单选/复选框，可以大大提高我们的使用体验。

  • for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)
<label for="male">男</label>
<input type="radio" name="sex" id="male">
<label for="female">女</label>
<input type="radio" name="sex" id="female">

九、select标签

select标签就是一个下拉菜单。

  • option中定义selected="selected"表示默认选中。如果没有定义selected="selected"则默认选中第一个option。
<select name = "" id = ""><option value = "">---请选择年份---</option><option value = "" selected = "selected">-----2000-----</option><option value = "">-----2001-----</option><option value = "">-----2002-----</option><option value = "">-----2003-----</option>
</select>

演示结果：
在这里插入图片描述

十、textarea标签

textarea标签：<textarea name = "" id = "" rows = "30" cols = "50"></textarea>。

演示结果如下：
在这里插入图片描述

十一、无语义标签（div & span）

  • 我们可以这样理解：div（独占一行）是一个大盒子，而span（不独占一行）是一个小盒子。

  • 无语义标签(包括div标签、span标签)：啥都可以做，没有固定的用途。

  • div标签中可以嵌套div，也可以嵌套span标签，当然也可以嵌套其它标签。

举个栗子：

<div><div><span>吃饭</span><span>睡觉</span><span>打豆豆</span></div><div>吃饭</div><div>睡觉</div><div>打豆豆</div>
</div>

演示结果如下：
在这里插入图片描述

好了，以上就是HTML中最常用的标签啦。本文到这里就结束啦，希望各位友友们可以多多三连支持哈！！！

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/263202.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

本地搭建Linux DataEase数据可视化分析工具并实现公网访问

本地搭建Linux DataEase数据可视化分析工具并实现公网访问

文章目录 前言1. 安装DataEase2. 本地访问测试3. 安装 cpolar内网穿透软件4. 配置DataEase公网访问地址5. 公网远程访问Data Ease6. 固定Data Ease公网地址 前言 DataEase 是开源的数据可视化分析工具&#xff0c;帮助用户快速分析数据并洞察业务趋势&#xff0c;从而实现业务…
阅读更多...
不同品牌的手机如何投屏到苹果MacBook？例如小米、华为怎样投屏比较好？

不同品牌的手机如何投屏到苹果MacBook？例如小米、华为怎样投屏比较好？

习惯使用apple全家桶的人当然知道苹果手机或iPad可以直接用airplay投屏到MacBook。 但工作和生活的多个场合里&#xff0c;并不是所有人都喜欢用同一品牌的设备&#xff0c;如果同事或同学其他品牌的手机需要投屏到MacBook&#xff0c;有什么方法可以快捷实现&#xff1f; 首先…
阅读更多...
Python开源项目月排行 2023年11月

Python开源项目月排行 2023年11月

#2023年11月2023年11月19日1TTS文本到语音的深度学习工具包&#xff0c;在研究和生产中经过了实战测试。TTS-Text To Speech的缩写&#xff0c;即“从文本到语音”。 它将计算机自己产生的、或外部输入的文字信息转变为可以听得懂的、流利的汉语口语&#xff08;或者其他语言语…
阅读更多...
3.DevEco Studio安装鸿蒙手机app本地模拟器

3.DevEco Studio安装鸿蒙手机app本地模拟器

配合Intel CPU启动模拟器 解决措施 打开任务管理器&#xff0c;在“性能”选项&#xff0c;检查CPU虚拟化是否已经启用。如果未启用&#xff0c;需要进入电脑的BIOS中&#xff0c;将CPU的“Intel Virtualization Technology”选项开启。 点击New Emulator 文档中心 解决措施…
阅读更多...
APP备案，最新获取安卓签名文件中MD5等信息方法

APP备案，最新获取安卓签名文件中MD5等信息方法

1.通过签名文件获取SHA1和SHA256 直接通过cmd执行命令 keytool -list -v -keystore xxxxx/xxx/xx/xxx.keystore输入后回车会提示输入密码库口令&#xff0c;直接输入Keystore密码&#xff08;输入过程中终端上不会显示&#xff0c;输完回车就行&#xff09; 2.获取md5 由于…
阅读更多...
基于单片机智能病床呼叫系统设计

基于单片机智能病床呼叫系统设计

**单片机设计介绍&#xff0c;基于单片机智能病床呼叫系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的智能病床呼叫系统是一种利用单片机技术设计的医疗设备&#xff0c;它能够帮助病人在住院期间快速、方便…
阅读更多...
Qt槽函数不响应不执行的一种原因：ui提升导致重名

Qt槽函数不响应不执行的一种原因：ui提升导致重名

背景&#xff1a; 一个包含了组件提升的ui&#xff0c;有个按钮的槽函数就是不响应&#xff0c;于是找原因。 分析&#xff1a; 槽函数的对应一是通过connect函数绑定信号&#xff0c;二是on_XXX_signal的命名方式。界面上部件的槽函数通常是第二种。 我反复确认细节&#…
阅读更多...
智能优化算法应用：基于人工兔算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于人工兔算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于人工兔算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于人工兔算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.人工兔算法4.实验参数设定5.算法结果6.参考文献7.…
阅读更多...
2023济南大学acm新生赛题解

2023济南大学acm新生赛题解

通过答题情况的难度系数&#xff1a; 签到&#xff1a;ACI 铜牌题&#xff1a;BG 银牌题&#xff1a;EF 金牌题&#xff1a;DHJKO 赛中暂未有人通过&#xff1a;LMNP A - AB Problem 直接根据公式计算就行。 #include<stdio.h> int main(){int a,b;scanf("%…
阅读更多...
智能制造和低代码：打造高效工厂的关键

智能制造和低代码：打造高效工厂的关键

引言 随着全球制造业进入数字化时代&#xff0c;智能制造和低代码技术已经成为实现高效工厂运营的关键。这两个关键因素的融合为制造业带来了巨大的机会&#xff0c;使企业能够更灵活地应对市场需求、提高生产效率和降低成本。本文将深入探讨智能制造和低代码技术如何共同塑造…
阅读更多...
排序算法-选择/堆排序(C语言)

排序算法-选择/堆排序(C语言)

1基本思想&#xff1a; 每一次从待排序的数据元素中选出最小&#xff08;或最大&#xff09;的一个元素&#xff0c;存放在序列的起始位置&#xff0c;直到全部待排序的 数据元素排完 。 2 直接选择排序: 在元素集合 array[i]--array[n-1] 中选择关键码最大 ( 小 ) 的数据元素…
阅读更多...
zabbix（2）

zabbix（2）

zabbix的自动发现机制 zabbx客户端主动和服务端联系&#xff0c;将自己的地址和端口发送服务端&#xff0c;实现自动添加监控主机 客户端是主动的一方 缺点&#xff1a;自定义网段中主机数量太多&#xff0c;登记耗时会很久&#xff0c;而且这个自动发现机制不是很稳定 zabb…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023