大学入学新生，零基础，想学WEB开发，看过来，通过案例教学，教你从入门到能独立完成课程设计，综合实训，甚至毕业设计。

前言

一直以来，我都希望有方法，能较大明显的提升学生的实践开发能力。在实际教学过程中，感觉同学们至少存在以下几个问题：

1. 不知道该如何学习程序开发
2. 零散的学习了一些相关的课程，但是却不知道该如何应用于实际开发，即无法将知识连贯起来并加以应用。
3. 不知道该如何着手一个具体的项目开发。

总的来说，就是无法独立开发一个功能较为完整的应用。

于是，我想编写一个程序开发指导书，希望通过一个案例，来详细指导学生从零基础开始，如何学习，如何实践，最终能独立或合作完成完整项目的开发。我希望达到以下几个基本目标：

• 适合零基础的同学。我希望能让刚开始学习的同学就能通过指导书建立起学习的兴趣，要有较强的可读性，可实践性。
• 通过本指导书，就能学习到基本的知识点。即通过我的指导能基本明白相关的知识，也可以通过推荐的参考资料进行更深入的学习。
• 能给同学们一个学习的路线或方向的指引。即希望能通过指导中的参考路线的学习，能一步步的掌握应用开发的各个知识内容。

我也知道，这肯定不是一撮而就的，需要不断的完善，补充。但我相信，只要开始了，总会有完成的一天。就把今天这个日期记录下来，也做为一个见证吧。（2022/1/10）

我会保持不断的，较高频的更新，建议大家收藏。

案例说明

我选的案例，并没有什么特别的考虑，只是自己也想做的一个项目。叫“失物认领”。是一个在线的发布失物信息，然后指导失主领取的简单应用。其主要的功能包括：

• 拾到者发布失物信息
• 失主搜索失物信息
• 失主查看失物领取信息
• 拾到者或失主确认失物被领取
• 其他

之所以，并没有详细的对功能进行描述，是因为我们一般刚有一个开发创意时，对项目的功能也是较为模糊的。正如我上面的描述。这需要通过应用后面一些相关知识来不断的深化和丰富。

当我们心里突发一个想法，想自己开发一个程序来实现时，我们该怎么做呢。或者说，我现在想学习程序开发，想通过案例来驱动我的学习过程。那么，我该从哪开始学起呢。那么，我们需要回答下面第一个问题。

我们准备开发一个什么样的程序

我们现在是想开发一个实现失物认领功能的程序。在这里，我们姑且认为大家能理解程序这个概念。我们在任何计算设备（泛指有计算能力，所谓智能的硬件设备，比如电脑，手机，智能手表，智能家电等）上运行的都是程序。不管是你手机上的APP，还是你桌面电脑或笔记本电脑上运行的应用，还是计算机上浏览的网页，还是在微信群里分享的微信小程序，或者你智能手表上的功能。这些都是我们这里称的程序。

那么，我们准备把失物认领开发成为一个什么样的程序呢？是在桌面电脑上象WORD一样运行的图形用户图面的（GUI）程序？还是在浏览器上访问网站一样的程序，还是能在手机上运行的程序，或者在微信上通过小程序或公众号下面的菜单来访问的程序，甚至是在电脑上使用CMD命令打开的命令控制台来使用的命令控制台程序。

首先，我们要理解，程序至少应该分成两种，一种是所谓单机版程序，一种是网络版程序。从字面可以理解，单机版当然不需要联网，也能使用，程序只被安装在一台计算设备上。而网络版程序是运行在网络环境下，需要多台计算设备之间互相通讯，共同实现一定的功能的程序（当然，有时候，我们在开发时，也会使用一台计算机来模拟网络环境，让我们的计算机同时充当用网络联接起来的多台计算机的运行。比如典型的，一台计算机又当数据库服务器，又当WEB服务器，又当客户机，即运行客户功能的程序的设备）。

很明显，失物认领由于涉及到不同的人之间的通讯，信息的共享，所以，肯定是一个网络版的程序。

网络版程序有哪几种

前面我们已知道，失物认领会被开发成为一个网络版程序，那么，网络版程序有哪几种典型的运行方式呢？ 我们又要选择哪一种做为失物认领程序的运行方式呢？

世间的问题千千万，各不相同，但不同的问题总会有相同之处，这些相同之处，被总结出来，可以称之为模式，或者说，模式是解决同一类问题的较有典型和有效的方式方法。

所以，各种不同的网络版的程序的运行方式虽然各不相同，但其基本的通讯服务方式主要有三种，或者说，我们现在常说的三种网络程序（应用）结构模式（有时也叫架构）：

1. C/S模式
2. P2P模式
3. B/S模式

下面针对这三种模式进行一下说明，让大家理解，我们该如何选择失物认领要采用哪种模式。

C/S模式

客户端/服务器模式，也叫C/S架构，这是最早使用的网络应用结构模式。主要由客户端（Client）和服务器端（Server）组成。两者之间的角色固定，即客户端永远是客户端，客户端的程序主要是给用户使用，然后根据用户的需要，向服务器发起网络请求，比如查询数据，或保存数据等。而服务器端永远是服务器，主要是响应客户端程序的网络请求，并在完成请求所需要的处理后，将请求的结果通过网络返回给客户端程序。如果需要，客户端程序也会将这些结果显示给用户看。

现在应用C/S模式的程序非常的多，比如我们经常使用的在计算机上或手机上运行的联网的程序，基本上都是C/S模式的。比如QQ，360安全卫士，非浏览器上运行的游戏等，因为现在word等也有一定的联网功能，所以，从某些意义来说，也属于C/S模式的网络程序。

另外，手机上的APP多属于C/S模式。

直客来看，C/S模式对于用户来说，最大的特点就是需要用户自己下载和安装客户端程序，比如你要自己装QQ吧。如果软件升级了，还需要用户自己来升级。所以，这也是C/S模式最大的缺点。

P2P模式

点对点模式（peer-to-peer， 简称P2P），对等式网络，和前面C/S模式不同，是无固定的中心服务器、依靠用户群（peers）交换信息的结构模式。P2P模式中，每个用户端（节点）既是一个客户端，也有服务器的功能。即会向其他的节点请求数据（这时，自己是客户端身份），也会响应其他节点向自己发起的数据请求（这时，自己是服务器端身份）。

B/S模式

浏览器/服务器模式。这其实是C/S模式的一种，是WEB技术兴起后，发展起来的一种网络结构模式。在B/S模式下，原来的C端（客户端）就不是各种各样的客户端程序了。而是相对较为统一的浏览器（Browser）程序。虽然，现在浏览器不同公司开发了许多种，但其符合的标准以及功能都是统一的。所以，这种以浏览器为客户端，来实现的网络应用程序就叫做B/S模式。

浏览器作为客户端，主要运行的是网页程序，实现用户界面的显示，处理用户的输入，还有处理结果的输出等。而具体的业务功能以及数据，则会由服务器端来完成。

很明显，B/S模式统一了客户端（浏览器），将系统功能实现的核心部分集中到服务器上，简化了系统的开发、维护和使用。

由于B/S模式统一了客户端程序，即浏览器，不仅用户不需要安装客户端程序就可以使用，而且，对于开发人员来说，不同的计算设备，我们也可以只需要一次开发即可，比如我们开发的网页，可以在Windows计算机上的浏览器上打开，也能在苹果的电脑上打开，也能在linux系统的电脑上打开，也能在不同的手机上打开，甚至在电视上也能同样打开，其展示的功能和效果基本上都是相同的。这就大大的节省了我们的开发成本和难度，至少不需要去关心不同设备之间的差别。而且，当我们程序功能升级时，也只需要在服务器上升级相关的代码，用户完全不需要参与，甚至都不知道程序升级了。

很明显，失物认领程序将会采用B/S模式进行开发。那我们要开发一个B/S模式的程序，需要学习一些什么知识呢？

对于C/S模式、B/S模式，P2P模式的优缺点，可以参考相关文章 ^{1 2}

B/S模式程序的功能是怎么划分的

从B/S模式应用程序的结构特点，我们可以看出。程序结构主要是分为浏览器端的网页和服务器端程序。我们常分为：

• 前端：在浏览器上运行的程序，用户使用浏览器，通过网址，向Web服务器发起请求，服务器会将相应的资源，以网页的方式发回给浏览器。然后由浏览器展示出来。所以，总的来说，前端就是被浏览器下载下来，并且被浏览器执行和展示给用户界面的程序。
• 后端：运行在服务器端的程序，用于响应用户通过浏览器发起的请求，并处理相应的业务需求，比如访问数据库，或更多的处理，最后，将相应的结果，或者资源响应给（发送给）浏览器。

因为前后端职责不同，所以，采用的技术也不同。这两者分别很大，我们一般把主要从事前端开发的人员叫前端工程师，而主要从事后端开发的叫后端工程师，而也有的可以前后端通吃，我们叫全栈工程师。栈在计算机领域是一种数据结构，这里是指要掌握的一系列的技术，也叫技术栈，技术栈也是我们的学习路线。

比如你对与用户界面相关的感兴趣，那么，主要就是做前端工程师，要掌握的主要是前端技术栈。相应的，后端工程师要掌握的是后端技术栈。全栈就是所有技术全掌握。当然，难度也就可想而知了。

对于前端与后端的区别以及相应的技术栈和工作岗位要求等，可参考这个文章 ²

在以往的基于B/S模式应用的开发过程中，前端工程师和后端工程师往往会有许多的交集，也就是需要更多的互相的工作上的交叉，比如典型的，会由后端代码来生成前端的代码。即由服务器来生成显示给用户的网页，并将网页响应给客户端。在这样的开发模式中，前后端没有分离开，对于开发和维护带来非常大的不方便。

随着B/S模式开发的不断发展，现在已进入前后端完全分离开发模式阶段。服务器端不会再直接生成前端的代码，而前端代码也不会关心后端代码是什么样子的。这就是所谓的前后端的解耦合。解耦合或叫解耦是软件开发中经常出现的词语，也是软件开发的一个目标。简单来说，就是希望软件的各个模块或代码之间不要存在必然的依赖联系。用白话来说，就是我不是只一定需要你才行，我和其他模块也能正常工作。

前后端分离（解耦）后，前后端可以独立进行开发工作，而且可以灵活的替换不同的前端和后端。比如同样的后端代码，可以与不同的前端进行配合（多端化服务），比如前端可以是网页，可以是微信小程序，可以公众号自定义菜单项功能，可以是车载电脑屏，甚至是基于C/S模式手机的APP。

当然，前后端的划分并不能简单的用工作在浏览器或服务器来进行区分。在前后端分离时代，一般按功能来进行划分，其中负责网页的展示，用户的请求，结果网页的生成（这一部分功能也常在服务器上实现）的为前端，而后端是负责业务处理和返回数据。关于前后端分离的详细内容，同学们可以参考这个文章 ³

开发B/S模式程序需要学习哪些知识

在失物认领案例中，我们同样，也会分前端和后端分离模式（前期采用不会离和半分离）来开发。那么，我们就有必要了解一下，要想开发前端和后端程序，我们需要学习一些什么样的知识，也就是技术栈。这也是我们的学习路线或者叫方向。

在了解技术栈之前，需要大家知道一点，技术栈可深可浅，也有许多的分支或选择。但作为初学者来说，我们可以有一个最小集，即可以先学习必须的，而且每个技术，根据二八定律（巴莱多定律，是19世纪末20世纪初意大利经济学家巴莱多发现的。他认为，在任何一组东西中，最重要的只占其中一小部分，约20%，其余80%尽管是多数，却是次要的，因此又称二八定律。），我们也并不是需要将这个技术的所有内容全学习掌握了才能进行开发。所以，大家不要被技术栈给吓退，要成为大牛，肯定是很坚难的，但是如果是想开发一个程序，却并不难。有了第一次开发，那么，相信在兴趣的驱动下，任何技术栈都不是难题了。

前端技术栈

在一个业界知名的学习网站上，叫菜鸟教程，大家可能不会相信，这是由个人开发者开发和运维的一个网站，所以，你只要努力，也可以做到。

它有一个对前端技术栈的说明 ⁴。下面是Web 前端技术栈思维导图。

是不是很吓人。我看到，都感觉头皮发麻，更不要说初学者了。我之所以将这个思维导图放在这里，只是告诉大家，一个完整的前端世界是什么样子的。但是我们有必要了解全世界吗？当然不需要。其实，我们主要需要了解的只有其中很小一部分，记得上面说的二八定律吗？

入门前端三剑客

前端和后端相比，需要学习的知识相对来说还是要少很多，你入门前端，只要把 HTML + CSS + JavaScript 这三门知识学习了，就基本差不多了，基本上可以写出很多漂亮的交互网页。最主要的是，对于不是搞设计，但又想做出漂亮网页的同学来说，只要能看懂这三门知识，就完全可以使用网上提供的大量的网页模板，通过少量的修改，就可以变成自己的网页了。入门先会改，进阶后再会原创也不迟。

首先，我们要知道网页中都有些什么。我们经常浏览网页，网页有内容，包括文字，图片，表格，链接，多媒体等。还有漂亮的风格，让人耳目一新，流连忘返。还有我们可以在网页上做些事情，比如填信息，点按钮，网页也会响应我们的键盘或鼠标的动作。所以，网页主要包括三个方面：

1. 内容：前面说过，里面的文字，图片，表格，链接，多媒体等等，都是内容。这个就是由HTML来实现。
2. 风格：你在浏览网页时，会有好看或不好看的直观感受，同样的内容，但不同的布局，不同的风格，会给用户完全不同的体验。现在是一个看脸的时代，所以，网页好不好看，也至关重要。这个网页的风格就是由CSS来实现。
3. 行为 ：网页不仅能看，还能与用户交互，响应用户的各种动作，包括点击，输入，拖动等等，并能根据用户的动作来调整网页的内容或风格，或者进行更多更复杂的处理。这就是网页的行为，这由JavaScript来实现。

所以，我们可以看到， HTML + CSS + JavaScript 这前端三剑客是网页的基础，基本上每一个网页都会包含这个技术的相关代码。

首先第一个，我们必须掌握的就是HTML。

HTML

前面我们说了，HTML负责网页的内容，内容是网页的根本，可以没有风格，只是不漂亮，可以没有行为，只是说功能单一，但如果内容都没有，那这个网页也就没有存在的意义了。所以，HTML是重中之重。

HTML，也叫HTML语言（全称为超文本标记语言 Hyper Text Markup Language）。学起来还是挺简单的。甚至不需要编程基础。

这里是我们要开始学习的第一个技术，所以，也说一下学习方法。一般我们针对一门技术，我们可以考虑按以下阶段来学习：

1. 看教学视频：现在对于一般的计算机开发方面的学习视频特别的多，比如B站，学堂在线，中国大家慕课，网易视频公开课等。一般我们随便在哪个网站上搜索想学的技术，然后看就可以了。最好是边看边跟着写代码，学习效果最好。
2. 看网上教程：网上还有许多在线学习网站很不错，对每个技术的主要知识点，会分成各小节，然后通过讲解和示例，来提高学习效果。有的网站还有可以在线编写代码进行实验的功能。常用的学习网站有：w3school 在线教程，菜鸟教程，网道
3. 看书：无论是看教堂视频，还是网上教程，往往都是经过作者或讲师对知识点进行了筛选的。所以，真正要掌握某门技术，一定还是需要系统的学习。这就需要看书。在后面说到相关技术时，适情况会做一些关于书籍的推荐。
4. 看别人的作品：看别人的作品，一是可以在学习初期进行模仿，二是可以学习到大神们的开发思路，思想，技巧等。慢慢融汇贯通，成为自己的一部分。
5. 看官方技术文档：官方技术文档，即是最完整，最根本的学习资料，又是工具字典，我们往往在开发过程中，通过前面的学习，知道有些什么，但具体用时，我们可以通过查这些官方文档，仔细了解每个知识点的详细细节。

由于HTML很简单，这里推荐大家可以看阮一峰的网道中关于HTML的教程。我很喜欢阮一峰的文章，总能将复杂的技术简单的说清楚，非常适合某个技术的小白。阮一峰创建网道追求的目标也是：

“复杂的技术，简单的讲解。”

这不正适合我们初学者吗？

为了保持本指导书的连续性，在本文档内，也会对每个技术的重点进行介绍，至少要实现失物认领项目，我们需要掌握的一些知识点会在这里讲清。但要想学全面，还是需要按上面推荐的学习方法进行分阶段的学习。

在学习HTML之前，我们还要有一个可以写HTML代码的开发工具。虽然，编写HTML代码对工具其实没有任何要求，比如Windows自带的记事本就可以。但是我们还是推荐一个编写HTML的前端开发工具。

开发工具之VScode

VSCode（全称：Visual Studio Code）是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全（又称 IntelliSense）、代码重构、查看定义功能，用户可以更改主题和键盘快捷方式实现个性化设置，也可以通过内置的扩展程序商店安装扩展以拓展软件功能 ⁵。

在 2019 年的 Stack Overflow 组织的开发者调查中，Visual Studio Code 被认为是最受开发者欢迎的开发环境。

Visual Studio Code 默认支持非常多的编程语言，包括HTML、CSS、 JavaScript、TypeScript；也可以通过下载扩展支持 Python、C/C++、Java 和 Go 在内的其他语言。

VScode 安装

VScode 官网地址：https://code.visualstudio.com/

我们可以在 VScode 官网首页下载对应系统（支持Windows、Linux、macOS）的软件：

也可以打开下载页面 https://code.visualstudio.com/download，下载想要的格式包：

VSCode 安装很简单，我们以 Windows 为例下载安装包，然后双击打开安装包，点击 Next：

选中接受协议选项，然后点击 Next：

选择安装路径，也可以直接使用默认的，但建议不要安装在C盘：

点击 Next：

注意安装路径设置、环境变量默认自动添加到系统中，勾选以下所有选项：

最后我们点击 Install 就可以完成安装了：

安装汉化包

VScode 安装汉化包很简单，打开 VScode，点击安装扩展，在搜索框输入 Chinese，然后点 Install 就可以：

编写程序

打开VScode，按Ctrl + N或在文件->新建文件

点击“选择编程语言”，在搜索框中输入HTML，或在搜索结果栏中选择HTML

下面可以开始编写HTML代码了。VScode会自动对我们的代码进行自动加亮和代码补齐。自动加亮是指会对代码中的关键字使用加亮以及不同的颜色进行显示，这样，让开发人员更容易阅读代码。自动代码补齐是指会根据开发人员输入的代码，自动进行代码的余下部分的提示或自动输入，简化开发人员的代码输入工作，提高编程效率。

下面，我们开始学习HTML，以下内容参考了前面推荐的网道的HTML教程 ⁶

建议同学们一边学习，一边使用前面的开发工具动手敲代码，多实践才能快速掌握。

第一个HTML网页

HTML 的全名是“超文本标记语言”（HyperText Markup Language），1999年，HTML 4.01 版发布，成为广泛接受的 HTML 标准。2014年，HTML 5 发布，这是目前正在使用的版本。

前面，我们已在VS code中新建了一个HTML文件。这个也叫源代码。我们先敲入以下代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>第一个网页</title>
</head>

<body>
    <p>你好，世界！</p>
</body>

</html>

大家肯定发现了，当我们在编辑器中，输入上面源代码第一个字符<时，编辑器会在输入光标的下方，弹出一个提示框。而且提示框会随着我们的不断的输入，提示会根据已输入的单词进行更加的准确的提示，我们只需要选中你想要的代码，直接回车即可。如果提示只有一个，只需要直接回车即可完成代码的自动补充。这就是代码自动补全。

另外，当我们输入代码时，一般编辑器会自动为我们进行缩格排版，但我们随时，也可以在想重新把格式化（排版）我们的源代码时，可以按Shift + Alt + F键进行自动格式化。或者鼠标点击右键，打开上下文菜单（即与鼠标点击的位置的内容相关的菜单），选择“格式化文档”。

按Ctrl + S或在菜单中选文件->保存。选择一个工作目录（我们存放源代码的目录），保存文件为"hello.html"。我们可以看到，HTML文件的常用的扩展名为.html。但这并不是一定的。

浏览网页效果

这里，我们提供两种方法来查看我们编写的网页的效果。

1. 打开本地文件
   我们直接找到工作目录中的"hello.html"文件，并使用浏览器打开方式。
   
   

在浏览器中，我们看到了源代码的效果。上图中，1是标题，2是网页的主体内容。
这里要强调的一点是，由于是以本地文件的方式打开的，所以，在浏览器的地址栏中，是源代码文件所在的本地硬盘中的路径。这也是通过本地文件方式打开最大的特征。

这种方式在调试简单的HTML，CSS，甚至JavaScrpt代码时，一般都可以。但要想模拟出以后代码发布到Web服务器后的效果，最好采用下面的方式。

2. 访问服务器资源

我们前面了解到B/S模式的工作方式是由用户使用客户端的浏览器程序，在地址栏中输入对某个网址的网络请求，这个请求会被网址中所对指定Web服务器接收，并进行处理，最后把包含HTML，CSS，JavaScript源代码的网页响应（发回）给客户端的浏览器，浏览器再把这个网页渲染（按CSS指定的风格和Javascript所带来的行为能力，将HTML所包含的网页内容显示）出来。

所以，我们要想模拟出真实的从服务器上请求的效果，那就需要将"hello.html"文件发布（上传）到Web服务器上。至于Web服务器的相关知识，我们在以后再详细介绍。这里，我们使用VS code的一个插件来在本地模拟出一个Web服务器，并自动将"hello.html"文件发布到这个服务器上。

如上图，在VS code中，点击扩展图标，在搜索输入框中，输入live（需要在联网状态下），在下面的搜索结果列表中，选择live Sever插件，点击安装。

如果有上面的提示，选择信任并安装即可。

当出现禁用和卸载按钮时，说明该插件安装成功。

下面，我们尝试使用Live Server插件来模拟发布到服务器后的测试效果。

选择菜单文件->打开文件夹，选择包含"hello.html"文件的工作目录。
如果出现下图的提示信息，可以选择信任。

点击资源管理按钮，会在资源管理器中列出工作目录，以及目录下的所有文件。

在资源管理器列表中，鼠标右键点击hello.html文件，选择"Open with Live Server"。

这时，可能会弹出防火墙窗口

点击“允许访问”即可。
这时，会自动打开你的默认浏览器，并显示hello.html网页。

网页效果和第一种方法相同。但是区别在于地址栏，可以看到，地址栏上是这次请求的网址。

这个网址，我们也叫URL（统一资源定位符），即用来描述网络上每一个资源（文件，或服务）的位置（定位）。我们可以把地址栏中的URL复制下来。可以看到，是这样的结构：

http://127.0.0.1:5500/hello.html

期中，http://这部分被自动隐藏起来了。这里对这个URL的内容简单说明一下，以后在需要时再详细说明。

http：协议名称，即客户端与服务器端之间传输数据所采用的统一协议（标准，类似我们都说中文普通话，所以，我们可以互相交流）。
127.0.0.1：是Web服务器的IP地址。大家对IP应该很熟悉，就是每一台计算机在互联网上都需要有一个地址来标识自己，计算机就是通过对方的IP地址来找到对方计算机。而127.0.0.1是一个特殊的IP地址，大家可以理解为自己这台电脑的IP地址。就是说，如果自已想访问自己这台计算机，就可以使用127.0.0.1。我们也叫回路地址。
5500：端口号，IP地址只能标识是哪台计算机，那计算机上运行着很多程序，那这个数据到底是交给哪个程序来接收呢？这个端口号就是用来标识计算机上运行的程序的（我们将程序运行时的状态叫进程）。这里，5500就是Live Server这个模拟用的Web服务器程序（进程）的端口号。所以，我们想进行访问某台Web服务器，一般除了需要服务器的IP地址之外，还需要端口号。
大家可能会有点奇怪，我们平时访问比如百度时，并没有IP地址，也没有端口号呀。
比如：

我们复制地址栏上的URL，会发现是这样的字符串：

https://www.baidu.com/

这里https是协议，是加密的http协议。
www.baidu.com是域名，是比IP地址更好记的地址，这个域名会自动被转换成IP地址（这个由浏览器自动完成）。所以，我们因为为了方便记忆，平时使用的是域名，但其作用和意义与IP地址是一样的。最终也会被转换成IP地址。
而由于我们请求的Web服务器，所以，有一个默认的端口号会给Web服务器，80。这个端口号是指定给Web服务器的默认端口号。这样，就方便我们在输入网址时，不用再输入端口号了。但这个端口号是必须有的，只是如果Web服务器使用的是默认的80端口的话，就不需要我们输入。但如果不是使用80端口，比如Live Sever使用的是5500端口，就需要我们在地址栏上指定。

以后推荐使用Live Server方式来打开文件。

HTML基本概念

标签

HTML叫超文本标记语言，所以，其源代码是由各种各样的标记（标签）来组成的。学习HTML语言，也就是学习各种标签的用法。

上面代码中

<title>第一个网页</title>

<title>和</title>就是一对标签。标签被一对尖括号包围，尖括号中的叫标签名，如title标签<title>。大多数标签是成对出现，<title>叫开始标签，</title>叫结束标签。可以看出，结束标签是在标签名之前加斜杠，如</title>。开始标签与结束标签中间的是标签的内容。如<title>第一个网页</title>中，“第一个网页”就是title标签的内容。

也有一些标签只有开始标签，没有结束标签，如<meta>标签。

<meta charset="utf-8">

这种标签由于没有结束标签，所以也就没有标签内容。

标签可以嵌套，如：

<body>
    <p>你好，世界！</p>
</body>

上面代码中，<body>标签内包含一个<p>标签。

注意：嵌套时，要保证开始和结束标签的配对顺序，只能层层嵌套，不能交叉嵌套。否则最终会出现不可预测的渲染效果。

如下面的代码就出现了交叉嵌套，是不正确的。

<div><p>你好，世界！</div></p>

这里还说明一下几个常见的问题

1. HTML标签名大小写不敏感，比如<title>和<TITLE>相同效果，不过，要求大家以后编码时，都使用小写。
2. HTML标签的内容（开始与结束标签中的内容）中的缩进和换行，空行都会被忽视。如下面几种代码效果是一样的：

    <p>你好，世界！</p>
    <p>你好，             世界！</p>
    <p>你好，

        世界！</p>    
    <p>
        你好，世界！
    </p>  

也就是说，无论标签内容中有多少个空格或换行，都只当做一个空格。如果实在需要换行，需要使用<br>换行标签，如：

    <p>你好，世界！</p>
    <p>你好，<br>世界！</p>

有同学肯定会想，那我想对内容进行布局（排版）怎么办呢，要记住，HTML只负责网页的内容，对于以什么样的风格（样式）来展示，是由CSS来实现的。后面我们再学。

元素

开始标签 + 标签内容 + 结束标签成为一个标签，有时候，我们又叫元素。标签和元素是表示的同一概念，在编写HTML代码时，我们编写的是一个个的标签。但在浏览器在渲染整个HTML代码时，会按一个个的标签元素来进行渲染，即将整个标签（开始标签 + 标签内容 + 结束标签）做为一个元素来进行处理。

比如：

<p>你好，世界！</p>

这就是一个p元素。

标签的嵌套关系也构成了各元素之间的层次关系，嵌套中，内部的元素为外部元素的子元素，外部元素也叫父元素。当然，这种父子元素关系是相对的。因为嵌套关系不止两层，还可以是无限多层，一个元素即是内部元素的父元素，又是包含自己的元素的子元素。比如：

<body>
    <p>你好，<br>世界！</p>
</body>

对于p元素来说，body元素是p元素的父元素。br元素是p元素的子元素。

HTML中，元素会分为两个大类：

1. 块级（ block）元素：默认占据一个独立的区域，在网页上会自动另起一行，占据 100% 的宽度。
2. 行内（inline）元素：行内元素默认与其他元素在同一行，不产生换行。
   例如：

    <p>你好，</p>
    <p>世界！</p>

可以从渲染效果看出，每个p元素都单独另起了一行。所以，p元素是一个块级元素。

我们也可以通过浏览器自带的“开发者调试工具”来查看块级元素所点的100%宽度。

在浏览器窗口按F12键，会打开浏览器的开发者调试工具。

会出现如上图右边的调试窗口。这个调试工具在以后的开发过程中会经常使用，大家要掌握。
我们先点击1，Elements（元素），即这个Tab窗口会列出关于HTML所有元素的相关信息。点击2指示的图标，表示，可以通过鼠标在左边的HTML网页中去点选想查看的元素，比如我们将鼠标停在3所指向的<p>你好</p>这个元素的位置，会发现，淡蓝色条表示的就是这个元素所占的位置，包括高度和宽度。可以看出，块级元素点的宽度是整个网页的显示宽度，也就宽度为100%。当然，我们还可以看到更多的信息，以后在适当的时候再介绍。

<span>为常用的行内元素，如：

    <span>你好，</span>
    <span>世界！</span>

从上图可以看出，行内元素不会自动换行，所占宽度只是元素内容所占宽度。

属性

另外，大家一定还发现，有的标签在开始标签中，除了标签名之外，还有由变量名 = "值"这种形式组成的字符串（键值对），这是标签属性（attribute）。用来表示标签的更多额外的信息。属性可以有多个，每个标签都有自己可以支持的属性，每个属性之间以及与标签名之间用至少一个空格分隔。如上面代码中的：

<meta charset="utf-8">

charset为meta标签的属性，而utf-8为charset属性的值，所有属性值一般推荐使用双引号"来括起来。
注意：属性名是大小写不敏感的，比如onclick和onClick属性是同一个属性，属性名一般使用小写。一般属性会较多，不需要强记，在使用过程中，再去查询相关手册，经常用的，自然就会记得。

HTML基本结构

不管网页有多复杂，但一般都有以下基本结构：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
</body>

</html>

大家以后在写程序时，要注意，虽然格式的缩进，并不会影响最终代码的运行效果，但是却能让方便阅读，所以，强烈要求大家一定要使用缩进来格式化代码

下面，我们对基本结构中的主要标签进行一下说明，因为这些标签构成了网页的基本框架。

1. <!DOCTYPE>
   网页的第一个标签，告诉浏览器，本文档（网页）的类型，该如何处理这个文档。一般来说，我们只需要用<!DOCTYPE html>这样的方式声明该文档类型是html类型即可。浏览器为将该文档以HTML5的规则来处理这个文档。
   虽然我们说标签大小写不敏感，而且一般标签名使用小写，但是这个标签名我们一般用全大写，以区分其他标签，这个标签本质上更象一个处理命令。
2. <html>
<html>标签是网页的根标签。大家会发现，整个网页象是一棵树，<html>标签就是根，也象是一个容器，因为其他元素（标签）都是其子元素（被其嵌套）。所以，<html>元素也叫根元素（root element）。而且一个网页只能有一个<html>元素，因为只能有一个根。
   该标签常用lang属性，表示网页内容使用的语言，下面的代码表示网页内容为包含中文的内容（当然，也可以包含英文）。

<html lang="zh-CN">

3. <head>
<head>标签是头部标签，也是一个容器标签，里面一般放置网页的元（meta，可以理解为最基本的，现在不是很流行元宇宙的概念吗？脸书公司的名称就改为了meta）信息。这个标签中的内容不是网页的内容，不会出现在网页内容窗口中。主要为网页的处理提供一些额外的信息。
   比如在<head>标签中常会包含说明网页标题信息的<title>标签。
   <head>元素内可以出现的子元素一般是以下七个，下面简单了解，以后在使用中遇到会详细介绍其用法。
   • <meta>：设置网页的元数据
   • <link>：连接外部的样式表文件，理解为使用外部的CSS文件来管理网页的风格样式
   • <title>：设置网页的标题
   • <style>：放置内置（就是写在本网页文件中的）的样式表，和<link>连接的外部样式文件一起管理网页的风格样式。
   • <script>：引入比如JavaScrtip或其他脚本语言的代码，来管理网页的行为。
   • <noscript>：如果浏览器不支持脚本语言时，可以在这里显示一些提示信息。
   • <base>：设置网页文件中内部的一些文件资源的根路径
4. <meta>
<meta>是<head>的子元素，用来放置网页的元数据。一个<meta>元素就是一个元数据，一个网页可以有多个<meta>元素。一般来说，<meta>元素放置在<head>元素的最前面。
   现在的一般网页，都会至少放置以下两个<meta>标签：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>网页标题</title>
</head>

上面的代码中，第一个<meta>标签说明的元数据表示网页采用的字符集编码为utf-8（字符集编码为正确显示中文符号的重要信息，可以这么理解，计算机以前只能处理英文字符，要想处理中文，就一定要指定是使用什么字符集编码，如果指定不正确，会显示乱码，这里我们只需要照着做即可。如果想了解字符集详细信息，可以参考我写的这个文章关于GB2312,GBK,GB18030,Unicode,utf-8,utf-16等的字符集和编码问题一次全说清）。

而第二个<meta>标签表示在其他的智能设置，比如平板或手机，会根据设备的屏幕宽度自动缩放网页内容。其中name属性表示这个元数据的名称，content属性则表示这个元数据的值。合在一起，描述一个元数据。比如，我们经常还会说明以下三个元数据，以方便类似百度等搜索引擎能很好的收录和检索我们的网页（也就是我们经常听到的SEO，搜索引擎优化，优化得好，能从百度等得到更多的流量，现在互联网经济，流量为王，流量就是Money）。

<head>
  <meta name="description" content="Web开发概论">
  <meta name="keywords" content="Web开发,教程">
  <meta name="author" content="java old man">
</head>

上面代码包含了三个元数据：description是网页的内容的简介，如果搜索引擎收录了这个网页，一般会在检索结果页面中做为该网页的简介出现。所以，这里的值要描述得让用户更容易搜索到这个页面，以及更好的说明这个网页的内容，吸引用户从众多的搜索结果页面中点击访问这个网页，而得到流量。keywords是网页的关键字，很明显，希望能被用户在搜索引擎中查询的关键字配置到，所以，关键字的设置要尽可能包含与你网页主要内容相关的关键词。这和description一样，都是SEO的重要内容。author是表示网页的作者。

<meta>元素还有一些属性和较常用的元数据，这里就不会介绍了。后面也是一样，主要只介绍一些重要或常用的内容，其他的，在需要时，可以再查相关的文档 ⁷。

5. <title>
   指定网页的标题，这个标题会显示在浏览器窗口的标题栏上，同时，也是会显示在搜索引擎结果页列表中。大家可以这样理解，在百度等搜索引擎中搜索网页时，会把用户输入的关键词，去查询搜索引擎索引库中的关于网页的标题，关键词，简介（前面<meta>标签中，name为keyword和description的元数据）等重要部分信息，如果查到，就会出现在结果页中，但至于会排第几，就会按一定的权重（SEO的工作主要是提升这个权重值）来决定。所以，大家可以看出，如果想让搜索引擎能更好的检索到你的网页，所以，标题内容要仔细的考虑和设置，不仅为了给用户看，更是为了给搜索引擎“看”。
   
   下图可见，网页标题与在搜索引擎结果页中的网页标题是一样的。
   
6. <body>
<body>标签表示是网页主体，也是一个容器标签，里面放置网页的主体内容。浏览器显示的网页的内容部分，都是放在这个标签里面，做为其子元素。
   <body>是<html>标签的第二个子元素，在<head>元素之后。
   例如：

<body>
    <p>你好，世界！</p>
    <p>这里是网页的主体内容部分</p>
</body>

7. 注释
HTML代码也支持注释，浏览器会忽视这些注释，添加合适的注释能有效的提高代码的可阅读性，但在HTML代码中，也不建议使用过多的注释。
注释以<!--开头，以-->结束。例如：

<!-- 这是注释部分
	注释.....
	<p>hello</p>
-->

注意，注释中的所有标签，文字，都会被浏览器忽视，不会被渲染处理。

在VS code编辑器中，可以直接在需要注释的内容上按Ctrl + /热键，会接将这一行内容变成注释。再按一次又会取消注释，也就是这是一个注释的开关键。很方便。大家可以记忆下来。

---

待续

---

1. C/S、B/S与P2P网络通信架构 ↩︎

2. 前端后端的区别（超详细版） ↩︎ ↩︎

3. 前后端分离架构概述 ↩︎

4. Web 前端技术图谱 ↩︎

5. VScode 教程 ↩︎

6. HTML教程-网道 ↩︎

7. HTML 标签参考手册 ↩︎