什么是前端：
任何跟用户直接打交道的操作界面都可以称之为前端。
比如：电脑和手机显示的界面，游戏的显示界面
什么是后端：
可以暂时先理解成，幕后操作者，不可以直接与用户打交道
前端就相当于软件开发架构中的b/s
分为服务端和浏览器之间做交互
web服务的本质：
浏览器中敲入网址回车发生了几件事‘
1.浏览器朝服务端发送请求
2.服务端接收请求
3.服务端返回相应的响应
4.浏览器接收响应，根据特定的规则渲染页面展示给用户看
HTTP协议：
超文本传输协议 规定了浏览器与服务器之间的消息擦混输的数据格式 有四大特性： 1.基于请求响应 2.基于tcp/ip之上的作用于应用层的协议 3.无状态（服务端无法保存用户的状态，一个人来一千次，我都记不住，还当你是第一来） 4.无连接（请求来一次我响应一次，之后立马断开链接，俩者之间就不在有任何的关系了） ps：websocket 相当于是HTTP协议的一个大的补丁，它支持长链接
如何请求数据格式和响应数据格式
1.请求数据格式 请求首行（标识HTTP协议版本，当前请求方式） 请求头（一大堆k，v键值对） /r /n 换行 2.响应数据格式 响应首行（标识HTTP协议版本，响应状态码） 响应头（一大堆k,v键值对） /r /n 换行 响应体（返回给浏览器页面的数据，通常响应体都是html页面） 那么响应状态码都有哪些，都代表着什么意思： 用一串简单的数字表示一些复杂的状态或者提示信息 1xx：服务端已经成功接收了你的数据正在处理，你可以继续提交额外的数据 2xx：服务端成功响应，你想要的数据（请求成功200） 3xx：重定向（当你在访问一个需要登录之后才能访问的页面，你会发现窗口会自动调到登录页面 301 302） 4xx：请求错误（请求资源不存在 404，请求不合法不符合内部规定会权限不够403） 5xx：服务器内部错误（500） 那么请求有哪些方式： get post 1.get请求 朝服务端要资源（比如浏览器窗口输入 www.baidu.com） 2.post请求 朝服务端提交数据（比如用户登录，提交用户名和密码） URL：统一资源定位符（其实就是网址）
1.什么是HTML：
HTML：
超文本标记语言
要想让你的页面能够正常被浏览器显示出来，你所写的页面，就必须去遵循html标记语法，
也就是意味着所有能够被浏览器显示出来的页面，内部都是html代码
ps：浏览器只认识 html css js
web本质
浏览器
服务器
文件(后缀名是.html结尾的文件,也就意味着 只要看到.html结尾文件 那么它就是一个前端页面文件)
文件的后缀名仅仅是给人看的 计算机无所谓 因为都是二进制数据
2.HTML注释
写网页的一套标准
注释是代码之母
1. <!--单行注释-->
2. <!--
多行注释
多行注释
-->
一般情况下，html的注释都会按照下面的方式书写
<!--导航条样式开始-->
<!--导航条样式结束-->
3.转义字符
像后台开发语言的特殊字符 一样，会被解析为换行，
html5中也有很多特殊字符数字的组合，会被解析为特殊的含义
1. 空格：
2. 字符"："
3. 字符&：&
4. 字符<：<
5. 字符>：>
4.HTML文档结构
<html>
<head></head>:head内的标签，不是用来展示给用户看的，而是定义一些配置，主要是给浏览器看的
<body></body>:body内的标签，就是浏览器展示给用户看的内容
</html>
打开html页面的俩种方式：
1.找到文件路径，选择浏览器打开
2.pycharm快捷方式直接打开
5.标签的分类1：
1.双标签（<h1><h1> </a>）
2.单标签（自闭和标签<img/>）
6.head内常用标签
title用来显示网页标题
style用来控制样式的，内部支持写css代码
script内部支持写js代码，也支持导入外界的js文件
link专门用来引入外部的css文件
7.标签的分类2：
1.块儿级标签（他会独占浏览器一行）
div p h1
1.块儿级标签可以修改长宽
2.块儿级标签内部可以嵌套任意的块级标签
ps：但是p标签虽然也是块儿级标签，但是他不能够嵌套其他块儿级标签
，包括自身，但是可以嵌套行内标签。
2.行内标签（自身填入的文本多大就占多大位置）
span b s i u
ps：div和span 通常都是用来构建网页布局的
8.body内常用标签
基本标签：
h标签：标题标签
p标签：段落标签
特殊字符：
| 内容 | 对应代码 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版权 | © |
| 注册 | ® |
一些常用的标签：
div ，span ，p
img标签：
src存放的是图片的路径（该路径可以是本地的也可以是网上的）
1.也可以放url（会自动请求该url获取相应的数据）
2.也可以直接放图片的二进制数据，会自动转换成图片
alt:当图片加载不出来的时候，显示的提示信息
title:当鼠标悬浮在图片上，可以显示你输入的信息
height , 当你只要指定一个参数时，另外一个会等比例缩放，
ps：一般只指定一个就好了
a 标签:
href:后面存放url的时候，点击跳转到该url
ps：如果该链接没有被点击过，那么默认是蓝色，只要点过一次以后，之后都是紫色的
target:默认是_self当前页面跳转
_blank新建页面跳转
锚点功能（回到顶部）
href：还可以写另一个a标签的id值，点击就会直接跳到id值所对应的a标签
ps：
每一个标签都应该有三个比较重要的属性
1.id值 该值就类似于人的身份证号，在用一个html文档id应该保证唯一不重复
2.class值，该值就类似于面向对象里面的继承，可以写多个
3.style(不是必备的) 支持在标签内直接写css代码，属于内连式，优先级最高
ps：任何标签都支持自定义属性
总结以及案例 标签（重点）
被<>包裹，以字母开头，可以结合数字、-连接符等合法字符的特殊字符，称之为标签（重点）。
标签中不区分大小写，帮助我们来更好的显示页面内容，标签有系统标签与自定义标签两种，html5中建议使用系统标签，标签名都采用小写即可。
1 页面结构相关的系统标签 2 1. 页面根标签：<html></html> 3 2. 页面头标签：<head></head> 4 3. 页面体标签：<body></body> 5 4. 页面标题标签：<title></tile> 6 5. 元标签：<meta /> 7 6. 链接标签：<link /> 8 7. 样式标签：<style></style> 9 8. 脚本标签：<script></script> 10 11 简单的系统标签 12 1. 标题标签：<h1></h1> ... <h6></h6> 13 2. 段落标签：<p></p> 14 3. 换行标签：<br /> 15 4. 分割线标签：<hr /> 16 5. 行文本标签：<span></span> 17 6. 斜体标签：<i></i> 18 7. 加粗标签：<b></b> 19 8. 图片标签：<img /> 20 9. 超链接标签：<a></a> 21 7. "架构"标签：<div></div> 22 23 复杂的系统标签 24 1. 无需列表标签：<ul><li></li></ul> 25 2. 表格标签：<table><!-- 包含大量的表格子标签 --></table> 26 3. 表单标签：<form><!-- 包含大量的表单子标签 --></form>
1 <!--文档指令，建议出现在html文件的最上方，一个html文件只出现一次，html表示该文件采用html5语法进行编写--> 2 <!doctype html> 3 <!-- 页面根标签的开始标识，一个html文件只出现一次 --> 4 <html> 5 <!-- 页面头标签的开始标识，一个html文件只出现一次 --> 6 <head> 7 <!-- 规定文件编码的元标签，因为元标签只需要标注具体功能，不需要包裹内容，所以代表标签结束的/写在标签的最后即可(可以省略)， --> 8 <meta charset='utf-8' /> 9 <!-- 页面标题标签，用来显示页面标签标题，如登录百度页面，页面标签标题显示: 百度一下，你就知道 --> 10 <title>第一个html页面</title> 11 <!-- 用来存放出现在head中的CSS3样式代码的标签(CSS3部分详细介绍) --> 12 <style></style> 13 <!-- 用来存放出现在head中的JavaScript脚本代码的标签(JavaScript部分详细介绍) --> 14 <script></script> 15 <!-- 页面头标签的结束标识，与页面头标签的开始一同包裹应该出现在页面头标签中的内容 --> 16 </head> 17 <!-- 页面体标签的开始标识，一个html文件只出现一次 --> 18 <body> 19 20 <!-- 页面中所有显示给用户查看的内容：普通文本、图片、音频及视频等 --> 21 <!-- 也会出现不显示给用户查看的内容：简单与复制的系统标签、脚本标签及影藏的内容等 --> 22 23 <!-- 页面体标签的结束标识，与页面体标签的开始一同包裹页面主体部分所有显示给用户查看的内容(还包含其他不显示的内容) --> 24 </body> 25 <!-- 页面根标签的结束标识，页面的所有内容都应该出现在html标签内部（被html标签开始与结束包裹） --> 26 </html>
简单的系统标签的使用
1 <!-- 简单的系统标签及控制的内容都应该出现在body标签中，以下写的内容都可以直接书写在body标签中，然后可以在浏览器中打开该html文件查看显示效果 --> 2 <h1> 3 在页面上显示的大字加粗的一级标题标签 4 </h1> 5 <h2> 6 在页面上显示的二级标题标签 7 </h2> 8 <!-- 省略h3~h5的案例 --> 9 <h6> 10 六级标题标签 11 </h6> 12 13 <p> 14 一个页面显示的文本段落放在一个p标签中 15 </p> 16 17 直接写在页面中的手动敲的换行不会被浏览器解析为换行，换行符采用br标签 18 <br /><!-- 可以注释掉br标签查看上下两句话前后的显示效果 --> 19 用了br标签，浏览器就会解析出一个换行 20 21 <hr /> 22 在这行文本上下各书写一个hr标签，浏览器打开显示时，这行文本上下均有一个分割线 23 <hr /> 24 25 <span>在页面中的显示文本除了可以写在标题标签(h1~h6)和段落标签(p)中，其他都建议写在span标签中</span> 26 <span>不同于标题标签和段落标签的是两个span标签之间不会换行显示，而是在一行显示，一行显示不下时会自动换行(可以缩放浏览器宽度查看效果)</span> 27 28 <span><i>斜体显示的文本，建议被span标签嵌套</i><b>加粗显示的文本，建议被span标签嵌套</b></span> 29 30 8. 图片标签：<img /> 31 9. 超链接标签：<a></a> 32 7. "架构"标签：<div></div>
功能是显示图片的简单系统标签
1 <!-- 加载显示网络图片 --> 2 <img src="http://www.baidu.com/favicon.ico" /> 3 4 <!-- 图片加载失败是，标签alt全局属性中的文本将显示出来作为图片资源加载失败的文本解释 --> 5 <img src="http://www.baidu.com/favicon.ico_error" alt="百度图标" /> 6 7 <!-- 通过相对路径加载本地图片，title中的文本会在鼠标先显示的图片上悬浮时，显示出来作为图片显示的文本解释 --> 8 <img src="img/bd_logo.png" title="百度logo" />
功能是完成超链接的简单系统标签
1 <!-- 全局属性href中写超链接的目标地址，点击页面中显示的 前往百度，会在当前页面转跳到百度的首页 --> 2 <a href="https://www.baidu.com">前往百度</a> 3 4 <!-- 点击页面中显示的 "前往百度"，标签target全局属性中值为_blank时会新开一个标签页面转跳到百度的首页，默认值是_self，效果同第一种 --> 5 <a href="https://www.baidu.com" target="_blank">前往百度</a> 6 7 <!-- 锚点的使用(了解)，来完成一个浏览网页，返回网页顶部的案例 --> 8 <!-- 种下锚点：该a标签不能在页面中显示文本，用全局属性name来种下一个叫top的锚点 --> 9 <a name="top"></a> 10 <!-- 许许多多页面中其他的显示内容，也可以用一堆br标签来让页面可以滚动起来 --> 11 <!-- 返回锚点：href中用 #锚点名 来表示要前往的锚点，点击 "返回top" 会自动回到页面顶 --> 12 <a href="#top">返回top</a>
功能是专门用来搭建页面架构的简单系统标签
1. div标签没有特殊的显示效果，也没有特殊的功能，所以是最常用的标签 2. 通过建立标签的嵌套关系专门用来为页面搭建架构，在有层次架构下，我们的页面才会分块分级的更好的展现给用户 3. 根据页面的设计稿能很好的构思页面架构，并用div很好的还原页面架构，就是我们学习html语言的重点 4. 还原页面架构后，具体用来显示图片、文本还是其他内容，我们就选取具体的标签来显示这些内容
9.无序列表和有序列表
1 1.无序列表 2 3 <ul type="disc"> 4 <li>第一项</li> 5 <li>第二项</li> 6 </ul> 7 type属性： 8 9 disc（实心圆点，默认值） 10 circle（空心圆圈） 11 square（实心方块） 12 none（无样式） 13 2.有序列表 14 15 <ol type="1" start="2"> 16 <li>第一项</li> 17 <li>第二项</li> 18 </ol> 19 type属性： 20 21 1 数字列表，默认值 22 A 大写字母 23 a 小写字母 24 Ⅰ大写罗马 25 ⅰ小写罗马 26 3.标题列表 27 28 <dl> 29 <dt>标题1</dt> 30 <dd>内容1</dd> 31 <dt>标题2</dt> 32 <dd>内容1</dd> 33 <dd>内容2</dd> 34 </dl>
10.表格标签（重点）：
代码：
1 <table border="1" cellspacing="0" cellpadding="10"> 2 <caption>表格标题</caption> 3 <thead> 4 <tr> 5 <th>标题</th> 6 <th>标题</th> 7 <th>标题</th> 8 <th>标题</th> 9 </tr> 10 </thead> 11 <tbody> 12 <tr> 13 <td rowspan="2">单元格</td><!-- 合并2行单元格 --> 14 <td colspan="2">单元格</td><!-- 合并2列单元格 --> 15 <!-- <td>单元格</td> --><!-- 该列单元格被合并 --> 16 <td>单元格</td> 17 </tr> 18 <tr> 19 <!-- <td>单元格</td> --><!-- 该行单元格被合并 --> 20 <td>单元格</td> 21 <td>单元格</td> 22 <td>单元格</td> 23 </tr> 24 </tbody> 25 <tfoot> 26 <tr> 27 <td>单元格</td> 28 <td>单元格</td> 29 <td>单元格</td> 30 <td>单元格</td> 31 </tr> 32 </tfoot> 33 </table> 34 35 <!-- 36 标签部分： 37 1. table表格标签 38 2. caption表格标题标签 39 3. thead表格头部区域标签，tbody表格主体区域标签，tfoot表格尾部区域标签，均可以省略别写 40 4. tr表格行标签 41 4. th表格标题单元格标签，td表格普通单元格标签 42 43 全局属性部分： 44 1. border表格的边框宽度 45 2. cellspacing单元格直接的间距 46 3. cellpadding单元格内部的间距 47 4. rowspan合并行单元格 48 5. colspan合列行单元格 49 -->
11.表单标签
能够接收用户（输入，选择，上传）并将其发送给后端
ps:
action控制数据提交的目的地
1.不写的情况下，默认提交到当前页面所在的路径
2.写路径（https://www.baidu.com）
3.路径后缀（/index/）
input
<input> 元素会根据不同的 type 属性，变化为多种形态。
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本，普通文本 | <input type=text" /> |
| password | 密码输入框，显示密文 | <input type="password" /> |
| date | 日期输入框 | <input type="date" /> |
| checkbox | 多选框，也可以设置默认值 | <input type="checkbox" checked="checked" /> |
| radio |
单选框 可以通过checked控制默认选择(当属性值和属性名相同的情况下 可以简写 checked) checked="checked" |
<input type="radio" /> |
| submit | 提交按钮 | <input type="submit" value="提交" /> |
| reset | 重置表单内容 | <input type="reset" value="重置" /> |
| button |
普通按钮，没有实际意义， 但是可以通过js绑定事件实现自定义动作 |
<input type="button" value="普通按钮" /> |
| hidden | 隐藏输入框 | <input type="hidden" /> |
| file | 获取用户上传的文件 | <input type="file" /> |
属性说明：
name：表单提交时的“键”，注意和id的区别 value：表单提交时对应项的值 type="button", "reset", "submit"时，为按钮上显示的文本年内容 type="text","password","hidden"时，为输入框的初始值 type="checkbox", "radio", "file"，为输入相关联的值 checked：radio和checkbox默认被选中的项 readonly：text和password设置只读 disabled：所有input均适用
select标签
默认是单选，可以通过multiple变成多选
如果想默认选择，用selected （selected = ‘selected’）
textarea标签
获取用户输入的大段文本
from表单默认是get请求，你需要通过method参数，换成post提交
from表单中，要想触发提交动作，只有俩种情况可以：
1.input标签type指定成submit
2.直接写button标签
获取用户（输入，选择，上传）的标签，都必须有一个name属性
这个name属性就类似于字典的key，而标签获取到的用户写入的值就类似于字典的value
<input type='text' id='d1' name='username' value = '默认值'>
name 就相当于是字典的key
value就是字典的值
获取到的用户输入都会被放入value属性中
from表单传文件的时候，需要指定enctype参数