html基础自学周报--24.3.1

坠入极夜的夏

已于 2024-03-03 21:54:42 修改

阅读量888

点赞数 18

分类专栏： Web开发自学文章标签： html 前端

于 2024-03-03 21:25:24 首次发布

本文链接：https://blog.csdn.net/new_zh0ng/article/details/136438588

版权

Web开发自学专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一，完成事项

HTML的部分学习与实践

二，未完成事项

CSS的完整学习

python语言

三，下周待做

前端的完整学习

python语言

四，本周学习内容

1，建立（通过flask框架）

from flask import Flask,render_template
#flask环境配置：pip install flask
app = Flask(__name__)

@app.route("/1")
#进入网站后需要url后拼接“/1”，
def index():
    return render_template("1.html")
#自动返回到templates文件夹内的1.html文件
#html文件需要放在temlates文件夹内
if __name__ == '__main__':
    app.run(host="",port=5418)
    #host为地址，port为端口

利用python建立一个前端网站

2，HTML

HTML网站基础

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">编码方式
    <title>Title</title>网站名
</head>
<body>
   网站内容
</body>
</html>

标签(body)

块级标签
<h1></h1>~~~<h2></h2>#随着h1的增加，字体变小，该标签单独占一行
<div>自己单独站一整行</div>
行内标签
<span style标签内的格式='color:red'>自己多大</span><span>就占多大</span>
<a></a>
<img />
标签可以结合使用

超链接

<a href="URL"></a>跳转到其他网站
<a href="URL" target="_blank"></a>通过新标签跳转到其他网站
<a href="/xxx/xxx"></a>跳转到templates下的网站，
eg：1.html

图片

<img src="图片URL"/>添加其他网站的图（小心防盗链）
<img src="/static/图片"/>添加自己的图片，需要先建立static文件夹
<img src="URL" style="height:111px; width:222px"/>
px为像素
<img src="URL" style="height:11%; width:22%"/>
缩减到原来的%xx

<a></a>与<img />结合可建立超链接图片
eg：<a href="URL" target="_blank">   <img src="URL" style=""/>   </a>

列表及表格

列表：
无序排列
<u1>
    <1i>1</1i>
    <1i>2</1i>
    <1i>3</1i>
</u1>
有序排列（前面带数字）
<ol>
    <1i>1</1i>
    <1i>2</1i>
    <1i>3</1i>
</ol>
表格：
<table border="1">边框
    <thead>表头
        <tr>    <th>1</th>  <th>2</th>  <th>3</th>  </tr>tr：一行，th：一列
    </thead>
    <tbody>内容
        <tr>    <td>1</td>  <td>2</td>  <td>3</td>  </tr>
    </tbody>
</table>
表格实例：
<table border="1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>头像</th>
            <th>性别</th>
            <th>生日</th>
            <th>爱好</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>派蒙</td>
            <td>
                <a href="https://baike.baidu.com/item/%E6%B4%BE%E8%92%99/22793938">
                    <img src="/static/派蒙.png" style="width: 50px">
                </a>
            </td>
            <td>女</td>
            <td>6月1日</td>
            <td>蜜酱胡萝卜煎肉</td>
        </tr>
    </tbody>
</table>

input

</table>
<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" /> rap
<input type="checkbox" /> 篮球

<input type="button" value="yes" />    普通按钮
<input type="submit" value="yes" />    可以提交数据的按钮，与<form>结合使用

下拉框及多行文本

下拉框：
单选下拉框
<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
多选下拉框
<select multiple>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
多行文本：
<textarea rows="3"></textarea>rows为输入框高度

表单与提交

python

from flask import Flask,render_template, request

app = Flask(__name__)

@app.route('/first',methods=['POST','GET'])
def first():
    if request.method=="GET":
        return render_template("2.heml")
    else:
        user = request.form.get("user")
        password = request.form.get("password")
        a = request.form.get("性别")
        b = request.form.get("爱好")
        c = request.form.get("梦想")
        d = request.form.get("自我介绍")
        print(user,password,a,b,c,d,end='\n')
    
        print(request.args)
        return render_template("1.html")

#@app.route('/first',methods=['GET'])#限制仅为get请求进入
@app.route("/nixt",methods=['POST'])#限制仅为post请求进入
def nixt():
    print(request.form)
    return render_template("2.html")

@app.route("/user")
def user():
    return render_template("user.html")

html（post与get提交）

<body>
    <div>
        <form method="get" action="/first">
            <div>
                  user  <input type="text" name="user"/>
            <div/>
            <div>
                password<input type="text" name="password"/>
            </div>
            <div>
                <input type="radio" name="xingbie" value="男"/>男
                <input type="radio" name="xingbie" value="女"/>女
            </div>
            <input type="submit" value="登录">
        </form>
    </div>

    <div>
        <form method="post" action="/nixt">
              user  <input type="text" name="user"/>
            password<input type="text" name="passwprd"/>
            <input type="submit" value="登录"/>
        </form>
    </div>
</body>