前言
HTML5是HTML规范的最新版本，是一系列用来制作现代web内容技术的总称。其中最重要的三项技术是HTML5核心规范、CSS、Javascript。本文章将从HTML基础入手。
一、HTML是什么？
HTML（HyperText Markup Language，超文本标记语言）是用来描述网页的一种语言，它不是一种编程语言，而是一种标记语言。
二、创建HTML文档
最简单的方法就是先创建一个txt文本（简陋点就先在文本里编写代码），再将文本文件的后缀名改成html即可（不懂改文件后缀名的可直接百度）。
一般来说，建议使用vscode打开html文件。
三、HTML元素、标签、元素属性
1.元素与标签
代码A（示例）：
Today is a <code>funny</code> day.将代码A保存为html文件，在浏览器中打开，呈现效果为：
从图中可以看到，funny单词的显示效果与其它单词的呈现效果不一样。这正是code元素的作用。<code></code>为标签，<code>与</code>之间为元素的内容，<code></code>和它们之间的内容一起组成元素。在代码A中，<code>funny</code>就是一个元素。其中，<code>称为开始标签，</code>称为结束标签，funny为元素的内容。
现在，我们知道了元素长啥样了，它是由一个开始标签和一个结束标签以及它们之间的内容组成。但是不是所有标签都长这样呢？答案是否定的，比如接下来的代码B：
Today is a <code>funny</code> day.
<hr>
I hope tomorrow is a funny day,too.
在浏览器中呈现效果为：
hr也是一个元素，它只由一个开始标签组成。我们称它为虚元素。虚元素hr是一种组织元素，用来表示内容中段落的终止，呈现为一条横线，这点可以在上图中清楚看出。
元素input也是虚元素。
示例代码C:
Enter your name:<input>
<hr/>
Enter your password:<input>浏览器呈现效果：
HTML的input 元素用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据。
值得一提的是，还有一类元素叫作空元素。这类元素有开始标签和结束标签，但开始标签与结束标签之间没有内容。有些元素为空时没有意义，比如：<code></code>为空元素，没有意义，但符合HTML规范。它也可以用一个标签表示，如<code></code>可表示为<code/>。
如此一来，虚元素也可以用空元素来表示。比如：<hr>表示为<hr />。其实，浏览器知道hr为虚元素，所以读取开始标签<hr>后不会等待结束标签就已经关闭了。使用<hr/>效果跟<hr>一样，但前者更规范。
2.元素属性
代码D：
Today is a <code>funny</code> day.
<hr/>
I hope tomorrow is a funny day,too.
<hr/>
Enter <a href="https://www.baidu.com/">there</a> to baidu.在浏览器中呈现效果为：
当我们点击第三段的there，会跳转到百度页面。
在没有加属性之前，元素为:
<a>there</a>
加上属性后的元素为:
<a href="https://www.baidu.com">there</a>
以上用到了元素a的一个属性href，这个属性用来生成超链接，点击超链接就会跳转百度网站。
元素的属性只能用在开始标签或单个标签上。属性由名称和值两部分组成，代码C中，href为属性名，"https://www.baidu.com"为属性值。
HTML中有许多元素，有些属性适用于所有元素，称为全局属性。而有些属性仅用来提供元素其特有配置信息，称为专有元素。比如:href属性就仅限于a元素，它配置的是超链接的目的URL。
四、HTML总体框架
1、外层结构
代码E:
<!DOCTYPE HTML>
<html>
</html>外层结构主要用到两个元素DOCTYPE和html。
代码D中的DOCTYPE元素让浏览器明白其处理的是HTML文档。这是通过布尔属性HTML表达的。（那么什么是布尔属性呢？这个问题将留在后面。）紧接着DOCTYPE元素的是html元素的开始标签<html>，从html开始标签到html结束标签</html>之间的所有元素都按照html处理。
2、元数据
代码F：
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
</html>HTML文档的元数据部分可以向浏览器说明文档的信息，放在head元素中，代码E中的元数据是元素title。顾名思义，title元素是用来设置标题的。大多数浏览器会将title元素的内容显示在窗口的标题栏上或者是用来显示文档标签页的标签上。
3.内容
代码G：
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
Today is a <code>funny</code> day.
<hr/>
I hope tomorrow is a funny day,too.
<hr/>
Enter <a href="https://www.baidu.com/">there</a> to baidu.
</body>
</html>HTML文档内容放在文档body元素里面，body元素告诉浏览器该向用户显示哪一部分。至此，HTML文档基本框架以成型。
代码F在浏览器呈现效果：
可以看到，代码F在浏览器的显示效果与代码C是一样的。在代码A、B、C中没有框架，为什么也能在浏览器中正常显示？
在代码C在浏览器打开的页面单击右键，点击检查，可以看到页面源码中浏览器自动加了html的基本框架。浏览器把代码C放在了body元素之间。
在看看代码F在浏览器中的页面源码，会发现是一样的：
五、布尔属性与自定义属性
1、布尔属性
代码H：
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
Enter your name:<input disabled>
<hr/>
Enter your password:<input>
</body>
</html>浏览器呈现效果：
在此页面中，第一行不能输入，而第二行可以输入。这是因为第一行的元素input加了disabled这个布尔属性用来阻止用户输入数据。如果一个布尔值属性存在，则其值是 true，如果不存在，其值是 false。但却不必设置为disabled="true",仅仅用属性名disabled或者disabled=""或disabled="disabled"即可。不存在disabled="flase"使得布尔属性为flase的写法，如果布尔属性不存在，不写即可。
2、自定义属性
用户可以自定义属性，自定义属性必须以data-开头，这是为了防止自定义属性与html原有属性冲突。
总结
html一般元素由标签和元素内容组成，空元素没有内容，可简写，虚元素只有开始标签，规范写成空元素的形式。html属性分为一般属性，布尔属性和自定义属性。html总体框架为外层结构<!DOCTYPE HTML>、元数据(放在<head></head>内)、以及内容（放在<body></body>内）。
