HTML一般标签和自闭合标签介绍

在HTML中,标签用于定义网页内容的结构和样式。标签通常分为两类:一般标签(也称为成对标签或开放闭合标签)和自闭合标签(也称为空标签或自结束标签)。

以下是这两类标签的详细说明:

一、一般标签

一般标签由一对尖括号(<>)包围,有一个开始标签(<标签名>)和一个结束标签(</标签名>),它们之间可以包含其他HTML标签或文本内容。

1、标题标签(<h1><h6>

标题标签用于创建不同级别的标题,其中<h1>为最高级别,<h6>为最低级别。

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第一个网页</title></head><body><h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3><h4>这是四级标题</h4><h5>这是五级标题</h5><h6>这是六级标题</h6></body></html>

2、段落标签(<p>

段落标签用于创建段落,可以指定对齐方式。

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第一个网页</title></head><body><p>这是一个段落。</p><p style="text-align: center;">这是一个居中的段落。</p></body></html>

3、强调标签(<strong><em>

强调标签用于突出显示文本,<strong>表示重要性,<em>表示强调。

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第一个网页</title></head><body><p>这是一个<strong>重要的</strong>句子。</p><p>这是一个<em>强调的</em>句子。</p></body></html>

4、链接标签(<a>

链接标签用于创建超链接,可以指向其他网页或同一页面的特定位置。

 <a href="https://www.example.com">访问示例网站</a><a href="#section1">跳转到页面中的某个部分</a>

5、列表标签(<ul><ol><li>

无序列表(<ul>)和有序列表(<ol>)用于创建列表,每个列表项由<li>标签定义。

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第一个网页</title></head><body><ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul>​<ol><li>有序列表项1</li><li>有序列表项2</li><li>有序列表项3</li></ol></body></html>

6、删除线标签(<del>

删除线标签用于表示删除的文本。

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第一个网页</title></head><body><p>原价:<del>100元</del> 现价:80元</p></body></html>

7、下划线标签(<ins>

下划线标签用于表示插入的文本。

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第一个网页</title></head><body><p>这是一个<ins>新添加</ins>的句子。</p></body></html>

8、居中标签(<center>

居中标签用于居中对齐文本(注意:<center>标签在HTML5中已被弃用,建议使用CSS样式来实现居中对齐)。

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第一个网页</title></head><body><center>这是居中的文本。</center></body></html>

9、表格标签(<table><tr><td>

表格标签用于创建表格,包括行(<tr>)和单元格(<td>)。

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第一个网页</title></head><body><table border="1"><tr><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>25</td></tr><tr><td>李四</td><td>30</td></tr></table></body></html>

二、自闭合标签

自闭合标签是不需要闭合标签的元素,通常用于表示那些不需要包裹内容的元素。在HTML5规范中,这些标签在书写时可以省略结束斜杠(/),但为了保持代码的一致性和兼容性,很多开发者仍然习惯在自闭合标签的末尾加上斜杠。

1、图像标签(<img>

图像标签用于插入图片,需要指定图片的源(src)和替代文本(alt)。

 <img src="example.jpg" alt="示例图片">

2、换行标签 (<br>)

用于在文本中插入换行。

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第一个网页</title></head><body><p>这是第一行。<br/>这是第二行。</p></body></html>

3、水平线标签 (<hr>)

用于在网页中插入水平线,通常用于分隔内容。

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第一个网页</title></head><body><p>上面的段落。</p><hr/><p>下面的段落。</p></body></html>

4、输入标签 (<input>)

用于创建表单输入控件,如文本框、复选框、单选按钮等。

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第一个网页</title></head><body><input type="text" name="username" placeholder="输入用户名"><input type="password" name="password" placeholder="输入密码"><input type="submit" value="提交"></body></html>
  • type 属性指定输入控件的类型。

  • name 属性指定输入控件的名称,用于在表单提交时识别数据。

  • placeholder 属性提供输入控件的占位符文本。

5、元标签 (<meta>)

用于定义文档的元数据,如字符集、页面描述、关键词等。

 <meta charset="UTF-8"><meta name="description" content="这是一个示例网页的描述。"><meta name="keywords" content="HTML, 示例, 网页">

6、链接标签 (<link>)

用于定义文档与外部资源的关系,如样式表、图标等。

 <link rel="stylesheet" href="styles.css"><link rel="icon" href="favicon.ico">
  • rel 属性指定当前文档与外部资源的关系。

  • href 属性指定外部资源的路径。

7、源标签 (<source>)

用于为<audio><video><picture>元素指定多个媒体资源,以便浏览器根据支持情况选择合适的资源。

 <video controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg"></video>

8、跟踪标签 (<track>)

用于为<audio><video>元素提供文本轨道,如字幕、字幕文件或描述。

 <video controls><source src="movie.mp4" type="video/mp4"><track kind="subtitles" src="subtitles.vtt" srclang="en" label="English"></video>

虽然<track>标签在HTML5中不是严格意义上的自闭合标签(因为它可以包含属性),但在实际使用中,它通常不包裹内容,因此也常被视作自闭合标签的一种。

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

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

相关文章

【8】思科IOS AP升级操作

1.概述 本文主要针对思科AP的升级操作进行记录,思科的AP目前主要分为IOS和COS AP,IOS AP是我们常见的AP3502/AP1602/AP2702等等型号的AP,而COS AP是AP2802/3802等型号的AP。当然这里所指的都是一些室内AP,如AP1572等室外AP也同样适用。本文先对IOS AP的升级操作进行总结,…

Android GLSurfaceView 覆盖其它控件问题 (RK平台)

平台 涉及主控: RK3566 Android: 11/13 问题 在使用GLSurfaceView播放视频的过程中, 增加了一个播放控制面板, 覆盖在视频上方. 默认隐藏setVisibility(View.INVISIBLE);点击屏幕再显示出来. 然而, 在RK3566上这个简单的功能却无法正常工作. 通过缩小视频窗口可以看到, 实际…

Java Web-Tomcat Servlet

Web服务器-Tomcat Web服务器简介 Web 服务器是一种软件程序&#xff0c;它主要用于在网络上接收和处理客户端&#xff08;如浏览器&#xff09;发送的 HTTP 请求&#xff0c;并返回相应的网页内容或数据。以下是关于 Web 服务器的详细介绍&#xff1a; 功能 接收请求&#…

[Computer Vision]实验二:图像特征点提取

目录 一、实验内容 二、实验过程及结果 2.1 Harris角点检测 2.2 SIFT算法 三、实验小结 一、实验内容 采用Harris与SIFT分别提取特征点及对应的描述子&#xff0c;对比两者的区别&#xff08;特征点数量、分布、描述子维度、图像变化对二者的影响等&#xff09;利用特征匹…

自动化实现的思路变化

阶段一&#xff1a; 1、成功调用。第一步&#xff0c;一般是用现用的工具&#xff0c;或者脚本成功调用接口 2、解决关联接口的参数传递。有的接口直接&#xff0c;存在参数的传递&#xff0c;一般的思路&#xff0c;就是将这个参数设置为变量。 3、简化代码。总会有些东西是重…

【AI非常道】二零二五年一月,AI非常道

经常在社区看到一些非常有启发或者有收获的话语&#xff0c;但是&#xff0c;往往看过就成为过眼云烟&#xff0c;有时再想去找又找不到。索性&#xff0c;今年开始&#xff0c;看到好的言语&#xff0c;就记录下来&#xff0c;一月一发布&#xff0c;亦供大家参考。 有关AI非…

牛客周赛 Round 78 A-C

A.时间表查询&#xff01; 链接&#xff1a;https://ac.nowcoder.com/acm/contest/100671/A 来源&#xff1a;牛客网 题目描述 今天是2025年1月25日&#xff0c;今年的六场牛客寒假算法基础集训营中&#xff0c;前两场比赛已经依次于 20250121、20250123 举行&#xff1b;而…

网安加·百家讲坛 | 樊山:数据安全之威胁建模

作者简介&#xff1a;樊山&#xff0c;锦联世纪教育能源工业互联网数字安全CSM(新能源运维师)课程特聘培训讲师&#xff0c;哈尔滨工业大学&#xff08;深圳&#xff09;信飞合创数据合规联合实验室特聘专家&#xff0c;武汉赛博网络安全人才研究中心资深专家&#xff1b;近24年…

java后端之登录认证

基础登录功能&#xff1a;根据提供的用户名和密码判断是否存在于数据库 LoginController.java RestController Slf4j public class LoginController {Autowiredprivate UserService userService;PostMapping("/login")public Result login(RequestBody User user) {…

【MCAL实战】MCU模块配置实践

目录 前言 正文 1.硬件分析 1.1 MCU系统模式分析 1.2MCU晶振使用分析 2.MCU通用配置 2.1 McuGeneralConfiguration 2.2 McuModuleConfiguration 2.3 McuResetSettingConf 2.4 McuTrapSettingConf 2.4 其他 3.MCU模式配置 3.1 McuModeSettingConf_0 3.2 McuModeSe…

基于SpringBoot的网上考试系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…

Elastic Agent 对 Kafka 的新输出:数据收集和流式传输的无限可能性

作者&#xff1a;来 Elastic Valerio Arvizzigno, Geetha Anne 及 Jeremy Hogan 介绍 Elastic Agent 的新功能&#xff1a;原生输出到 Kafka。借助这一最新功能&#xff0c;Elastic 用户现在可以轻松地将数据路由到 Kafka 集群&#xff0c;从而实现数据流和处理中无与伦比的可扩…

【ROS2】RViz2界面类 VisualizationFrame 详解

1、简述 VisualizationFrame 继承自 QMainWindow 和 WindowManagerInterface; 窗口顶部是常规布局:菜单栏 和 工具栏 窗口中心是 RenderPanel,用来渲染3D画面 周围是dock区域,包括:DisplaysPanel、ViewsPanel、TimePanel、SelectionPanel 和 ToolPropertiesPanel Windo…

poi在word中打开本地文件

poi版本 5.2.0 方法1&#xff1a;使用XWPFFieldRun&#xff08;推荐&#xff09; 比如打开当前相对路径的aaaaa.docx XWPFFieldRun run paragraph.createFieldRun();CTRPr ctrPr run.getCTR().addNewRPr();CTFonts font ctrPr.addNewRFonts();// 设置字体font.setAscii(&quo…

Spring Boot应用中实现基于JWT的登录拦截器,以保证未登录用户无法访问指定的页面

目录 一、配置拦截器进行登录校验 1. 在config层设置拦截器 2. 实现LoginInterceptor拦截器 3. 创建JWT工具类 4. 在登录时创建JWT并存入Cookie 二、配置JWT依赖和环境 1. 添加JWT依赖 2. 配置JWT环境 本篇博客将为大家介绍了如何在Spring Boot应用中实现基于JWT的登录…

「 机器人 」扑翼飞行器控制的当前挑战与后续潜在研究方向

前言 在扑翼飞行器设计与控制方面,虽然已经取得了显著的进步,但在飞行时间、环境适应性、能量利用效率及模型精度等方面依旧存在亟待解决的挑战。以下内容概括了这些挑战和可能的改进路径。 1. 当前挑战 1.1 飞行时间短 (1)主要原因 能源存储有限(电池容量小)、驱动系…

pandas:loc索引器

loc索引器 使用的索引可能不是整数&#xff0c;而是自定义的&#xff01;&#xff01;&#xff01; 表的列索引 列索引是最常见的索引形式&#xff0c;一般通过[]来实现。通过[列名]可以从DataFrame中取出相应的列&#xff0c;返回值为Series。 import pandas as pd import…

3.2 Go 返回值详解

在 Go 语言中&#xff0c;函数调用完成后会产生一个返回值&#xff0c;该值的类型和数量取决于函数定义。返回值在函数调用结束时通过 return 语句返回&#xff0c;具体规则如下&#xff1a; 一. 返回值的基本规则 1.返回值类型&#xff1a; 返回值必须有类型&#xff0c;类…

PCIE模式配置

对于VU系列FPGA&#xff0c;当DMA/Bridge Subsystem for PCI Express IP配置为Bridge模式时&#xff0c;等同于K7系列中的AXI Memory Mapped To PCI Express IP。

关注搜索引擎蜘蛛压力

以前在建站的时候&#xff0c;他们说蜘蛛来抓取的频率越多越好&#xff0c;因为蜘蛛来抓取说明了网站更新速度快&#xff0c;受搜索引擎的欢迎&#xff0c;但是在最近的网站统计中&#xff0c;发现很多蜘蛛爬取的频次非常的高&#xff0c;比如有的蜘蛛一天能来网站几万次&#…