7/22/2025

本教程尝试使用简单通俗的叙事方式、遵循思维运行路线,通过介绍大部分的标签元素,抓大放小,形成对 HTML 的快速印象,建立稳固的 HTML 知识结构。

简明 HTML 教程

写在开头:写给自己看的技术教程。相当于把知识要点梳理一遍,建立知识框架,差缺补漏。用自己的话、自己的行文方式说一遍、写一遍。如果遇到卡壳、说不清楚,说明自己没有真的懂。

引言

本教程尝试使用简单通俗的叙事方式、遵循思维运行路线,通过介绍大部分的标签元素,抓大放小,形成对 HTML 的快速印象,建立稳固的 HTML 知识结构。

本文未尽严谨,是一家之言,恐为行家所笑。

有一个著名的《简明Python教程》,本教程起名也算是东施效颦。

正名:从名称说开去

HTML, HyperText Markup Language,超文本标记语言。

什么是标记语言?它是一种声明式的语言。相比于通用编程语言。通用编程语言是命令式的。

什么是标记?就是打个记号。在 HTML 中,用尖括号来表示标签。这个标签就是标记。如 <h1>this is header 1</h1> ,这里的 <h1></h1> 就是标记、标签。

文档

HTML 是用来描述网页的语言。网页是什么?是文档。 文档是什么?图文。图片和文本。包含一些文字、段落。一些图片。也会有表格。就像文章、书籍。 文本有装饰、段落、排版。

最初的网页很简单。

p 是段落。 h1 h2 是标题。 ol ul 是有序列表和无序列表。 img 是图片。 table 是表格。

p, paragraph,段落。 h, heading,标题。 ol,ordered list,有序列表。 ul,unordered list,无序列表。 li,list item,列表的项。 img,image,图片。

超链接

HTML 或者说 Web ,最强大的地方在于,文档之间可以互相连接。称为超链接。 a 就是超链接的标签。每个文档在Web有唯一的地址。这是 URL 。 a 就指向某个 URL 。 URL 是 Uniform Resource Locator 唯一资源定位器。什么是资源?网页、图片都是资源。

a,anchor,锚点。。

语法和术语

HTML元素,包含开始标签、内容、结束标签,共三部分。内容也可以是HTML元素。这样就实现了递归。因为一个元素对应一个标签,标签名称就是元素名称,在表达时,元素和标签,往往表示同一个意思,互换着表达。

根元素

html 是根元素 head 是文档头 body 是文档体,也就是文档内容

下面是文档模板:

<!DOCTYPE html>
<html>
	<head></head>
	<body></body>
</html>

开头表示文档类型。在以前,有多种文档类型,比如 HTML 4.01 和 XHTML 1.0 ,它们的文档类型就是不一样的。它已经是历史遗留产物了。照着写就可以了。

注释

<!-- this is comments -->

属性

特殊字符

容器元素

div span 是没有语义的块元素,我称为泛元素 div 是 division,分开、区域。块级元素。 span 意思是 span of text,一段文字。

附一段历史:最开始,没有 div span。HTML就是为了表示文档,不需要div span。但随着发展,HTML元素不断扩宽,在1997年发布 HTML 3.2 正式引入 div span。

语义化标签

现代HTML(HTML4.01之后),增加了一下语义化的标签元素。

header 页头 nav 导航 main 主要内容 article 文章、独立内容 section 区块段落,更通用 aside 侧边栏 footer 页脚 figure 图文

多媒体

audio video

嵌入对象

object

嵌入页面

iframe frameset

表单

当 HTML 有了交互需求、输入需求,才出现了表单。

form 是表单。input 标签包含了多种输入控件。button submit 是按钮和提交,text 是文本输入, radio checkbox 是单选框、复选框,number 是数值,range 是范围,date 是日期。color 是颜色。file 是可以上传文件。

另外,还有独立标签。select option 是下拉框。textarea 是多行文本输入。label 是标签。

文档头

title 标题 meta 是元信息 script 是脚本 style 是样式 link 是外部资源

事件

另开一个教程来说明

其他

引用

blockquote 引用 cite 引用来源

其他的其他

strong 强调 em 也是强调

其他技术

chm dhtml xhtml

还有 CSS 样式,在另一个教程。

样式

一些用于表示样式的标签,绝大部分已经废弃。

布局

在 CSS 出现之前,在 HTML 远古时代,主要用 table 来布局。 CSS 出现之后、CSS 发展壮大之后,就不再需要 table 布局了。

属性

本教程没有介绍属性 属性通常和样式、事件相关。

怎么精通HTML

你看到任何一篇文档,扫一下各个部分。想象一下,如果用 HTML 表示,代码是什么样的。每个元素对应哪个标签。 如果没有太明显的思维阻碍,不需要想好几秒,你就算是精通了 HTML 。 在达到这个境界之前,不断练习。

最后

本教程没有涉及所有标签元素。但,当你的头脑里具备了这个框架,其他的标签元素很容易加进来。

记得经常来看这篇教程,回顾、巩固你的 HTML 知识。温故而知新。

参考

HTML 基础语法 - 学习 Web 开发 | MDN


本文固定链接:https://zachthinking.com/p/html

禁止转载,保留所有权利

©2025 扎克爱思