html基础及python web开发

news2024/11/15 17:44:45

1.标签

①p标签

段落标签，分隔段与段。

<p>...</p>

②h标签

标题标签h1-6，大小依次减小

<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>

③ <br>换行标签，<hr>分割线标签

<h1>...</h1>
<br>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<hr>
<h5>...</h5>
<h6>...</h6>

④ <img>图片标签

<img src="../1.gif" alt="111" title="11" style="width: 30%">

src是图片路径，可以是网络上url或者是本地储存的图片的路径。注意如果使用本地图片，必须使用相对路径，否则图片无法显示。

相对路径表示：

a）上一级
<img src="../1.gif">
b）同级
<img src="1.gif">
c）下一级(同级image的下一级)
<img src="image/1.gif">

alt为若显示失败的提示词

title为鼠标放在图片上时弹出的提示词

⑤<a>标签

超链接标签，可以跳转到某个页面。

eg，表格里面嵌套a标签，省略部分代码。

    <th>
        <a href="http://。。。。.com" target="_blank">
        大叔冒险</a>
    </th>

就可以做成这样的追番表，点击字就可以跳转到某个页面。

同理也可嵌套图片。

target是打开新链接的方式，默认直接跳转，如果加上 target="_blank"，则新增页面跳转。

⑥<div>标签

块级标签，占满整行，把某一部分代码整理归于一个区域。也可相当于<p>标签的通用版本。

⑦<table>表格

<tr>一行，<tr>写在外层，嵌套<td>。只能以这种先依次定义第n行，再定义这一行m列的方式写表格。

<td>一个单元格（某行的一列）

<th>加粗居中的单元格

<table border="1" cellpadding="10" width="100%" >
        <caption >单周</caption>
        <tr>
            <th colspan="2">时间/日期</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
            <th>星期六</th>
            <th>星期日</th>
        </tr>

border：边框宽度

algin：表格整体的对齐方式，left，right，center

cellspacing：单元格之间的距离. 默认为 2 像素

cellpadding：内容距离边框的距离, 默认 1 像素

colspan="n"：某一行合并n个列

rowspan="n"：某一列合并n个行

⑧表单标签

a)文字输入

<input type="text">

b)密码输入

<input type="password">

c）提交按钮

<input type="submit">

value定义按钮上显示的文字，默认为显示‘提交’。最好不要定义value，否则传输数据会失败。

提交按钮也可以这样写：

<button type="submit">提交</button>

d）单选按钮

<input type="radio" name="1" value="11">好
<input type="radio" name="1" value="22">不好

每个name对应一组按钮，每一组只能单选一个。

value定义返回的值。如果选好则返回11，选不好则返回22。

e）多选按钮

<input type="checkbox" name="1">1
<input type="checkbox" name="1">2

f）文件输入

type为file

⑨表单<form>

<form method="get" action="hh">
    <select name="1">
        <option>1545</option>
        <option>2876</option>
        <option>3789</option>
    </select>
    <input type="submit">
</form>

method为提交方式。action为提交并跳转的地址。form表单内的所有东西为提交内容。

get在网址中会显示传输的数据而post不会，都能传输数据。所以一般用post。

注意表单内容需要定义name，数据才会被提交。

2.python交互

import flask
from flask import Flask,render_template


app=Flask(__name__)

@app.route("/")
def x():
    return render_template("基础.html")

@app.route("/niupi")
def h():
    print(flask.request.args)
    return "成功"
if __name__=='__main__':
    app.run()

点开网页后就会将基础.html的标签内容全部显示于网页，x和h为内置函数。必须将html放在同级名为templates的文件夹中才可调用。每个网页的内置函数名不可相同否则会报错（AssertionError: View function mapping is overwriting an existing endpoint function: index）。进一步跳转可进入niupi网页，这个网页返回对象没有设置新的html而只是打印请求内容，返回一句话。但仍然可以接收数据。这里的niupi网页就是用于接受数据。

以下是基础.html的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>啦啦啦</title>
</head>
<body>
<form method="get" action="/niupi">
    <select name="1">
        <option>1545</option>
        <option>2876</option>
        <option>3789</option>
    </select>
    <input type="submit">
</form>
</body>
</html>

我们创建了一个表单，把提交地址设置为niupi，当我们选择某个值的时候，点击提交就可以把数据给打印出来。