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
下面是前端的学习路线：
一、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.结构
<!DOCTYPE html> <!--文档声明,加上表示HTML5语法-->
<html>
<head>
</head> <!--页头-->
<body>
</body> <!--页身-->
</html>
在vscode中基本结构可以用‘！+回车’ 来快速生成
3.head标签
事实上，只有一些特殊的标签才能放在head标签内，其他大部分标签都是放在body标签内的，在HTML中，一般来说，只有5个标签能放在head标签内。
- title标签
- meta标签
- link标签
- style标签
- script标签
3.1 title
定义网页的标题
<html>
<head>
<title>jimmy的个人网页</title>
</head>
</html>
3.2 meta
meta标签一般用于定义页面的特殊信息，例如页面关键字、页面描述等。这些信息不是提供给用户看的，而是提供给搜索引擎蜘蛛（如百度蜘蛛、谷歌蜘蛛）看的
name，content，http-equiv是meta便签的属性
！如果网页出现中文乱码，可能是你没有定义编码！
<html>
<head>
<meta name="keyword" content = "这是个人网站" />
<meta name="descripition" content = "这里记录我的学习情况" />
<meta name="author" content = "Jimmy" />
<!--定义编码，在html5中可以直接简写为<meta charset="utf-8" />-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--6s后自动跳转到指定网站-->
<meta http-equiv="refresh" content="6;url=http://www.baidu.com"/>
</head>
</html>
3.3 link
link标签用于引入外部样式文件（CSS文件），这属于CSS部分的内容，这里不需要深究
<html>
<head>
<link type = "text/css" rel="stylesheet" herf="css/index.css"/>
</head>
</html>
3.4 style
<html>
<head>
<style type="text/css">
/*这里写CSS样式*/
</style>
</head>
</html>
3.5script
script标签用于定义页面的JavaScript代码，也可以引入外部JavaScript文件
<html>
<head>
<script>
/*这里写javascript代码*/
</script>
</head>
</html>
4.body标签
在HTML中，head标签表示页面的“头部”，而body标签表示页面的“身体”，在静态页面中主要由文本、图片、超链接、音频和视频组成。这里注意静态页面和动态页面的区别在于：是否与服务器进行数据交互
4.1 标题标签
<html>
<head>
<meta charset="utf-8"/>
<title>h标签</title>
</head>
<body>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
</body>
</html>
4.2 段落标签
段落标签p会自动换行，并且段落与段落之间有一定的间距.
<p>段落内容</p>
如果想在P标签内换行，可以使用br标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>换行标签</title>
</head>
<body>
<h3>静夜思</h3>
<p>床前明月光，疑是地上霜。<br/>举头望明月，低头思故乡。</p>
</body>
</html>
预留格式pre,在代码中是什么格式，呈现在网页上就是什么格式
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>预留格式</title>
</head>
<body>
<pre>
床前明月光，疑是地上霜。
举头望明月，低头思故乡。
</pre>
</body>
</html>
4.3 文本标签
-
粗体标签：strong、b
-
斜体标签：i、em、cite
-
上标标签：sup
-
下标标签：sub
-
中划线标签：s
-
下划线标签：u
-
大字号标签：big
-
小字号标签：small
-
字体标签：font
这里你不用全部记忆，需要用的时候去查询文档即可，只需简单记住有哪些功能。注意：这些标签是可以嵌套在p标签内
4.4 水平线标签
<hr /> <!--实现效果如下-->
*4.5 div标签
在HTML中，我们可以使用“div标签”来划分HTML结构，从而配合CSS来整体控制某一块的样式。div和span的作用就是布局，可以称为“图层”作用是为了保证页面可以灵活的布局。
<html>
<head>
<meta charest="utf-8"/>
<title>div标签的学习</title>
</head>
<body>
<div>
<h2>输入内容</h2>
<p>输入内容</p>
</div>
<div>
<h2>输入内容</h2>
<p>输入内容</p>
</div>
</body>
</html>
4.6 自闭合标签（独目标记）
我们接触的大部分标签都是成对出现的，都有一个“开始符号”和一个“结束符号”。但是有些标签是没有结束符号的，比如：
<meta/> <!--定义网页信息-->
<link/> <!--引入“外部CSS文件”-->
<br/> <!--换行标签-->
<hr/> <!--水平线标签-->
<img/> <!--图片标签-->
<input/> <!--表单标签-->
*4.7 块元素和行内元素
在HTML中，块元素在浏览器显示状态下将占据整一行，并且排斥其他元素与其位于同一行。此外，一般情况下，块元素内部可以容纳其他块元素和行内元素。
常见块元素表：
| 块元素 | 说明 |
|---|---|
| h1~h6 | 标题元素 |
| p | 段落元素 |
| div | div元素 |
| hr | 水平线 |
| Ol-li | 有序列表 |
| Ul-li | 无序列表 |
常见行元素：
| 行内元素 | 说明 |
|---|---|
| strong | 粗体元素 |
| em | 斜体元素 |
| a | 超链接 |
| span | 常用行内元素，结合CSS定义样式 |
4.8 实体符号
当在网页上呈现的符号与HTML代码冲突时，可以采用实体符号，实体符号的特点是：以&开始，以；结束。
比如空格为
<html>
<head>
<title>实体符号</title>
</head>
<body>
b<a>c
<!-- 上述内容表示b<a>c-->
</body>
</html>
*4.9 表格
table表示表格，tr代表行，td代表一行中的一个小格子,rowspan表示占几行（也可以称作合并单元格）,colspan表示占几列（合并单元格）。th和td一样也是一个小格子，只是多了加粗居中，可以认为是head。
table也可以分为3部分，thead，tbody，tfoot。并不是必须的，但是有益于后期js代码编写以及维护
<html>
<head>
<title>table</title>
</head>
<body>
<table border="1px" width="30%" height ="100px">
<!--头部-->
<thead>
<tr align = "center">
<td colspan="2">a</td>
</tr>
</thead>
<tr>
<td>c</td>
<td rowspan="2">d</td>
</tr>
<tr>
<td>e</td>
</tr>
</table>
</body>
</html>
4.10 背景色和背景图片&图片
设置图片高宽时，只设置宽度，图片高度会随之改变。同时设置高宽，会让图片失真。
<body bgcolor = "red" background="img/123.png">
<img src = "img/22.png" width = "100px" title="鼠标悬停，这是图片" alt = "图片加载失败"/>
</body>
*4.11 超链接
通过超链接可以从浏览器向服务器发送请求。
request、response
<a href="http://www.google.com" target="_self">谷歌</a>
<!--target:_blank(新窗口) _self(当前窗口) _top(顶级窗口) _parent(父窗口)-->
*4.12 表单
最重要的应用就是接收用户信息。第一个代码片段是普通的表单，第二个代码片段是将表单嵌套在表格中。其中需要注意的是所有内容一定要包含在form中，这样才会提交的action地址。在input中必须写上name才会被提交。
提交格式：action?name=value&name=value&name=value......(注意form的提交方法有两种，一种是post请求，一种是get请求，两者的区别是post请求不会在地址栏上显示表单信息，而get会显示)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>form</title>
</head>
<body>
<form action="服务器地址" method="post">
name:<input type="text" name="username" />
<br />
password:<input type="password" name="userpwd" />
<br />
<!-- type=“submit”时具有提交表单的能力-->
<input type="submit" value="submit"/>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form action="https://198.1.1.1" method="post">
<table>
<tr>
<td>name:</td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>password:</td>
<td><input type="password" name="userpwd" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="login" />
<input type="reset" value="reset" />
</td>
</tr>
</table>
</form>
</body>
</html>
4.13 上传文件
将input的type属性改为file即可上传文件。type属性为hidden表示不会在页面上显示，其value值会随表单的提交而传给服务器（主要用于一些不想让用户看见的信息的提交）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!--this is used for push file -->
<input type="file" />
<form action="192.168.1.1" method="get">
<!--不会在页面上显示，会直接提交给服务器-->
<input type="hidden" name="usrid" value="111" />
usercode <input type="text" name="usercode" id="" />
<input type="submit" value="提交" />
</form>
</body>
</html>
4.14 表单扩展
input标签中的readonly和disabled。用户都无法修改，但是能看到，注意disabled的数据是无法提交的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form action="192.168.1.0" method="post">
<!--readonly和disabled用户都不能修改，但是能看到，注意disabled的数据是
无法提交的-->
用户代码<input type="text" name="usercode" value="111" readonly />
<br />
用户姓名<input type="text" name="username" value="jimmy" disabled />
<br />
<input type="submit" value="提交数据" />
</form>
</body>
</html>
