一、前后端简单区别
1.1、什么是前端？
任何直接跟用户直接打交道的操作界面都可以称之为前端，它是一个广泛的定义！
1.2、什么是后端？
后端类似于幕后操作者，不直接出面跟用户打交道！
二、前端历程
2.1、语法：
HTML
前端的骨架内容，没有任何样式！
CSS
为骨架赋予血肉，添加各种样式，令应用变得丰满起来！就好像给人化妆！
JavaScript
控制网页的动态效果，就好比如跳舞等动作能够更新吸引别人的注意力！
2.2、框架
如：bootstrap、JQuery、Vue等。它们封装了很多底层操作，我们不再需要自己编写上述的HTML、CSS等代码，只需要按照框架的固定语法调用即可！
三、HTML基础
3.1、HTML是什么？
HTML，hypertext MarkUp language，它是一种创建网页的标记语言，也称为超文本标记语言，它可以用来规定服务端和浏览器之间的数据交互的格式！
3.2、HTTP四大特性
3.2.1、基于请求响应
客户端发起请求，服务端响应请求的内容！本质上也是基于C/S架构的一种应用手段！
3.2.2、基于TCP/IP作用于应用层的协议
很容易理解，基于TCP/IP是因为它基于请求响应，那么客户端就必须拥有IP+port来标识身份！
3.2.3、无状态
不保存用户的信息，不管你来访问多少次，我都当你是第一次来！任你虐我千百遍，我待你依旧如初恋？？？也正是因为HTTP是无状态的，所以后续出现了一些专门用户记录用户状态的技术，如cookie、session、token...，可以大大缓解服务器并发压力！
3.2.4、无/短链接
请求来一次响应一次，之后两者就没有任何关系了！跟上面的无状态也是相呼应！与之相反的是长链接：双方建立链接之后默认不断开，这叫websocket，后面学到再介绍！
3.2.5、C/S交互
请求数据格式
GET / HTTP/1.1
Host: blog.sanxi.info
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
DNT: 1
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.104 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: none
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Cookie: scroll-cookie=0|/; Hm_lvt_cd22b9a461e8cc9641fd7650492a4bc9=1611198970,1611391935,1611413614
大致格式如下：
请求首行
用来标识当前HTTP协议版本、当前请求方式！
请求方式
get请求，朝服务端索要数据，如输入网址获取对应的内容！
post请求，朝服务端提交数据，比如登录注册！
请求头
如上所示，一大堆K/V键值对！
\r\n
就是空一行啦
请求体
并不是所有的请求方式都有，get就没有！
响应数据格式
HTTP/1.1 200 OK
Server: nginx
Date: Mon, 25 Jan 2021 14:21:10 GMT
Content-Type: text/html;charset=utf-8
Transfer-Encoding: chunked
Connection: keep-alive
Access-Control-Allow-Headers: Content-Type,ADMIN-Authorization,API-Authorization
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 3600
Content-Language: zh-CN
Content-Encoding: gzip
响应首行，标识HTTP协议版本，响应状态码
响应状态码
即用一串简单的数字来表示一些复杂的状态或者描述信息
1开头：服务端已成功接收到你的数据正在处理，你可以继续提交额外的数据！
2开头：服务端成功响应了你想要的数据，比如最常见的200表示OK！
3开头：重定向，如当你访问一个需要登录才能看到的，在登录后自动跳转到登录页面！比如我博客网站强制重定向HTTPS！
4开头：请求错误，最常见是：404 not found；403请求不合法或不符合条件，代表被拒绝。
5开头：服务端内部错误，最常见是：500，内部错误！
响应头
\r\n
响应体
URL
统一资源定位符，即网址全称
四、HTML语法基础
HTML，超文本标记语言！如果你想要让浏览器能够渲染出你写的页面，你就必须遵循HTML语法，我们浏览器看到的页面，内部其实都是HTML代码，网站内部也都是HTML代码！HTML就是书写网页的一套标准，它不是一门编程语言！但是呢，学任何一门语言之前先学会注释，注释是代码之母！
4.1、注释
<!--单行注释-->
由于HTML代码非常杂乱无章，所以我们习惯性用注释来划定区域方便后续的查找与阅读！
4.2、HTML文档结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
4.2.1、声明HTML
声明此HTML文档为HTML5文档！
<!DOCTYPE html>
4.2.2、文档开始结束
文档开始和结束的标记，它是HTML页面的最根本的元素，它里面是文档的头部head和文档主体body！
<html></html>
4.2.3、文档开头
定义HTML文档开头内容，包含了文档的元数据meta，它们里面包含的内容不直接在浏览器展示给用户！
<head></head>
4.2.4、网页标题
定义了网页的标题，它是在浏览器标签页显示！
<title>网页标题</title>
4.2.5、网页主体
body之间的内容是用户可直接看到的网页主体内容
<body>网页主体内容</body>
4.3、标签分类
4.3.1、双标签
HTML标签是由尖括号包围的关键字，如上面的，它们通常是成双成对出现的，结束标签会有斜线/！
4.3.2、单标签
也称自闭和标签，如等
4.3.3、head内常用标签
在书写HTML代码时，只需要写标签名，然后按下tab键就能自动补全
| 标签 | 用途 |
|---|---|
<title></title> | 定义网页标题 |
<style></style> | 定义内部即CSS样式 |
<script></script> | 定义JavaScript代码或引入JS文件 |
<link/> | 引入外部样式文件或网站图标 |
<meta/> | 定义网页元数据信息 |
4.3.4、body内常用标签
基本标签
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<b>加粗</b>
<!-- br换行 -->
<br>
<!-- hr水平线 -->
<hr>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<p>段落标签</p>
特殊符号
空格
> 大于号
< 小于号
& &符号
¥ 人民币符￥
© 版权标签
® 商标
块级标签与行内标签
块级标签
它独占一行，主要通CSS样式赋予不同的效果！块级标签可以修改长宽，但行内标签不可以，写了也没用！块级标签有：body、from、select、textarea、h1-h6、html、table、button、hr、p、ol、ul、dl、cnter、div等！
常用的有：
- h1-h6 ，标题标签。
- p，段落标签。
- div，定义块级元素。
块级标签内可嵌套任意的块级标签和行内标签，只有一个例外：p标签！P标签虽然是块级标签，但是只能嵌套行内标签，不能嵌套块级标签，套了浏览器也会自动解开，因为浏览器是直接面向用户，按照我们编程的套路，就算有报错也不能让用户看到233，所以前端很少会看到有报错。。。
总结：
行内标签
行内标签大小是随着内容变化而变化的，它不能嵌套块级标签，可以嵌套行内标签，但是没意义。行内标签有：heda、meat、title、lable、span、br、a、style、em、b、i、strong等！最常用的是span！
总结
div和span这两个标签是在构造页面初期经常使用的！页面布局一般先用div和span占位之后再调整样式，就好像程序架构设计一样！尤其是div使用非常频繁，div可以把它看成是一块区域，也意味着用div提前规定所有的区域，之后往该区域填写内容即可，而普通的文本可先用span标签或者p标签！
图片标签img
<img
src="https://blog.sanxi.info/upload/2021/01/0-_7_-c98f8c96538e473bbdc517247ec8a8bd.png"
alt="回龙山云海"
title="云海"
height="50px"
width="50px"
>
-
src，图片的路径，可以是本地也可以是网络；如果写的是URI，会自动朝该URI发起网络请求加载图片！
-
alt，用来标识图片加载失败后的描述
-
title，当鼠标悬浮到图片上显示的描述信息
-
height，图片高的像素，只修改height时，width参数自动等比例缩放；修改了两个却不考虑比例问题，那么图片就会失真！
-
width，宽，同上。
a标签
即超链接标签，可以链接多种类型文件、地址等，最常用于点击后跳转到指定的链接地址！当a标签未被点击，则是蓝色，点击过是紫色，浏览器记忆的原因
<a href="https://blog.sanxi.info/" target="_blank" >溪明轩</a>
href
指定目标地址，该地址可以是以下类型：
- 绝对URL：指向另外一个站点（完整的URL地址），如我上面所写！
- 相对URL：如href="Untitled-1.css"，即打开本地的该文件！
- 锚点：跳转至页面中的锚点，如href="#d1"，里面指定要跳转的标签的id值或者继承的class
target
- _blank，浏览器新标签页打开目标地址
- _self，当前标签页打开目标地址
标签两个重要属性
ID值
类似于标签的身份证号，在同一个HTML上ID值不能重复！
class
类似于面向对象里面类的继承，一个标签可以继承多个class值！
列表标签
无序列表(常用)
<ul>
<li>sanxi</li>
<li>chrystal</li>
<li>others</li>
</ul>
有序列表
<ol>
<li>sanxi</li>
<li>chrystal</li>
<li>others</li>
</ol>
标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
</dl>
表格标签
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>sanxi</td>
<td>playing</td>
</tr>
<tr>
<td>2</td>
<td>chrystal</td>
<td>reading</td>
</tr>
</tbody>
</table>
表格属性
- border: 表格边框.
- cellpadding: 内边距
- cellspacing: 外边距.
- width: 像素 百分比.（最好通过css来设置长宽）
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列（即合并单元格）
4.4、表单标签
HTML之form表单是HTML中一块非常重要的内容，它往往和CSS、JavaScript等相结合；它最主要的功能是能够获取前端用户的数据，基于网络发送给后端服务器，比如说各大网站的登录注册页面！
<!-- 在该表单内填入的数据都会被提交到action指定的地址 -->
<form action=""></form>
form属性
注意事项
所有获取用户输入的标签都应该有name属性，类似于字典的key，用户输入的数据就类似于字典的value；所有标签也都应该有name属性，用来提交数据！
| 属性 | 作用 |
|---|---|
| accept-charset | 设置在被提交表单中使用的字符集（默认为HTML页面字符集） |
| action | 定义表单提交到哪里（URL，即提交地址） |
| autocomplete | 定义浏览器应该自动完成表单（默认是开启的） |
| enctype | 规定被提交数据的编码（默认：url-encoded） |
| method | 规定在提交表单时所用的HTTP方法(默认：GET，此为明文，必须改为post密文)。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
action
控制数据提交的后端路径，即要提交到哪里去！有三种方式：
-
不写，留空则默认往当前页面所在的URL提交数据
-
URL，写全URL地址则提交到指定的URL地址！
-
只写路径后缀action='/index/'，则自动识别出当前服务端IP和port拼接到前面
input标签
input人称HTML变形金刚，通过type属性变形多种功能,加了value就成默认值了！
| type属性 | 表现形式 | 代码演示 |
|---|---|---|
| text | 普通文本 | <input type="text" id="d1"> |
| password | 密码输入框（密文） | <input type="password" id="d2"> |
| date | 日期选择框 | <input type="date"> |
| submit | 提交按钮，触发提交form表单提交数据的动作 | <input type="submit" value="注册"> |
| button | 普通按钮，可自定义各种功能 | <input type="button" value="i'm button"> |
| reset | 重置form内容 | <input type="reset" value="reset"> |
| radio | 单选框，默认可加checked | <input type="radio" name="gender" checked>male |
| checkbox | 多选，要默认也可加checked | <input type="checkbox">reading |
| file | 文件选择框 | <input type="file"> |
| hidden | 隐藏输入框 | <input type="hidden"> |
input属性
- disable：关闭
- readonly：只读框
- value：
- type="button", "reset", "submit"时，为按钮上显示的文本内容。
- type="text","password","hidden"时，为输入框的初始值。
- type="checkbox", "radio", "file"，为输入相关联的值。
- checked：用于radio和CheckBox默认选中项
- name：表单提交时的“键”，注意和id的区别
- placeholder：默认提示字符
select标签
select为下拉框，默认单选，multiple参数变多选，默认选中selected！
<p>ex-gf:
<select name="ex-grilfriend" >
<option value="2">chrystal</option>
<option value="1" selected>kristal</option>
<option value="3">teac</option>
</select>
</p>
select属性
- multiple：设置后多选，否则默认单选。
- selected：默认选中该项
- value：定义提交时的选项值
label标签
label专为input标签定义标记！label本身不会显示任何特效，它的for值必须与要添加标记的id值一样！
<label for="passwd"> 密码</label>
<input type="password" id="passwd" name="password">
textarea多行文本
<p>个性签名
<textarea name="signature" id="signature" cols="30" rows="10"></textarea>
</p>
textarea属性
- name：名称
- rows：最多显示行数，多余则滚动调显示。
- cols：单行最大显示列数（字符数）
- disabled：禁用