logo

额外区块类型 (EBT) - 全新的布局构建器体验❗

额外区块类型 (EBT) - 样式化、可定制的区块类型:幻灯片、标签页、卡片、手风琴等更多类型。内置背景、DOM Box、JavaScript 插件的设置。立即体验布局构建的未来。

演示 EBT 模块 下载 EBT 模块

❗额外段落类型 (EPT) - 全新的 Paragraphs 体验

额外段落类型 (EPT) - 类似的基于 Paragraph 的模块集合。

演示 EPT 模块 滚动

滚动

HTML 初学者 - HTML 教程

11/10/2025, by Ivan

HTML 是一种非常简单的语言,几乎所有理工科和人文学科的大学生都会学习它,如今我想大多数中学也在教授它。它之所以简单,是因为 HTML 甚至不是一种编程语言。

HTML 是一种标记语言,我们写什么,它就显示什么。没有算法、流程图、循环、变量或类,只有文字、文字、再加上文字。在 HTML 中只有标签,而且数量并不多。经常使用的标签也不到三十个。所以如果你想学习一门与编程语言相关的基础语言,HTML 是一个很好的起点。

HTML 初学者 - 第 1 课 - 标签 h1–h6、p、strong

11/10/2025, by Ivan

关于如何创建 HTML 文档,请参阅 HTML 初学者 - 第一步

在上一课中,我们创建了第一个 HTML 文档。

<html>
  <head>
    <title>我的第一个 HTML 文档</title>
  </head>
  <body>
    HTML 我的第一步
  </body>
</html>

在本课中,我们将为文档添加文本。让我们添加 HTML 中最常用的标签 —— <p></p>。别忘了,标签要用拉丁字母书写,这不是俄文字母“р”。标签 <p> 是 “paragraph”(段落)的缩写,表示文本段落。

HTML 初学者 - 第 2 课 - 标签 p、div 及其区别。标签 br

11/10/2025, by Ivan

在上一课中,我们创建了第一个 HTML 文档,这意味着你已经知道如何在文本编辑器中编写 HTML 代码,并通过浏览器查看修改后的效果(通常按 F5 键刷新页面)。

在本课中,我们将继续处理文本,并学习如何使用标签来包裹文本:span、p、div。同时,我们还会学习 br 标签。

<html>
  <head>
    <title>我的第一个 HTML 文档</title>
  </head>
  <body>   
    <h1>我的第一个 HTML 文档</h1>
     
  </body>
</html>

这就是我们将要继续操作的代码。

HTML 初学者 - 第 3 课 - 列表标签 ul、ol。HTML 标签属性。

11/10/2025, by Ivan

在网站上经常会使用到列表:比如菜单、正文中的条目列表等。我们先从最常用的一种——无序列表 <UL></UL>(unordered list - 无序列表)开始学习。

UL 列表

UL 列表用于菜单和带有项目符号的列表,并且可以通过 HTML 设置项目符号的样式。

我们先来修改一下我们的 HTML 代码:

HTML 初学者指南 - 第 4 课 - 链接(超链接)

10/10/2025, by Ivan

我们现在来到了 HTML 的最核心部分 —— 超链接(或简称 链接)。链接是组织和连接不同资料的方式。假设你有 100,000 个文本文件,如果要为它们建立目录,即使每个目录下有 200 个文档描述,你也需要 500 个目录。要浏览这 500 个目录找到所需的信息会耗费大量时间。那么链接是如何让我们的生活变得更简单的呢?

链接以任意方式连接两个 HTML 文档,使每个文档都有唯一的名称。这样我们就能从一个文档跳转到十个其他相关或热门的文档,从而更容易找到所需的信息。

HTML 初学者指南 - 第 5 课 - 表格

10/10/2025, by Ivan

表格是信息存储的重要形式之一。像 Excel、Access 等数据库都是以表格的形式来存储信息。表格能够直观地展示数据,并且这些数据很方便用于绘制图表和统计图。在本课中,我们将学习如何在 HTML 中创建表格。为此,我们会使用以下标签:<table><tr><td><th><thead><tbody><tfoot>

标签 table

TABLE 是表格的主标签,其他表格相关的标签都放在它的内部。

<table>
</table>

所有其他的表格标签都要写在这个标签内部。

HTML 初学者指南 - 第 6 课 - 图像

10/10/2025, by Ivan

网站上的图片是非常重要的元素,没有图片的网站看起来会灰暗、单调。图片用于装饰网站、展示相册,或者仅仅是为了在页面中添加一些视觉内容。

要插入图片,可以使用 IMG 标签(注意我们写的是 img,而不是完整的 image)。IMG 标签是单标签,即 <img />,没有闭合标签。

IMG 标签的主要属性是 src。它的作用与链接标签的 href 类似,我们需要在 src 属性中指定图片文件的路径。路径可以是相对路径,也可以是绝对路径。

HTML 初学者指南 - 第 8 课 - 标签的通用属性

10/10/2025, by Ivan

我们之前已经讲过,不同的标签具有各自的属性。现在该谈谈另一类属性——那些对所有标签都通用的属性。让我们来看看最常用的一些。

属性 id

id 属性用于给标签指定一个唯一的名称。这样的名称不应重复,否则在使用 jQuery 或 JavaScript 时可能会引发问题。以下是一些 id 属性的使用示例:

HTML 初学者指南 - 第 9 课 - 创建菜单

10/10/2025, by Ivan

网站的主要元素之一是菜单(导航)。通过菜单,用户可以在网站页面之间进行跳转。菜单对于搜索引擎的索引也非常重要,如果页面之间没有链接,搜索引擎就无法遍历整个网站。让我们看看菜单是如何组成的。

菜单通常使用无序列表(标签 ulli)来实现,因此每个菜单项都是列表中的一个元素:

...
<ul>
  <li></li>
  <li></li>
</ul>
...

li 标签内部通常插入指向不同页面的链接: