HTML4入门

摘要：本文主要介绍了HTML相关的一些概念。

1 简介

1.1 软件

软件分类：

系统软件：Windows、Linux、MacOS
应用软件：Office、QQ
游戏软件：绝地求生、王者荣耀
其他分类

通常情况下，现在的软件一般由客户端与服务端两个部分组成：

客户端：用户通过客户端来使用软件。
服务端：服务端负责在远程处理业务逻辑。

服务端开发的语言：

Java
PHP
C#
Python
Node.js

客户端的形式：

命令行界面：占老的方式，通过命令行来使用软件。
图形化界面：通过点击拖动等来使用软件。比较典型的时Windows中的大部分应用，属于C/S架构，即Client/Server架构。
网页：通过访问网页来使用软件。所有的网站都属于这个范畴，属于B/S架构，即Brower/Server架构。

相较于传统的命令行界面和图形化界面，网页具有如下一些优点：

不需要安装
无需更新
跨平台

网页中使用的语言：

HTML
CSS
JS

1.2 网页

网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。

网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。

网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件。

HTML全称：HyperText Markup Language（超文本标记语言），含义如下：

HyperText（超文本）：指可以加入图片、声音、动画、多媒体等内容，超越了文本限制，也指可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。
Markup（标记）：文本要变成超文本，就需要用到各种标记符号，包括各种元素。
Language（语言）：每一个标记的写法、读音、使用规则，组成了一个标记语言。

HTML不是一种编程语言，而是一种标记语言（Markup Language），标记语言是一套标记标签（Markup Tag）。

1.3 浏览器

浏览器是网页显示、运行的平台。常用的浏览器有IE、Firefox、Chrome、Safari和Opera等，称为五大浏览器。

浏览器内核是将文件展示成网页的渲染引擎，负责读取网页内容、整理讯息、计算网页的显示方式并显示页面。

1.4 国际组织

1.4.1 IETF

全称：Internet Engineering Task Force（国际互联网工程任务组），成立于1985年底，是一个权威的互联网技术标准化组织，主要负责互联网相关技术规范的研发和制定，当前绝大多数国际互联网技术标准均出自IETF。

官网：https://www.ietf.org

1.4.2 W3C

全称：World Wide Web Consortium（万维网联盟），创建于1994年，是目前Web技术领域，最具影
响力的技术标准机构。共计发布了200多项技术标准和实施指南，对互联网技术的发展和应用起到
了基础性和根本性的支撑作用。

官网：https://www.w3.org

1.4.3 WHATWF

全称：Web Hypertext Application Technology Working Group（网页超文本应用技术工作小组），成立
于2004年，是一个以推动网络HTML5标准为目的而成立的组织。由Opera、Mozilla基金会、苹果，
等这些浏览器厂商组成。

官网：https://whatwg.org

1.5 发展历史

从HTML1.0开始发展，期间经历了很多版本，目前HTML的最新标准是HMTL5，具体发展史如图：
001-发展历史

1.6 Web标准

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。

遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点：

让Web的发展前景更广阔。
内容能被更广泛的设备访问。
更容易被搜寻引擎搜索。
降低网站流量费用。
使网站更易于维护。
提高页面浏览速度。

Web标准主要包括三个方面：

结构（Structure）：用于对网页元素进行整理和分类，主要指的是HTML。
表现（Presentation）：用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
行为（Behavior）：用于定义网页模型及编写网页交互，主要指的是JS。

Web标准提出的最佳体验方案是结构、样式、行为互相分离，即结构写到HTML文件中、表现写到CSS文件中、行为写到JS文件中。

1.7 官方文档

官方文档地址：

推荐使用MDN官方文档。

2 概念

2.1 标签

2.1.1 定义

标签又称元素，是HTML的基本组成单位。

标签名不区分大小写，但推荐小写，因为小写更规范。

元素分为双标签和单标签，绝大多数都是双标签：

双标签
单标签

前面的是开始标签，两个标签中间的是元素内容，后面的是结束标签，结束标签多了一个/符号且不可省略：

html

1	<span></span>

只有一个标签，不存在元素内容：

html

<input />

标签后面的空格和/符号可以省略：

html

<input>

2.1.2 尝试

使用鼠标右键新建文本文档，输入以下内容：

hello.html

1	<h1>Hello HTML</h1>

将文本文档重命名为hello.html后，双击打开，即可看到创建的页面。

2.1.3 基本结构

一般情况下，在网页中右键，在菜单的底部可以看到查看页面源代码和检查这两个选项：

查看页面源代码：可以看到程序员编写的页面源码。
检查：浏览器对页面源码经过格式化等处理后的代码。

选择检查后，可以看到页面的基本结构：

html

<html>
  <head>
    <title>网页标题</title>
  </head>
  <body></body>
</html>

常用的元素：

标签名	说明	单双
html	页面中最大的元素，称为根元素	双标签
head	用于定义页面的特性，不会展示在页面上，通常是给浏览器或者搜索引擎使用的	双标签
title	用于定义页面的标题，嵌套在`head`元素中	双标签
body	用于定义页面的内容，会展示在页面上	双标签

使用VSCode工具快速生成页面结构：

第一步：双击打开软件。
第二步：新建文件并保存为.html文件。
第三步：输入!符号并根据提示按下Tab键，会自动生成基本结构。

生成的页面结构如下：

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>我是标题</title>
  </head>
  <body></body>
</html>

此外，如果想配置网站图标，可以在存放页面的根目录中，使用favicon.ico图片作为网站图标。

2.1.4 关系

元素的关系可以分为两类：嵌套和并列。

嵌套指的是不同层次的元素之间的关系，将被嵌套的元素置于嵌套元素之中，要求嵌套元素必须有双标签。示例：

html

<html>
  <head>
    <title>网页标题</title>
  </head>
</html>

嵌套的元素之间存在父子关系：

父亲元素：对于title元素来说，head元素是其父亲元素。对于head元素来说，html元素是其父亲元素。
儿子元素：对于head元素来说，title元素是其儿子元素。对于html元素来说，head元素是其儿子元素。
祖先元素：对于title元素来说，head元素和html元素都是其祖先元素。父亲元素也是祖先元素的一种。
后代元素：对于html元素来说，head元素和title元素都是其后代元素。儿子元素也是后代元素的一种。

并列指的是相同层次的元素之间的关系，对元素的标签无要求。示例：

html

1 2	<head></head> <body></body>

并列的元素之间存在兄弟关系：

兄弟元素：对于body元素来说，head元素是其兄弟元素。对于head元素来说，body元素是其兄弟元素。

2.2 声明

2.2.1 说明

用于告知浏览器当前页面的版本。

页面的声明必须写在第一行，并且要写在html元素外面，即和html元素同级且在html元素上面。

格式：

html

1	<!DOCTYPE>

DOCTYPE是Document Type Declaration（文档类型声明）的缩写。

声明不是HTML标签，既不是单标签也不是双标签。

声明不区分大小写，可以按照个人习惯选择。

2.2.2 HTML4

在HTML4中，确切的说是在HTML4.01及之前版本中，因为基于SGML（Standard Generalized Markup Language，标准通用标记语言），声明可能会指向DTD（Document Type Definition，文档类型定义）文件，这个文件定义了文档的结构和元素规则。

HTML4.01规定了三种不同的声明：

Strict：最严格，包含所有元素和属性，不包括表象或过时的元素，框架集frameset是不允许使用的。示例：
html
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Transitional：较严格，包含所有元素和属性，包括表象或过时的元素，框架集frameset是不允许使用的。示例：
html
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Frameset：最宽松，包含所有元素和属性，包括表象或过时的元素，框架集frameset是允许使用的。示例：
html
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

2.2.3 HTML5

在HTML5中不再基于SGML，因此不再依赖DTD文件，而是使用更简单的声明。示例：

html

1	<!DOCTYPE html>

因为声明是向下兼容的，因此可以在HTML5的声明中编写HTML4的代码，但是不能在HTML4的声明中编写HTML5的代码。

2.3 属性

属性用于给元素提供附加信息，在双标签中可以将属性写在开始标签中，在单标签中可以将属性写在/符号前。

属性一般由属性名和属性值组成，某些特殊属性也可以只有属性名，其属性值可以省略：

指定属性值
省略属性值

html

1	<input type="password">

html

1	<input disable>

注意：

不同的元素有不同的属性，存在适用所有元素的通用属性，比如id属性用于在页面上作为元素的唯一标识。
属性名和属性值都是W3C规定好的，不能乱写。
属性名和属性值不区分大小写，推荐使用小写。
属性值的双引号也可以写成单引号，如果没有空格等特殊字符也可以不写，推荐使用双引号。
元素中如果出现同名属性，后面的属性会失效。

2.4 语言

设置页面语言可以让浏览器显示对应的翻译提示，也可以方便搜索引擎的优化。

语言可以在html元素中使用lang属性设置，写法如下：

html

1	<html lang="zh-CN">

其他语言的设置：

zh-CN：中文-中国大陆（简体中文）
zh-TW：中文-中国台湾（繁体中文）
zh：中文
en-US：英语-美国
en-GB：英语-英国

2.5 字符集

计算机本身是二进制的，为了方便使用，在写入时会对输入的数据进行编码，在读取时会对输出的数据进行解码。

在编码和解码时，需要使用字符集进行规范，解码需要使用和编码相同的字符集，否则会导致最终读取出来的内容产生乱码。

常见的字符集如下：

ASCII：大写字母、小写字母、数字、一些符号，共计128个。
ISO 8859-1：在ASCII基础上，扩充了一些欧洲字符，比如希腊字符等，共计是256个。
GB2312：继续扩充，收录了6763个常用汉字和682个字符。
GBK：收录了的汉字和符号达到20000多个，支持繁体中文。
UTF-8：包含世界上所有的文字与符号。建议使用。

可以在head元素中通过meta元素配合charset属性指定页面的字符集，让浏览器使用这种字符集对页面内容进行解析：

html

1
2
3

<head>
  <meta charset="UTF-8">
</head>

2.6 注释

使用注释可以对页面源码进行解释和说明，并且注释在展示的时候会被过滤掉，但是查看源码是可以看到的。

格式：

html

1	<!-- 注释内容，在页面上不可见 -->

注意：

注释不支持嵌套，不要在注释里嵌套其他注释。

3 基础

3.1 排版元素

排版元素用于规范页面内容的显示。

常用的元素：

标签名	说明	单双
h1~h6	用于标识页面内容的6个标题级别，从h1到h6级别越来越低，元素里不能嵌套其他排版元素	双标签
p	用于表示页面内容的段落，元素里不能嵌套其他排版元素	双标签
div	无特殊含义，用于整体布局，元素里可以嵌套其他元素，包括排版元素	双标签
span	无特殊含义，用于局部修饰，元素里不能嵌套其他排版元素	双标签

3.2 语义化

语义指的是元素的含义，某些元素是有特定含义的，比如p元素的含义是表示段落，某些元素是没有特定含义的，比如span元素。

语义化元素指的是具有特定含义的元素，这种元素有一定的优势：

代码结构清晰，方便阅读，有利于团队合作开发。
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
有利于搜索引擎优化（SEO）。

在使用语义化元素时，应该关注元素特定含义，不应该关注元素样式，因为样式可以通过CSS进行调整。

常用的元素：

标签名	说明	单双
br	换行，如果只想增加段落间隔，建议使用CSS实现	单标签
hr	分隔，如果只想使用水平线，建议使用CSS实现	单标签
pre	按原文显示，一般用于在页面中嵌入大段代码	双标签

3.3 元素区块

在页面上只能独占一行的元素被称为块级元素，比如div元素，在页面上不需要独占一行的元素被称为行内元素，比如span元素。

排版元素属于块级元素，是独占一行的。

一般情况下，在块级元素中可以嵌套块级元素和行内元素，在行内元素中只能嵌套行内元素，但某些特殊的块级元素不能嵌套：

标题元素h1~h6中不支持互相嵌套，也不建议在标题中嵌套其他块级元素。
段落元素p中不支持其他块级元素，建议分段并在段落中使用其他块级元素。

3.4 实体

3.4.1 介绍

在HTML中存在一些预留字符，比如标签的<字符和>字符。

浏览器默认会将预留字符识别为标签，如果想要在页面内容里使用预留字符，就需要用特殊形式的内容来表示这些预留字符，这种特殊形式的内容称为实体。

比如想要在页面中显示这句话：

html

1	我记得<div>是块级元素

如果在代码中直接写的话，会导致页面将<div>解析为标签，而不是文本内容，解决办法就是使用实体替换预留字符。

再比如想要在页面中显示多个空格：

html

这里有   三个空格

但是页面实际上会将多个空格合并为一个空格，想要强制显示多个空格，就需要使用实体。

3.4.2 规则

实体的规则：

以&符号开始。
以;符号结束。
如果使用实体名称，格式为&实体名称;，如果使用实体编号，格式为&#实体编号;。

实体名称更方便记忆，能使用实体名称就尽量使用实体名称，但是需要注意：

实体名称对大小写敏感。
并不是所有的预留字符都有实体名称。
部分浏览器可能不支持某些实体名称。

3.4.3 常见

常见的预留字符对应的实体名称和实体编号如下：

预留字符	描述	实体名称	实体编号
&	和	amp	38
<	小于号	lt	60
>	大于号	gt	62
	空格	nbsp	160
¥	元	yen	165
©	版权	copy	169
®	商标	reg	174
×	乘号	times	215
÷	除号	divide	247
"	双引号	quot	34
'	单引号	无	39
`	反引号	无	96

更多的对应关系可以参考文档：WHATWG实体

3.4.4 解决

回到之前的问题，可以使用下面的代码实现：

html

1 2	我记得<div>是块级元素这里有   三个空格