本文是《HTML5与CSS3基础语法自学教程》的第一篇,首发于【前端课湛】微信公众号。

导读:本小节主要讲解 HTML 的基本信息,其中包含 HTML 概念、HTML 发展历程和 HTML 标准版本的发展历程。通过本小节的学习可以对 HTML 的含义有个初步的理解,为后续进一步学习 HTML 相关概念打下基础。

1. 什么是 HTML

HTML 是个缩写形式,其全称为 Hyper Text Markup Language,翻译成中文的含义为 超文本标记语言。HTML 不是一门编程语言,而是一门标记语言,因为 HTML 是由一系列的 元素 组成,这些元素可以包含文本、超链接等不同内容。

如下示例代码是展示了基本的 HTML 结构:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>HTML基本结构</title>
</head>

<body>
  <h1>这是最基本的HTML结构</h1>
</body>

</html>

提示:上述示例代码的具体含义会在后续章节中进行讲解,这里仅作为展示。

想要对 HTML 的概念进一步了解的话,需要将概念分成 超文本标记语言 两部分进行分别学习。

1.1. 什么是超文本

首先,先来讲一讲有关超文本的含义。HTML 最早是由文本发展而来的,关于文本我们一般是比较熟悉的。例如我们创建一个扩展名为.txt的文件,并编写如下示例内容:

这是一个文本文件。

这样就创建了一个文本文件。现在我们将这个文本文件的扩展名修改为.html或者.htm,这样这个文本文件就变成了一个 HTML 文件。通过浏览器运行是可以显示这个 HTML 文件的内容了,如下图所示:

说明:上述示例中的 HTML 不是标准的 HTML。因为 HTML 的语法是松散型的,所以浏览器是可以正确解析并运行的。

随着 HTML 的发展,到目前为止已经不仅仅是文本内容这么简单,还可以显示图片、链接、音乐,甚至视频等更复杂的内容。

1.2. 什么是标记语言

理解了 超文本 的含义,接下来我们再来看看 标记语言 要如何来理解。首先,我们来看这样的一个描述:

标记语言,是一种将文本以及文本相关的其他信息结合起来,展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息(包括例如文本的结构和表示信息等)与原来的文本结合在一起,但是使用标记进行标识。
—— 摘自【百度百科】

百度百科上关于 标记语言 的描述是比较抽象地、比较难懂地。我们可以这样简单地来理解 标记语言 的含义。标记语言 中的 标记 指的就是 HTML 中的元素(Element),而 HTML 就是由这样的一系列元素组成的,所以被称为 标记语言

如下图所示展示了一个 HTML 元素的结构:

注意:HTML 的元素是给定的。无论是 HTML 元素的数量,还是 HTML 元素的作用都是固定不变的。换句话讲,我们学习 HTML 简单来说就是学习 HTML 元素的含义、作用以及用法等内容。

2. HTML 发展历程

理解了 HTML 的概念之后,我们再来介绍有关 HTML 的发展历程。

提示:这部分内容了解即可,毕竟对我们学习 HTML 本身是没有任何影响的。

早在 1989 年,蒂姆·伯纳斯-李为使世界各地的物理学家能够方便的进行合作研究,创建了使用于其系统的 HTML。蒂姆·伯纳斯-李 设计的 HTML 是以纯文字格式为基础,可以使用任何文本编辑器处理,最初仅有少量标记(TAG)而易于掌握运用。

随着 HTML 使用率的增加,人们不满足只能看到文字。1993 年,还是大学生的 马克·安德生 在他的 Mosaic 浏览器加入 <img> 标记,从此可以在 Web 页面上浏览图片。

但人们认为仅有图片还是不够,希望可将任何形式的媒体加到网页上,因此 HTML 得以不断地扩充和发展。

3. HTML 版本发展历程

自 1993 年之后 HTML 出现真正意义上的第一版,发展到至今,经历了 5 个大版本的更新和迭代。具体每个版本发布的时间如下:

  • 超文本标记语言(第一版)—— 在 1993 年 6 月作为互联网工程工作小组(IETF)工作草案发布(并非标准)
  • HTML 2.0 —— 1995 年 11 月作为 RFC 1866 发布,在 RFC 2854 于 2000 年 6 月发布之后被宣布已经过时
  • HTML 3.2 —— 1997 年 1 月 14 日,W3C 推荐标准
  • HTML 4.0 —— 1997 年 12 月 18 日,W3C 推荐标准
  • HTML 4.01(微小改进)—— 1999 年 12 月 24 日,W3C 推荐标准
  • HTML 5 —— 第一份正式草案已于 2008 年 1 月 22 日公布,正式版本发布于 2014 年 10 月 29 日

名词解释:

  • IETF 是简写形式,其全称为 The Internet Engineering Task Force,翻译成中文的含义为 互联网工程工作小组。成立于1985年底,是全球互联网最具权威的技术标准化组织,主要任务是负责互联网相关技术规范的研发和制定,当前绝大多数国际互联网技术标准出自IETF。
  • RFC 是简写形式,其全称为 Request For Comments,翻译成中文的含义为 请求评论。 是一系列以编号排定的文件,包含了关于 Internet 的几乎所有重要的文字资料。
  • W3C 指 万维网联盟(World Wide Web),1994 年 10 月在麻省理工学院计算机科学实验室由 蒂姆·伯纳斯-李 创建,是 Web 技术领域最具权威和影响力的国际中立性技术标准机构。

在 HTML 版本发展历程中,大部分的版本都离我们远去了,也就是说我们并不关心,而需要关心的是 4.01 和 5 这两个版本。5 版本是 HTML 目前最新版本,也就是我们现在常说的 HTML5,而且现在学习 HTML 都是针对 5 这个版本进行学习的。

反而需要特别关心的是 4.01 版本。因为 4.01 版本依旧存在于一些较老的网站或者系统中,如果将来你的工作是对这些网站或者系统进行升级工作的话,那么就需要了解 4.01 这个版本的内容。

说明:在学习 HTML 的过程中,还需要注意 4.01 版本和 5 版本之间的差异。主要内容就是更新到 5 版本之后,删除了哪些内容,新增了哪些内容等。

4. 总结

本小节从 HTML 的概念开始讲解,然后又讲解了 HTML 的发展历程和 HTML 版本的发展历程等内容。其中:

  • HTML 概念,我们分成了 超文本标记语言 两方面进行具体讲解。这是有助于我们理解 HTML 的含义。
  • HTML 发展历程,作为了解内容进行介绍。这部分内容知不知道,是不影响我们学习 HTML 具体的语法内容的。
  • HTML 版本的发展历程,主要经历了 5 个版本的发展。其中,我们需要关注的是 4.01 和 5 这两个版本的具体内容,这两个版本关系到我们将来的学习和工作。

预告:下一节,我们将通过创建第一个 HTML 页面,来学习 HTML 的基本结构、声明、元素以及注释等内容。

前端小白要搞懂什么是HTML,看这一篇就够了的更多相关文章

  1. 前端模块化——彻底搞懂AMD、CMD、ESM和CommonJS

    我们知道,在NodeJS之前,由于没有过于复杂的开发场景,前端是不存在模块化的,后端才有模块化.NodeJS诞生之后,它使用CommonJS的模块化规范.从此,js模块化开始快速发展. 模块化的开发方 ...

  2. Java分布式锁,搞懂分布式锁实现看这篇文章就对了

    随着微处理机技术的发展,人们只需花几百美元就能买到一个CPU芯片,这个芯片每秒钟执行的指令比80年代最大的大型机的处理机每秒钟所执行的指令还多.如果你愿意付出两倍的价钱,将得到同样的CPU,但它却以更 ...

  3. Elasticsearch Query DSL 整理总结(二)—— 要搞懂 Match Query,看这篇就够了

    目录 引言 构建示例 match operator 参数 analyzer lenient 参数 Fuzziness fuzzniess 参数 什么是模糊搜索? Levenshtein Edit Di ...

  4. 搞定SEO,看这一篇就够了

    一.SEO入门 1.SEO是什么? SEO(Search Engine Optimization)中文意思为搜索引擎优化.在了解搜索引擎自然排名机制的基础上,对网站进行内部及外部的调整优化,改进网站在 ...

  5. 链表算法题二,还原题目,用debug调试搞懂每一道题

    文章简述 大家好,本篇是个人的第4篇文章. 承接第3篇文章<开启算法之路,还原题目,用debug调试搞懂每一道题>,本篇文章继续分享关于链表的算法题目. 本篇文章共有5道题目 一,反转链表 ...

  6. 新手入门HTML5开发,你必须先搞懂这6个问题

    凭借着跨平台,实时更新,无需安装,易于分发等众多优点,HTML5受到越来越多企业的青睐.而凭借着入门相对简单的优势,很多人编程初学者都选择学习HTML5.但对于初学者来说,学习HTML5之前,会有很多 ...

  7. 来一轮带注释的demo,彻底搞懂javascript中的replace函数

    javascript这门语言一直就像一位带着面纱的美女,总是看不清,摸不透,一直专注服务器端,也从来没有特别重视过,直到最近几年,javascript越来越重要,越来越通用.最近和前端走的比较近,借此 ...

  8. 前端小白想要编写可维护的js

    我是一名前端小白,之前没写过多少代码,心里没有代码质量这个概念,人人都说代码是团队的产物,应该将代码写规范,但是我对具体什么样的代码是可维护的是茫然的. 我没写过多少代码,本来好多东西就不咋会,每次给 ...

  9. 帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)

    作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...

随机推荐

  1. Python日志模块logging简介

    日志处理是项目的必备功能,配置合理的日志,可以帮助我们了解系统的运行状况.定位位置,辅助数据分析技术,还可以挖掘出一些额外的系统信息. 本文介绍Python内置的日志处理模块logging的常见用法. ...

  2. nyoj 36-最长公共子序列 (动态规划,DP, LCS)

    36-最长公共子序列 内存限制:64MB 时间限制:3000ms Special Judge: No accepted:18 submit:38 题目描述: 咱们就不拐弯抹角了,如题,需要你做的就是写 ...

  3. nyoj 975-关于521 (EOF)

    975-关于521 内存限制:64MB 时间限制:1000ms 特判: No 通过数:5 提交数:46 难度:2 题目描述: Acm队的流年对数学的研究不是很透彻,但是固执的他还是想一头扎进去. 浏览 ...

  4. Git使用和介绍-基础指令

    转载请标明出处:http://blog.csdn.net/shensky711/article/details/52210625 本文出自: [HansChen的博客] 查看已有配置 取消已有的配置 ...

  5. mysql数据库终端上的增删改查及权限等相关操作

    ctrl + c 终止 [linux] service mysql start 启动mysql service mysql stop 停止mysql service mysql restart 重启m ...

  6. 数据降维-PCA主成分分析

    1.什么是PCA? PCA(Principal Component Analysis),即主成分分析方法,是一种使用最广泛的数据降维算法.PCA的主要思想是将n维特征映射到k维上,这k维是全新的正交特 ...

  7. master节点的部署介绍和前置工作

    目录 组件介绍 组件介绍 kubernetes master节点运行组件如下: kube-apiserver.kube-scheduler.kube-controller-manager.kube-n ...

  8. 面试阿里被“吊打”,一问Spring三不知,半年后二战终拿下offer

    Spring框架是一个为Java应用程序的开发提供了综合.广泛的基础性支持的Java平台.Spring帮助开发者解决了开发中基础性的问题,使得开发人员可以专注于应用程序的开发. 近两年来,许多大厂在面 ...

  9. xmlhttp.readyState的值及解释

    xmlhttp.readyState的值及解释: 0:请求未初始化(还没有调用 open()). 1:请求已经建立,但是还没有发送(还没有调用 send()). 2:请求已发送,正在处理中(通常现在可 ...

  10. Java 中 Snack3的使用

    网上看了一篇Java 中 Gson的使用,所以也跟着写篇Java 中 Snack3的使用 JSON 是一种文本形式的数据交换格式,从Ajax的时候开始流行,它比XML更轻量.比二进制容易阅读和编写:解 ...