推荐前端学习路线如下：
HTML、CSS、JavaScript、noodJS、组件库、JQuery、前端框架（Vue、React）、微信小程序和uniapp、TypeScript、webpack 和 vite、Vue 和 React 码源、NextJS、React Native、后端内容。。。。。。
HTML基本结构：
-
<!-- doc document 文档 type 类型 html hyper text markup language 超文本标记语言 -->
-
-
<html>
</html> 根
-
-
<head>
</head> 头部 放置页面相关信息
-
-
<body>
</body> 身体 放置内容
-
-
<title>
<title> 标题
网页结构展示：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<!-- meta 元 charest 字符集 utf-8 字符编码 -->
-
<title>
</title>
-
-
</head>
-
<body>
-
【HTML】重点知识内容~快速上手
-
</body>
-
</html>
常用标签：
h1~h6
表示一级到六级标签 文本标题标签自带加粗，有自己的文本大小，并且独占一行，有默认间距
-
<h1>一级标题
</h1>
-
<h2>二级标题
</h2>
-
<h3>三级标题
</h3>
-
<h4>四级标题
</h4>
-
<h5>五级标题
</h5>
-
<h6>六级标题
</h6>
p
标识一个段落(段落与段落之间有段间距)；
默认情况，在网页上，页面上的内容不会按照我们写的代码进行换行。`回车` 会被渲染成一个 `空格`；
-
<p>这是一段文字
</p>
-
-
<p>
-
这是一段文字
-
</p>
img
image的缩写，img是一个单标签，功能是在一个网页上展示一个图片。
属性
- src
source的缩写，表示图片的源，在src可以设置图片地址 - alt
当图片加载失败时显示对应的alt中的文本内容 - title
当鼠标放在图片上时，显示一段提示文字 - width 宽
- height 高
src
可以是绝对路径，也可以是相对路径
- 绝对路径
可以使用电脑中的文件的路径E:\H5\02_HTML\代码\xxx.jpg
也可以使用网络路径https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png未来我们的网页上，最后上线，几乎都是网络地址 - 相对路径
一般情况下，我们在做静态页面时，页面中的背景图，图标等不常更改的资源。一般存放在项目中，做相对路径引入。
相对路径记住两个概念 ./ 和 ../，分别表示当前目录和上一级目录。一般我们在正常的项目结构中。
推荐一个使用方法，在src中直接输入 ./ 接下来根据提示选择对应的文件夹及对应的文件
-
- 项目文件夹
-
- css
-
- img
-
- js
-
- 网页1.html
-
- 网页2.html
大小设置
我们可以给图片添加width和height两个属性，设置图片的宽高
- 数字
- 百分比
注意！！！宽高只要设置一边，就会等比缩放，如果都设置，除非都是等比例缩放，否者会变形
<img src="图片地址" alt="图片加载失败时显示的文字" title="鼠标悬停后显示的内容" width="100" height="100"/>文字的样式属性（强调属性）
em i
可以让文字倾斜，em表示强调，i表示文字斜体。在项目中，很多人把 i 作为图标展示的标签。
stong b
可以让文字加粗，stong表示强调，b表示文字加粗。
br
可以在网页中实现换行，就像是一个回车。
如果我们在项目开发中，主动频繁使用 br，说明写的有问题
hr
分割线，在网页上实现一条横线，也很少使用
-
<em>倾斜
</em>
-
<i>倾斜
</i>
-
<strong>加粗
</strong>
-
<b>加粗
</b>
-
<br>
-
<hr>
特殊标签：
-
2
<sup>3
</sup> 上标
-
0
<sub>2
</sub> 下标
-
<del>
</del> 删除线
-
<u>
</u> 下划线
-
<s>
<s> 删除线
特殊符号
-
  空格
-
> 大于号
-
< 小于号
-
© 版权
a
超链接，在网页上，存在着很多的超链接。一定要会用
属性
- href 必填属性
超链接跳转路径的设置，可以是网址，也可以是相对路径 - target 设置窗口的打开方式； _blank 页面打开时在新的窗口中打开，如果不设置，则在当前窗口打开； _self 默认值，打开本窗口
- title
当鼠标放在超链接上时，显示一段提示文字
-
<a href="链接">超链接
</a>
-
<a href="链接" target="_blank">超链接
</a>
列表
- 有序列表
- 无序列表
- 定义列表
无序列表在网页中应用最多
有序列表
-
<ol type="" start="">
-
<li>
</li>
-
<li>
</li>
-
<li>
</li>
-
</ol>
type类型：
type="A/a/I/i/1"
start="4"
定义开始位置，属性值必须是数字。
无序列表
-
<ul type="">
-
<li>
</li>
-
<li>
</li>
-
<li>
</li>
-
</ul>
type类型：
type="disc" 实心圆
type="circle" 空心圆
type="square" 方形
type="none" 没有
定义列表
-
<dl>
-
<dt>标题 关键词（可以插图片和文本）
</dt>
-
<dd>对内容的详细解释
</dd>
-
<dd>
</dd>
-
<dd>
</dd>
-
<dd>
</dd>
-
<dd>
</dd>
-
<dl>
表格（table）
这是一个重要的标签，但是前期我们所做的面向用户的网站中，不常用。
插件：表格宽*高=table>tr*n>td*n
-
<table>
-
<thead>
-
<tr>
-
<th>
</th>
-
<th>
</th>
-
<th>
</th>
-
<th>
</th>
-
<th>
</th>
-
</tr>
-
</thead>
-
<tbody>
-
<tr>
-
<td>
</td>
-
<td>
</td>
-
<td>
</td>
-
<td>
</td>
-
<td>
</td>
-
</tr>
-
<tr>
-
<td>
</td>
-
<td>
</td>
-
<td>
</td>
-
<td>
</td>
-
<td>
</td>
-
</tr>
-
<tr>
-
<td>
</td>
-
<td>
</td>
-
<td>
</td>
-
<td>
</td>
-
<td>
</td>
-
</tr>
-
<tr>
-
<td>
</td>
-
<td>
</td>
-
<td>
</td>
-
<td>
</td>
-
<td>
</td>
-
</tr>
-
</tbody>
-
<tfoot>
-
-
</tfoot>
-
</table>
在写表格时，thead , tbody , tfoot 可以省略不写。
表格的属性
-width="" 表格的宽度
-height="" 表格的高度
-border="" 表格的边框
-bordercolor="" 表格边框的颜色
-bgcolor="" 背景颜色
-cellspacing="" 单元格之间的间距
-cellpadding="" 内容到边框的间距
-aligen="" left center right 水平对齐方式
-valign="" top bottom middle basline 垂直对齐方式
跨行
如果我们想让某一个单元格，跨多行，给这个td添加 `rowspan` 可以实现跨行操作
-rowspan="所要合并单元格的行数" 合并行
跨列
如果我们想让某一个单元格，跨多列，给这个td添加 `colspan` 可以实现跨列操作
-cowspan="所要合并单元格的列数" 合并列
form表单
表单标签未来不太常用，因为form已经逐渐被ajax替代了。但是我们前期写页面时，还是要使用
我们应该把所有的表单内元素包裹在一个form中（非必须）
<form method="post"></form>method 方式，方法，定义表单提交的方法。
get是获取
method="get" 从服务器上获取数据，在数据传输的过程中，用可以在地址栏上看到过程，默认传递方式，安全性比较低。
post 是传递数据
method="post" 向服务器传送数据，在数据传递过程，用户在地址栏上看不到，安全性比较高。
<form action=""></form>action设置数据传递之后给谁？
input(行内块、置换元素)
input有很多种形态，需要通过type属性进行控制
-
<form>
-
<input type="text">
-
</form>
type
- text
文本输入框，最常用，让用户在文本框中输入我们想要获取的内容 - password
密码，让文本以密文显示（不安全） - radio
单选（必须加一个name属性,且同组的属性值必须一样），多个选项只选其一时使用，如性别 - checkbox
多选，当有多个选项需要选择时，如爱好 - submit
提交按钮，自动显示提交两个字，可以通过value修改 - reset
重置按钮，自定显示重置两个字，可以通过value修改 - button
普通按钮，没有功能，需要通过value配置显示文本 - file
文件上传，可以进行本地文件的上传功能
-
<form>
-
<input type="text" name="" value="" placeholder="这是一个提示文本，输入内容后消失">
-
</form>
value
一般情况下，value用来获取对应用户输入的值,用来帮助系统显示内容。
name
如果我们要使用表单提交，则所有的表单内元素都需要加name属性
-
<input type="radio" name="sex" id="qita">
<label for="qita">不明
</label> 点击文字即可选中
-
<label for="">
<input type="radio" name="sex" checked>男
</label> 方便修改文本样式
placeholder
设置提示信息
button
普通按钮，如果把button放在表单里，则button自动会有提交功能
-
<button>按钮
</button>
-
<input type="button"> 两种的作用相同
select > option
下拉选择框，需要用select包裹多个option
-
<select>
-
<option value="123">选项2
</option>
-
<option value="123">选项3
</option>
-
<option value="123">选项1
</option>
-
<option value="123">选项4
</option> 选项显示在浏览器，123是提交给服务器的数据
-
</select>
textarea
文本域，用于输入多行文本时使用
<textarea></textarea>表单内元素的状态
- blur
失去焦点 - focus
获取焦点 - checked 给radio和checkbox添加，用于设置对应选项的选中状态，添加则表示选中
- selected 给option添加，用于设置默认被选中的选项
- readonly 只读，添加到输入框，无法修改内容，只能查看
- disabled 添加到元素上，则对应元素禁用，样式变灰
页面划分
-
<div>用来划分页面区域的
</div>
-
<span>修饰独立小部分内容
</span>
两者没有固定的格式表现。对他应用样式（CSS）时，他才会产生视觉上的变化。
转载：https://blog.csdn.net/leoxingc/article/details/128086567