文章目录
前端简介
前端与后端
前端
与用户直接打交道的操作界面都可以称为前端(看到那些酷炫的特效画面)
后端
不直接与用户打交道的内部真正执行核心业务逻辑的代码(用代码把那些特效做出来)
前端核心基础
HTML 网页的骨架 CSS 网页的样式 JAVASCRIPT 网页的动态
超文本传输协议前戏
1.手写一个服务端程序
2.使用浏览器充当客户端(BS架构)
3.浏览器端无法直接展示服务端的响应数据
4.由于浏览器需要兼容很多服务端软件 为了实现无障沟通交流 产生协议(HTTP协议、FTP协议、HTTPS协议)
5.浏览器发送的请求数据格式肯定是没有问题 因为别人早就封装好了 问题出现在我们自己写的服务端响应数据格式
1.手写服务端
import socket
server = socket.socket()
server.bind(('127.0.0.1', 8080))
server.listen(5)
while True:
sock, addr = server.accept()
while True:
data = sock.recv(1024)
print(data)
sock.send(b'hello,world')
2.解决方法
import socket
server = socket.socket()
server.bind(('127.0.0.1', 8080))
server.listen(5)
sock, addr = server.accept()
data = sock.recv(1024)
print(data)
sock.send(b'HTTP/1.1 200 OK\r\n\r\nHello,world')
HTTP超文本传输协议
1.四大特性
1> 基于请求响应(只要你不动 它不会给你响应)
2> 基于TCP/IP之上作用于应用层的协议
3> 无状态(不记录客户端来的状态 来一个人立马忘记 下一个也是如此)
4> 无/短连接(发送请求之后 断开关系)
2.数据格式
请求数据格式
1> 请求首行(请求方式:有很多种 协议名称及版本)
2> 请求头(一大堆K:V键值对)
3> 换行
4> 请求体(携带一些敏感的数据 不是所有的请求都有请求体)
响应数据格式
1> 响应首行(响应状态码)
2> 响应头(一大堆K:V键值对)
3> 换行
4> 响应体(一般情况下就是浏览器要展示给用户看的数据)
3.响应状态码
利用数字来展示一些复杂的情况说明
1XX: 服务端已经接收到你的请求正在处理 你可以继续提交或者等待
2XX: 200 OK服务端给出了相应响应
3XX: 重定向
4XX: 403请求不符合条件 404请求资源不存在(我们大部分都是遇到这种情况)
5XX: 服务端内部错误
我们在公司中还会自定义更多的状态码 一般情况下从10000开始
HTML简介
HTML简称超文本标记语言 是所有浏览器展示的页面必备
浏览器展示的界面我们也称做HTML页面 存储HTML语言的文件一般都是.html
HTML语法注释
<! -- 注释内容 -->
HTML文件结构
<html> 所有的代码都必须写在html标签内部
<head></head> head内的数据一般都不是给用户看的
<body></body> body内的数据就是浏览器展示给用户看的
</html>
HTML标签分类
单标签(自闭和标签)<img/> 双标签(又开始又结束 /)<a> </a>
HTML格式
<!DOCTYPE html> # 文档声明 HTML
<html lang="en"> # 语言默认英文ENGLISH
<head> # head内的数据一般都不是给用户看的
<meta charset="UTF-8"> # 字符编码
<title>Title</title> # 网页标题
</head>
<body> # body内的数据就是浏览器展示给用户看的
</body>
</html>
head内常见标签
title 控制标签页小标题
style 内部支持编写CSS
link 引入外部CSS文件
script 内部支持编写JS代码 还可以通过src属性引入外部JS文件
meta 通过内部属性的不同可以有很多功能
<meta name="keywords" content="填写一些关键字 提升网页被搜索的概率">
<meta name="description" content="填写一些网页的简介">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是网页名称</title>
<style>body{ color: yellowgreen;}</style>
<link rel="stylesheet" href="my_css.css">
<script>confirm('今天你有努力学习嘛？')</script>
<meta name="keywords" content="填写一些关键字 提升网页被搜索的概率">
<meta name="description" content="填写一些网页的简介">
</head>
<body>
加油努力 终有你的归宿
</body>
</html>
body内常见标签
h1~h6 标题标签
p 段落标签
hr 水平分割线
br 换行符
u 下划线
i 斜体
s 删除线
b 粗体
注意:有很多样式 可能存在多种标签可以实现
<body>
<h1>加油努力 终有你的归宿</h1> # 一级标题
<h6>加油努力 终有你的归宿</h6> # 六级标题
<hr> # 水平分割线
<h2>我要换行了<br>换到这里了</h2> # 换行符
<u>加油努力 终有你的归宿</u> # 下划线
<i>加油努力 终有你的归宿</i> # 斜体
<s>加油努力 终有你的归宿</s> # 删除线
<b>加油努力 终有你的归宿</b> # 粗体
</body>
块儿级标签与行内标签
1.块儿级标签 h1~h6 p hr br
一个标签独占一行
2.行内标签 u i s b
内部文本多大自身就占多大(主要用于文本内的数据)
boby内基本符号
空格 # 直接打空格是无效的 需要用到空格符号
> 大于号 # 直接打 > 没用的 需要用到&ft;符号
< 小于号 # 直接打 < 没用的 需要用到<符号
& & # 直接打 & 没用的 需要用到&符号
¥ ¥ # 直接打 ¥ 没用的 需要用到¥符号
® 注册商标
© 版权
<body>
我要空格了 空格了<br>
我是大于>号<br>
我是小于<号<br>
我是&——&<br>
我是¥——¥<br>
我是注册号®<br>
我是版权号©<br>
</body>
body内布局标签
div
块儿级标签
span
行内标签(放在div里面的)
1.块儿级标签是可以通过CSS调整为不独占一行
2.标签之间很多时候可以嵌套
块儿级可以嵌套任何类型的标签
p标签虽然是块儿级标签 但是不能块儿级标签
行内标签只能嵌套行内标签
<div>
<span>
第一行
<p>我是span里面的p标签</p>
</span>
<span>第二行</span>
<span>第三行</span>
</div>
body内常见标签
1.a标签
链接标签
href 可以填写网址 点击自动跳转
href还可以填写其他标签的id值 实现锚点功能
target 可以控制是否新建页面跳转
_self # 当前页面打开
_blank # 新建一个页面打开
2.img标签
图片标签
src 填写图片地址(网络地址 本地地址)
title 鼠标悬浮在图片上就会有提示信息
alt 图片加载失败提示的信息
height 调整图片的高度
width 调整图片的宽度
上述两个调整一个另外一个等比例缩放 (如果两个一起设置可能会变形)
<h1 id="1">加油努力 终有你的归宿</h1>
<div style="height: 500px;background: yellowgreen"></div>
<h6 id="2">加油努力 终有你的归宿</h6>
<div style="height: 500px;background: darkblue"></div>
<a href="http://www.baidu.com/">点击跳转到百度！！！</a><br> <!--可以填写网址 可以填写ID ID会像是页码一样立即跳转到文章位置 -->
<a href="#1">跳转到ID1的位置！！！</a><br>
<a href="#2">跳转到ID2的位置！！！</a><br>
<a href="http://www.weibo.com/" target="_blank">点击跳转微博！！！</a> <!-- blank 新开一个页面 self 当前页面-->
<hr>
<img src="https://gimg2.baidu.com/太长了不展示了"
alt="图片太大了！！"
title="风景照片！"
height="500px">
标签两大重要属性
下面的两个属性都是用来快速定位需要操作的标签
1.id属性(一对一管理)
类似于身份证号 在同一个html页面上 id值不能重复
2.class属性(批量管理)
类似于分组 多个标签可以拥有相同的class值
列表标签 UL
无序列表
<ul>
<li>python</li>
<li>golang</li>
<li>linux</li>
</ul>
页面上有规则排列的横向或者竖向的多个元素几乎使用的都是无序列表
有序列表
<ol type="I" start="10">
<li>第一项</li>
<li>第二项</li>
<li>第二项</li>
</ol>
标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
表格标签 Table
<table>
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jason</td>
<td>123</td>
</tr>
</tbody>
</table>
表单标签 Form
能够获取用户输入(输入、选择、上传)的数据并发送给后端服务器
<form action="" method=""></form>
action属性
用于控制数据的提交地址 不写的话就是朝当前页面所在的地址提交(不填提交则是清除数据)
method属性
用于控制请求的方式(get\post)
<form action="" method="post">
<p>username:<input type="text"></p> # 普通文本框
<p>password:<input type="password"></p> # 输入密码会变成·号
<p>birthday:<input type="date"></p> # 会让选择日期
<p>email:<input type="email"></p> # 会让输入邮箱格式 必须有@
<p>gender: # 单选圆按钮
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</p>
<p>hobby: # 单选框☑️
<input type="checkbox" name="hobby">篮球
<input type="checkbox" name="hobby">足球
<input type="checkbox" name="hobby">乒乓球
</p>
<p>file: # 上传文件(1个)
<input type="file">
</p>
<p>files: # 上传文件(多个)
<input type="file" multiple>
</p>
<p>province:
<select name="" id=""> # 下拉框
<option value="">北京</option>
<option value="">上海</option>
<option value="">广东</option>
</select>
</p>
<p>GF:
<select name="" id="" multiple> # 下拉选择框
<option value="">小梅</option>
<option value="">小胡</option>
<option value="">小金</option>
<option value="">小尹</option>
</select>
</p>
<p>info: # 超长文本 可设置长宽
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<input type="submit" value="用户注册">
<input type="reset" value="重置内容">
<input type="button" value="普通按钮">
</form>
1.获取用户输入的标签两大重要的属性
name属性 类似于字典的键 value属性 类似于字典的值
ex:username:<input type="text" name="username" value="">
form表单在朝后端发送数据的时候 标签必须要有name 否则不会发送该标签的值
2. 获取用户输入的input标签理论上需要有label配合使用(点击到username就可以输入了 不用点击输入框)
<label for="某个input标签的id值"></label>
<label for="d1">
username:<input type="text" name="username" value="" id="d1">
</label>
3.获取用户输入的input标签也可以添加提示信息(在输入框内提示输入什么数据！)
<input type="text" name="password" placeholder="这里输入你的密码！">
4.获取用户输入的标签如果不是让用户自己写而是选择 那么标签需要自己写value
<input type="radio" name="gender" value="male" checked>男 # checked默认选择男
<input type="radio" name="gender" value="female">女
<br>
<input type="checkbox" name="hobby" value="basketball" checked>篮球 # checked默认选择篮球
<input type="checkbox" name="hobby" value="football">足球
<br>
<select name="province" id="">
<option value="sh">上海</option>
<option value="bj">北京</option>
<option value="sz" selected>深圳</option> # selected默认选择深圳
</select>
技术小白记录学习过程，有错误或不解的地方请指出，如果这篇文章对你有所帮助请
点点赞收藏+关注谢谢支持 !!!
4428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
