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

news2025/1/31 15:23:45

在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.coloradmin.cn/o/2286964.html

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

相关文章

Eureka 服务注册和服务发现的使用

1. 父子工程的搭建 首先创建一个 Maven 项目&#xff0c;删除 src &#xff0c;只保留 pom.xml 然后来进行 pom.xml 的相关配置 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xs…

白嫖DeepSeek:一分钟完成本地部署AI

1. 必备软件 LM-Studio 大模型客户端DeepSeek-R1 模型文件 LM-Studio 是一个支持众多流行模型的AI客户端&#xff0c;DeepSeek是最新流行的堪比GPT-o1的开源AI大模型。 2. 下载软件和模型文件 2.1 下载LM-Studio 官方网址&#xff1a;https://lmstudio.ai 打开官网&#x…

《Origin画百图》之同心环图

《Origin画百图》第四集——同心环图 入门操作可查看合集中的《30秒&#xff0c;带你入门Origin》 具体操作&#xff1a; 1.数据准备&#xff1a;需要X和Y两列数据 2. 选择菜单 绘图 > 条形图&#xff0c;饼图&#xff0c;面积图: 同心圆弧图 3. 这是绘制的基础图形&…

蓝牙技术在物联网中的应用有哪些

蓝牙技术凭借低功耗、低成本和易于部署的特性&#xff0c;在物联网领域广泛应用&#xff0c;推动了智能家居、工业、医疗、农业等多领域发展。 智能家居&#xff1a;在智能家居系统里&#xff0c;蓝牙技术连接各类设备&#xff0c;像智能门锁、智能灯泡、智能插座、智能窗帘等。…

简易计算器(c++ 实现)

前言 本文将用 c 实现一个终端计算器&#xff1a; 能进行加减乘除、取余乘方运算读取命令行输入&#xff0c;输出计算结果当输入表达式存在语法错误时&#xff0c;报告错误&#xff0c;但程序应能继续运行当输出 ‘q’ 时&#xff0c;退出计算器 【简单演示】 【源码位置】…

自动化运维的未来:从脚本到AIOps的演进

点击进入IT管理资料库 一、自动化运维的起源&#xff1a;脚本时代 &#xff08;一&#xff09;脚本在运维中的应用场景 在自动化运维的发展历程中&#xff0c;脚本扮演着至关重要的角色&#xff0c;它作为最初的操作入口&#xff0c;广泛应用于诸多日常运维工作场景里。 在系统…

线程池以及在QT中的接口使用

文章目录 前言线程池架构组成**一、任务队列&#xff08;Task Queue&#xff09;****二、工作线程组&#xff08;Worker Threads&#xff09;****三、管理者线程&#xff08;Manager Thread&#xff09;** 系统协作流程图解 一、QRunnable二、QThreadPool三、线程池的应用场景W…

联想拯救者R720笔记本外接显示屏方法,显示屏是2K屏27英寸

晚上23点10分前下单&#xff0c;第二天上午显示屏送到&#xff0c;检查外包装没拆封过。这个屏幕左下方有几个按键&#xff0c;按一按就开屏幕、按一按就关闭屏幕&#xff0c;按一按方便节省时间&#xff0c;也支持阅读等模式。 显示屏是 &#xff1a;AOC 27英寸 2K高清 100Hz…

C++ deque(1)

1.deque介绍 deque的扩容不像vector那样麻烦 直接新开一个buffer 不用重新开空间再把数据全部移过去 deque本质上是一个指针数组和vector<vector>不一样&#xff0c;vector<vector>本质上是一个vector对象数组&#xff01;并且vector<vector>的buffer是不一…

Brightness Controller-源码记录

Brightness Controller 亮度控制 一、概述二、ddcutil 与 xrandr1. ddcutil2. xrandr 三、部分代码解析1. icons2. ui3. utilinit.py 一、概述 项目&#xff1a;https://github.com/SunStorm2018/Brightness.git 原理&#xff1a;Brightness Controlle 是我在 Ubuntu 发现上调…

Java8_StreamAPI

Stream 1.创建流 1.1 集合创建流 List<String> list List.of("a", "b", "c"); Stream<String> stream list.stream(); stream.forEach(System.out::println);1.2 数组创建流 String[] array {"a","b",&qu…

【架构面试】二、消息队列和MySQL和Redis

MQ MQ消息中间件 问题引出与MQ作用 常见面试问题&#xff1a;面试官常针对项目中使用MQ技术的候选人提问&#xff0c;如如何确保消息不丢失&#xff0c;该问题可考察候选人技术能力。MQ应用场景及作用&#xff1a;以京东系统下单扣减京豆为例&#xff0c;MQ用于交易服和京豆服…

OpenEuler学习笔记(十六):搭建postgresql高可用数据库环境

以下是在OpenEuler系统上搭建PostgreSQL高可用数据环境的一般步骤&#xff0c;通常可以使用流复制&#xff08;Streaming Replication&#xff09;或基于Patroni等工具来实现高可用&#xff0c;以下以流复制为例&#xff1a; 安装PostgreSQL 配置软件源&#xff1a;可以使用O…

论文阅读(十一):基因-表型关联贝叶斯网络模型的评分、搜索和评估

1.论文链接&#xff1a;Scoring, Searching and Evaluating Bayesian Network Models of Gene-phenotype Association 摘要&#xff1a; 全基因组关联研究&#xff08;GWAS&#xff09;的到来为识别常见疾病的遗传变异&#xff08;单核苷酸多态性&#xff08;SNP&#xff09;&…

企业微信远程一直显示正在加载

企业微信远程一直显示正在加载 1.问题描述2.问题解决 系统&#xff1a;Win10 1.问题描述 某天使用企业微信给同事进行远程协助的时候&#xff0c;发现一直卡在正在加载的页面&#xff0c;如下图所示 2.问题解决 经过一番查找资料后&#xff0c;我发现可能是2个地方出了问题…

人工智能 - 1

深度强化学习&#xff08;Deep Reinforcement Learning&#xff09; 图神经网络&#xff08;Graph Neural Networks, GNNs&#xff09; Transformer 一种深度学习模型 大语言模型&#xff08;Large Language Models, LLMs&#xff09; 人工智能 • Marvin Minsky 将其定义…

Linux_线程同步生产者消费者模型

同步的相关概念 同步&#xff1a;在保证数据安全的前提下&#xff0c;让线程能够按照某种特定的顺序访问临界资源&#xff0c;从而有效避免饥饿问题&#xff0c;叫做同步竞态条件&#xff1a;因为时序问题&#xff0c;而导致程序异常&#xff0c;我们称之为竞态条件。 同步的…

Github 2025-01-30 Go开源项目日报 Top10

根据Github Trendings的统计,今日(2025-01-30统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Go项目10Ollama: 本地大型语言模型设置与运行 创建周期:248 天开发语言:Go协议类型:MIT LicenseStar数量:42421 个Fork数量:2724 次关注人…

【Rust自学】17.2. 使用trait对象来存储不同值的类型

喜欢的话别忘了点赞、收藏加关注哦&#xff08;加关注即可阅读全文&#xff09;&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 17.2.1. 需求 这篇文章以一个例子来介绍如何在Rust中使用trait对象来存储不同值的类型。 …

VLLM性能调优

1. 抢占 显存不够的时候&#xff0c;某些request会被抢占。其KV cache被清除&#xff0c;腾退给其他request&#xff0c;下次调度到它&#xff0c;重新计算KV cache。 报这条消息&#xff0c;说明已被抢占&#xff1a; WARNING 05-09 00:49:33 scheduler.py:1057 Sequence gr…