在浩渺宇宙中，一颗蔚蓝色的星球上生活着一群生物，它们自称为人。它们已经存在不知多少万年，它们之间时时刻刻进行着信息的交流。现如今，交流的方式很多很多，有语言、肢体语言、表情、报纸、电话、书籍等等。
后来，多了一种交流方式——电子通讯。它们通过一个个电子机器进行交流，那交流点什么呢？
话说当年，报纸盛行，如今不再需要耗费纸材了，所以先把它代替了吧。（注：HTML各个版本皆有变化，一个个地去扯，实在没有意义，统一以HTML5为准）
报纸全是文字，还有标题，那不就是文章组成的嘛，对了，还需要排版。所以先写一些代码，将其封装，以便复用。于是，它来了。它叫超文本标记语言。
格式如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
在浏览器里面封装了HTML的各个版本（此处省略一万字，因为这是一场战争，史称：浏览器之战。顺便说一句：臭名昭著，结果就是，要考虑兼容。），所以要先跟浏览器讲一下，你用的是哪个版本，即<!DOCTYPE html>（不区分大小写），用的是HTML5。
<html> 元素是 HTML 页面的根元素，就像是报纸的边框，裁定一个范围。
范围划定了，报纸上还有什么日报之类的标题信息，网页也需要头部，即<head>。还有正文内容<body>。
一、头部。
但浏览器还需要知道你用的哪种解码方式，即<meta charset="utf-8">（再省略一万字，因为要追溯到上世纪汉字编码的事情）。
<meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。
<base> 定义页面中所有链接默认的链接目标地址，作为HTML文档中所有的链接标签的默认链接。
<title> 标签定义HTML文档的标题
<link> 标签定义了文档与外部资源之间的关系。通常用于链接到样式表。异步。
<style> 标签定义了HTML文档的样式文件引用地址，也可以直接添加样式来渲染 HTML 文档。
<script src="js.js"></script>当浏览器解析到这一句的时候会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕，图片和框架等元素也是如此，类似于该元素所指向的资源嵌套如当前标签内，这也是为什么要把js饭再底部而不是头部。
<link href="css.css" rel="stylesheet"/>当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css而不是使用@import。
二、正文部分
1、如此文本
正题来了，网页最初只是文字，既如此，则需文章相关标签。
1、标题，HTML设置了6个级别，h1到h6字体依次变小。
2、p 段落
3、a 超链接，用href来链接url，target为_blank时，加上rel="noopener noreferrer"加强安全性，此时获取的window.opener的值为null
4、img 图片，src引入图片地址，width、height设置宽高，loading="lazy"设置懒加载
5、br 换行
6、hr 水平线
7、文本格式
b 加粗文本
em 着重文字
i 斜体文本
code 电脑自动输出
sub 下标
sup 上标
small 定义小号字
strong 定义加重语气
sub 定义下标字
sup 定义上标字
ins 定义插入字
del 定义删除字
还有一些专用的
<abbr> 定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用语
<cite> 定义引用、引证
<dfn> 定义一个定义项目
8、表格
有时候会遇见表格的情况，所以，HTML也将其加入其中。
<table> 定义表格
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
跨列：colspan
跨行：rowspan
单元格内边距：cellpadding
单元格外边距：cellspacing
其实thead、 tbody、 tfoot 相当于三个类似div的容器，便于区分。
9、列表
有时候仅仅想要一个列表，不想要表格。
分两种：
有序列表、无序列表
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项
如果想要自定义呢？
<dl> 定义列表
<dt> 自定义列表项目
<dd> 定义自定列表项的描述
10、表单
神奇的表单，表单属于客户端与网站交流的媒介，即输入，input，但有各种形式。
text、password、radio、checkbox、submit、reset
HTML5新增：color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签，一般为输入标题
<fieldset> 定义了一组相关的表单元素，并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist> 指定一个预先定义的输入控件选项列表
<keygen> 定义了表单的密钥对生成器字段
<output> 定义一个计算结果
selected：使此选项成为默认选项。
disabled：使此选项无法点击。
style="display:none"：使此选项不在旧版浏览器中显示。
hidden：使此选项不显示在下拉列表中。
表单也提够了自动获焦、整体提交、单个提交等一些属性方法。
11、iframe框架
网页内的网页
src引入网址
height 和 width 来设置高度与宽度
支持loading="lazy"
设置边框frameborder="0"
2、语义化的div以及新的一些标签
html5将div进行了语义化。
header, section, footer, aside, nav, main, article, figure这些元素都是 块级 元素
<canvas> 一个绘图 API，提供一个画布，在画布上作画，通过 JavaScript 来绘制 2D 图形
SVG 可伸缩矢量图形，使用 XML 描述 2D 图形
MathML 对应的标签是 <math>...</math> ，在互联网上书写数学符号和公式的置标语言。
多媒体元素
<audio> 定义音频内容，src引入音频文件，type指示类型
<video> 定义视频（video 或者 movie），src引入音频文件，type指示类型
<source> 定义多媒体资源 <video> 和 <audio>，src引入音频文件，type指示类型
<embed> 定义嵌入的内容，比如插件。
<track> 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道
3、后记
本文作为html5的理解与通识，无法完备讲述HTML5，还请谅解，本篇要做的是将各个板块进行串联，争取通俗，尽量打破思维壁垒。另外，HTML5还针对拖放、地理定位、存储等有一系列的操作以及各种API，后面再聊。
现如今，人们已经可以文字、语音、视频、视频会议、全息投影等等去尽可能复现面对面的交流，所带来的变化也是翻天覆地，比如那千古文人道不尽的爱情，也可以异地深层次交流：一起听歌、一起看电影等等。当然爱情这个人类bug本身就无惧距离，只不过让一切有了更多可能。
参考链接：
https://www.runoob.com/html/html-tutorial.html
https://www.cnblogs.com/huangwentian/p/6417870.html
网友评论