python_HTML

python_HTML

前端开发：HTML、CSS，Javascript

web框架：接收请求并处理

mySQL数据库：存储数据的地方

​ 快速上手：基于flask web框架让你快速搭建一个网站出来。

​ 深入学习：基于Django框架(主要)

一、前端开发引入

1.html语法

1.1. 快速开发一个网站

安装flask框架

pip install flask

from flask import Flask

app = Flask(__name__)

# 创建了网站 /show/info 和 函数index的对应关系
# 以后用户在浏览器上访问 /show/info，网页自动执行 index
@app.route("/show/info")
def index():
    return "大舅乌鸡蛋"
# 上面返回的可以是html代码
if __name__ == '__main__':
# 上面一行是自动弹出的 写出mian后回车
    app.run()

• Flask框架为了方面我们写标签，可以向用户返回html文件，作为返回值

from flask import Flask,render_template

app = Flask(__name__)
@app.route("/show/infoo")
def index1():
    # Flask 内部会自动打开这个文件，并读取内容，将内容给用户返回。
    # 默认取当前项目目录的templates文件夹中找。
    return render_template('index.html')

if __name__ == '__main__':
    app.run()
    # app.run(host="",port=)
    #host 主机名
    #port 端口号

1.2.html标签—div和span

<div>内容</div>
<span>asdfa</span>
<span>asdfa</span>
# 上面span可以定义不同的样式

• div 内容占一整行（块级标签）

• span，自己有多大他就占多少【行内标签、内联标签】

• div没有功能，通过css样式来变换样式，默认只有上面两个功能

h标签

默认会加大加粗，也是块级标签

1.3. 超链接

行内标签

<a href = "www.baidu.com">点击跳转</a> #跳转到其他网址

跳转到自己的网址
<a href = "www.baidu.com">点击跳转</a>

# 当前页面打开
<a href = "www.baidu.com">点击跳转</a>
# 新tab页面打开
<a href = "www.baidu.com" target = "_blank">点击跳转</a>

1.4 图片

行内标签

<img src = "图片地址"/>
<!--在flask框架中，自己的图片地址有要求，要求放在自己项目中的static目录中，
 - 自己项目中创建：static目录，将图片放在目录中
 - 在页面上引入图片
可以设置图片的宽度和高度，style
<img style = "height:100px;width:100px" src = "图片地址"/>
-->

设置高度和宽度

<img style = "height:100px;width:100px" src = "图片地址" />

1.5 小结

<h1></h1>
<div></div>
<span></span>
<a></a>
<img />

• 划分

 - 块级标签
 	<h1></h1>
	<div></div>
 - 行内标签
 	<span></span>
	<a></a>
	<img />

• 嵌套

<div>
<span></span>
	<a href="" t>
		<img scr = ""/>
	</a>
<img />
</div>

1.6列表标签

块级标签

无序列表：ul

<ul>
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
</ul>

有序列表：ol

<ol>
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
</ol>

1.7 表格标签

<table border = "1"> border有边框
    <thead>表头
    	<tr>表示一行  th表示表头的一列
            <th> ID</th> <th> 姓名 </th> <th>年龄</th>
        </tr>
    </thead>
    <tbody>表的其他行
        <tr>表示其他行   td表示表内容的一列
            <td>156</td> <td>代亚勋 </td> <td>21</td>
        </tr>
    </tbody>
</table>

案例：

<table>
    <thead>
    	<tr>
        	<th>
            </th>
        </tr>
    </thead>
</table>

1.8 input系列

<h1>输入框</h1>
<input type="text">
<h1>输入密码</h1>
<input type="passwprd">
<h1>上传文件</h1>
<input type="file">
<h1>单选框</h1>
<input type="radio" name="n1">内容
<input type="radio"name="n1">内容
单选框保证name一样
多选不限制

2. 网络请求

• 在浏览器的URL中写入地址，点击回车，访问。

浏览器会发生数据过去，本质上发送的是字符串：
”GET /sdfsddd...“
”POST /sdfsddd...“

• 浏览器在后端发送请求时，有两种方法 get请求和post请求

get请求{url访问/表单请求}：GET请求，跳转 、 向后台传入数据数据会拼接在url上 例如百度关键词搜索

通过问号？拼接

GET请求的数据会在URL中体现

post请求{表单请求}

post请求的数据不会在url中体现

数据放在请求体中 表单上传

2.1 表单提交

<form method = "get" action="提交到那个地址">
    <input type = "text" name='user' />一定要有name 这样通过get方法在能在url中体现
    <input type = "password" name = "password"/>
    <input type = "submit" value = "submint提交"/>
</form>

页面上的数据，想要提交到后台：

• form标签一定要包裹想要提交的数据标签。
• 在form中定义method = ”get/post“
• 提交的地址：action = ”/xx/xx/xx“
• 在form中一定要有<input type = “submit”
• 在form里面的标签：input/select/textarea
• 一定要写name属性
• 对于input中的redio、checkbox，以及select一定要有 name 和vlaue的值

/xx“

• 在form中一定要有<input type = “submit”
• 在form里面的标签：input/select/textarea
• 一定要写name属性
• 对于input中的redio、checkbox，以及select一定要有 name 和vlaue的值