前端开发

目的： 开发一个平台（网站）
- 前端开发：HTML CSS JavaScript
- web框架：接受请求和处理
- MySQL数据库：存储数据的地方快速上手：基于Flask Web框架快速搭建一个网站
深度学习：基于Django框架（主要）

1.快速开发网站

pip install flask

from flask import Flaskapp = Flask(__name__)# 创建了网址show/info和函数 index的对应关系
# 以后用户在浏览器上访问show/info，网站会自动执行 index@app.route("/show/info")
def index():return "中国联通"
if __name__ == '__main__':app.run()

网站与别人不一样：

浏览器可以识别多标签+数据 例如：<h1>中国<h1>           ->浏览器看见加大加粗<span style='color:red,'>
  • Flask框架为了让我们写标签方便，支持将字符串（网页返回的本质是一个字符串）写在文件里面
from flask import Flask ,render_templateapp = Flask(__name__)# 创建了网址show/info和函数 index的对应关系
# 以后用户在浏览器上访问show/info，网站会自动执行 index@app.route("/show/info")
def index():#Flask内部会自动打开文件并读取，将内容给用户返回#默认去templates文件夹中去寻找(需要自己添加，并创建html文件)return  render_template("index.html")
if __name__ == '__main__':app.run()

2.浏览器能识别的标签

2.1 编码（head)

<meta charset="UTF-8">

2.2 title(head)

<head><meta charset="UTF-8"><title>Title</title>
</head>

2.3 标题

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>学习web</title>
</head>
<body><h1>1级标题</h1><h2>2级标题</h2><h3>3级标题</h3><h4>4级标题</h4><h5>5级标题</h5><h6>6级标题</h6>
</body>
</html>

2.4 div和span

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>学习web</title>
</head>
<body><div>哈哈哈</div><div>啦啦啦啦啦</div>
</body>
</html>

  • div ：一个人占一整行【块级标题】

    <div>哈哈哈</div>

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

    <span>哈哈哈</span>

注意:这两个标签比较素+CSS

2.5 超链接

跳转到其他网站（绝对路径）
<a href="https://www.csdn.net/">点击跳转</a>

跳转到自己的网站（相对路径）
<a href="http://127.0.0.1:5000/show/info">点击跳转</a>
简化：<a href="/show/info">点击跳转</a>

2.6 图片

<img src="图片地址"/>

<img src="自己图片地址"/>
显示自己图片：-自己的项目中创建：static目录，图片要放在里面-页面上引用图片 <img src="/static/图片名字"/>

显示别人的图片（防盗链）
<img src="图片地址"/>

设置图片的高度和宽度
<img style="height:100px;width:100px" src="图片地址"/>
<img style="height:10%;width:10%" src="图片地址"/>

小结

  • 学习的标签

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

  • 划分

    - 块级标签<h1></h1><div></div>
- 行内标签(紧挨着放在一起)<span></span><a></a><img />

  • 嵌套

    <div><span>xxx</span><img /><a></a>
</div>

    案例：商品列表

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>商品名称</h1><a href="https://www.zhihu.com/" target="_blank"><img src="/static/a2.jpg" style="height:150px"></a><a href="https://www.zhihu.com/" target="_blank"><img src="/static/a1.jpg" style="height:150px"></a><a href="https://www.zhihu.com/" target="_blank"><img src="/static/a3.jpg" style="height:150px"></a>
</body>
</html>

2.7 列表

<ul><li>中国移动</li><li>中国联通</li><li>中国电信</li>
</ul>

<ol><li>中国移动</li><li>中国联通</li><li>中国电信</li>
</ol>

2.8 表格

<table border="1">(加边框)<thead><tr> <th>ID</th>    <th>姓名</th>  <th>年龄</th> </tr></thead><tbody><tr> <td>1</th>    <th>hh</th>  <th>59</th> </tr><tr> <th>2</th>    <th>dd</th>  <th>9</th> </tr><tr> <th>3</th>    <th>ww</th>  <th>5</th> </tr><tr> <th>4</th>    <th>ee</th>  <th>1</th> </tr><tr> <th>5</th>    <th>rr</th>  <th>3</th> </tr><tr> <th>6</th>    <th>tt</th>  <th>4</th> </tr></tbody>
</table>

案例：用户列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>用户列表</h1>
<table border="1"><thead><tr><th>ID</th><th>头像</th><th>姓名</th><th>邮箱</th><th>更多信息</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td><img src="/static/a1.jpg" style="height:50px"></td><td>wcx</td><td>123456@qq.com</td><td><a href="https://www.zhihu.com/">查看详细</a></td><td>编辑 删除</td></tr><tr><td>1</td><td><img src="/static/a1.jpg" style="height:50px"></td><td>wcx</td><td>123456@qq.com</td><td><a href="https://www.zhihu.com/">查看详细</a></td><td>编辑 删除</td></tr><tr><td>1</td><td><img src="/static/a1.jpg" style="height:50px"></td><td>wcx</td><td>123456@qq.com</td><td><a href="https://www.zhihu.com/">查看详细</a></td><td>编辑 删除</td></tr></tbody>
</table></body>
</html>

2.9 input系列(7个)

<input type="text">
<input type="password">
<input type="file">
<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.10 下拉框

<select><option>北京</option><option>上海</option><option>深圳</option>
</select>
<select multiple>（shift多选）<option>北京</option><option>上海</option><option>深圳</option>
</select>

2.11 多行文本

<textarea></textarea>

案例：用户注册

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>用户注册</h1>
<div>用户名: <input type="text">
</div>
<div>密码:  <input type="password">
</div>
<div>性别: <input type="radio" name="n1">男<input type="radio" name="n1">女
</div>
<div>爱好： <input type="checkbox">篮球<input type="checkbox">乒乓球<input type="checkbox">羽毛球
</div>
<div>城市：<select ><option >北京</option><option >上海</option><option >重庆</option></select>
</div>
<div>备注：<textarea></textarea>
</div>
<div><input type="button" value="提交">
</div>
</body>
</html>

知识点回顾和补充

  1. 网站请求流程

  2. 一大堆标签

    h/div/span/a/img/ul/li/table/input/textarea/select

3.网络请求

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

    浏览器会发送数据过去，本质上发送的是字符串：
"GET/explore httpxxxxxxxxxxxxxxxxx"
"POST/explore httpxxxxxxxxxxxxxxxxxxxxxxx"

  • 浏览器向后端发送请求

    • GET请求【URL访问/表单提交】

      • 现象：跳转、向后台传入数据会拼接在URL上

        https://www.sogou.com/web?query=%E5%AE%89%E5%8D%93&_ast=1754632236&_asf=www.sogou.com

        注意：GET请求的数据会在URL上体现

    • POST请求【表单提交】

      • 现象：提交数据不在URL中而是在请求体中

案例：用户注册

  • 新创建项目
  • 创建Flask代码
from flask import Flask, render_template, requestapp = Flask(__name__)@app.route("/register",methods=["GET","POST"])
def register():if request.method== 'GET':return render_template("register.html")else:user = request.form.get("user")pwd = request.form.get("pwd")gender = request.form.get("gender")hobby_list = request.form.get("hobby")city = request.form.get("city")more = request.form.get("more")return "注册成功"if __name__ == '__main__':app.run()
  • html代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>用户注册</h1>
<form method="post" action="/register" >
<div>用户名: <input type="text" name="user"></div><div>密码:  <input type="password" name="pwd"></div><div>性别: <input type="radio" name="gender" value="1">男<input type="radio" name="gender" value="2">女</div><div>爱好： <input type="checkbox" name="hobby" value="20">篮球<input type="checkbox" name="hobby" value="30">乒乓球<input type="checkbox" name="hobby" value="40">羽毛球
</div><div>城市：<select name="city"><option value="122">北京</option><option value="123">上海</option><option value="124">重庆</option></select>
</div><didv>备注：<textaera name="more"></textaera></didv><input type="submit" value="submit提交">
</form></body>
</html>
  • form标签包裹要提交的数据
    • 提交方式：method=“”
    • 提交地址：action=“”
    • 在form标签里面必须有一个submit
  • 在form里面的一些标签：input/select/textarea
    • 一定要写name属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>用户注册</h1>
<div><form method="post" action="/post/reg" >用户名: <input type="text" name="user">密码:  <input type="password" name="pwd"><input type="button" value="button提交"><input type="submit" value="submit提交"></form>
</div>
</body>
</html>

总结

1.称呼

-HTML标签（超文本传输语言）与浏览器搭配

2.HTML标签（默认格式样式，可通过手段进行修改）

3.HTML标签与编程语言无关

4.提醒：HTML标签比较多，标签还有很多，不必逐一学会

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/bicheng/92699.shtml
繁体地址，请注明出处：http://hk.pswp.cn/bicheng/92699.shtml
英文地址，请注明出处：http://en.pswp.cn/bicheng/92699.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

机器视觉任务（目标检测、实例分割、姿态估计、多目标跟踪、单目标跟踪、图像分类、单目深度估计）常用算法及公开数据集分享

机器视觉任务（目标检测、实例分割、姿态估计、多目标跟踪、单目标跟踪、图像分类、单目深度估计）常用算法及公开数据集分享

本文按目标检测、实例分割、姿态估计、多目标跟踪、单目标跟踪、图像分类、单目深度估计七个任务分类&#xff0c;融合数据集介绍、评价指标及推荐算法&#xff0c;方便查阅&#xff1a; 一、目标检测 目标检测任务需定位图像中目标的边界框&#xff08;bounding box&#xff0…
阅读更多...
MongoTemplate中setOnInsert与set方法的深度解析

MongoTemplate中setOnInsert与set方法的深度解析

MongoTemplate中setOnInsert与set方法的深度解析 在Spring Data MongoDB的MongoTemplate中&#xff0c;setOnInsert和set方法都是在更新文档时使用的&#xff0c;但它们在处理upsert操作&#xff08;即&#xff0c;如果文档不存在则插入&#xff0c;存在则更新&#xff09;时扮…
阅读更多...
利用OJ判题的多语言优雅解耦方法深入体会模板方法模式、策略模式、工厂模式的妙用

利用OJ判题的多语言优雅解耦方法深入体会模板方法模式、策略模式、工厂模式的妙用

在线评测系统&#xff08;Online Judge, OJ&#xff09;的核心是判题引擎&#xff0c;其关键挑战在于如何高效、安全且可扩展地支持多种编程语言。在博主的项目练习过程中&#xff0c;借鉴了相关设计模式实现一种架构设计方案&#xff0c;即通过组合运用模板方法、策略、工厂等…
阅读更多...
[FOC电机控制]霍尔传感器于角度问题

[FOC电机控制]霍尔传感器于角度问题

如果电机有1对极(p1&#xff0c;那么每旋转一圈的机械角度&#xff0c;电气角度会转动一圈&#xff08;360&#xff09;。如果电机有2对极(p2&#xff0c;那么每旋转一圈的机械角度&#xff0c;电气角度会转动两圈&#xff08;720&#xff09;。
阅读更多...
阿里云 Flink

阿里云 Flink

阿里云 Flink 是阿里云基于Apache Flink打造的企业级实时计算平台&#xff0c;旨在为用户提供高效、稳定、易用的流处理与批处理能力&#xff0c;帮助企业快速构建实时数据处理链路&#xff0c;支撑实时业务决策。核心特性流批一体计算继承 Apache Flink “流批一体” 的核心优…
阅读更多...
企业级高性能web服务器

企业级高性能web服务器

1 web服务基础 1.1 正常情况的单次web服务访问流程&#xff1a; 正常情况下&#xff0c;单次 Web 服务访问流程从用户在客户端发起请求开始&#xff0c;到最终在客户端展示内容结束&#xff0c;涉及客户端、网络传输、服务器端等多个环节&#xff0c;以下是详细过程&#xff…
阅读更多...
免费PDF编辑软件 pdf24-creator 及其安装包

免费PDF编辑软件 pdf24-creator 及其安装包

最近发现了一款还算是不错的PDF编辑和阅读软件 pdf24-creator&#xff0c;官方下载网站为&#xff1a;https://tools.pdf24.org/zh/creator&#xff0c;但是官方下载如果没有魔法的话&#xff0c;下载速度很慢&#xff0c;比百度网盘下载还满&#xff0c;因此我把它分享到网盘。…
阅读更多...
openvela之ADB

openvela之ADB

ADB&#xff08;Android Debug Bridge&#xff09;是一款功能丰富的命令行工具&#xff0c;旨在实现开发工作站与设备&#xff08;如模拟器、实体设备&#xff09;之间的通信。通过 ADB&#xff0c;开发者可以便捷地在设备上执行命令、传输文件、调试应用等。本文将详细介绍 AD…
阅读更多...
如何控制需求交付节奏

如何控制需求交付节奏

有效控制需求的交付节奏&#xff0c;其核心在于将产品开发过程从一个不可预测的、时快时慢的混乱状态&#xff0c;转变为一套产出稳定、流程顺畅、步调可持续的系统化交付机制。要成功构建这套机制&#xff0c;实现有节奏的价值交付&#xff0c;必须综合运用五大关键策略&#…
阅读更多...
汇编中常用寄存器介绍

汇编中常用寄存器介绍

X86-32位寄存器 4个数据寄存器&#xff1a;EAX、EBX、ECX和EDX; 2个变址和指针寄存器&#xff1a;ESI和EDI; 2个指针寄存器&#xff1a;ESP和EBP; 1个指令指针寄存器&#xff1a;EIP; 6个段寄存器&#xff1a;ES、CS、SS、DS、FS和GS; 1个标志寄存器&#xff1a;EFlags。 在X8…
阅读更多...
SOMGAN：用自组织映射改善GAN的模式探索能力

SOMGAN：用自组织映射改善GAN的模式探索能力

论文信息 论文题目：Improving mode exploring capability ofgenerative adversarial nets by self-organizing map（利用自组织映射提高生成对抗网络的模式探索能力） 期刊：Neurocomputing 摘要：生成对抗网络(GANs)的出现将生成模型的研究推向了一个新的高潮。支持这一进步…
阅读更多...
《汇编语言：基于X86处理器》第12章 复习题和练习

《汇编语言：基于X86处理器》第12章 复习题和练习

本篇记录了《汇编语言&#xff1a;基于X86处理器》第12章 复习题和练习的笔记。12.6复习题和练习12.6.1 简答题1.假设有二进制浮点数1101.01101&#xff0c;如何将其表示为十进制分数之和?答&#xff1a;1101.01101(1x)(1x)(0x)(1x)(0x)(1x)(1x)(1x)(1x) 13.406252.为什么十进…
阅读更多...
ApacheCon Asia 2025 中国开源年度报告：Apache Doris 国内第一

ApacheCon Asia 2025 中国开源年度报告：Apache Doris 国内第一

上周刚落下帷幕的 ApacheCon Asia 2025 中&#xff0c;一个数据让所有人都为之震撼&#xff1a;全球 Apache 基金会项目 OpenRank 排行榜中&#xff0c;Apache Doris 位居第二&#xff0c;在中国 Apache 项目中更是稳居第一。 这个排名意味着什么&#xff1f;在 Apache 基金会管…
阅读更多...
Pytest中实现自动生成测试用例脚本代码

Pytest中实现自动生成测试用例脚本代码

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快在Python的测试框架中&#xff0c;我们通常会针对某个系统进行测试用例的维护&#xff0c;在对庞大系统进行用例维护时&#xff0c;往往会发现很多测试用例是差不多…
阅读更多...
一周学会Matplotlib3 Python 数据可视化-标注 (Annotations)

一周学会Matplotlib3 Python 数据可视化-标注 (Annotations)

锋哥原创的Matplotlib3 Python数据可视化视频教程&#xff1a; 2026版 Matplotlib3 Python 数据可视化 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 课程介绍 本课程讲解利用python进行数据可视化 科研绘图-Matplotlib&#xff0c;学习Matplotlib图形参数基本设置&…
阅读更多...
安全合规1--实验：ARP欺骗、mac洪水攻击、ICMP攻击、TCP SYN Flood攻击

安全合规1--实验：ARP欺骗、mac洪水攻击、ICMP攻击、TCP SYN Flood攻击

一、实验环境 (思科的云实验平台)攻击机&#xff1a;Kali Linux&#xff08;IP&#xff1a;192.168.234.128&#xff0c;MAC&#xff1a;00:00:29:35:64:EC&#xff09;目标1&#xff1a;网关&#xff08;IP&#xff1a;192.168.234.2&#xff0c;MAC&#xff1a;00:50:56:ED:D…
阅读更多...
Linux下GCC的C++实现Hive到Snowflake数据迁移

Linux下GCC的C++实现Hive到Snowflake数据迁移

程序结构 ├── main.cpp ├── config.json ├── hive_export/ ├── parquet_data/ ├── sql_scripts/ └── logs/核心代码实现 (main.cpp) #include <iostream> #include <fstream> #include <vector> #include <thread> #include <mut…
阅读更多...
drippingblues靶机教程

drippingblues靶机教程

一、信息搜集首先将其在VirtualBOX中安装&#xff0c;并将kali与靶机都设置为桥接模式紧接着我们扫描IP&#xff0c;来发现靶机地址&#xff0c;经过搜集&#xff0c;发现IP是192.168.1.9&#xff0c;我们去访问一下紧接着我们扫一下开放了哪些端口。发现开放了21、22以及80端口…
阅读更多...
39.【.NET8 实战--孢子记账--从单体到微服务--转向微服务】--扩展功能--调整发布脚本

39.【.NET8 实战--孢子记账--从单体到微服务--转向微服务】--扩展功能--调整发布脚本

这篇文章&#xff0c;我们要调整发布脚本。之所以要调整发布脚本&#xff0c;是因为现在我们的项目有三个环境&#xff1a;本地&#xff08;Local&#xff09;、开发&#xff08;Development&#xff09;、生产&#xff08;Production&#xff09;。Tip&#xff1a;我们的项目虽…
阅读更多...
商品、股指及ETF期权五档盘口Tick级与分钟级历史行情数据多维解析

商品、股指及ETF期权五档盘口Tick级与分钟级历史行情数据多维解析

在金融数据分析领域&#xff0c;本地CSV文件是存储高频与低频数据的常用载体。本文以期权市场数据为例&#xff0c;探讨如何基于CSV格式处理分钟级行情、高频Tick数据、日频数据、逐笔委托记录、五档订单簿及历史行情数据&#xff0c;并提供专业的技术实现方案。以下将从数据预…
阅读更多...
最新文章

Copyright @ 2022~2023