前端必学基础之HTML
这里写自定义目录标题
《HTML》
温馨提示：要利用好tab补全和Ctrl+D补全
一、概述
目的：开发一个平台（网站）
-前端开发：HTML、CSS、JavaScript
-Web框架：接收请求并处理
MySQL数据库：存储数据地方
# 举个快速开发的例子
from flask import Flask
# 实例化一个APP
app = Flask(__name__)
@app.route('/')
# 第一个界面
def index():
return "中国移动"
if __name__ == '__main__':
app.run(port=5001, debug=True)
二、浏览器能识别的标签
2.1 编码
<meta charset="UTF-8">
2.2 title
<head>
<meta charset="UTF-8">
<title>登录系统</title>
</head>
2.3标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录系统</title>
</head>
<body>
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>1级标题</h4>
</body>
</html>
这个h1等也是块级标签，一个人占一行。
2.4 div和span
<div>内容</div>
<span>asdfa</span>
div，一个人占一整行。【块级标签】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录系统</title>
</head>
<body>
<div>山东蓝翔</div>
<div>挖掘机</div>
</body>
</html>
span，自己多大占多少。【自己多少占多少】
但连续两个span会空多一格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录系统</title>
</head>
<body>
<span>山东蓝翔</span>
<span>挖掘机</span>
</body>
</html>
注意：这两个标签很素，我们可以加上CSS样式，让他变的非常丰富。
小案例：
# webui.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('test.html')
if __name__ == '__main__':
app.run(port=5000, debug=True)
# test.html（要善于使用Ctrl+D）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试系统</title>
</head>
<body>
<h1>中国移动</h1>
<div>
<span style="color: red">时间</span>
<span>2024/5/21</span>
</div>
<div>中国移动是一个很厉害的公司</div>
</body>
</html>
效果如下：
2.4.5 超链接
# 跳转到其他网站
<a href="https://www.10086.cn/index/gd/index_200_200.html">点击跳转</a>
# 跳转到自己网站的其他网址（不用打html）
<a href="http://127.0.0.1:5000/fuye">查看更多</a>
<a href="/fuye">查看更多</a>
# 当前页面打开
<a href="/fuye">点击跳转</a>
# 在一个新的页面中打开
<a href="/fuye" target="_blank">点击跳转</a>
# 若超链接想结合图片，达到点击图片就可以跳转页面的效果，可以按照如下格式来进行操作
<a href="https://www.baidu.com" target="_blank">
<img style="height: 100px; width: 120px" src="/static/1.png" />
</a>
<a href="https://www.baidu.com" target="_blank">
<img style="height: 100px; width: 120px" src="/static/1.png" />
</a>
2.4.6 图片
<img src="图片地址" />
# 直接显示别人的图片有一些图片无法显示的，说明网站加了防盗链
<img src="https://img1.baidu.com/it/u=1946973825,778171862&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800" />
# 显示自己的图片：
# -自己项目中创建：static目录，图片要放在static
# -在页面上引入图片
<img src="/static/1.png" />
<img style="height: 100px; width: 120px" src="/static/1.png" />
<img style="width: 10%" src="/static/1.png" />
小结
# 学习的标签（在body里的）
- 块级标签
<h1></h1>
<div></div>
- 行内标签
<span><\span>
<a href=""></a>
<img src="" />
2.4.7 列表
# 这也是一个块级标签
# 会列出一个列表（每个列前面加上一个点）
<ul>
<li>中国移动</li>
<li>中国l联通</li>
<li>中国电信</li>
</ul>
# 会列出一个列表（每个列前面加上序号）
<ol>
<li>中国移动</li>
<li>中国l联通</li>
<li>中国电信</li>
</ol>
运行结果如下：
2.4.8 表格
# border="1"（给表格加一个边框），thead（表头），tbody（表数据），tr（代表一行）
<h1>表格</h1>
<table border="1">
<thead>
<tr> <th>姓名</th> <th>学号</th> </tr>
</thead>
<tbody>
<tr> <td>小明</td> <td>1</td> </tr>
<tr> <td>小红</td> <td>2</td> </tr>
<tr> <td>小蓝</td> <td>3</td> </tr>
</tbody>
</table>
运行结果如下：
# 正规的表格写法
<h1>表格</h1>
<table border="1">
<thead>
<tr>
<th>头像</th>
<th>姓名</th>
<th>学号</th>
<th>更多信息</th>、
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img style="height: 50px" src="/static/1.png">
</td>
<td>小明</td>
<td>2020165315</td>
<td>
<a href="/fuye" target="_blank">点击查看详</a>
</td>
<td>
编辑
删除
</td>
</tr>
</tbody>
</table>
运行结果如下：
2.4.9 input系列
# 输入框
<input type="text">
# 密码框
<input type="password">
# 选择文件框
<input type="file">
# 单选框（要写两个同名name，保证他们互斥）
<input type="radio" name="n1">男
<input type="radio" name="n1">女
# 复选框
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">乒乓球
<input type="checkbox">棒球
# 按钮（一个是普通的按钮，一个是可以提交表单）
<input type="button" value="提交">
<input type="submit" value="提交">
运行结果如下：
2.4.10 下拉框
# multiple可加可不加
<select multiple>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
运行结果如下：
2.4.11多行文本
# 输出一个文本框
<textarea rows="3"></textarea>
运行结果如下：
知识点回顾与补充：
1、网站请求流程：
2、一大堆的标签
h/div/span/a/img/ul/li/table/input/textarea/select
3、网络请求
（1）在浏览器的URL中写入地址，点击回车，访问。
浏览器会发送数据过去，本质上发送的是字符串：
“get /explore http…”
浏览器会发送数据过去，本质上发送的是字符串：
“get /explore http…\n数据库”
（2）浏览器向后端发送请求时
1）、get请求【URL方法/表单提交】
现象：GET请求、跳转、向后台传入数据，数据会拼接在URL上。
http://www.sogou.com/web?query=安卓&age=19&name=xx
注意：GET请求数据会在URL中体现。
2）POST请求【表单提交】
现象：提交数据不在URL中，而是在请求中体现。
4、只有input系列、下拉框和多行文本，这些能进行用户交互的信息，才能被提交表单到后台
注：返回的是name和value值
案例：用户注册
1、新创建项目
2、创建Flask代码
页面上的数据，想要提交到后台：
1、form标签包裹要提交的
提交方式：method=“get”
提交的地址：action=“/xxx/xxx/xx”
在from标签里面必须有一个submit标签
2、在form里面的一些标签：input/select/textarea
一定要写name属性，name要有具体含义
# webserver.py
from flask import Flask, render_template, request
app = Flask(__name__)
# 这里的/get/reg地址只能接收get请求（输入（发送）URL，flask响应get请求），返回页面
@app.route('/', methods=['GET', 'POST'])
def get_register():
# 1、接收用户通过GET形式发送过来的数据
if request.method == 'GET':
return render_template('register.html')
else:
# 1、接收用户通过POST形式发送过来的数据，（输入内容，flask响应POST请求），返回表单
# 输出都是通过name值去找到value值的（value：1、自定义；2、用户输入；）
user = request.form.get('user')
password = request.form.get('pwd')
gender = request.form.get('gender')
hobby_list = request.form.get('hobby')
city = request.form.get('city')
skill_list = request.form.get('skill')
more = request.form.get('more')
print(user, password, gender, hobby_list, city, skill_list, more)
print(request.form)
# 将用户信息写入文件中实现注册，写入到excel中实现注册，写出数据库中实现注册
return "注册成功"
if __name__ == '__main__':
app.run(port=5001, debug=True)
# templates/register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<h1>用户注册</h1>
<div>
<form method="post" action="/">
<div>
用户名：<input type="text" name="user">
</div>
<div>
密码：<input type="password" name="pwd">
</div>
<div>
性别：
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
</div>
<div>
爱好：
<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" value="篮球">篮球
<input type="checkbox" name="hobby" value="羽毛球">羽毛球
<input type="checkbox" name="hobby" value="棒球">棒球
</div>
<div>
城市：
<select name="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
</select>
</div>
<div>
擅长领域：
<select name="skill" multiple>
<option value="吃饭">吃饭</option>
<option value="睡觉">睡觉</option>
<option value="打豆豆">打豆豆</option>
</select>
</div>
<div>
备注：
<textarea rows="3" name="more"></textarea>
</div>
<input type="submit" value="sumbit提交">
</form>
</div>
</body>
</html>
总结
1、称呼
HTML标签：浏览器能识别的标签
什么是HTML？超文本传输语言（与浏览器搭配）
2、HTML标签（默认格式样式、以后通过手段可以修改）
3、HTML标签与编程语言无关
（1）java+HTML
（2）c#+HTML
（3）php+HTML
（4）python+HTML
4、注意：HTML标签非常多，不必逐一学会
上一篇： 基于PHP的民宿短租
下一篇： 暂无数据