这是我参与「第四届青训营」笔记创作活动的的第1天
前言
众所周知，即使是刚接触计算机相关知识的小蒟蒻，也会知道一种叫做“前端三件套/三剑客”的东西，那显而易见它们在实际的前端应用中肯定是最重要的三个基本工具——也就是 HTML CSS 和 Javascript。看标题就知道我们今天讲的就是HTML。
HTML概述
HTML只是一个简称，它的全称叫做Hyper Text Markup Language，也就是超文本标记语言。那么既然是标记语言，那么就很显而易见，这是一种类似于Markdown的语言：我们把修饰文本对应的标记写好，然后浏览器打开时负责加载和渲染，我们就能够看到网页上的各种内容了。由于这是笔记所以具体的原理我们不会深入地去探讨，感兴趣的小伙伴可以自己百度一下哈。
进行HTML开发也很简单，你只需要一个浏览器和一个文本编辑器（从记事本到WebStorm都是可以的）就行了。
Hello World in HTML
当你用WebStorm新建一个.html文件时，你会看到下面的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
如果你是一个新手小白，那么可能看上去很迷惑，不知道都是干嘛的，不过通过我的解释，可能你就会对这个东西有很深的了解了。
首先，你看到了一堆带着尖括号(< >）的东西，这种用尖括号括起来的东西就叫做标签。有的标签（比如<title>）后面会跟着一个对应的</title>，前者叫做开始标签，后者叫做结束标签，那么一个开始标签和一个对应的结束标签框进来的东西就叫做一个非空元素。没有对应开始结束（比如上面的<meta>）的元素我们就叫做一个空元素。
我们先简单了解一下其中一些部分代表的含义，剩下的部分不用去深究，因为后面肯定会将得到。
<!DOCTYPE html>这个标签（严格来讲不算标签，其实是给浏览器的一种指令）是在告诉浏览器这个文档的html版本，以让浏览器决定如何渲染，如果没有这个标签，那么浏览器就会以非常远古的HTML版本来渲染网页。
<html> </html>这个标签被称为文档的根标签，代表着整个html文档的开始和结束，网页上面的内容都是要写在这个里面的。
<head> </head>代表网页的头部标签，头部一般写有控制整个网页内容的东西（比如样式表、编码格式等）。而其中的<title> </title>标签就代表着网页的标题。
<body> </body>标签里面就是网页本体的内容了。
与其他大部分语言不同的是，HTML的标签是不区分大小写的（我印象中除了它之外好像只有Fortran是这样的）。也就是说你写<html>、<HTML>甚至是<HtMl>都是可以的。
现在我们往<body>标签中添加一行内容：
<body>
Hello world!
</body>
保存后打开网页：
这样我们就用HTML输出了经典的Hello world捏！
DOM树
作为一种标记语言，一个网页打开之后，浏览器一定会遵循一定的渲染顺序来进行渲染。那么这个渲染顺序是什么样的呢？浏览器其实是遵循一种叫做DOM树（DOM tree）的结构来进行渲染的。一句话概括就是一个外面的标签作为父节点，内部的第一层子标签作为叶子结点（如果你学过图论的话你的脑中肯定就有画面了）。
如果你还是没有画面的话，你可以看一下这张图：
（图源DOM tree (javascript.info)）
因为目前的网页文档都比较的简单，想要更细致的了解DOM树可以移步图源网站捏。
基础HTML标签
HTML标签太多了，因此我们肯定不可能在一篇文章内介绍所有的标签，此时就需要各位移步HTML Standard (whatwg.org)或者自行百度一些中文手册查询自己需要的标签了。
标题
我们首先介绍一下标题标签。HTML中一共有六级标题，分别用<h1>到<h6>来表示。这些元素都是非空元素，因此都必须要用/结尾。使用的时候直接把内容框进来就可以。
<h1>This is H1</h1>
<h2>This is H2</h2>
<h3>This is H3</h3>
<h4>This is H4</h4>
<h5>This is H5</h5>
<h6>This is H6</h6>
渲染后就是这样的效果：
图片
我们接下来可以插入一个图片标签，来讲解一下属性的概念。一个<img>标签的一般形式如下：
<img src=" " alt=" " />
我们会发现，这里面除了img之外，又多了两个叫做src和alt的东西，并且后面要赋值。这两个需要赋值的东西就是这个img标签的属性。属性后面赋的值一般要用双引号括起来（当然不括也可以）。属性值出现的顺序都是无所谓的，也不需要所有属性同时出现，比如这里我只保留src也是可以的，那么其他的属性就是默认值了。
注意到元素的最后有个/，这是因为img是一个非空元素，但是我们很容易发现这个元素的开始和结束标签之间是不需要放任何东西的，所以我们在开始标签的最后加一个/，表示这个非空元素的结束。
这里也顺便说一下这两个属性的含义：src代表图片的路径，使用相对路径和绝对路径都是可以的；alt代表图片加载失败时出现的替代文字。
举个简单的例子：
<img src="kibyWalking.gif" alt="卡比走路捏"/>
当对应名称的动图存在时就是这样的效果：
如果对应文件缺失了的话就是这样的：
音频和视频用的就是类似的audio和video标签，和img的用法类似，这里就不再赘述了，搜一下就知道怎么用了。
有序列表和无序列表
接下来我们介绍一下列表。列表分为有序列表<ol>和无序列表<ul>。我们通过上面两个标签定义一个列表，通过<li>元素定义列表项。注意这几个元素都是非空元素。
举个简单的例子：
<h3>中国民营二本排名</h3>
<ol>
<li>河海大学</li>
<li>可每大学</li>
<li>南京水利职业技术学院</li>
</ol>
<h3>世界主流算法竞赛平台</h3>
<ul>
<li>CodeForces</li>
<li>Atcoder</li>
<li>Luogu</li>
打开就是这样的效果：
定义列表
接下来我们介绍定义列表，虽然都是列表，但是和上面两个不同的是，定义列表的每一个项目都是有注释的，列表本身属于项目和注释的组合体。我们用<dl>标签代表定义列表的开始，每个列表项的内容为<dt>，而其注释为<dd>。同样的，以上元素都是非空元素。
我们将上面的“世界主流算法平台”变成定义列表，添加详细信息：
<dl>
<dt>CodeForces</dt>
<dd>Russia</dd>
<dt>Atcoder</dt>
<dd>Japan</dd>
<dt>Luogu</dt>
<dd>China</dd>
</dl>
打开后就是这样的效果：
超链接
超链接大家都懂，就不介绍了。对应的标签是<a>，常用的两个属性有href和target。href代表的就是链接内容，相对路径或者绝对路径或者HTTP路径都是可以的；而target属性代表的是链接打开方式：_blank代表在新标签页中打开、_self则代表在当前标签页中打开（当然不止这两个，其他不太常用的值大家可以自行百度哈）。
<a href="https://juejin.cn" target="_blank">掘金社区官网</a>
就是这样的效果：
会在新标签页打开掘金社区官网。
输入控件
网页上也会存在很多的输入控件，他们都是由input标签控制，这是一个空元素，所以说需要的参数都要在属性中调整。由于type属性的存在，不同类型的输入元素的具体属性会有很大的差别，所以这里是不会详细描述的，只是给大家举个简单的例子，让大家明白这些属性都是干什么用的。
<input type="date" min="2022-01-01">
<br>
<input type="number" min="1" max="10">
<br>
<input type="range">
<br>
<input placeholder="请输入用户名">
（<br>是换行符，也是一个空元素）
打开之后就是这个样子的：
一些基础元素的介绍就到这里，由于篇幅所限，我们也不可能在这里耗费大量的时间，如果有需要用其他的元素，可以去查阅相关的文档。
页面内容划分
当我们打开网页的时候，每个页面肯定被分为了不同的部分，不然所有的东西都在一个地方大杂烩，既不好管理又会对读者造成困扰。那么一个通常的页面是如何划分的呢？我们可以看一下这个：
（图源HTML布局（附带示例） (biancheng.net)））
HTML中也存在有对应的标签帮助我们合理的布局，只需要把对应位置的代码放到对应的标签里就可以了。
HTML 的编写原则
每当我们写一种语言的时候，都需要遵循一种语言的范式，否则当你在Java中用下划线命名/在C语言中用大驼峰命名时，你写出来的东西就有很大的概率会让人认为是不规范的代码。那么HTML的编写原则是什么呢？就是语义化。
每一种标签都有其对应的含义，我们在使用的时候要以语义为先，而不是效果为先：我用一个样式表把正文改成标题的格式不也能达到一样的效果吗？虽然效果是这样的，但是这并不符合语义化的含义——在代码中我们依然会把它认作正文。我们的HTML代码最根本的服务对象是开发者、浏览器、搜索引擎和屏幕阅读器，而不是C端的用户，所以我们并不需要以效果为优先。
那么我们如何做到语义化？首先就是要了解每个标签和属性的含义，不能盲目乱用；其次就是写的时候要思考什么标签最适合描述这个内容。最后也是最重要的一点：不要用可视化工具生成代码！这一点真的很重要（点名那些用Dreamweaver8的人）。只有当我们真正了解了标签的含义，我们才能够写出规范的代码。
总结
今天是HTML的基础，虽然代码很简单，但是我们也需要掌握好内容，掌握了这些基础才能够进行下一步的学习。