HTML 中的结束标签包含

2024年8月28日 | 阅读 7 分钟

结束标签，也称为闭合标签，在 HTML（超文本）中用于标识一个 HTML 元素的结束。标签定义 HTML 元素，它们是网页的构建块。标签包含开始标签、内容和结束标签。

以下是包含开始和结束标签的 HTML 元素的分解：

'<tagname>'：这是开始标签。它表示 HTML 元素的开始，并说明了元素的类型。标签名必须是一个已识别的 HTML 名称，例如段落的 <p>，标题 (<h1> 等)，链接 (a) 等。
'Content goes here'：这是 HTML 元素所表示的内容。元素中包含什么？它是信息或文本。内容取决于元素的类型。
'</tagname>'：这是结束标签。它关闭 HTML 元素。标签名与开始标签相同，表示元素的结束位置。

以下是一些说明该概念的示例：

段落元素

标题元素

链接元素

通过使用开始和结束标签进行嵌套，我们可以这样组织 HTML 文档的内容以形成层级结构。每个开始标签都需要一个相应的结束标签，并且必须正确嵌套，以保持 HTML 结构的完整性。否则，可能会导致网页浏览器出现渲染问题或奇怪的行为。

嵌套和层级结构

HTML 元素可以嵌套在彼此内部以构建层级结构。正确使用开始和结束标签也有助于确保嵌套元素清晰地排列。以下是一个示例：

<div>
  <p>This is a paragraph inside a div.</p>
</div>

在此示例中，段落 (<p>) 嵌套在 div (<div>) 内部。

1. 空元素

然而，并非所有 HTML 元素都需要结束标签。空元素，例如 <img>,<br> 和 input，没有内容；它们是自闭合的。它们可以写成这样，在结束尖括号之前有一个斜杠：

<img src="image.jpg" alt="An example image" />
<br />
<input type="text" />

2. 属性

HTML 标签可以具有属性，这些属性为元素添加额外信息。属性包含在开始标签内，并出现在开始标签和结束标签中。以下是一个带有 <a>（锚点）标签中“href”属性的示例：

3. 文档结构

HTML 文档的全部内容包含在 <html> 元素内。通常，在嵌套的树结构中有成对的 <head> 和 <body> 元素，它们包含其下的所有内容。这进一步有助于组织元数据（在 <head> 中）和可见内容（在 <body> 中）。

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>

4. HTML5 简化

HTML5 确实有一些简化。例如，许多元素的结束标签（如 <p>,<li> 等）是多余的，因为解析器可以推断它们。

<p>This paragraph doesn't need a closing tag.
<p>Another paragraph without a closing tag.

但请记住，虽然 HTML 对一些错误并不在意，但编写格式良好的 HTML 仍然是一种好习惯。坚持为所有元素使用正确的开始和结束标签会有所帮助。这可以提高可读性、可维护性和跨浏览器兼容性。

HTML 中的注释

HTML 代码注释可用于为自己或其他程序员提供解释或笔记。在浏览器中，没有注释。

<!-- This is a comment -->
<p>This is a paragraph.</p>

1. 特殊字符

HTML 中有一些特殊字符，例如 < 和 >。要在内容中显示这些字符，您应该使用字符实体：

< 表示为 <
> 表示为 >
& 表示为 &

2. HTML 实体

HTML 实体用于表示在 HTML 中具有特殊含义的字符。例如，© 是版权符号 ©。

3. Doctype 声明

<!DOCTYPE html> 声明用于 HTML 文档的开头，以指示其使用的 HTML 版本。HTML5 的 doctype 在现代 Web 开发中被广泛使用。

<!DOCTYPE html>
<html>
  <!-- ... -->
</html>

4. 自闭合标签

实际上，空元素是自闭合的，不需要单独的结束标签。在这种情况下，HTML5 允许您省略结束斜杠。

<img src="image.jpg" alt="An example image">
<br>
<input type="text">

5. 空白

在 HTML 中，多个空格和换行符会被压缩成一个空格。如果您想保留空白，可以使用 <pre>（预格式化）标签或 CSS 样式。

<pre>
  This text
  will preserve
  whitespace.
</pre>

6. HTML 表单

HTML 提供了 <form>、<input>、<select> 和 <button> 等表单元素，用于向网页添加交互性。

<form action="/submit" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password">
  <br>
  <button type="submit">Submit</button>
</form>

以下是 HTML 的一些其他方面，有助于构建具有良好结构和语义含义的页面。学习这些概念后，开发人员就可以创建不仅外观精美，而且对浏览器和残障用户都能理解的 Web 内容。

7. Meta 标签

Meta 标签提供 HTML 文档的元数据，例如字符集和视口设置。它们通常位于 <head> 元素内。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="A brief description of the page">
  <title>Page Title</title>
</head>
<body>
  <!-- Content goes here -->
</body>
</html>

8. 列表

HTML 有有序列表 (<ol>)、无序列表 (<ul>) 和列表项 (<li>)。

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

9. 图片

您可以使用 <img> 元素显示图像。src 属性指示图像的源（URL）；alt 为可访问性提供替代文本。

10. 表格

表格由 <table> 元素生成，带有行 (<tr>) 和表头 (<th>)，并在其中包含单元格，单元格还可以进一步划分为列。

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

11. 链接和导航

HTML 中的链接使用 <a>（锚点）元素创建。href 属性定义链接的目标。

HTML 提供了 <nav>、<ul> 和 <li> 的导航元素。

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

12. 音频和视频

您可以使用 <audio> 和 <video> 元素嵌入音频和视频。

<audio controls>
  <source src="audio.mp3" type="audio/mp3">
  Your browser does not support the audio tag.
</audio>
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

这只是 HTML 的一些其他元素和概念。了解如何应用这些元素并构建 HTML 文档对于创建外观精美的网页至关重要。HTML 与 CSS 和 JavaScript 一起，构成了现代 Web 开发的基础。

13. 表单和输入类型

HTML 表单允许用户输入数据。通过包括文本、密码、复选框和单选按钮的输入类型来收集不同种类的信息。

<form action="/submit" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <input type="checkbox" id="subscribe" name="subscribe" value="yes">
  <label for="subscribe">Subscribe to newsletter</label>
  <br>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label>
  <br>
  <button type="submit">Submit</button>
</form>

14. 语义化 HTML

语义化 HTML 元素提供有关网页结构和内容的信息。<header>、<nav>：导航信息。

<header>
  <h1>Website Title</h1>
</header>
<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>
<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content goes here.</p>
  </article>
</main>
<aside>
  <p>Additional information or related content.</p>
</aside>
<footer>
  <p>© 2023 Website Name. All rights reserved.</p>
</footer>

结论

实际上，HTML 或超文本标记语言是赋予 Web 内容结构和意义的基础语言。HTML 中的开始和结束标签可以定义和组织 Web 文档中的元素。HTML 的基本框架可用于创建从简单的文本组件到高科技多媒体内容的一切。通过包含诸如 <header>、<nav> 和 <footer> 等语义化元素来体现其重要性。

随着 Web 编程的发展，HTML 已发展到反映现代设计和功能的趋势。<meta> Viewport 标签使响应式设计能够使网页适应不同尺寸的设备屏幕。此外，HTML5 还包括 canvas 元素以及多媒体的嵌入功能。构成 Web 开发基础的三大要素是 HTML、用于样式和布局的 CSS，以及用于动态交互的 JavaScript。

要进入这个领域，掌握 HTML 是必不可少的。它使开发人员能够构建结构良好、可访问且外观精美的网站。在动态的数字世界中，HTML 仍然是交互式 Web 体验的基石，不可替代；没有什么比良好的 HTML 更重要。

下一主题HTML 输入类型数字

HTML 中的结束标签包含

嵌套和层级结构

1. 空元素

2. 属性

3. 文档结构

4. HTML5 简化

HTML 中的注释

1. 特殊字符

2. HTML 实体

3. Doctype 声明

4. 自闭合标签

5. 空白

6. HTML 表单

7. Meta 标签

8. 列表

9. 图片

10. 表格

11. 链接和导航

12. 音频和视频

13. 表单和输入类型

14. 语义化 HTML

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 中的结束标签包含

嵌套和层级结构

1. 空元素

2. 属性

3. 文档结构

4. HTML5 简化

HTML 中的注释

1. 特殊字符

2. HTML 实体

3. Doctype 声明

4. 自闭合标签

5. 空白

6. HTML 表单

7. Meta 标签

8. 列表

9. 图片

10. 表格

11. 链接和导航

12. 音频和视频

13. 表单和输入类型

14. 语义化 HTML

结论

相关帖子

如何制作 HTML 下拉菜单

将 HTML Collection 转换为数组

HTML 复选框标签

HTML 计算器

Excel 中级测试

如何在 HTML 中突出显示文本

如何保存 HTML 文件

从字符串中剥离 HTML 标签

HTML CSS 初学者项目

HTML 中的语义标签

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器