HTML 构建块

2025年5月5日 | 阅读 5 分钟

HTML 是创建互联网上任何网页的必要条件。它使用一种特殊系统中的标签来呈现文本、图像、链接、表单和类似的项目。对于初学者或有志成为网页开发人员的人来说，了解 HTML 如何构成网页的基础非常重要。

HTML 文档最重要的组成部分是

标签
属性
要素

理解这两者如何结合以影响网页的设计和内容非常重要。

1) HTML 标签

标签使 HTML 成为可能。它们规定了内容在互联网上显示时应如何表现或外观。大多数情况下，HTML 中使用的标签都会配有一对开始标签和结束标签。

语法

内容部分的开始标签，例如 <p>，标记其布局或目的的开始。此标签表示段落的结束：</p>。标签内部的内容会发生变化。

然而，有些标签是自闭合的，或者不需要内容——它们有自己的功能，即使没有内容。这些标签例如用于换行的 <br> 和用于图像的 <img>。

示例

标签	含义
<h1> 到 <h6>	标题，从最重要到最不重要
<p>	段落
<a>	锚点（超链接）
<div>	division 或 section
<img>	图像
<br>	换行

2) HTML 属性

属性为元素添加额外信息，应在首次提及元素的标签中设置。每对属性由一个名称和一个值组成，其中名称描述了该值。

语法

示例

<p style="color:blue;">This paragraph is styled blue.</p>
<img src="photo.jpg" alt="A scenic view" width="400" height="300" />
<a href="https://tpointtech.cn">Visit TPointTech</a>

style、src、href、alt 和 class 等属性极大地改善了 HTML 的行为和外观。

3) HTML 元素

HTML 元素的结构是标签、您放置的内容和另一个标签。浏览器将各种元素转换为您看到的内容，例如标题、列表、链接、图像和段落。标签包围任何内容，形成一个元素。

下图将向您展示 HTML 元素的工作原理。

示例

<!DOCTYPE html>
<html>
  <head>
	<title>The basic building blocks of HTML</title>
 </head>
  <body>
       <h2>The building blocks</h2>
       <p>This is a paragraph tag</p>
       <p style="color: red">The style is attribute of paragraph tag</p>
       <span>The element contains tag, attribute and content</span>
  </body>
</html>	

执行代码

输出

构建块

这是一个段落标签

style 是段落标签的属性

该元素包含标签、属性和内容

HTML 文档结构

所有 HTML 文档都以基本方式使用某些结构元素。下面为您准备了一个 HTML 骨架

示例

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a simple webpage.</p>
  </body>
</html>	

每个结构标签的含义

<!DOCTYPE html>：定义此文档是 HTML5。

<html>：包含整个 HTML 文档。

<head>：包含数据（称为元数据），其中包含页面标题和指向相关资源的链接。

<title>：设置在浏览器打开页面时显示的标题。

<body>：包含屏幕上可见的所有内容，如文本、图像、按钮和链接。

嵌套元素

在 HTML 中，您可以将元素放入其他元素中。人们称之为嵌套，这对于保持事物有序非常重要。

示例

<body>
  <div>
    <h2>Nested Structure</h2>
    <p>This paragraph is nested within a div.</p>
  </div>
</body>

注意：上面您可以看到 <div> 元素中的 <p> 和 <h2> 的父级。

空/void 元素

HTML 中的许多元素可以是打开的或关闭的，因为它们不包含内容。因此，我们称这些元素为空或 void 元素。

空元素列表

标签	描述
<br>	插入换行符
<hr>	水平线（线）
<img>	嵌入图像
<input>	表单中的输入字段
<link>	用于 <head> 中的样式表

示例

<h2>Title</h2>
<br />
<p>Continued text after line break. </p>

块级与内联元素

每个块级元素都自成一行，并跨越容器的全部宽度。这些元素中的大多数还包含其他元素，如 <p>、<h1> 到 <h6>、<section>、<article> 和 <table>。

示例

同时，内联元素会与相邻内容并行显示，并且只占用所需空间。<span>、<a>、<img>、<strong>、<em>、<input> 被认为是内联元素。

示例

文本格式化标签

HTML 允许您在不使用 CSS 的情况下进行文本格式化。

标签	描述
<strong>	粗体
<em>	斜体
<u>	下划线
<mark>	高亮
<del>	删除线
<small>	较小的文本

列表元素

HTML 允许用户将事物组织成三种类型的列表，如下所示

无序列表

当顺序无关紧要时使用此列表。大多数情况下，每个项目都显示为项目符号。

示例

<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

有序列表

当顺序很重要时，它有助于传达意义。该过程会自动为您的项目编号。

示例

<ol>
  <li>First Step</li>
  <li>Second Step</li>
</ol>

定义列表

用于展示术语及其含义。它方便创建词汇表或元数据。

示例

<dl>
  <dt>HTML</dt>
  <dd>Standard markup language for creating web pages.</dd>
</dl>

超链接

用户通过单击文本中的超链接跳转到其他网站。

示例

图像

您需要使用 <img> 标签在网页上嵌入图像。别忘了提及源属性（src）和可选的替代文本（alt）。

示例

注意：在 <img> 标签中使用 alt 文本可以使网站更具可访问性，并更容易被搜索引擎找到。

表

HTML 中的表格很有用，因为它们可以在行和列中对齐数据，从而使查看者清楚。

示例

<table>
  <thead>
    <tr><th>Name</th><th>Age</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>28</td></tr>
    <tr><td>Bob</td><td>32</td></tr>
  </tbody>
</table>

形式

表单允许用户输入数据，例如姓名或评论，这些数据可以提交给服务器进行处理。

示例

<form>
  <label>Name:</label>
  <input type="text" name="username" />
  <button type="submit">Submit</button>
</form>

语义标签

HTML5 引入了语义元素，以清晰地描述网页不同部分的含义和作用。由于这些元素，浏览器、搜索引擎和辅助技术更容易解释和理解网页内容。

网页或部分在顶部有一个 <header>，在底部有一个 <footer>，通常包含主标题、导航或版权信息。<nav> 条提供了一组链接，让用户可以浏览网站的内部页面。

<main> 在主要内容区域中显示页面上最重要的主题。<section>、<article> 用于将内容组织成圆形集合或可重用且有主题的事物（例如博客文章或报纸文章）。

使用语义标签可以提高可访问性，增强 SEO，并使代码井井有条，便于开发人员处理。

结论

在创建任何网页时，您都需要了解标签、属性和元素。它们是网页内容如何组合并在网站上显示的关键元素。使用 HTML，访问者可以享受到具有正确结构的网页，这要归功于标题、段落、图像、表单和页面之间的连接。彻底学习这些基本概念后，您就可以创建有用的网页。

下一个主题HTML 标签

HTML 构建块

1) HTML 标签

示例

2) HTML 属性

3) HTML 元素

示例

构建块

HTML 文档结构

示例

嵌套元素

示例

注意：上面您可以看到 <div> 元素中的 <p> 和 <h2> 的父级。

空/void 元素

空元素列表

块级与内联元素

文本格式化标签

列表元素

超链接

图像

注意：在 <img> 标签中使用 alt 文本可以使网站更具可访问性，并更容易被搜索引擎找到。

表

形式

语义标签

结论

联系信息

关注我们

教程

面试题

在线编译器

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) HTML 标签

示例

2) HTML 属性

3) HTML 元素

示例

构建块

HTML 文档结构

示例

嵌套元素

示例

注意：上面您可以看到 <div> 元素中的 <p> 和 <h2> 的父级。

空/void 元素

空元素列表

块级与内联元素

文本格式化标签

列表元素

超链接

图像

注意：在 <img> 标签中使用 alt 文本可以使网站更具可访问性，并更容易被搜索引擎找到。

表

形式

语义标签

结论

相关帖子

HTML 标题

HTML JavaScript

HTML Head

HTML 与 CSS

HTML 字符集

HTML 锚点

HTML 布局技术

HTML 文本编辑器

HTML 教程

HTML 符号

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器