前端笔记总结+注册登录页案例

news2024/5/18 4:13:27

day 1 前端开发

目的：开发一个平台（网站）
前端开发：HTML、CSS、JavaScript
Web框架：接收请求并处理
- Flask、Djiango
MySQL数据库：存储数据的地方

快速上手：
	基于Flask Web框架快速搭建一个网站

深入学习：
	基于Djiango框架（主要）

1.快速开发网站

安装Flask框架包：

pip install flask

快速上手案例：

from flask import Flask

# Flask是一个类，实例化一个对象为app
app = 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;'>联通</span>	浏览器识别字体变红色
	
如果我们能把浏览器识别的所有的标签学会，我们在网站就可以控制页面到底张什么样子。

from flask import Flask

# Flask是一个类，实例化一个对象为app
app = Flask(__name__)


# 创建了网址 /show/info 和 函数index 的对应关系
# 以后用户在浏览器上访问 /show/info，网站自动执行 index
@app.route("/show/info")
def index():
    # return "中国联通"
    return "中<h1>国</h1><span style='color:red;'>联通</span>"


# 入口
if __name__ == '__main__':
    app.run()

Flask框架为了让我们写便签方便，支持讲字符串写入文件里。

导入render_template，在函数中返回HTML文件：

from flask import Flask, render_template

# Flask是一个类，实例化一个对象为app
app = Flask(__name__)


# 创建了网址 /show/info 和 函数index 的对应关系
# 以后用户在浏览器上访问 /show/info，网站自动执行 index
@app.route("/show/info")
def index():
    # return "中国联通"
    # return "中<h1>国</h1><span style='color:red;'>联通</span>"
    return render_template("index.html")


# 入口
if __name__ == '__main__':
    app.run()

index文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>中国联通</h1>
    <h3>广西联通</h3>
</body>
</html>

2.浏览器能识别的标签

2.1 编码（head）

<meta charset="UTF-8">

2.2 title（head）

<title>Title</title>

2.3 标题

<body>
   <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
</body>

2.4 div和span

<div>内容</div>
<span>xxx</span>

  • div，用此标签的内容占一整行。称为：【块级标签】

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>上海</div>
    <div>北京</div>
</body>
</html>

    在这里插入图片描述

  • span，自己多大占多少。称为：【行内标签、内联标签】

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <span>上海</span>
    <span>北京</span>
</body>
</html>

    在这里插入图片描述

2.5 超链接

跳转到其他网站
<a href="https://www.baidu.com"></a>

跳转到自己网站其他的地址
<a href="http://127.0.0.1/5000/get/news">点击跳转</a>
<a href="/get/news">点击跳转</a>

在新的页面打开
<a href="/get/news target="_blank" ">点击跳转</a>

2.6 图片

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

直接显示别人的图片地址：
<img src="https://pic1.zhimg.com/v2-72ecb4f1094b19ad162950193e0ba9b4_200x0.jpg?source=7e7ef6e2"/>

显示自己的图片：
	- 自己项目中创建：static目录，图片要放在static
<img src="自己图片地址" />
<img src="/static/1.png" />
	- 给图片设置高度和宽度
	如果单独定义高度或宽度，将按比例显示。高度和宽度都自定义则按照设置数强制放大或缩小（图片可能失真）
<img style="height: 100px;width: 150px;" src="/static/pc.png">
	- 通过百分率设置高度和宽度
<img style="height: 10%;width: 20%;" src="/static/pc.png">

小结

学习的标签：

<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>

a标签和img标签嵌套案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<h1>商品</h1>
<body>
<a href="https://www.mi.com/shop" target="_blank">
    <img src="/static/a1.png">
</a>

<a href="https://www.mi.com/shop" target="_blank">
    <img src="/static/a2.png">
</a>

<a href="https://www.mi.com/shop" target="_blank">
    <img src="/static/a3.png">
</a>

</body>
</html>

在这里插入图片描述

2.7 列表

无序列表：

<h1>运营商列表</h1>
<ul>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ul>

在这里插入图片描述

有序列表：

<h1>运营商列表</h1>
<ol>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ol>

在这里插入图片描述

2.8 表格标签

<talbe>：表格标签
<thead>：表头标签
<tbody>：表内容标签
<tr>：行
<th>：表头内容
<td>：表内内容
border：边框

<h1>数据表格</h1>
<table>
    <thead border="1">
        <tr>  <th>ID</th> <th>姓名</th> <th>年龄</th> </tr>
    </thead>
    <tbody>
        <tr>  <td>1</td> <td>刘备</th> <td>50</td> </tr>
        <tr>  <td>2</td> <td>关羽</th> <td>49</td> </tr>
        <tr>  <td>3</td> <td>张飞</th> <td>48</td> </tr>
    </tbody>
</table>

在这里插入图片描述

案例：表格嵌套

表格嵌套案例：

<h1>用户列表</h1>
<table border="1">
    <thead>
    <tr>
        <th>ID</th>
        <th>头像</th>
        <th>姓名</th>
        <th>更多信息</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>
            <img style="width: 150px;" src="/static/liubei.png">
        </td>
        <td>刘备</td>
        <td>
            <a href="https://www.baidu.com">点击查看详细</a>
        </td>
        <td>
            编辑
            删除
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>
            <img style="height: 100px;" src="/static/guanyv.png">
        </td>
        <td>关羽</td>
        <td>
            <a href="https://www.baidu.com">点击查看详细</a>
        </td>
        <td>
            编辑
            删除
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>
            <img style="height: 100px;" src="/static/zhangfei.png">
        </td>
        <td>张飞</td>
        <td>
            <a href="https://www.baidu.com">点击查看详细</a>
        </td>
        <td>
            编辑
            删除
        </td>
    </tr>
    </tbody>
</table>

在这里插入图片描述

2.9 input系列

- 明文输入框：
<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="button" value="提交">
- 提交表单：
<input type="submit" value="提交">

2.10 下拉框

- 单选下拉框
<select>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
</select>

- 多选下拉框（按住shift可多选）
multiple：多选
<select multiple>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
</select>

2.11 多行文本

rows：默认行数

<textarea rows="5"></textarea>

案例：用户注册

<h1>用户注册</h1>
<div>
    用户名：<input type="text">
</div>
<div>
    密码：<input type="password">
</div>

<div>
    性别：<input type="radio">男 <input type="radio">女
</div>

<div>
    爱好：
    <input type="checkbox">篮球
    <input type="checkbox">足球
    <input type="checkbox">乒乓球
</div>

<div>
    擅长的领域：
    <select multiple>
        <option>Python</option>
        <option>C++</option>
        <option>Java</option>
    </select>
</div>

<div>
    备注：<textarea></textarea>
</div>

<div>
    <input type="button" value="button按钮">
    <input type="submit" value="button按钮">
</div>

在这里插入图片描述

网络请求

GET请求：【URL方法 / 表单提交】

  • 现象：数据在url上体现

POST请求：【表单提交】

  • 现象：数据在请求体中

案例：用户注册（传输数据）

页面数据如何提交到后台：

  • form标签包裹要提交的数据标签
  • 提交方式：method=“get”
  • 提交地址：action=“/xxx/xxx/xx”
  • form标签中必须有一个submit标签

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <form method="post" action="/post/reg">
        用户名：<input type="text" name="user"/>

        密码：<input type="password" name="pwd"/>

        <input type="submit" value="submit按钮"/>
    </form>
</body>
</html>

Python：

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/add", methods=['POST'])
def add():
    return render_template("add.html")

@app.route("/post/reg", methods=["POST"])
def post_register():
    print(request.form)
    return "注册成功！"

if __name__ == '__main__':
    app.run()

在这里插入图片描述

整合GET、POST请求为一个函数：

HTML（完整代码）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <form method="post" action="/add">
        <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="10">篮球
            <input type="checkbox" name="hobby" value="20">足球
            <input type="checkbox" name="hobby" value="30">乒乓球
        </div>
        <div>
            城市：
            <select name="city">
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option value="sz">深圳</option>
            </select>
        </div>
        <div>
            擅长领域：
            <select name="skill">
                <option value="100">Python</option>
                <option value="101">C++</option>
                <option value="102">Java</option>
            </select>
        </div>
        <div>
            备注：<textarea name="more"></textarea>
        </div>
        <input type="submit" value="submit按钮"/>

    </form>
</body>
</html>

Python（完整代码）：

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/add", methods=['GET', "POST"])
def register():
    if request.method == "GET":
        return render_template("add.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")
        skill_list = request.form.get("skill")
        more = request.form.get("more")
        print(user, pwd, gender, hobby_list, city, skill_list, more)
        return "注册成功！"

if __name__ == '__main__':
    app.run()

案例：登录

HTML（完整代码）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
</head>
<body>
    <h1>用户登录</h1>
    <form method="post" action="/login">
        <div>
            用户名：<input type="text" name="username">
        </div>
        <div>
            密码：<input type="password" name="password">
        </div>
        <input type="submit">
    </form>
</body>
</html>

Python（完整代码）：

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/login", methods=['GET', 'POST'])
def login():
    if request.method == "GET":
        return render_template('login.html')
    else:
        user = request.form.get("username")
        pwd = request.form.get("password")
        print(user, pwd)
        return "登录成功"

if __name__ == '__main__':
    app.run()

总结

1.称呼

什么是HTML？

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

2.HTML标签（默认格式样式、以后可以通过CSS修改）

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

  • java + HTML
  • c# + HTML
  • php + HTML
  • python + HTML

4.以上HTML标签是常用标签可完成90%开发，标签还有很多，不必逐一学会，网络上有成熟的HTML模板框架。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Spring Cloud Alibaba商城实战项目（day02）

Spring Cloud Alibaba商城实战项目（day02）

四、搭建Spring Cloud Alibaba环境 4.1、简介 官方文档&#xff1a;https://spring-cloud-alibaba-group.github.io/github-pages/hoxton/zh-cn/index.html 我们所选用的组件&#xff1a; SpringCloud Alibaba - Nacos&#xff1a;注册中心&#xff08;服务发现/注册&#xf…
阅读更多...
还不会二分查找？看这一篇就够了

还不会二分查找？看这一篇就够了

目录一、整数二分1.1 二分查找模板1.1.1 寻找右边界的二分查找1.1.2 寻找左边界的二分查找1.2 应用&#xff1a;寻找元素的起始位置和终止位置二、浮点数二分2.1 浮点数二分模板2.2 应用&#xff1a;数的三次方根三、使用STL进行二分查找3.1 std::binary_search3.2 std::lower_…
阅读更多...
27-Golang中的错误处理机制

27-Golang中的错误处理机制

Golang中的错误处理机制说明基本说明使用deferrecover处理上述代码错误处理机制的好处自定义错误说明 package main import ("fmt" )func test() {num1 : 10num2 : 0res : num1 / num2fmt.Println("res", res) }func fmt() {test ()fmt.Println("mai…
阅读更多...
分享77个Java源码，总有一款适合您

分享77个Java源码，总有一款适合您

Java源码 分享77个Java源码&#xff0c;总有一款适合您 下面是文件的名字&#xff0c;我放了一些图片&#xff0c;文章里不是所有的图主要是放不下...&#xff0c;大家下载后可以看到。 源码下载链接&#xff1a;https://pan.baidu.com/s/1EhB4snvWia5eCztyfiX_2A?pwdbofo …
阅读更多...
wish、亚马逊、ebay、沃尔玛自养号测评补单优势之分析技巧

wish、亚马逊、ebay、沃尔玛自养号测评补单优势之分析技巧

测评补单的资源可以说是卖家非常宝贵的财富&#xff0c;通过测评补单和广告相结合&#xff0c;可以快速有效的提升店铺的产品销量&#xff0c;提高转化&#xff0c;提升listing权重&#xff0c;如果是做自养号还可以不用担心以后被别人牵制&#xff0c;毕竟资源掌握在自己手上&…
阅读更多...
docker-基础实战第二课

docker-基础实战第二课

Docker三剑客 Docker 镜像&#xff08;Image&#xff09;&#xff1a;镜像可以用来创建容器&#xff0c;一个镜像可以创建多个容器。 容器&#xff1a;容器实例就是指实际运行的实例&#xff0c;可以理解为镜像是java的类&#xff0c;容器就是new出来的对象。 仓库&#xff1a;…
阅读更多...
elasticsearch实现基于拼音搜索

elasticsearch实现基于拼音搜索

1、背景 一般情况下&#xff0c;有些搜索需求是需要根据拼音和中文来搜索的&#xff0c;那么在elasticsearch中是如何来实现基于拼音来搜索的呢&#xff1f;可以通过elasticsearch-analysis-pinyin分析器来实现。 2、安装拼音分词器 # 进入 es 的插件目录 cd /usr/local/es/…
阅读更多...
【论文阅读 CIKM2011】Finding Dimensions for Queries

【论文阅读 CIKM2011】Finding Dimensions for Queries

文章目录ForewordAbsMethodList ExtractionList WeightingList ClusteringDimension and Item RankingForeword This paper is from CIKM2011, so we only condier the method, not resultsThere are many papers that have not been shared. More papers can be found in: Sh…
阅读更多...
微信小程序+阿里物联/Onenet物联+esp32搭建无服务器物联系统（一）---ESP32硬件设计开源

微信小程序+阿里物联/Onenet物联+esp32搭建无服务器物联系统（一）---ESP32硬件设计开源

目录 简介 一、硬件设计开源连接 二、硬件设计解析 1、电路原理图 2、PCB版图 3、BOM资料 4、整体项目的资料连接 微信小程序阿里物联平台合宙Air724UG搭建无服务器物联系统&#xff08;一&#xff09; 微信小程序阿里物联平台合宙Air724UG搭建无服务器物联系统&#xff08…
阅读更多...
uni-app canvas绘制海报流程的一些记录

uni-app canvas绘制海报流程的一些记录

绘制流程 布局定义 在我们的布局里要声明canvas的定义如下&#xff0c;可以声明class布局样式&#xff0c;width和height是必须的&#xff0c;因为如果没有就绘制不了。 canvas-id也是必须的&#xff0c;我们需要通过id找到对一个你的canvas对象&#xff0c;来做操作 <c…
阅读更多...
公测开启！CRMEB 多商户v2.1新功能快来体验

公测开启！CRMEB 多商户v2.1新功能快来体验

“ 真正实现完美主义当然很困难&#xff0c;但具备追求完美主义的态度&#xff0c;就能减少错误。” ——稻盛和夫 CRMEB 多商户 v2.1公测版正式发布&#xff01;新增付费会员&#xff0c;可进行会员折扣价管理、会员福利设置&#xff1b;新增社区发布短视频&#xff0c;打造短…
阅读更多...
Django REST framework--DRF视图

Django REST framework--DRF视图

Django REST framework--DRF视图DRF视图编写常规Django视图编写视图装饰器api_view查询资源返回所有数据返回单条数据返回json格式的数据新增资源修改资源删除资源DRF视图编写 常规Django视图编写 序列化器最终的作用是为视图提供转化后的数据&#xff0c;可使用Serializer类…
阅读更多...
【饥荒】本地服务器+内网穿透

【饥荒】本地服务器+内网穿透

本地服务器搭建方法 准备工具 网易UU加速器&#xff08;用于加速科雷官网登陆和steam创意工坊&#xff09;Don’t Starve Together Dedicated Server(steam饥荒联机版开服工具) 获取方法&#xff1a;在库中勾选工具&#xff0c;然后搜索Don’t Starve Together Dedicated Ser…
阅读更多...
Unity SRP自定义渲染管线学习1.2：初步绘制

Unity SRP自定义渲染管线学习1.2：初步绘制

绘制物体 绘制物体&#xff0c;包括不透明的物体&#xff0c;透明物体&#xff0c;再加上之前的天空盒 Camera void DrawVisibleGeometry(){//我们需要将不透明物体和透明物体分开绘制//如果我们直接先绘制所有的物体&#xff0c;然后再绘制天空盒&#xff0c;我们就会看到对…
阅读更多...
nodejs+vue家庭食谱饮食方案管理系统网站python php java

nodejs+vue家庭食谱饮食方案管理系统网站python php java

本系统分为用户和管理员两个角色&#xff0c;其中用户可以注册登陆系统&#xff0c;查看美食食谱&#xff0c;一周健康食谱安排&#xff0c;查看美食食材&#xff0c;在线交流发布帖子&#xff1b;管理员可以对食谱分类&#xff0c;食谱信息&#xff0c;材料信息&#xff0c;美…
阅读更多...
区块链技术2---BTC的数据结构

区块链技术2---BTC的数据结构

1&#xff1a;Hash pointers&#xff08;哈希指针&#xff09;和普通指针相比&#xff0c;哈希指针除了保存地址还保存哈希值2&#xff1a;Block chain区块链中的区块通过哈希指针相连&#xff0c;这里的哈希指针的哈希值是对前一个区块的整体取哈希值&#xff08;包括前一个区…
阅读更多...
linux系统中使用QT实现摄像头功能的方法

linux系统中使用QT实现摄像头功能的方法

大家好&#xff0c;今天主要和大家聊一聊&#xff0c;如何使用QT中的Camera的功能和实现。 目录 第一&#xff1a;摄像头资源简介 第二&#xff1a;环境搭建要求 第三&#xff1a;代码编译实现要求 第一&#xff1a;摄像头资源简介 开发板上有一路“CSI”摄像头接口&#xf…
阅读更多...
组件封装 - steps组件

组件封装 - steps组件

首先, 我先来看看效果 steps 组件的封装和 tabs 组件还是相似的 都会去指定两个组件来完成(仿Element UI), 都会去使用 jsx 的语法 让其中一个组件去规定样式和排版, 另外一个组件去接收父组件传入的动态数据 但和面包屑组件还是有区别的(面包屑组件封装): 相同点都是使用两…
阅读更多...
v-for 的“就地更新”策略

v-for 的“就地更新”策略

前言 我们平时使用v-for的时候通常都是加一个唯一标识key&#xff0c;因为不加的时候Vue会给我们发出警告。其实我们加上key的操作&#xff0c;就是为了避免它的“就地更新”策略。我们来看一下官网对“就地更新”的解释&#xff1a; 当 Vue 正在更新使用 v-for 渲染的元素列表…
阅读更多...
jsp文化活动系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

jsp文化活动系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 JSP 文化活动系统 是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统采用web模式开发&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&#xff0c;数…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站