这是我参与「第四届青训营」笔记创作活动的的第1天。

HTML是什么？

HTML的中文全称是超文本标记语言，显而易见的，我们需要理解什么是超文本以及什么是标记语言。

字面意思，它不仅仅是文本，它可以包含链接、列表、表格或者多媒体。当然，它也有输入框以及按钮，这让用户可以与之交互。

由标签组成的语言。
<p>Hello World!</p>
就像这段代码，它拥有一个开始标签（两个尖括号以及其内的标签名）和一个结束标签（和开始标签相似，只是多了/）。

一个HTML页面

这是一个最简单的HTML页面，让我们来一起看一下它拥有哪些标签。

<!DOCTYPE html> 这句话告诉浏览器该页面所用HTML的版本。
不要忘了它，否则浏览器会用某些古老而怪异的方式渲染你的页面，最终你看到的可能会和你想的不太一样。
<html>...</html>该标签包裹整个HTML页面，是整个页面的根标签。
<head>...</head>该标签包裹页面的元数据，这些内容将不会展现给用户，你可以在这里添加JS或者CSS。
<meta>该标签告诉了浏览器该页面所用的编码格式，charset="UTF-8"是最常用的属性以及属性值。
<title>...</title>该标签定义了页面的标题，他会显示在浏览器的标签栏。
<body>...</body>这是HTML页面的主体，其中的内容会展现给用户。

每一个标签都是一个DOM节点，按照他们的纵深关系所罗列出来的树形图就是DOM树，就像图片展示的这样：

html标签以及属性不区分大小写，也就是说<body>和<BODY>表示的是同一个标签。但是按照惯例，我们推荐使用小写。
空标签可以不闭合。
例如<img src="xxxxxxx">这段代码在页面中插入了一张图片，所有的工作在开始标签中都已经完成了，那么它就不需要结束标签。
属性值可以由""和''包裹，但我们一般推荐使用""。
有些属性可以没有属性值，它们被叫做布尔属性。就像disabled（可以标记表单输入使之变为不可用），属性本身就足以表示它的含义，那么就不需要属性值。

在HTML页面中，使用<h1>~<h6>来表示不同级别的标题。浏览器往往会赋予它们一个默认样式，h1标题会被赋予更大的字号。

以<ol>...</ol>包裹，以<li>...</li>表示每一项内容。浏览器的默认样式会自动在它们前面加上序号。

以<ul>...</ul>包裹，以<li>...</li>表示每一项内容。

以<dl>...</dl>包裹，以<dt>...</dt>表示小标题，并以<dd>...</dd>表示每一项内容。就像这样：