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

相关推荐
不写八个1 小时前
Vue3.0教程004:ref和reactive对比
前端·javascript·vue.js
梅羽落3 小时前
JavaScript_03 超简计算器
前端·javascript
前端 贾公子4 小时前
axios如何利用promise无痛刷新token
前端
新生派5 小时前
HTML<hgroup>标签
前端·html
timer_0176 小时前
Tailwind CSS 正式发布了 4.0 版本
前端·css
答题卡上的情书7 小时前
uniapp版本升级
前端·javascript·uni-app
枫叶丹48 小时前
【HarmonyOS之旅】基于ArkTS开发(三) -> 兼容JS的类Web开发(三)
开发语言·前端·javascript·华为·harmonyos
酷爱码8 小时前
HTML5+SVG+CSS3实现雪中点亮的圣诞树动画效果源码
前端·css3·html5
有杨既安然8 小时前
Vue.js组件开发深度指南:从零到可复用的艺术
前端·javascript·vue.js·npm
小韩学长yyds9 小时前
前端实战:小程序搭建商品购物全流程
javascript·css·vue.js·小程序·前端框架·node.js·html5