初识HTML

举报
坠入极夜的夏 发表于 2024/04/15 21:32:49 2024/04/15
【摘要】 HTML介绍HTML是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。1,建立(通过flask框架)from flask import Flask,render_template#flask环境配置:pip install flaskapp = Flask(__name__)@app.route("/1")#进入网站后...

HTML介绍

HTML是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。

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>
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。