初识HTML

简介: 本文介绍了HTML的基本概念和使用方法。

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>
相关文章
|
9月前
|
开发者
第十三期乘风伯乐奖--寻找百位乘风者伯乐,邀请新博主入驻即可获奖
乘风伯乐奖,面向阿里云开发者社区已入驻乘风者计划的博主(技术/星级/专家),邀请用户入驻乘风者计划即可获得乘风者定制周边等实物奖励。本期面向阿里云开发者社区寻找100位乘风伯乐,邀请人数月度TOP 1 获奖者(大于108人)可获得Cherry樱桃MX 3.0S键盘!
4261 17
|
5月前
|
Docker Windows Python
Windows-Docker学习笔记(一)
本文介绍了Windows环境下Docker的安装与使用方法。首先通过链接下载Windows版本的Docker,然后按步骤配置:启用Windows功能、设置默认WSL版本为2,并检查Docker及其组件是否正常工作。接着详细列出了Docker的基础命令及其用法,包括搜索、下载镜像、管理容器等。同时介绍了Dockerfile的编写方法及其构建过程,以及docker-compose.yml文件的用途。最后提供了运行和管理容器的具体示例。
Windows-Docker学习笔记(一)
|
9月前
|
JavaScript 前端开发
初识JS
这篇内容介绍了JavaScript的基础知识,包括DOM和BOM(相当于内置模块和第三方模块)、变量的声明(var、let、const的特点和区别)、数组操作(如push、pop、splice等)、字典操作以及DOM操作示例。变量部分强调了var的变量提升和块级作用域问题,let和const的块级作用域和不可重复声明,以及const用于创建不可变的常量。在实际应用中,展示了如何动态改变HTML元素内容和创建新元素的示例。
|
8月前
|
监控 Linux Docker
关于小白如何从0开始使用Windows中的docker制作一道自己的ctf题
关于小白如何从0开始使用Windows中的docker制作一道自己的ctf题
|
9月前
|
JavaScript 网络安全 开发工具
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
|
9月前
|
JavaScript
Hexo个人博客之Next-8.20主题下载及美化
Hexo个人博客之Next-8.20主题下载及美化
|
9月前
|
Nacos Docker 容器
关于NACOS-1.4.0未授权访问和旁路身份验证安全漏洞及其复现
关于NACOS-1.4.0未授权访问和旁路身份验证安全漏洞及其复现
|
9月前
|
关系型数据库 MySQL Go
Docker从入门到精通:Docker镜像相关命令学习
本文介绍了Docker中管理镜像的基本命令:`docker images`用于查看镜像列表,`docker search`从Docker Hub搜索镜像,`docker rmi`删除镜像,`docker tag`则用于标记和重命名镜像。通过这些命令,用户能有效管理自己的Docker镜像资源。
|
9月前
|
存储 机器学习/深度学习 自然语言处理
Transformer 自然语言处理(二)
Transformer 自然语言处理(二)
298 0
Transformer 自然语言处理(二)
|
9月前
|
存储 自然语言处理 PyTorch
Transformer 自然语言处理(三)
Transformer 自然语言处理(三)
234 0
Transformer 自然语言处理(三)

热门文章

最新文章

相关实验场景

更多