前端-HTML
前端概念
前端定义
-
与用户直接交互的操作界面
-
电脑界面、手机界面、平板界面
后端定义：类似于服务端后台处理逻辑，不直接和用户打交道
前端组成
- HTML：网页骨架，没有任何样式 内容
- CSS：给网页骨架添加各种样式，美观界面 外观
- JS：控制网页的动态效果 动作
软件开发架构
- cs 客户端 服务端
- bs 浏览器 服务端 本质也是cs
浏览器窗口输入网址回车
-
浏览器向服务端发送请求
-
服务端接收请求(eg:请求百度首页)
-
服务端返回相应的响应(eg:返回一个百度首页)
-
浏览器接收响应,根据特定规则渲染页面展示给用户看
Q：如何实现浏览器跟多个不同的服务端之间进行数据交换？
A：制定一个统一标准，HTTP协议
HTTP协议
-
超文本传输协议,用来规定服务端和浏览器(客户端)之间的数据交互格式
服务端遵循HTTP协议，实现与浏览器(客户端)进行数据交换
四大特性
- 基于请求响应
- 基于TCP/IP,作用于应用层之上的协议
- 无状态
- 不保存用户的信息
- HTTP协议是无状态的,后续出现了一些专门用来记录用户状态的技术
- 无/短链接
- 请求来一次，响应回一次，交互之后没有任何链接和联系
请求方式
-
get请求
-
朝服务端请求数据 (可以携带参数的，只是参数不是放在请求体里面的,放在url链接中)
-
输入网址获取对应的内容
-
-
post请求
-
朝服务端提交数据
-
用户登陆 输入用户名和密码之后,提交到服务端后端做身份校验
-
请求数据格式
- 请求首行(标识HTTP协议版本，当前请求方式)
- 请求头 (K,V键值对)
- (\r\n 不能省略)
- 请求体 (get没有 post有 存放的是post请求提交的隐私数据)
# HTTP请求数据格式
请求首行
b'GET / HTTP/1.1\r\n
请求头
Host: 127.0.0.1:8081\r\n
Connection: keep-alive\r\n
sec-ch-ua: "Google Chrome";v="89", "Chromium";v="89", ";Not A Brand";v="99"\r\n
sec-ch-ua-mobile: ?0\r\n
Upgrade-Insecure-Requests: 1\r\n
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36\r\n
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\r\n
Sec-Fetch-Site: none\r\n
Sec-Fetch-Mode: navigate\r\nSec-Fetch-User: ?1\r\n
Sec-Fetch-Dest: document\r\n
Accept-Encoding: gzip, deflate, br\r\n
Accept-Language: zh-CN,zh;q=0.9\r\n
Cookie: csrftoken=RioGIvwt2RVpX0EeByOQcqSvIUQua7LiJYjN0jthxpukbRdBPNVh9yr9JRoPa7wk\r\n
\r\n
请求体
'
响应数据格式
- 响应首行(标识HTTP协议版本，响应状态码)
- 响应头 (K,V键值对)
- (\r\n 不能省略)
- 响应体 (返回给浏览器展示给用户看的数据)
响应状态码
- 用一串简单的数字表示一些复杂的状或者描述性信息
- 1XX: 服务端已经成功接收到数据，可以继续提交额外的数据
- 2XX: 服务端成功响应了请求的数据(200 OK请求成功)
- 3XX：重定向(当访问一个需要登陆之后才能访问的页面，会发现自动跳转到登陆页面)
- 4XX：请求错误
- 403:当前请求不合法或者不符合访问资源的条件
- 404:请求资源不存在
- 5XX：服务器内部错误(500)
import socket
'''
# link.html
<h1>hello baidu</h1>
<a href="https:www.baidu.com"> click me go to baidu</a>
'''
server = socket.socket()
server.bind(('127.0.0.1', 8080))
server.listen(5)
while True:
conn, addr = server.accept()
data = conn.recv(1024)
print(data)
# 响应首行(标识HTTP协议版本，响应状态码)
conn.send(b'HTTP/1.1 200 OK\r\n\r\n')
# conn.send(b'hello web\n')
conn.send(b'<h1>hello python</h1>\n')
with open('my_html/link.html', 'rb') as f:
conn.send(f.read())
conn.close()
HTML
简介
- 超文本标记语言
- 遵循HTML语法，使浏览器能够渲染出网页界面
注释
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->
文档结构
<!DOCTYPE html>
<html lang="en">
head内部的标签:定义浏览器配置信息
<head>
</head>
body内部的标签:浏览器渲染主要内容
<body>
</body>
</html>
标签书写
- id值
- 类似于标签的身份证号，在同一个html页面上的id值不能重复
- class值
- 类似于面向对象的继承，一个标签可以继承多个class值
- 自定义属性
<p id="p1" class="p1" username="jason" password="123456"></p>
head内标签
- title
<head>
<title>填写网页标题</title>
</head>
- style
<head>
<style>
<!-- 填写CSS代码-->
h1{
color:gold;
}
</style>
</head>
- link
<head>
<!-- 引入外部css文件-->
<link rel="stylesheet" href="mycss.css">
</head>
- script
<head>
<!-- 书写js代码-->
<script>
alert('hello')
</script>
<!-- 引入外部js文件-->
<script src="myjs.js"></script>
</head>
- meta
<head>
<!-- 2秒后跳转到对应网址-->
<meta http-equiv="refresh" content="2, URL=http://www.baidu.com">
<!--网页推荐 当使用浏览器搜索时,只要输入了keywords后面制定当关键字，网页都有可能被搜索出来-->
<meta name="keywords" content="meta总结">
<!--网页描述信息-->
<meta name="description" content="hello html">
</head>
body内标签
标签分类
- 块级标签
- 独占一行
- h标签 p标签 div标签
- 行内标签
- 自身文本多大就占用多大内容空间
- i、u、s、b、span标签
基本标签
- h
<body>
<h1>标题标签1</h1>
<h2>标题标签2</h2>
<h3>标题标签3</h3>
<h4>标题标签4</h4>
<h5>标题标签5</h5>
</body>
- p
- 只能嵌套行内标签，不能嵌套块级标签，就是嵌套了，浏览器渲染时会自行解开
<body>
<p>段落标签1</p>
<p>段落标签2</p>
<p>段落标签3</p>
<p>段落标签4</p>
</body>
常用标签
- div
- 划分区域
- 可以嵌套任意的块级标签和行内标签
<body>
<div>
<p></p>
<span></span>
</div>
</body>
- span
- 普通文本
<body>
<span>hello web</span>
</body>
- img
- 图片标签
<body>
<img src="图片地址" alt="图片加载不出来时的提示信息" title="当鼠标悬浮到图片之上时的提示信息" height="800px" width="800px">
</body>
- a
<body>
<a href="链接网址">链接提示信息(eg:点我跳转)</a>
</body>
<body>
<a href="链接网址" target="_blank">链接提示信息(eg:点我跳转)</a>
<a href="链接网址" target="_self">链接提示信息(eg:点我跳转)</a>
</body>
锚点功能
<body>
<a href="" id="d1">顶部</a>
<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>
</body>
-
列表标签
-
无序列表
ul>li*3 + Tab 实心圆点 <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body> 空心圆点 <body> <ul type="circle"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body> 实心钜形 <body> <ul type="square"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body> 页面布局 排版一致的几行数据基本使用 -
有序列表
<body> <ol type="" start=""> <li>1</li> <li>2</li> <li>3</li> </ol> </body> -
标题列表
<body> <dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容2</dd> </dl> </body>
-
-
表格标签
<body>
<table border="1">
<thead>
<tr>
<th>username</th>
<th>password</th>
<th>hobby</th>
</tr>
</thead>
<tbody>
<tr>
<td>jason</td>
<td>123456</td>
<td>run</td>
</tr>
<tr>
<td>jack</td>
<td>123456</td>
<td>ball</td>
</tr>
</tbody>
</table>
</body>
<td colspan="2">jack</td>
<td rowspan="2">123456</td>
- form表单
- 获取前端用户输入的内容基于网络发送给后端服务器
action
1.不写，默认朝当前页面所在的url提交数据
2.写全路径：https:www.baidu.com 朝百度服务端提交数据
3.写路径后缀：action=‘/index’ 自动识别当前服务端的ip和端口拼接到前面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>注册页面</h1>
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
<p>
<label for="d1">
username:<input type="text" id="d1" name="username">
</label>
</p>
<p>
<label for="d1">
password:<input type="password" id="d2" name="password">
</label>
</p>
<p>
<label for="d1">
brithday:<input type="date" id="d3">
</label>
</p>
<p>gender:
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
</p>
<p>province1:
<select name="province2" >
<option value="zhuhai">珠海</option>
<option value="shengzhen">深圳</option>
</select>
</p>
<p>province2:
<select name="province2" >
<optgroup label="珠海">
<option value="doumeng">斗门</option>
<option value="xiangzhou">香洲</option>
<option value="gongbei">拱北</option>
</optgroup>
<optgroup label="深圳">
<option value="longhua">龙华</option>
<option value="baoan">宝安</option>
<option value="futian">福田</option>
</optgroup>
</select>
</p>
<p>
<input type="file" multiple name="myfile">
</p>
<p>自我介绍
<textarea name="info" id="" cols="30" rows="10" maxlength="20"></textarea>
</p>
<input type="submit" value="注册">
<input type="button" value="按钮">
<input type="reset" value="重置">
<button>click</button>
</form>
</body>
</html>
- form表单提交数据
from flask import Flask, request
app = Flask(__name__)
@app.route('/index/', methods=['GET', 'POST'])
def index():
print(request.form)
print(request.files)
file_obj = request.files.get('myfile')
print(file_obj.name)
file_obj.save(file_obj.name)
return 'OK'
app.run()
其他标签
<body>
<b>加粗</b>
<i>斜体</i>
<br><!-- 换行-->
<u>下划线</u>
<s>删除线</s>
<hr> <!-- 横线分隔-->
</body>
特殊符号
空格
> >
< <
& &
¥ ¥
© ©
® ®
浙公网安备 33010602011771号