菜单 搜索
首页 前端知识 基于Django的web开发（前端部分-HTML）

基于Django的web开发（前端部分-HTML）

2024-07-22 00:07:53 前端知识 前端哥 13 645 我要收藏

        最近在学武沛齐老师的Django开发项目，学习之余整理了笔记，有兴趣的同学可以跟着此笔记来同步辅助学习。

另附上课程链接：00 课程介绍_哔哩哔哩_bilibiliicon-default.png?t=N7T8https://www.bilibili.com/video/BV1rT4y1v7uQ?p=1&vd_source=95365bd1c5a79f54e63e9e08f3d6ce1b

一.HTML

目的:开发一个平台(网站)
    -前端开发︰HTML、css、Javascript
    -web框架:接收请求并处理
    -MysQL数据库:存储数据地方

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

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

1.快速开发网站

pip install flask
# 基于flask框架编写网站
from flask import Flask

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> ->浏览器看见字体变红色

如果我们能把浏览器能识别的所有的标签都学会，我们在网站就可以控制页面到底长什么样子。

 Flask框架为了让咱们写标签方便，支持将字符串写入到文件里

(1).增加了render_template，用来访问文件

# 增加了render_template，用来访问文件
from flask import Flask,render_template

app = Flask(__name__)

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

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

(2).创建templates目录，新建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>中国电信</h1>
    <h2>中国移动</h2>
    <h3>中国联通</h3>

</body>
</html>

运行结果：

2.浏览器能识别的标签

2.1编码(head中)

<meta charset="UTF-8">

2.2title(head中)

<title>移动运营商</title>

 

2.3标题<h></h>

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

2.4div和span

1.div：占一整行。【块级标签】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动运营商</title>
</head>
<body>
<div>有什么好玩的网游</div>
<div>穿越火线永远滴神</div>
</body>
</html>

2.span：自己多大占多少行。【行内标签，内联标签】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动运营商</title>
</head>
<body>
<span>111</span>
<span>222</span>
</body>
</html>

 

注意：这两个标签比较素+CSS样式，可以实现丰富的功能

2.5超链接 <a></a>

1.跳转到其他网站

<a href="https://new.qq.com/rain/a/20240403A00FXA00">NBA新闻</a>

2.跳转到自己的网站

<a href="/get/news">CBA新闻</a>

3.target="_blank新建一个页面跳转

# 当前页面跳转
<a href="/get/news">CBA新闻</a>

# 跳转到新建页面
<a href="/get/news" target="_blank">CBA新闻</a>

 此时需要修改web.py内容，然后在同目录下新建一个news.html

# 基于flask框架编写网站
from flask import Flask,render_template

app = Flask(__name__)

# 创建了网址/show/info和函数index的对应关系
# 以后用户在浏览器上访问/show/info，网站自动执行index
@app.route('/show/info')
def index():
    return render_template('index.html')

@app.route('/get/news')
def news():
    return render_template('news.html')

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

 2.6图片<img />

<img src="图片地址" />
<h1>直接显示别人的图片(防盗链)</h1>
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.7ecdb52cb56c0e121025e1b752296fb3?rik=tTsFgweG5QNWIQ&riu=http://pic.bizhi360.com/bbpic/27/9727_7.jpg&ehk=fzaYq+rx5WqWQ2zu7P3Mqgnmwiq4Nx/bDftpz3vaf7w=&risl=&pid=ImgRaw&r=0"/>
显示自己的图片需要在同目录下新建static，然后在static中放入图片即可
<h1>显示自己的图片小米su7</h1>
<img src="/static/su7.jpg" />

<h1>关于设置图片的宽度和高度</h1>
<img src="/static/su7.jpg" style="height:500px;width:500px" /> # 设置高度和宽度为500像素
<img src="/static/su7.jpg" style="width:30%" /> # 设置图片大小为原来的30%

小结：

块级标签：

                <h1></h1>

                <div></div>

行内标签：
                <span></span>

                <a></a>

                <img />

嵌套（超链接和图片进行嵌套）
标签嵌套的意义：

<a>中嵌套<img />,可以方便用户点击图片即可跳转购买链接

<h1>商品列表</h1>
<a href="https://detail.tmall.com/item.htm?id=652790330927&spm=a21bo.jianhua/a.201876.76.5af92a89V47Tnw&scm=1007.40986.369799.0&pvid=693d5507-fd21-4ee3-84c9-efe74dfa52e7">
    <img src="/static/音响.jpg" />
</a>

2.7列表 

无序列表格式
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
有序列表格式
<ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ol>

2.8表格

表格格式
<table>
    <thead> #表头
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    </thead>
    <tbody> #表内容
    <tr> #行内容
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr> #行内容
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr> #行内容
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr> #行内容
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </tbody>
</table>

案列：用户列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>user</title>
</head>
<body>
    <h1>用户列表</h1>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>头像</th>
                <th>name</th>
                <th>email</th>
                <th>更多信息</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>
                    <img src="/static/音响.jpg" style="width:20%" />
                </td>
                <td>ty</td>
                <td>666@qq.com</td>
                <td>
                    <a href="https://blog.csdn.net/weixin_61218382?spm=1000.2115.3001.5343" target="_blank">
                        点击查看详情
                    </a>
                </td>
                <td>
                    编辑
                    删除
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>
                    <img src="/static/音响.jpg" style="width:20%" />
                </td>
                <td>ty</td>
                <td>666@qq.com</td>
                <td>
                    <a href="https://blog.csdn.net/weixin_61218382?spm=1000.2115.3001.5343" target="_blank">
                        点击查看详情
                    </a>
                </td>
                <td>
                    编辑
                    删除
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>
                    <img src="/static/音响.jpg" style="width:20%" />
                </td>
                <td>ty</td>
                <td>666@qq.com</td>
                <td>
                    <a href="https://blog.csdn.net/weixin_61218382?spm=1000.2115.3001.5343" target="_blank">
                        点击查看详情
                    </a>
                </td>
                <td>
                    编辑
                    删除
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>
                    <img src="/static/音响.jpg" style="width:20%" />
                </td>
                <td>ty</td>
                <td>666@qq.com</td>
                <td>
                    <a href="https://blog.csdn.net/weixin_61218382?spm=1000.2115.3001.5343" target="_blank">
                        点击查看详情
                    </a>
                </td>
                <td>
                    编辑
                    删除
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>
                    <img src="/static/音响.jpg" style="width:20%" />
                </td>
                <td>ty</td>
                <td>666@qq.com</td>
                <td>
                    <a href="https://blog.csdn.net/weixin_61218382?spm=1000.2115.3001.5343" target="_blank">
                        点击查看详情
                    </a>
                </td>
                <td>
                    编辑
                    删除
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 2.9input系列

    <h1>输出框</h1>
        <input type="text">
        <input type="password">
        <input type="file">

    <h1>单选框</h1>
    <input type="radio" name="n1">man
    <input type="radio" name="n1">women

    <h1>多选框</h1>
    <input type="checkbox">1
    <input type="checkbox">2
    <input type="checkbox">3
    <input type="checkbox">4

    <h1>按钮</h1>
    <input type="button" value="提交"> # 普通按钮
    <input type="submit" value="提交"> # 提交表单

2.10 下拉框

    <h1>下拉框</h1>
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
    </select>

    <h1>多选下拉框</h1>
    <select multiple>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
    </select>

2.11多行文本

    <h1>多行文本</h1>
    <textarea></textarea>

案例：用户注册1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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">羽毛球
             <input type="checkbox">乒乓球
    </div>
    <div>
        城市：
        <select>
            <option>上海</option>
            <option>北京</option>
            <option>广州</option>
            <option>深圳</option>
        </select>
    </div>
    <div>
        擅长领域：
        <select multiple>
            <option>打游戏</option>
            <option>睡觉</option>
            <option>吃饭</option>
            <option>泡妞</option>
        </select>
    </div>
    <div>
        备注：
        <textarea></textarea>
    </div>
    <div>
        <input type="button" value="button按钮提交">
        <input type="submit" value="submit按钮提交">
    </div>
</body>
</html>

知识点回顾和补充

1.网站请求的流程

2.一大堆的标签

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

 3.网络请求

在浏览器的URL中写入地址，点击回车，访问。
    浏览器会发送数据过去，本质上发送的是字符串:
    "GET/explore http1.1\rlnhost:. . .\r\nuser-agentlr\n..lr\n\r\n"
    浏览器会发送数据过去，本质上发送的是字符串:
    "PosT /explore http1.1\rlnhost:...\r\nuser-agentlr\n..lr\nlr\n数据库"

浏览器向后端发送请求时

GET请求【url方法，表单提交】
现象:GET请求、跳转、向后台传入数据数据会拼接在URL上。
https : / / www.sogou.com/web?query=安卓&age=19&name=xX
注意:GET请求数据会在URL中体现。

POST请求【表单提交】
现象:提交数据不在URL中而是在请求体中。

页面上的数据，想要提交到后台:
form标签包裹要提交的数据的标签。

        提交方式:method="get"
        提交的地址:action="/ xxx/ xxx/xx"

        在form标签里面必须有一个submit标签。

在form里面的一些标签: input/select/textarea
      一定要写name属性<input type="text " name="uu" />

案例：用户注册2

创建新代码

创建Flask代码

from flask import Flask,render_template,request

app=Flask(__name__)

@app.route('/register',methods=['GET'])
def register():
        return render_template('register.html')

@app.route('/post/reg',methods=['POST'])
def post_register():
        user = request.form.get("user")
        pwd = request.form.get("pwd")
        gender = request.form.get("gender")
        hobby_list = request.form.getlist("hobby")
        city = request.form.get("city")
        skill_list = request.form.getlist("skill")
        more = request.form.get("more")
        print(user, pwd, gender, hobby_list, city, skill_list, more)
        # 将用户信息写入文件中实现注册、写入到excel中实现注册、写入数据库中实现注册

        # 2.给用户再返回结果
        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="/post/reg">
        <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="11">吃
            <input type="checkbox" name="hobby" value="12">喝
            <input type="checkbox" name="hobby" value="13">玩
            <input type="checkbox" name="hobby" value="14">乐
        </div>
        <div>
            城市：
            <select name="city">
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option value="sz">深圳</option>
            </select>
        </div>
        <div>
            擅长领域：
            <select name="skill" multiple>
                <option value="100">游戏</option>
                <option value="101">体育</option>
                <option value="102">泡妞</option>
            </select>
        </div>
        <div>
            备注：<textarea name="more"></textarea>
        </div>
        <input type="submit" value="submit按钮">

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

 


 

转载请注明出处或者链接地址：https://www.qianduange.cn//article/14178.html
标签
django
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

二.TypeScript环境搭建以及基础配置

2024-08-07 10:08:51

【几乎最全/全网最长的 2 万 字】前端工程化完整流程：从头搭到尾（vue3 vite qiankun docker tailwindcss iview......）

2024-08-07 00:08:46

TEGG学习总结

2024-08-07 00:08:45

功能：cookie与vue：完成双系统切换（jQuery老系统与vue新系统切换）

2024-08-07 00:08:40

ajax笔记二

2024-03-12 01:03:25

2024年最新轻松学习jQuery控制DOM_jquery平滑显示指定dom(2)，怒肝三个月啃完这110道面试题

2024-08-07 00:08:24

利用jquery对HTML中的名字进行替代

2024-08-07 00:08:23

JQuery工具方法整理，118页Vue面试题总结

2024-08-07 00:08:10

jQuery 密码验证

2024-08-07 00:08:10

jQuery在js里动态修改样式和hover()方法 (入门)

2024-08-07 00:08:05

大家推荐的文章
1

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
2

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
3

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
4

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
5

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
6

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
7

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
8

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
9

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
10

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！