HTTP协议
http协议： 超文本传输协议，'用来规定服务端和浏览器之间的数据交互的格式'···
该协议可以不遵循，但是自己写的服务端，就不能被浏览器正常访问，只可以自己写客户端或者app
HTTP协议四大特性
1 基于请求响应
2 基于TCP/IP作用于应用层之上的协议
3 无状态
-不保存用户的信息，
由于HTTP协议是无状态的，所以后续出现了一些专门用来记录用户状态的技术
coolie ， session ， token·····
4 无/短连接
请求来一次响应一次 ，之后就没有任何链接关系了。
长链接： 双方建立链接之后默认不断开 websocket(后面会讲)
# ·····················································
# 请求数据格式
请求首行(请求方式 协议 版本号)
请求头(一大堆k:v键值对)
/r/n
请求体(并不是所有的请求方式都有，get没有，post有，post存放的是post请求提交数据的明哥那数据)
# ·····················································
# 响应数据格式
响应首行(标识HTTP协议版本，响应状态码)
响应头(一大堆k:v键值对)
响应体(返回浏览器展示给用户看的数据)
#···················································
# 响应状态码
用一串简单的数字来表示一些复杂的状态或者描述性信息。 404：请求资源不存在
1xx 服务端已经接收到你的数据正在处理，你可以继续额外提交
2xx 服务端已经成功响应了你想要的数据(200 ok请求成功)
3xx 重定向(当访问一个需要登录才能看页面，会自动跳转到登录页面)
4xx 请求错误 (404 请求资源不存在 403 当前请求不合法或者不符合访问资源的条件)
5xx 服务器内部错误（500 机房的问题，和客户端没关系）
# ·····················································
#请求方式
1 get 请求
朝服务端要数据
eg：输入网址获取对应的内容
2 post 请求
朝服务端提交数据 提交到服务端后做身份校验
# url：统一资源定位符(网址)
HTML简介（网页骨架）
超文本标记语言
如果想要让浏览器能够渲染出你写的页面，就必须遵循HTML语法
我们浏览器看到的页面，其实都是HTML代码(所有的网站内部其实都是HTML代码)
HTML 就是书写网页的一套标准
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->
由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的朝朝
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTML代码
<!--左侧菜单栏结束-->
HTML文档结构
<html>
<head></head>:head内的标签不是给用户看的，而是定义一些配置主要给浏览器看到
<body></body>:body 内的标签，写什么浏览器就渲染什么，用户就能看到什么
</html>
ps: 文件的后缀名其实是给用户看到的，只不过对应不同的 后缀名有不同的软件来处理并添加很多功能
注意：HTML代码没有格式的，可以全部写在一行都没问题，只不过我们习惯缩进来表示代码
两种打开html文件的方式
1 找到文件所在的位置选择浏览
2 在pycharm内部，集成了自动调用浏览器的功能，直接点击即可(前提是电脑上安装了对应的浏览器)直接全部使用谷歌浏览器
标签的分类：
<h1></h1>
<a herf="https://www.mzitu.con/"></a>
</img>
1 双标签
<h1></h1>
<a herf="https://www.mzitu.con/"></a>
2 单标签(自闭和标签)
</img>
head内常用标签
<！--在写heml代码的时候，只需要写标签名，tab健就能自动补全-->
<title>title里面写网页标题</title>
<style>
/*style里面一般写CSS样式*/
h1 {
color: red;
}
</style>
<script>
// 写js代码 也可以引入外部js文件 放js文件路径 (本地/网络)
alert(123)
</script>
<link rel="stylesheet" href="mycss.css"> # 引入外部CSS文件
<script src="myjs.js"></script> # 引入外部js文件
<link rel="stylesheet" href="../../mycss.css">
<script src="../../myjs.js"></script>
<meta http-equiv='refresh' content="2:URL=https://www.baidu.com" > //2秒后跳入到对应的网址，了解即可
<meta name="keyword" content="淘宝，网上购物，xxxxxx"> 当在浏览器搜索的时候，只要输入了keywords后面指定的关键字，那么该网页都有可能被百度搜索出来展示给用户
<meta name="description" content="淘宝网-xxxxxxx"> 网页的描述性信息
'总结'：sytle script link 掌握 meta 了解
head标签：中可以写sytle(css样式) script(js代码)，link(引入的css代码) mete(跳转网址/网址关键字/网页描述信息)
body中常用标签
肉眼能够在浏览器上面看到的花里胡哨的页面，内部都是HTML代码
<h1>这是一级标题</h1> h1~h6标题标签，其中 h1最大 h6最小
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>段落标签</p> 段落标签 一个p标签一行
<br> 换行
<hr> 水平分割线
<img> 图片标签
<a>超链接标签
table 表格标签
form 标单标签
body标签中，主要编写的网页内容，包括文本，图片，链接，表单等。
### body标签内的相当于人的是身体。head标签内的相当于人的衣服还有动作。
标签的分类2
1. 块儿级标签
# 独自占一行
h1~h6 p div
*1 块级标签可以修改长宽，行内标签不可以，修改了也不会变化
*2 块级标签内部可以嵌套任意的块级标签和行内标签
*3 虽然p标签 是块级标签，但是它只能嵌套行内标签，不能嵌套块儿级标签,套了也问题不大，浏览器会自动解开
总结：只要是块儿级标签都可以嵌套任意的块儿标签和行内标签，除了p标签，p只能嵌套行内标签
2. 行内标签(内联标签)
# 自身文本有多大，就占多大
b i u s标签 span
行内标签不能嵌套块级标签，可以嵌套行内标签
特殊字符
空格
> > 大于号
< < 小于号
& & 符号
¥ ¥ 价格符号
© 版权 ©
® 商标 ®
# 可以直接在body标签中用
# 我们浏览器内部看到的都是html源码
常用标签(div / span)
div 块儿级标签
span 行内标签
# 上面两个标签是在构造页面初期最常用的，
# 页面的布局一般先用div 和span 占位之后再去调整样式，
# div 使用非常频繁idv 可以把它看成是一块区域，也就意味着用div 来提前规定所有的区域，之后往该区域内部填写内容即可。
···········································
# 普通的文本先用span标签
img标签
'图片标签'
<img src="" alt="">
src ：
1 图片的路径，可以是本地也可以是网络上的
2 url 自动朝该url发送get请求获取数据
alt="xxxx" ：
alt ="网络不行"
当图片加载不出来的时候，给图片的描述性信息
title="xx":
当鼠标悬浮到图片上之后，自动给出来的提示信息
height="800px" width="":
高度和宽度，
当修改一个参数的时候，另一个参数会等比例缩放
如果修改了两个参数，但没有考虑比例问题的时候，那么图片就会失真。
a标签
# 链接标签
<a href=""></a>
'当a标签指定的网址从来没被点击过，那么a标签的字体是蓝色，如果点击过了就会变色，（浏览器记忆了）'
href
1 放url，用户点击后就会跳转到的页面
2 放其他a标签的id值，点击即可跳转到对应的标签位置
target
默认a标签是在当前页面完成跳转 _self
也可以修改为新建页面跳转 _blank
例子：
<a href="https://www.baidu.com/" target="_self">点我看看</a>
target='_self' 在当前页面打开
target='_blank' 在新建页面打开
···············································
# a标签的锚点功能
'eg:点击一个文本标题，页面自动跳转到标题对应的内容区域'
<!-- a标签的锚点功能-->
<a href="" id="d1">顶部</a>
<h id="d111">hello</h>
<div style="height: 1000px;background-color:red"></div>
<a href="" id ="d2">中间</a>
<div style="height: 1000px;background-color:greenyellow"></div>
<a href="#d1">底部</a>
<a href="#d2">回到中间</a>
<a href="#d111">回到顶部</a>
标签具有的两个重要属性
1 id 值
类似于标签的身份证号，在同一个html页面上id值不能重复
2 class值
该值类似于面向对象里面的继承，一个标签可以继承多个class值
一个html中class值可以用多个并且可重复
"标签既可以有默认的书写也可以有自定义的书写"
<p id ="di" class="c1" username="jason" password="123"></p>
列表标签
无序列表
有序列表
标题列表
'无序标签'
<ul type="circle">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
ul默认是实心圆点，可以通过添加参数改变
type = 'circle' 空心圆点
type = 'none' 没有样式
type = 'squre' 方块
···············································
'有序列表'
<ol type='A' start = 'C'>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
简写方式 ol>*3+tab键 自动生成
type = 'A' 从A开始排序
type = 'a' 从a开始排序
start 参数 从某个位置开始
····················································
列表标签（了解即可） 后面有写好的东西可以用
<dl>
<dt>1</dt>
<dd>2</dd>
<dt>1</dt>
<dd>2</dd>
<dt>1</dt>
<dd>2</dd>
</dl>
前端标签分类有几种
结构标签（Semantic Markup）：用于定义页面的结构，如<header>、<nav>、<main>、<section>、<article>、<footer>等。
文本标签（Text Markup）：用于标记文本内容，如<h1>到<h6>表示标题级别，<p>表示段落，<span>表示内联文本等。
表单标签（Form Elements）：用于创建表单，收集用户输入，如<form>、<input>、<textarea>、<select>、<button>等。
图片和多媒体标签（Image and Media Elements）：用于插入图片和多媒体内容，如<img>、<video>、<audio>等。
超链接标签（Hyperlink Elements）：用于创建超链接，如<a>标签。
列表标签（List Elements）：用于创建有序或无序列表，如<ul>、<ol>、<li>等。
表格标签(table)
<table border="1" cellpadding="5" cellspacing="5" >
<thead> # 表头(字段信息)
<tr> # 一个tr 就代表 一行
<th>username</th> # th 加粗
<th>passwrod</th>
<th>read</th>
</tr>
</thead>
<tbody> # 表单（数据信息）
<tr>
<td>jason</td> # td正常文本
<td>123</td>
<td>read</td>
<tr>
<td rowspan="2">jason</td> # 水平占两行
<td>123</td>
<td>read</td>
</tr>
<tr>
<td colspan="2">ben</td> # 竖直占两行
<td>123</td>
<td>read</td>
</tr>
</tr>
</tbody>
</table>
<table border="1" > 加外边框
<td rowspan="2">jason</td> # 竖直占两行
<td colspan="2">ben</td> # 水平占两行
# 原生的表格标签很丑，后期都是用封装好的，很好看
``` table 中的属性`````````
● border: 表格边框.
● cellpadding: 内边距
● cellspacing: 外边距.
● width: 像素 百分比.（最好通过css来设置长宽）
● rowspan: 单元格竖跨多少行
● colspan: 单元格横跨多少列（即合并单元格）
表单标签（form）
表单标签: 能够获取到前端用户数据（用户输入的，用户选择，用户上传。。）基于网络发送给后端服务器
# 写一个注册功能
<form action=""></form> # 在该form标签内部书写的获取用户的数据都会被form标签提交到后端
action: 控制数据提交的后端路径（给哪个服务端提交数据）
1 什么都不写，默认向当前页面所在的url提交数据
2 写全路径：https：//www.baidu.con 向百度服务端提交
3 只写路i纪念馆后缀 action='/index' 自动识别出当前服务端的ip和port拼接的到前面 （djiango会用）host：port/index/
·······································
<label for="d1"> # 第一种直接将input框写在label内
username: <input type ='text' id="d1">
</label>
# 第二种 通过id连接即可， 无需嵌套
<label for="d2">password:</label>
<input type="text" id ="d2">
作用：将输入框与文字进行绑定，点文字即可选定输入框
ps：input 不跟label关联也可以
<input type="text" placeholder="请输入用户名">#输入框内写字
······································
'文本输入组'
input标签，类似于前端的变形金刚，通过 type 属性变形
type="date" # 日期格式
type="password" # 密码格式，密文展示
type="text" # 普通文本格式
······································
'按钮组'
<!-- 当没有指定内容的时候，不同浏览器渲染的内容不一致-->
<input type="submit" value="注册"> # 触发form表单提交动作
<input type="button" value="按钮"> # 普通按钮 最有用的 学完js之后可以给它自定义各种功能
<input type="reset" value="重置"> # 重置输入框内容
# 能够触发form表单数据提交的按钮 有哪些？？
<input type="submit" value="重置">
<button>点我</button>
······································
'所有获取用户输入的标签，都应该有name属性'
<label for="d4">
gender:
<input type="radio" name="gender">男
<input type="radio" name="gender" checked>女
<input type="radio" name="gender">其他
</label>
radio：单选
默认选中checked='checked'
# 当标签的属性名和属性值一样的时候可以简写
<input type="radio" name="gender" checked="checked">女
<input type="radio" name="gender" checked>女
checkbox：多选
<input type="checkbox" checked>read
<input type="checkbox" checked>study
<input type="checkbox">bbq
······································
<p> # 单选
<label for="d6">province
<select name="" id="">
<option value="">北京</option>
<option value="" selected>上海</option>
<option value="">深圳</option>
</select>
</label>
</p>
<p>爱好： # 多选
<select name="" id="" multiple>
<option value="">aa</option>
<option value="">bb</option>
<option value="">cc</option>
</select>
</p>
······································
<select name="" id="">
<optgroup label="北京">
<option value="">朝阳</option>
<option value="">海淀</option>
<option value="">石景山</option>
</optgroup>
# 带提示的选择项
······································
<p>文件：
<input type="fike" multiple>
</p> # 获取文件，也可以一次性获取多个
······································
<p>自我介绍
<textarea name="" id="" cols="30" rows="10" maxlength="20"></textarea>
</p> # textarea 获取大段文本 maxlength限制长度
······································
# label 和input都是行内标签
from表单就是提交数据的
浙公网安备 33010602011771号