当前位置：首页 > news >正文

自闭和标签形式（self-closing tags）和标准标签形式

news 2025/8/10 14:08:21

在 Vue 和 HTML 中，标签可以分为两种形式：自闭和标签形式（self-closing tags）和标准标签形式（paired tags）。

<Header /> 自闭合标签
<Header></Header> 闭合标签 开放标签

HTML语法规范——标签
HTML中用于描述功能的符号。

标签在使用时必须用尖括号“<>”括起来。浏览器会对尖括号里面的标记进行解释。

1、开放标签、闭合标签——双标签
标签一般成对出现，分别叫：开放标签、闭合标签；如：

2、空元素/自闭和标签——单标签
不包含任何内容的元素称为空元素。比如元素

1. 自闭和标签形式（Self-closing tags）

自闭和标签是那些没有结束标签的标签。它们本身是“自闭合”的，因此无需写明确的结束标签。通常，这些标签是单一的，不能包含其他子元素。自闭和标签通常在空元素的情况下使用。

示例：

<img src="image.jpg" alt="Image">
<input type="text" placeholder="Enter text">
<br>
<hr>

特点：

自闭和标签不需要结束标签，标签本身就是完整的。
自闭和标签的语法在 HTML5 中不强制加斜杠（但在 XHTML 中会要求加斜杠，例如：<img />）。
一般用于没有子元素的标签，像是 <img>、<input>、<br>、<hr>、<meta>、<link> 等。

Vue中的自闭和标签：
在Vue中，自闭和标签的使用方法与原生HTML中相同。

<template><div><!-- 自闭和标签 --><img src="logo.png" alt="Logo"><input type="text" v-model="inputValue"></div>
</template><script setup>
import { ref } from 'vue'const inputValue = ref('')
</script>

2. 标准标签形式（Paired tags）

标准标签是指需要开标签和闭标签配对使用的标签。通常，标准标签会有一个开始标签和结束标签，且可以包含子元素或内容。

示例：

<p>This is a paragraph.</p>
<div class="container"><span>Text inside span.</span>
</div>

特点：

标准标签需要开标签和闭标签。
可以包含子元素或文本内容。
每个开标签都必须有相应的闭标签。
例如 <div></div>、<span></span>、<ul></ul>、<li></li> 等。

Vue中的标准标签：
Vue组件和原生HTML中的标准标签一样，都需要配对开闭标签。

<template><div><p>{{ message }}</p><div><span>{{ name }}</span></div></div>
</template><script setup>
import { ref } from 'vue'const message = ref('Hello, Vue!')
const name = ref('Vue Developer')
</script>

自闭和标签与标准标签的对比：

特性	自闭和标签	标准标签
结束标签	无结束标签，单一闭合	需要结束标签配对
用途	无子元素或内容的标签	包含内容或子元素的标签
语法	`<img src="image.jpg">`	`<div>Content</div>`
常见标签	`<img>`, `<input>`, `<br>`, `<hr>`	`<div>`, `<p>`, `<span>`
适用场景	用于插入图片、表单控件、换行等	用于包含内容和其他元素的容器