前言
关键词：前端自学，html入门，html基础，前端学习路线。
本部分的内容主要是对html入门的一个介绍。在这里需要强调一件事情，许多前端的初学者容易犯的错误就是希望将html的所有标签都要学习到位，这在学习前端是很错误的一种想法，在html中你通常只需要学习一些常用的标签即可，其他标签需要用到时候再去查文档即可，这里给出一个官方文档的地址：https://developer.mozilla.org/zh-CN/docs/Web/HTML
如果你觉得光看文字资料非常的枯燥，这里提供了我认为讲解的很好的两个免费html入门视频，希望可以帮到你：https://www.bilibili.com/video/BV11t411K74Q
https://www.bilibili.com/video/BV1vs411M7aT
下面是前端的学习路线：
graph LR;
HTML-->CSS-->javascript-->jQuery-->HTML5-->CSS3-->ES6-->Vue.js-->webpack-->node.js
一、HTML
0.系统结构
B/S架构：Browser/Serve (浏览器/服务器的交互形式)
Browser支持的语言：HTML CSS JavaScript
Serve是服务器，其支持的语言：C C++ Java python
优点：升级方便，只用升级服务器端代码即可。维护成本低。企业内部解决方案。
缺点：速度慢（初始化的所有数据都来自服务器端）、体验不好。
C/S架构：Client/Serve（客户端/服务器端的交互形式）
缺点：升级麻烦、维护成本高。
优点：速度快、体验好。
兼容问题？世界5大主流浏览器。
1.简介
HTML全称“Hyper Text Markup Language（超文本标记语言）”，是网页的标准语言。HTML并不是一门编程语言，而是一门描述性的标记语言。
超文本：流媒体、图片、声音、视频.....
HTML由 W3C（世界万维网联盟）制定规范。可以在W3 school中查看中文帮助文档
<标签符>内容
那么学习HTML时究竟要学些什么呢？用一句简单的话来说，就是学习各种标签，来搭建网页的“骨架”。在HTML中，标签有很多种，如文字标签、图片标签、表单标签等你不需要花费太多精力去记忆其中的内容，只需要多敲代码。总而言之，学习HTML就是学习各种各样的标签，然后针对你想显示什么东西，再对应地使用正确的标签，非常简单。HTML不区分大小写。
2.结构
在vscode中基本结构可以用‘！+回车’ 来快速生成
3.head标签
事实上，只有一些特殊的标签才能放在head标签内，其他大部分标签都是放在body标签内的，在HTML中，一般来说，只有5个标签能放在head标签内。
title标签
meta标签
link标签
style标签
script标签
3.1 title
定义网页的标题
3.2 meta
meta标签一般用于定义页面的特殊信息，例如页面关键字、页面描述等。这些信息不是提供给用户看的，而是提供给搜索引擎蜘蛛（如百度蜘蛛、谷歌蜘蛛）看的
name，content，http-equiv是meta便签的属性
！如果网页出现中文乱码，可能是你没有定义编码！
3.3 link
link标签用于引入外部样式文件（CSS文件），这属于CSS部分的内容，这里不需要深究
3.4 style
3.5script
script标签用于定义页面的JavaScript代码，也可以引入外部JavaScript文件
4.body标签
在HTML中，head标签表示页面的“头部”，而body标签表示页面的“身体”，在静态页面中主要由文本、图片、超链接、音频和视频组成。这里注意静态页面和动态页面的区别在于：是否与服务器进行数据交互
4.1 标题标签
这是一级标题
这是二级标题
这是三级标题
这是四级标题
这是五级标题
这是六级标题
4.2 段落标签
段落标签p会自动换行，并且段落与段落之间有一定的间距.
段落内容
如果想在P标签内换行，可以使用br标签
静夜思
床前明月光，疑是地上霜。
举头望明月，低头思故乡。
预留格式pre,在代码中是什么格式，呈现在网页上就是什么格式
床前明月光，疑是地上霜。
举头望明月，低头思故乡。
4.3 文本标签
粗体标签：strong、b
斜体标签：i、em、cite
上标标签：sup
下标标签：sub
中划线标签：s
下划线标签：u
大字号标签：big
小字号标签：small
字体标签：font
这里你不用全部记忆，需要用的时候去查询文档即可，只需简单记住有哪些功能。注意：这些标签是可以嵌套在p标签内
4.4 水平线标签
*4.5 div标签
在HTML中，我们可以使用“div标签”来划分HTML结构，从而配合CSS来整体控制某一块的样式。div和span的作用就是布局，可以称为“图层”作用是为了保证页面可以灵活的布局。
输入内容
输入内容
输入内容
输入内容
4.6 自闭合标签（独目标记）
我们接触的大部分标签都是成对出现的，都有一个“开始符号”和一个“结束符号”。但是有些标签是没有结束符号的，比如：
*4.7 块元素和行内元素
在HTML中，块元素在浏览器显示状态下将占据整一行，并且排斥其他元素与其位于同一行。此外，一般情况下，块元素内部可以容纳其他块元素和行内元素。
常见块元素表：
块元素
说明
h1~h6
标题元素
p
段落元素
div
div元素
hr
水平线
Ol-li
有序列表
Ul-li
无序列表
常见行元素：
行内元素
说明
strong
粗体元素
em
斜体元素
a
超链接
span
常用行内元素，结合CSS定义样式
4.8 实体符号
当在网页上呈现的符号与HTML代码冲突时，可以采用实体符号，实体符号的特点是：以&开始，以；结束。
比如空格为
b<a>c
*4.9 表格
table表示表格，tr代表行，td代表一行中的一个小格子,rowspan表示占几行（也可以称作合并单元格）,colspan表示占几列（合并单元格）。th和td一样也是一个小格子，只是多了加粗居中，可以认为是head。
table也可以分为3部分，thead，tbody，tfoot。并不是必须的，但是有益于后期js代码编写以及维护
| a | |
| c | d |
| e | |
4.10 背景色和背景图片&图片
设置图片高宽时，只设置宽度，图片高度会随之改变。同时设置高宽，会让图片失真。
*4.11 超链接
通过超链接可以从浏览器向服务器发送请求。
request、response
*4.12 表单
最重要的应用就是接收用户信息。第一个代码片段是普通的表单，第二个代码片段是将表单嵌套在表格中。其中需要注意的是所有内容一定要包含在form中，这样才会提交的action地址。在input中必须写上name才会被提交。
提交格式：action?name=value&name=value&name=value......(注意form的提交方法有两种，一种是post请求，一种是get请求，两者的区别是post请求不会在地址栏上显示表单信息，而get会显示)
4.13 上传文件
将input的type属性改为file即可上传文件。type属性为hidden表示不会在页面上显示，其value值会随表单的提交而传给服务器（主要用于一些不想让用户看见的信息的提交）
4.14 表单扩展
input标签中的readonly和disabled。用户都无法修改，但是能看到，注意disabled的数据是无法提交的。