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

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

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

一、一般标签

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

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

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

html 复制代码
 <!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>

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

html 复制代码
 <!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>表示强调。

html 复制代码
 <!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>

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

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

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

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

html 复制代码
 <!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>

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

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

7、下划线标签(<ins>

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

html 复制代码
 <!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样式来实现居中对齐)。

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

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

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

html 复制代码
 <!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)。

html 复制代码
 <img src="example.jpg" alt="示例图片">

2、换行标签 (<br>)

用于在文本中插入换行。

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

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

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

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

4、输入标签 (<input>)

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

html 复制代码
 <!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>)

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

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

6、链接标签 (<link>)

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

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

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

7、源标签 (<source>)

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

html 复制代码
 <video controls>
     <source src="movie.mp4" type="video/mp4">
     <source src="movie.ogg" type="video/ogg">
 </video>

8、跟踪标签 (<track>)

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

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

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

相关推荐
zeijiershuai1 分钟前
Vue框架
前端·javascript·vue.js
vvilkim3 分钟前
使用 JavaScript 和 HTML5 实现强大的表单验证
开发语言·javascript·html5
写完这行代码打球去3 分钟前
没有与此调用匹配的重载
前端·javascript·vue.js
华科云商xiao徐4 分钟前
使用CPR库编写的爬虫程序
前端
狂炫一碗大米饭6 分钟前
Event Loop事件循环机制,那是什么事件?又是怎么循环呢?
前端·javascript·面试
IT、木易8 分钟前
大白话Vue Router 中路由守卫(全局守卫、路由独享守卫、组件内守卫)的种类及应用场景
前端·javascript·vue.js
顾林海8 分钟前
JavaScript 变量与常量全面解析
前端·javascript
程序员小续8 分钟前
React 组件库:跨版本兼容的解决方案!
前端·react.js·面试
不会聊天真君6479 分钟前
HTML5(Web前端开发笔记第一期)
笔记·html5
乐坏小陈10 分钟前
2025 年你希望用到的现代 JavaScript 模式 【转载】
前端·javascript