前端简介
1.前端与后端
前端：与用户直接打交道的操作界面都可以称之为是前端
后端(幕后工作者)：不直接与用户打交道的内部真正执行核心业务逻辑的代码程序
3.前端核心基础
HTML：网页的骨架
CSS：网页的样式
JS：网页的动态
HTTP超文本传输协议
1.超文本传输协议推理
1.创建服务端以浏览器访问服务端
import socket
# 创建socket对象
sever = socket.socket()
# ip地址与端口
sever.bind(('127.0.0.1', 8090))
# 半连接池(接收客户端访问数量)
sever.listen(5)
# 建立双向通道
sock, addr = sever.accept()
# 用户交互
sock.send(b'hello word')
date = sock.recv(1024)
print(date)
2.报错显示发送的响应无效(未遵循超文本传输协议)
3.超文本协议四大特性
3.1.基于请求响应
3.2.基于TCP、IP作用于应用层之上
3.3.无状态
3.4.无连接
4.数据格式
3.1 请求数据：
1.请求首行(协议及版本) # 请求方式有很多种
b'GET / HTTP/1.1\r\n
2.请求头(很多k:v键值对组成)
Host: 127.0.0.1:8090\r\n
3.换行
\r\n
4.请求体(携带一些敏感的数据 按业务需求选择是否有请求体)
3.2 响应数据
1.响应首行(响应状态码)
2.响应头(很多k:v键值对组成)
3.换行
4.响应体(一般情况下就是浏览器展示给用户看的数据)
注：浏览器无法直接展示服务端的响应数据
由于浏览器需要兼容多个服务端软件 为了实现无障碍通信 需要遵循一些协议
HTTP协议、HTTPS协议、FTP协议
4.响应状态码：利用数字来表示一些复杂的情况说明(类似于暗号)
1XX：服务端已经接受到你的请求正在处理 可以继续提交或者等待
2XX：如200 OK 服务端给出了相应的响应
3XX：重定向
4XX：如403-请求不符合条件 404-请求资源不存在
5XX：服务端内部错误
注：有时候需要自己定义状态码-一般是从10000开始
HTML简介
1.超文本标记语言(HTML)：所有浏览器展示页面必备(浏览器解析执行)
注：超文本：视频、音频、图片
标记：英文单词或者字母 一个HTML页面是由各自标记组成
2.HTML页面：浏览器展示的界面
3.HTML语言存储文件：.html
4.HTML注释语法：<!--注释内容-->
5.HTML文件结构：
<html> <!--所有的代码必须写在html标签内部-->
<head></head> <!--head内的数据面向程序员-->
<body></body> <!--body内的数据面向用户-->
</html> <!--所有的代码必须写在html标签内部-->
6.HTML标签分类：
6.1 单标签(自闭标签)：<imf/> <!--图片标签-->
6.2 双标签(有头有尾)：<html></html>
head内常见标签
1.title：控制标签页小标题 进入浏览器显示的标题名
2.style：内部支持编写CSS 美化页面
3.link：引入外部CSS文件 通过外部文件美化页面
4.scrip：内部支持编写JS代码 还可以通过src属性引入外部js文件
注：JS=JavaScript,通常缩写为 JS 是一种高级的 解释执行的编程语言
5.meta：通过内部属性的不同可以有很多功能
&emsp <meta name="keywords" content="填写一些关键字 提升网页被搜索的概率"
&emsp <meta name="description" content="填写一些网页的简介"
body元素
body内基本标签
1.标题标签：h1~h6
2.段落标签：p
3.水平分割线：hr
4.换行符：br
5.下划线：u
6.斜体：i
7.删除线：s
8.加粗：b
注：1~4 块儿级标签(一个标签占据一行) 5~8 行内标签(内部文本所在大小占据位置)
有很多样式可能存在多种标签可以实现
body内常见符号
 1.空格：
 2.大于号：>
 3.小于号 ：<
 4.&：&
 5.￥：¥
 6.注册：®
 7.版权：©
body内布局标签
1.块儿级标签：div
2.行内标签：span
注：块儿级标签可以通过CSS调整为不独占一行
标签之间很多时候可以嵌套
块儿级标签可以嵌套任意类型的标签
p标签虽然是块儿级标签 但是不能嵌套块儿级标签
行内标签只能嵌套行内标签
body内常见标签
1.a标签：链接标签
href：可以填写网址 点击自动跳转/还可以填写其他标签的id值 实现锚点功能
target：可以控制是否新建页面跳转 -self/-blank
2.img标签：图片标签
src：填写图片地址(网络地址 本地地址)
title：鼠标悬浮在图片上显示提示信息
alt：图片加载失败提示信息
helght：调整图片的高度
width：调整图片的宽度
标签的两大重要属性
1.id属性：一对一管理
在同一个html页面上 id值不能重复(类似于身份证号)
2.class属性：批量管理
多个标签可以拥有相似的class值
注：快速定位需要操作的标签
列表标签
1.无序列表：各个列表项之间没有顺序级别之分
符号：默认（● ）type属性的属性值有：disc(圆●)、circle（圆圈○ ）、square（方块■ ）
2.标签：
<li> 定义列表项目 `<li>`标签可用在有序列表（`<ol>`）和无序列表(`<ul>`)中
<dl> 定义列表 <dl>`标签用于结合`<dt>`（定义列表中的项目）和`<dd>（描述列表中的项目)
<dt> 定义列表的项目
<dd> 定义条目的定义部分
3.实操
3.1无序列表
<ul>
<li>python</li>
<li>go</li>
<li>linux</li>
</ul>
3.2有序列表
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
3.3标题列表
<dl>
<dt>1</dt>
<dd>1</dd>
<dt>2</dt>
<dd>2</dd>
</dl>
表格标签
1.table子标签
thead：表格头部
tbody：表格主干
tr：行
td：单元格(列)
tfoot：表格尾部
2.属性
width：宽
height：高
注：当使用了thead、tbody和tfoot标签时，直接在table中设置宽高，变化的只会有tbody中的内容
当tr和td中都设置了高度和宽度时，以最大一个值作为属性值
align：对齐方式
cellpadding：表格的边距
cellspacing：表格的间距
bgcolor：表格背景颜色
3.实操
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>lili</td>
<td>女</td>
</tr>
</tbody>
</table>
</body>
</html>
表单标签
1.form元素：
生成输入表单，是一个非可视化结构，所有需要向服务器提交请求的数据都需要放在Form所包含的表单控件中（每个有name属性的表单控件对应一个请求参数 没有name属性的表单控件不会生成请求参数 拥有共同name的控件为一组，只生成一个请求参数，但该参数有多个值)
2.form元素属性
通用属性：id、style、class
事件属性：onclick
action：指定表单被提交的地址
method：指定提交表单的请求类型
name：表单名称
target：指定使用那种方式打开URL
3.form元素内控件
3.1 input元素
单行文本框：type属性为text
密码输入框：type属性为password
单选框：type属性为radio(name值相同的为一组)
复选框：type属性为checkbox
文件上传域：type属性为file/files(多文件传)
隐藏域：type属性为hidden
图像域：type属性为image
提交：type属性为submit
重设：type属性为reset
无动作按钮：type属性为button
颜色选择器：type属性为color
日期：date
时间：time
email：emial
电话号码：tel
3.2 select与option元素
select：元素创建列表框或者下拉菜单（只要select元素指定了size或者multiple元素则生成列表框）option即为一个列表项或菜单项
select属性：
属性multiple：设置列表框和下拉菜单是否允许多选
属性size：指定列表框内可同时显示多少个列表
子元素option：项
子元素optgroup：将option项分组
option属性：
属性disabled：禁止该选项
属性selected：指定初始状态是否被选中
属性value：该项的请求参数
4.实操
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form action="" method="post">
<p>username:<input type="text"></p>
<p>password:<input type="password"></p>
<p>now_date:<input type="date"></p>
<p>email:<input type="email"></p>
<p>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:
<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>
</select>
</p>
<p>info:
<textarea name="" id="" cols="30" rows="10">
</textarea>
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="清空内容">
<input type="button" value="普通按钮">
</p>
</form>
</body>
</html>
posted on
浙公网安备 33010602011771号