Http协议 前端知识之HTML
目录
前端与后端的概念
前端：任何与用户直接打交道的操作界面 都可以称之为前段 可以看成是接待员
后端：不直接与用户打交道 主要负责内部真正的业务逻辑的执行 可以看成是幕后操作者
前段三剑客：
| HTML | CSS | JavaScript |
|---|---|---|
| 网页的骨架 | 网页的样式 | 网页的动态 |
| 可以看成是蜡笔小新关着身子 | 穿裙子抹口红 | 给根钢管舞起来 |
前段前戏B/S架构
- 编写服务端
- 浏览器充当客户端访问服务端
- 浏览器无法正常展示服务端内容(因为服务端的数据没有遵循标准)
- HTTP协议>>>:最主要的内容是就是规定了浏览器与服务端之间数据交互的格式
1.编写服务端代码
2.让浏览器作为客户端访问服务端
3.浏览器无法正常展示
import socket
server = socket.socket()
server.bind(('localhost',8080))
server.listen(5)
conn, address = server.accept()
data = conn.recv(1024)
print(data)
conn.send(b'hello world')
响应无效：浏览器接受到了服务端传的消息，只不过无法解析。
服务端
HTTP协议
四大特性：
- 基于请求响应：客户端发送请求 服务端回应响应
- 基于TCP、IP作用于应用层之上的协议：该协议属于应用层
- 无状态：服务端不会保存客户端的状态(记不住人) 纵使见她千百遍 我都当她如初见
- 无\短连接：客户端与服务端不会长久保持连接 如果想要长连接有：Websocket协议
websocket协议
网络弹窗：websocket协议
微信加好友：永远连着一个通道 websocket协议
将客户端和服务端永久连接 可以支持服务端主动和客户端发消息
更多：https://blog.csdn.net/qq_58467694/article/details/125267043
数据格式：
-
请求格式
请求首行(请求方式(有很多种)、协议版本)
请求头(一大堆K:V键值对)
换行符：/r/n
请求体(存放敏感信息 并不是所有的请求方式都有请求体)
-
响应格式
响应首行(响应状态码 协议版本)
响应头(一大堆K:V键值对)
换行符：/r/n
响应体(存放返回给浏览器、展示给用户看的数据
响应状态码
响应状态码的作用：
用数字来表达一些文字意义（类似于暗号）
便于记忆，方便理解，更快
1XX：服务端已经收到了你的请求正在处理 客户端可以继续发送或者等待
2XX：200 OK 请求成功 服务端发送对应的响应
3XX：302(临时) 304(永久) 重定向(想访问网页A但是自动跳到了网页B)
4XX：403访问权限不够 404请求资源不存在
5XX：服务端内部错误
PS：在公司中我们还会自定义更多的响应状态码 通常以10000起步
自定义响应状态码：10000起步！（聚合数据）：
HTML简介
- 直接发送手里写的数据
- 转为发送文件里面的数据
- 编写HTML出现特殊的现象
超文本标记语言：所见即所得(没有任何逻辑 是什么就是什么)
重写服务端，使得浏览器可以访问：
给浏览器传输一个文本文件：
给浏览器传输一个‘特殊的文本文件：
HTML概念
1.HTML注释语法
<!--注释内容-->
2.HTML文档结构
<html> 固定格式html包裹
<head>主要是跟浏览器交互的配置</head>
<boby>主要放给用户查看的花里胡哨的内容</boby>
</html>
3.HTML标签分类
单标签(自闭和标签)
<img/>
双标签
<h1></h1>
预备知识
-
网页信息数据一般也会存放于文件中 .html
-
pycharm支持前端所有的类型的文件编写
内置有自动补全功能 只需要专注于标签的编写即可
-
html文件的打开
内置有自动调用浏览器的功能
head内常见标签
1.title网页小标题
2.meta定义网页源信息(很多配置)
<meta name="keywords" content="查询关键字">
<mete name="description" content='网页简介'>
3.style内部支持编写css代码
<style>
h1 {
color:greenyellow;
}
</style>
这里的代码意思是修改h1标题的颜色
4.link引入外部css文件
<link rel="stylesheet" href="mycss.css">
5.script支持内部编写js代码 也可以引入外部js文件
<script>
prompt("好好活着","不要浪费生命")
</script>
<script src="myjs.js"></script>
prompt的作用是弹出一个提示窗口，第二断文本会出现在文本框内
body内基本标签
1.标题系列标签
h1~h6
2.段落标签
p
3.其他标签
u 下划线
i 斜体
s 删除线
b 加粗
ps:相同效果可能是有不同的标签实现的 不是独一无二的
4.换行与分割线
br 换行
hr 分割线
行内标签
u i s b
内部文本多大就占多大
块儿级标签
h系列 p
独占一行
常见符号
空格
> >
< <
& &
¥ ¥
版权© ©
注册® ®
body内布局标签
div
块儿级标签
span
行内标签
'''
标签之间可以相互嵌套 并且理论上可以无线套娃
块儿级标签内部可以嵌套块儿级标签和行内标签
p标签虽然是块儿级标签 但是它的内部也不能嵌套块儿级标签
行内标签内部只能嵌套行内标签
'''
导航条：一个大div里面包含多个小div
body内常用标签 a img
标签括号内填写的 什么=什么 称之为的标签的属性
1.默认属性
标签自带的 编写的时候有自动提示
2.自定义属性
用户自定义 编写不会有提示甚至会飘颜色
<a>标签 链接标签
href属性
1.填写网址 具备跳转功能
href='url'
2.填写其他标签的id值 具备锚点功能(指能够跳到你指定标签的位置)
href='#id' （所有标签都有id属性 同一html不能id重复）
target属性
默认_self原网页跳转
_blank新建网页跳转
<html>
<head>
<meta charset="utf-8">
<title>加油</title>
</head>
<body>
<p>
<a href="#d1">参见第七章</a>
</p>
<p>
<h2>第一章</h2>
<p>本章解释了 ba bla bla</p>
<h2>第二章</h2>
<p>本章解释了 ba bla bla</p>
<h2>第三章</h2>
<p>本章解释了 ba bla bla</p>
<h2><a name="C4">第四章</a></h2>
<p>本章解释了 ba bla bla</p>
<h2>第五章</h2>
<p>本章解释了 ba bla bla</p>
<h2>第六章</h2>
<p>本章解释了 ba bla bla</p>
<h2><a id="d1">第七章</h2>
<p>本章解释了 ba bla bla</p>
</body>
</html>
<img>标签 图片标签
src属性
1.填写图片地址
2.还有更多特性 路由（自动发数据拿图片）
title属性
鼠标悬浮在图片上自动展示的文本
alt属性
图片加载失败提示的信息
width\height属性
图片的尺寸 两者调整一个即可 等比例缩放
列表标签 li ol dl(dt dd)
无序列表
<ul>
<li>手机</li>
<li>衣物</li>
<li>电子</li>
</ul>
ps:页面上所有有规则排列的横向或者竖向的数据 一般使用的都是无序列表
有序列表
<ol type="I">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
ps:还可以通过type竖向切换数字
标题列表
<dl>
<dt>大标题</dt>
<dd>小标题1</dd>
<dd>小标题2</dd>
<dt>大标题</dt>
<dd>小标题1</dd>
<dd>小标题2</dd>
<dd>小标题3</dd>
</dl>
无序列表使用实例：
表格标签 table(thead tbody tr th td
1.先写基本骨架
<table>
<thead></thead>
<tbody></tbody>
</table>
2.再写表头及表单数据
<tr> 一个tr标签就表示一行
<th>编号</th> th主要用于表头字段中 用来加粗显示
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td> td主要用于表达数据中
<td>jason</td>
<td>18</td>
</tr>
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jason</td>
<td>18</td>
</tr>
</tbody>
</table>
3.属性border='1'调整表的线宽 这是用html改样式 我们改样式应该用css
表单标签 form input(submit reset button) select option textarea
可以获取到用户的数据并发送给服务端
<form>标签
action属性 控制数据的提交地址
method属性 控制数据的提交方法
<input>标签(类似于前端的变形金刚)
labal标签包裹input解决pycharm飘黄 labal标签的for属性应当与相关元素的id属性相同
--------------------------------
type属性: 作用:
text 普通文本
password 密文展示
date 日期选项
email 邮箱格式
radio 单选
checkbox 多选 复选框
file 文件 上传多文件multiple
按钮：
submit 触发提交动作
reset 重置表单内容
button 暂无任何功能
----------------------------------
<!--
1.用块级标签包裹可以换行，不要用换行符br。
2.submit\reset两个按钮，不同的浏览器分配的文本内容不一样 所以最好都加value 给按钮命名
3.上传多文件添加属性 multiple
4.标签里面的属性值才会发送给后端
-->
<select>标签 下拉框 多选下拉框multiple
<option>标签 下来框的一个个选项
<textarea>标签 获取大段文本
<!--
input标签应该有name属性
name属性相当于字典的键 input标签获取到的用户数据相当于字典的值
点击发送就会组织成字典的形式发送给服务端 这样才具有明确意义
-->
表单标签补充
提交按钮sumbit的mothod属性
mothod属性可以为get或者post
post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据
from内fieldset表单标签
fieldset定义了一组相关的表单元素，并使用外框包含起来
<form>
<fieldset>
<legend>Personalia:</legend> <!--legend定义了标题-->
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
select内optgroup标签
通过 optgroup 标签把相关的选项组合在一起：
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
表单标签的补充说明
基于form表单发送数据
input标签的name和value属性
name属性相当于字典的键
用户输的数据会被保存到标签大value属性中 value属性中value属性相当于字典的值
# 有如下示例：
<form>
请输入性别：
<input type="radio" name="gender" value="male">男</input>
<input type="radio" name="gender" value="female">女</input>
<input type="radio" name="gender" value="others">其他</input><br><br>
<input type='text' name='text_input' value='hello'>
<input type="submit">
</form>
name：表单提交时的“键”，注意和id的区别
value：表单提交时对应项的值
type="button", "reset", "submit"时，为按钮上显示的文本年内容
type="text","password","hidden"时，为输入框的初始值
- 点击提交按钮后，会将整个表单的数据提交。按照如下状态进行提交：
'''总结：
1. 如果不需要用户填写数据 只需要选择 那么我们需要自己填写value ---> 单选框
2. 如果需要用户填写数据 那么我们可以不写value ---> 文本栏
3. 性别单选、复选按钮的name属性必须有相同的属性值 才可以实现多选一
4. 没有name属性的标签 form表单会直接忽略 不会发送
- 使用开发者工具的network查看网络活动，可以查看表单提交的内容：
- 如果文本栏不输入值进行提交，结果如下：
label标签绑定input
针对input标签理论上应该配一个label标签绑定 但是也可以不写
- label会自动聚焦绑定的input
- label的for属性绑定input的id值 同一html文件中id值是唯一的
<label for="d1">username:
<input type="text" id="d1">
</label>
<label for="d1">username:</label>
<input type="text" id="d1">
属性简写
标签的属性如果和属性值相等 那么可以简写
<input type="file" multiple="multiple">
<input type="file" multiple> # 效果相同
设置默认选项 checked
针对选择类型的标签可以提前设置默认选项
<input type="radio" name="gender" checked="checked"> # 这个单选框是默认选中的
<input type="radio" name="gender" checked> # 属性简写
<input type="checkbox" checked="checked"> # 这个多选框是默认选中的
<input type="checkbox" name="gender" checked> # 属性简写
<select>
<option>唱</option>
<option>跳</option>
<option>rap</option>
<option selected>篮球</option> # 这个下拉选项是默认选中的
</select>
支持复选 multiple
下拉框与文件上传可以复选
# 这里以下拉框举例
<form>
<select name="akun" multiple> # 这个name别忘了！
<option value="sing">唱</option>
<option value="jump">跳</option>
<option value="rap">rap</option>
<option value="basketball" selected>篮球</option>
</select>
<input type="submit">
</form>
- 按住shift可以多选：
- F12查看网络活动：
