HTML初学者入门以及前端学习路线（干货满满）
前言
关键词：前端自学，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
定义网页的标题
jimmy的个人网页
3.2 meta
meta标签一般用于定义页面的特殊信息，例如页面关键字、页面描述等。这些信息不是提供给用户看的，而是提供给搜索引擎蜘蛛（如百度蜘蛛、谷歌蜘蛛）看的
name，content，http-equiv是meta便签的属性
！如果网页出现中文乱码，可能是你没有定义编码！
3.3 link
link标签用于引入外部样式文件（CSS文件），这属于CSS部分的内容，这里不需要深究
3.4 style
3.5script
script标签用于定义页面的JavaScript代码，也可以引入外部JavaScript文件
<script>
/*这里写javascript代码*/
</script>
4.body标签
在HTML中，head标签表示页面的“头部”，而body标签表示页面的“身体”，在静态页面中主要由文本、图片、超链接、音频和视频组成。这里注意静态页面和动态页面的区别在于：是否与服务器进行数据交互
4.1 标题标签
h标签
这是一级标题
这是二级标题
这是三级标题
这是四级标题
这是五级标题
这是六级标题
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的作用就是布局，可以称为“图层”作用是为了保证页面可以灵活的布局。
div标签的学习
输入内容
输入内容
输入内容
输入内容
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代码编写以及维护
table
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会显示)
form
Document
4.13 上传文件
将input的type属性改为file即可上传文件。type属性为hidden表示不会在页面上显示，其value值会随表单的提交而传给服务器（主要用于一些不想让用户看见的信息的提交）
Document
4.14 表单扩展
input标签中的readonly和disabled。用户都无法修改，但是能看到，注意disabled的数据是无法提交的。
Document