一、什么是HTML
HTML的全称是 Hyper Text Markup Language，翻译过来就是超文本标记语言，是目前网络上应用最为广泛的语言，它不是编程语言，而是一种标记语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
说白了它就是用来构建网页的，所以话不多说，先来创建一个HTML文件吧。
二、创建HTML
创建HTML总得使用一款工具吧，那么它来啦。这里推荐一款非常好用而且是国产的前端Web开发工具HBuilder，当然还有比它更加好用的Web开发工具：webstorm、VS code等。这里只是入门的简单示例，所以就不用这种专门开发大前端的工具了。HBuilder毕竟它也是国产的开发工具嘛，有时候我们还是需要支持一下国产的开发工具滴。个人认为Hbuilder还是比较适合新手入门的。
官网地址：https://www.dcloud.io/
下载地址：https://www.dcloud.io/hbuilderx.html
下载完成后解压打开，创建一个项目。
此种方式创建开发工具会自动创建一个默认的 index.html文件，打开index.html的内容是：
上面就是HTML的整体骨架。这是HTML5的定义方式。所以肯定会与HTML4有区别，具体的区别还请自行去问度娘。现在基本都是以H5标准开发前端。
来认识一下上面的的标签：
①、：必须在文档开头第一行，表示标记为文档类型。（必不可少）
②、:HTML页面的根元素，告知浏览器其自身是一个HTML文档。（必不可少）
③、
:用于表述网页的元数据，及网页的基本信息。（必不可少）④、：表示元数据，是描述文件类型和编码，搜索关键字和描述。它永远位于
元素内部。元数据它不会显示在页面上，但是对于机器是可读的。标签有两种格式如下：
简单介绍其中的属性：
charseat属性：设置文档字符集编码格式，如UTF-8，GBK。它是必要属性，因为要防止页面出现乱码。而下面的是可选属性。
name属性:写给搜索引擎看。需掌握的属性值author（作者）keywords（关键字）description（网页描述），配合content使用。
http-equiv属性：将我们的信息写给浏览器看，让浏览器按里边的要求执行。属性值：Content-type（文档类型）Refresh（网页定时刷新）set-cookie（设置缓存），必须配合content使用，因为http-equiv属性只表明设置哪部分，具体的设置内容放在content属性中。
content属性配合其他使用。
meta标签的详细使用可以参考这篇博客：meta标签的作用及整理 我认为的meta标签一方面是设置浏览器的一些功能，另一方面是方便搜索引擎的收录关键词。
⑤、
这是标题1
这是标题2
这是标题3
这是标题4
这是标题5
这是标题6
②、段落 p
HTML段落通过标签
来定义。
这一个是段落
这一个是段落
这一个是段落
这一个是段落
③、超链接 a
HTML超链接通过标签 来定义，用于从一个页面链接到另一个页面。
a标签中的相关属性：
href:规定链接的目标 URL，可以是网络连接，也可以是本地文件。
target：超链接打开的位置，_self自身页面（默认）_blank 新页面。
title：鼠标放在上面之上后显示的文字。
rel:指定当前文档与被连接文档的关系。"chapter":文档的章，"section"：文档的节，”subsection”：文档的子段。
④、图片 img
HTML图片通过标签 来定义。
img标签中的相关属性：
src:规定显示图像的 URL。
align:设置图片周围文字相对于图片的位置，top center botton left right。
title:图片的标题，鼠标指上后显示的文字。
alt:当图片无法加载时显示的文字。
height="100px"width="100px"图片的宽度高度，可以用css样式（style=""）代替。
⑤、列表ol-li、ul-li、dl-dt-dd
HTML列表通过标签
- -
- 、
- -
- 、
- -
- -
- ，分为有序和无序列表。
网页标题 - 第一行
- 描述第一行
- 第二行
- 描述第二行
- ul第一行
- ul第二行
- ul第三行
- ul第四行
- ol第一行
- ol第二行
- ol第三行
- ol第四行
⑥、选择框select-option
HTML的选择框通过标签
网页标题 select-option标签的相关属性：
autofocus：在页面加载时下拉列表自动获得焦点。
disabled：禁止使用下拉列表。
name：下拉列表的名称。
required：用户在提交表单前必须选择一个下拉列表中的选项。
size：下拉列表中可见选项的数目。
value：选择框提交至服务器的值。
select：select="selected"表示默认选中。
⑦、容器 div、span(重要)
div和span是HTML中两个非常重要的标签，会在后面的编码中大量使用，尤其是div标签。
网页标题 12345
6
7
8
div和span区别在于，div是一个块级元素，它包含的元素会自动换行，因为div的默认宽度为页面的100%，高度由内容决定。而span是行内元素，在它的前后不会换行，因为span的宽高由内容决定。span没有结构上的意义，只是单纯的应用样式，其他元素不适合时，就可以使用span元素。span可以作为div的子元素，但div不能是span的子元素，如果出现span中出现div不符合ws3c的页面标准。div和span一般都是用CSS来控制它们的样式。
⑧、表格 table
HTML表格通过
标签来定义。表格的行用
表示；表格的表头用 表示，默认加粗，单元格居中；表格的列用 表示。 标题1 标题2 标题3 第一行数据 第一行数据 第一行数据 第二行数据 第二行数据 第二行数据 table标签中的相关属性：
border：表格边框大小。当border属性增大时，只有外围框线增粗，中间框线不变。
cellspacing：单元格与单元格之间的距离当，HTML5已经不支持了，建议用CSS代替。
cellpadding：每个单元格内文字与边缘之间的距离，HTML5已经不支持了，建议用CSS代替。
⑨、输入框 input
HTML输入框通过标签来定义。
输入框：
密码：
提交按钮：
单选框：
复选框：
重置按钮：
普通按钮：
文件：
图片：
日期时间：
input标签中的相关属性：
type:表示输入框的类型。下面有详细介绍
name：输入框的名字，一般情况下必填。因为：传递数据的时候使用name=value 的方式传递。
value：输入框的默认值。
placeholder:提示内容，不能指定默认值，当提示框有内容时，提示内容消失。
autofocus：当页面加载时 元素应该自动获得焦点。
pattern：用于验证 元素的值的正则表达式。
disabled：是否禁用输入框。
readonly：输入框字段是只读的。
checked：默认选中。(只针对 type="radio" 或者 type="checkbox")
hidden：hidden="hidden"隐藏输入框，用于隐藏域传值。等同于type="hidden"隐藏域传值。
step：输入框合法数字的间隔。
input标签中的type属性详解：
text：文本输入框
password：密码输入框，浏览器显示为点。
submit：提交按钮：提交表单数据。
radio：单选按钮。name和value属性值必须全部存在，提交时，提交的是value中的属性。radio凭借name中的属性区别是否为同一组，name相同为同一组，同组中只能选一个。
checkbox：复选按钮
reset：将表单数据重置为初始状态。
file：文件上传按钮。
image：图形提交按钮。
bottom：普通按钮。
date、datetime：日期和日期时间。
⑩、表单 form
HTML表单通过
form标签中的相关属性：
method：发送表单数据的方法。get和post方式。
action：表单数据发送地址。
name：表单的名称。
enctype：发送表单数据之前如何对其进行编码（适用于 method="post" 的情况）。application/x-www-form-urlencoded是默认编码。multipart/form-data以二进制的形式传送，用于上传文件。text/plain以纯文本形式进行编码，其中不含任何控件或格式字符。
其中get和poet方式的区别在于：
get传参使用URL：http://服务器地址?name1=value1&name2=value2。使用get方式所有信息可在地址栏看到，并且可以通过地址栏随意传递数据，对数据来说非常不安全。
post使用HTTP请求传输协议，地址栏不可见，比较安全，且传递数据无限制。所以一般使用post，尽量不要用get。
⑪、文本域 textarea
HTML文本域通过
- 、