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中不是严格意义上的自闭合标签（因为它可以包含属性），但在实际使用中，它通常不包裹内容，因此也常被视作自闭合标签的一种。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【EasyX 图形化编程保姆级喂嘴里教程】（C/C++） graphics.h 头文件库安装

【EasyX 图形化编程保姆级喂嘴里教程】（C/C++） graphics.h 头文件库安装

文章目录 EasyXEasyX 是什么&#xff1f;超低的学习成本超多的应用场景超轻的发布过程 EasyX安装下载好后打开安装文件, 点击下一步。它自动检测已有的IDE&#xff0c;自行选择安装点击安装会提示安装成功接下来就可以在代码中使用 graphics.h 头文件库 EasyX EasyX 是什么&am…
阅读更多...
吊打同类软件免费又可批量使用

吊打同类软件免费又可批量使用

聊一聊 对于经常用到席卡的人来说&#xff0c;每次打印都觉得麻烦&#xff0c;要是有个软件&#xff0c;直接输入名称就能打印就好了。 这不&#xff0c;只要你想&#xff0c;就肯定能实现&#xff1b;如果没实现&#xff0c;就说明你不够想。 这个软件我测试了下&#xff0…
阅读更多...
2.攻防世界PHP2及知识点

2.攻防世界PHP2及知识点

进入题目页面如下 意思是你能访问这个网站吗&#xff1f; ctrlu、F12查看源码&#xff0c;什么都没有发现 用kali中的dirsearch扫描根目录 命令如下&#xff0c;根据题目提示以及需要查看源码&#xff0c;扫描以php、phps、html为后缀的文件 dirsearch -u http://61.147.17…
阅读更多...
网络工程师 （11）软件生命周期与开发模型

网络工程师 （11）软件生命周期与开发模型

一、软件生命周期 前言 软件生命周期&#xff0c;也称为软件开发周期或软件开发生命周期&#xff0c;是指从软件项目的启动到软件不再被使用为止的整个期间。这个过程可以细分为多个阶段&#xff0c;每个阶段都有其特定的目标、任务和产出物。 1. 问题定义与需求分析 问题定义…
阅读更多...
深度学习练手小例子——cifar10数据集分类问题

深度学习练手小例子——cifar10数据集分类问题

CIFAR-10 是一个经典的计算机视觉数据集&#xff0c;广泛用于图像分类任务。它包含 10 个类别的 60,000 张彩色图像&#xff0c;每张图像的大小是 32x32 像素。数据集被分为 50,000 张训练图像和 10,000 张测试图像。每个类别包含 6,000 张图像&#xff0c;具体类别包括&#x…
阅读更多...
力扣257. 二叉树的所有路径（遍历思想解决）

力扣257. 二叉树的所有路径（遍历思想解决）

Problem: 257. 二叉树的所有路径 文章目录 题目描述思路复杂度Code 题目描述 思路 遍历思想(利用二叉树的先序遍历) 利用先序遍历的思想&#xff0c;我门用一个List变量path记录当前先序遍历的节点&#xff0c;当遍历到根节点时&#xff0c;将其添加到另一个List变量res中&…
阅读更多...
力扣第149场双周赛

力扣第149场双周赛

文章目录 题目总览题目详解找到字符串中合法的相邻数字重新安排会议得到最多空余时间I 第149场双周赛 题目总览 找到字符串中合法的相邻数字 重新安排会议得到最多空余时间I 重新安排会议得到最多空余时间II 变成好标题的最少代价 题目详解 找到字符串中合法的相邻数字 思…
阅读更多...
算法题（54）：插入区间

算法题（54）：插入区间

审题&#xff1a; 需要我们把newinterval的区间与interval的区间合并起来&#xff0c;并返回合并后的二维数组地址 思路&#xff1a; 方法一&#xff1a;排序合并区间 我们可以先把newinterval插入到interval中&#xff0c;进行排序然后复用合并区间的代码 方法二&#xff1a;模…
阅读更多...
网工_HDLC协议

网工_HDLC协议

2025.01.25&#xff1a;网工老姜学习笔记 第9节 HDLC协议 9.1 HDLC高级数据链路控制9.2 HDLC帧格式&#xff08;*控制字段&#xff09;9.2.1 信息帧&#xff08;承载用户数据&#xff0c;0开头&#xff09;9.2.2 监督帧&#xff08;帮助信息可靠传输&#xff0c;10开头&#xf…
阅读更多...
[免费]微信小程序智能商城系统(uniapp+Springboot后端+vue管理端)【论文+源码+SQL脚本】

[免费]微信小程序智能商城系统(uniapp+Springboot后端+vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序智能商城系统(uniappSpringboot后端vue管理端)&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序智能商城系统(uniappSpringboot后端vue管理端) Java毕业设计_哔哩哔哩_bilibili 项目介绍…
阅读更多...
nth_element函数——C++快速选择函数

nth_element函数——C++快速选择函数

目录 1. 函数原型 2. 功能描述 3. 算法原理 4. 时间复杂度 5. 空间复杂度 6. 使用示例 8. 注意事项 9. 自定义比较函数 11. 总结 nth_element 是 C 标准库中提供的一个算法&#xff0c;位于 <algorithm> 头文件中&#xff0c;用于部分排序序列。它的主要功能是将…
阅读更多...
CF 581A.Vasya the Hipster(Java实现)

CF 581A.Vasya the Hipster(Java实现)

题目分析 红色袜子数量a&#xff0c;蓝色袜子数量b&#xff0c;题目是个潮哥儿&#xff0c;首先选择两种袜子混搭&#xff0c;搭不出来就纯色 思路分析 混搭数量取决于最小数量&#xff0c;剩余的纯色数量取决于哪个还有剩余且数量要/2 代码 import java.util.*;public class…
阅读更多...
C基础寒假练习(6)

C基础寒假练习(6)

一、终端输入行数&#xff0c;打印倒金字塔 #include <stdio.h> int main() {int rows;printf("请输入倒金字塔的行数: ");scanf("%d", &rows);for (int i rows; i > 0; i--) {// 打印空格for (int j 0; j < rows - i; j) {printf(&qu…
阅读更多...
Python在线编辑器

Python在线编辑器

from flask import Flask, render_template, request, jsonify import sys from io import StringIO import contextlib import subprocess import importlib import threading import time import ast import reapp Flask(__name__)RESTRICTED_PACKAGES {tkinter: 抱歉&…
阅读更多...
ASP.NET Core 中间件

ASP.NET Core 中间件

目录 一、常见的内置中间件 二、自定义中间件 三、中间件的执行顺序 四、其他自动逸中间件案例 1. 身份验证中间件 2、跨域中间件&#xff08;CORS&#xff09; ASP.NET Core 中&#xff0c;中间件&#xff08;Middleware&#xff09;是处理 HTTP 请求和响应的组件链。你…
阅读更多...
LevelDB 源码阅读：写入键值的工程实现和优化细节

LevelDB 源码阅读：写入键值的工程实现和优化细节

读、写键值是 KV 数据库中最重要的两个操作&#xff0c;LevelDB 中提供了一个 Put 接口&#xff0c;用于写入键值对。使用方法很简单&#xff1a; leveldb::Status status leveldb::DB::Open(options, "./db", &db); status db->Put(leveldb::WriteOptions…
阅读更多...
2007-2019年各省科学技术支出数据

2007-2019年各省科学技术支出数据

2007-2019年各省科学技术支出数据 1、时间&#xff1a;2007-2019年 2、来源&#xff1a;国家统计局、统计年鉴 3、指标&#xff1a;行政区划代码、地区名称、年份、科学技术支出 4、范围&#xff1a;31省 5、指标解释&#xff1a;科学技术支出是指为促进科学研究、技术开发…
阅读更多...
2025年1月22日（网络编程 udp）

2025年1月22日（网络编程 udp）

系统信息&#xff1a; ubuntu 16.04LTS Raspberry Pi Zero 2W 系统版本&#xff1a; 2024-10-22-raspios-bullseye-armhf Python 版本&#xff1a;Python 3.9.2 已安装 pip3 支持拍摄 1080p 30 (1092*1080), 720p 60 (1280*720), 60/90 (640*480) 已安装 vim 已安装 git 学习…
阅读更多...
如何对系统调用进行扩展?

如何对系统调用进行扩展?

扩展系统调用是操作系统开发中的一个重要任务。系统调用是用户程序与操作系统内核之间的接口，允许用户程序执行内核级操作（如文件操作、进程管理、内存管理等）。扩展系统调用通常包括以下几个步骤： 一、定义新系统调用 扩展系统调用首先需要定义新的系统调用的功能。系统…
阅读更多...
当卷积神经网络遇上AI编译器：TVM自动调优深度解析

当卷积神经网络遇上AI编译器：TVM自动调优深度解析

从铜线到指令&#xff1a;硬件如何"消化"卷积 在深度学习的世界里&#xff0c;卷积层就像人体中的毛细血管——数量庞大且至关重要。但鲜有人知&#xff0c;一个简单的3x3卷积在CPU上的执行路径&#xff0c;堪比北京地铁线路图般复杂。 卷积的数学本质 对于输入张…
阅读更多...
最新文章

Copyright @ 2022~2023