Python前端

最新推荐文章于 2025-05-23 09:16:47 发布

qq_34444779

最新推荐文章于 2025-05-23 09:16:47 发布

阅读量1k

点赞数 23

文章标签： python 前端开发语言

本文链接：https://blog.youkuaiyun.com/qq_34444779/article/details/135668177

版权

本文介绍了HTML的基本标签结构，如块级、行内、列表和表格等，展示了如何使用CSS进行样式设置，包括选择器和在Flask应用中的CSS链接。还详细讲解了表单的创建、网络请求（GET和POST）以及Flask中的路由和模板渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

day 01

超链接：



跳转网站:
<a herf ="https://">点击跳转</a>

跳转到自己网站的其他地址
<a herf ="http://http://localhost:63343/flaskProject/templates/get_news">点击跳转</a>

#当前页面打开
<a href="http://www.baidu.com">点击跳转</a>
#新页面打开（点击图片跳转）
<a href="http://www.baidu.com" target="_blank"> <img src="/static/菲菲1.jpg" style="height: 100px"></a>

图片：自闭合标签

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

直接显示别人图片：
<img src="http://">

显示自己图片：
static目录
<img src="自己图片的地址"/>
在页面上引入图片
< img src="/static/w.jpg">

图片样式：指定高度宽度：
 <img style="height: 200px;width: 200px" src="/static/琳儿.jpg">

标签类型：

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

划分：

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

列表相关标签：强制占一整行

<ul>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ul>
    <h1>运营商列表</h1>
#有序列表：
<ol>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ol>

表格：

<table>
    <thead>
        <tr>  <th>Id</th> <th>姓名 </th> <th> 年龄</th>  </tr>
    </thead>
</table>


 <h1>人员数据</h1>
<table border="1">
    <thead>
        <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr>
    </thead>
    <tbody>
        <tr> <th>1</th> <th>菲菲</th> <th>22</th> </tr>
        <tr> <th>2</th> <th>琳儿</th> <th>21</th> </tr>
    </tbody>
</table>

案例

 <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/琳儿.jpg" alt="" style="height: 50px">
                </td>
                <td>琳儿</td>
                <td>liner@liner.com</td>
                <td>
                    <a href="http://www.baidu.com" target="_blank">点击查看详情</a>
                </td>
                <td>休假</td>
                <td>编辑 删除</td>
            </tr>
        </tbody>
         <tbody>
            <tr>
                <td>1</td>
                <td>
                    <img src="/static/琳儿.jpg" alt="" style="height: 50px">
                </td>
                <td>琳儿</td>
                <td>liner@liner.com</td>
                <td>
                    <a href="http://www.baidu.com" target="_blank">点击查看详情</a>
                </td>
                <td>休假</td>
                <td>编辑 删除</td>
            </tr>
        </tbody>
    </table>

input系列标签

文本–按钮

<h1>输入内容</h1>
<input type="text">
    <h1>输入密码</h1>
    <input type="password">
    <input type="file">
#单选框
    <input type="radio" name="n1">男
    <input type="radio" name="n1">女
    #多选框
	<input type="checkbox">1
    <input type="checkbox">2
    <input type="checkbox">3
    <input type="checkbox">4
    <input type="button" value="提交">--普通按钮
    <input type="submit" value="登录">--提交表单

下拉框

#下拉框
<h1>选择</h1>
<select multiple>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
</select>

多行文本

    <h1>多行文本</h1>
<textarea rows="3"> </textarea>

用户注册页面

    <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>
        擅长领域：
        <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>

网络请求

输入url地址访问

浏览器发送数据，本质上是字符串
"GET /explore http://  "

浏览器向后端请求

1 get 请求【URL方法/表单提交】

现象：get 请求跳转，向后台传入数据会拼接在URL上；

get数据请求在URL中体现；

2 post 请求【表单提交】

提交数据不在URL上，而是在请求体上；

用户注册案例

创建新项目

wangx1
register.html

创建Flask代码

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

1有标签包裹

2标签中提交方式：method=“get”

3提交的地址action=“/xx/xx/xx”

4标签中存在submit方法

5中

app = Flask(__name__)



@app.route('/register', methods=['GET'])

def register():
    return render_template("register.html")



@app.route("/do/reg", methods=['GET'])
def do_register():

    return "注册成功"

3 CSS样式

-----专门用来美化标签。

基础CSS，写简单页面&改别人的

调整和修改

3.1

1在标签上

<img src="..." style="height:100px">
<div style ="color:red;"> xxx </div>

2在head标签上写style标签(常用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        .c1{
            color:red;
        }
    </style>
</head>
    <body> 
        <h1 class ='c1'>用户登录</h1>
    </body>
</html>

3写到文件中

.c1{
height:100px;
}
.c2{
color :red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link re1 = "stylesheet" herf="common.css"/>
    <style>
        .c1{
            color:red;
        }
    </style>
</head>
    <body> 
        <h1 class ='c1'>用户登录</h1>
        <h1 class ='c2'>用户登录</h1>
        <h1 class ='c2'>用户登录</h1>
        <h1 class ='c1'>用户登录</h1>
    </body>
</html>

案例：css在FLASK中的应用(登录注册)

1在static文件下创建.css文件

.xx{
    color: aqua;
}

2将文件引入HTML中

<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link rel="stylesheet"href="/static/commonts.css">
</head>

问题：FLASK框架不方便：

1需要重启

2某些文件必须放在特定的文件夹中

3新创建页面

函数

HTML文件

有没有方式可以快速编写代码并查看效果，最后集成到FLASK框架。

方法：我常用的。。。

3.3 CSS选择器

1.ID选择器

#c1{
    color: darkred;
}


    <div id ="c2">中国</div>

2.类选择器(最多)

.c1{
    color: darkred;
}
<div class="c1">安徽</div>

3.标签选择器

li{
    color:firebrick;
}
<ul>
        <li>北京</li>
        <li>上海</li>
        <li>深圳</li>
    </ul>

4.属性选择器

.vi [xx="456"]{
    color: gold;
}
	<input type="text">
	<input type="password">

	<div class="v1" xx="123">liner</div>
    <div class="v1" xx="456">liner</div>
    <div class="v1" xx="789">liner</div>

5.后代选择器

.ff > a{
    color: blueviolet;
}
<div class="ff">
        <a>百度</a>
        <div>
           <a>Google</a>
        </div>
        <ul>
            <li>赵</li>
            <li>钱</li>
            <li>孙</li>
        </ul>
    </div>


##### 4.属性选择器

```HTML
.vi [xx="456"]{
    color: gold;
}
	<input type="text">
	<input type="password">

	<div class="v1" xx="123">liner</div>
    <div class="v1" xx="456">liner</div>
    <div class="v1" xx="789">liner</div>

5.后代选择器

.ff > a{
    color: blueviolet;
}
<div class="ff">
        <a>百度</a>
        <div>
           <a>Google</a>
        </div>
        <ul>
            <li>赵</li>
            <li>钱</li>
            <li>孙</li>
        </ul>
    </div>