当前位置： 首页 > news >正文

网页开发基础——HTML

news 2025/11/3 5:59:06

一、flask框架
Flask是一种轻量级的Python web应用程序框架，可以帮助使用者快速构建Web应用程序和API。由于其简洁、灵活和易于上手的特点，Flask被广泛用于开发小型到中型的Web应用程序和后端API。本次我们主要是使用flask框架，进行一个小型web的开发，重点在于体会html、css、bootstrap、javascript、jquery的使用方法和具体操作。
二、安装flask
打开pycharm，在终端，使用pip指令，安装flask

pip install flask

在这里插入图片描述
或者点击上方菜单栏文件→设置→Python解释器→上方小加号→搜索栏输入flask→点击下方安装。
在这里插入图片描述
在这里插入图片描述
2.安装成功会有相应的提示。
三、从新建一个网页开始
1.首先在pycharm里面新建一个项目，项目下新建一个Python文件。
在这里插入图片描述
web.py里面的内容为

from flask import Flask
from flask import render_templateapp = Flask(__name__)@app.route("/show/details")
def index():return render_template("index.html")if __name__ == "__main__":app.run()

解释：

from flask import Flask
from flask import render_templateapp = Flask(__name__)@app.route("/show/details")
def index():return render_template("index.html")

这是一个Flask路由定义的示例。@app.route是一个装饰器，它将URL路径"/show/details"与下面的index函数绑定在一起。当用户在浏览器中访问"/show/details"时，Flask将调用index函数来处理该请求。

if __name__ == "__main__":app.run()

最后一部分用于运行Flask应用程序。if name == “main”:确保当我们直接运行此脚本时才执行app.run()。这样，我们可以通过运行脚本来启动Flask开发服务器，使应用程序能够在本地运行，并监听来自客户端的请求。
2.再创建一个templates文件夹，在该目录下新建一个index.html文件。
在这里插入图片描述
3.打开index.html文件
保持其他内容不变，在body里面写上“hello，我的网页”

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>hello，我的网页
</body>
</html>

4.点击运行，下方会出现一个网址，这是本地的一个网址，点击网址，进入网站。
在这里插入图片描述
在这里插入图片描述
Not Found是因为我们指定了相应的路由，把@app.route(“/show/details”)中的/show/details复制粘贴在原来网址的后面，即可访问网页。
在这里插入图片描述
到这里，我们自己的一个网页就创建成功了。接下来就是对html文件的一个修改，使它呈现能够呈现不同的文字、图片、表格、超链接等。
四、文字的样式
1.文字加大加粗

<h1>内容</h1>，h几就是标题几

例如body里面填充

<body><h3>改革春风吹满地</h3><h3>新的一年要争气</h3>
</body>

pycharm里面点击重新运行，网页点击刷新（更改一次，就要点击一次重新运行和刷新一次网页），我们就可以看到

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
2.文字更改颜色

<body><h3>改革春风吹满地</h3><h3><span style='color:red;'>新的一年要争气</span></h3>
</body>

就是使用

<span style='color:red;'>内容</span>

效果展示：
在这里插入图片描述
补充说明：

 <div>标签<div>内容</div>，块级标签，一个占一行<span>内容</span>，有多少占多少

五、列表标签
1.带项目符号的

<u1><li>内容</li><li>内容</li><li>内容</li>
</u1>

例如，继续在body里面填充

    <u1><li>七龙珠</li><li>柯南</li><li>成龙历险记</li></u1>

效果展示
在这里插入图片描述
2.带标号的

   <ol><li>联通</li><li>移动</li><li>电信</li></ol>

例如，继续在body里面填充

   <ol><li>神奇宝贝</li><li>妖精的尾巴</li><li>龙猫</li></ol>

效果展示
在这里插入图片描述
六、表格
1.例如：

<table><thead><tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr></thead><tbody><tr> <td>1</td> <td>佩奇</td> <td>5</td> </tr><tr> <td>2</td> <td>乔治</td> <td>3</td> </tr><tr> <td>3</td> <td>猪妈妈</td> <td>28</td> </tr><tr> <td>4</td> <td>猪爸爸</td> <td>30</td> </tr></tbody>
</table>

  <thead><tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr></thead>

这里是表头，表头要设计的内容是放在 之间的，即内容

    <tbody><tr> <td>1</td> <td>佩奇</td> <td>5</td> </tr><tr> <td>2</td> <td>乔治</td> <td>3</td> </tr><tr> <td>3</td> <td>猪妈妈</td> <td>28</td> </tr><tr> <td>4</td> <td>猪爸爸</td> <td>30</td> </tr></tbody>

表格的具体内容，表格的具体填充是放在 之间的，即内容
同样地把代码放在body之间，运行看一下效果。
在这里插入图片描述
2.给表格加上边框。
直接在table后面加上border=“1”，即

<table border="1">

效果展示：
在这里插入图片描述
七、图片
在网页上显示图片的基本操作是

显示别人的图片
<img src="别人的图片网址"/>
显示自己的图片
<img src="自己的图片"/>
自己创建一个目录，里面放文件
设置图片的大小
<img style="height: 100px;width:150px" src="自己的图片"/>

这里我们以显示自己的图片，并且设置图片的大小为例
在该工程下，新建一个static文件夹,用于存放自己所要显示的图片。
在这里插入图片描述
同理，在body里面填充

 <img src="/static/dragoncat.jpg" style="height: 200px;width:300px"/>

在这里插入图片描述
八、超链接
1.给文字设置超链接

 <a href="网址">文字内容</a>

例如：
继续在body里面填充

 <div><a href="https://www.baidu.com/">点击跳转百度搜索</a></div>

（根据本文前面的知识，div就是重新开一行，新的内容占一行）
复制百度的网址填充到网址那里。
运行一下看一下效果。
在这里插入图片描述
点击一下该超链接。
在这里插入图片描述
2.给图片设置超链接
实际上是一个嵌套

<a href="https://cn.bing.com/images/search?q=%e9%be%99%e7%8c%ab&form=HDRSC2&first=1"><img src="/static/dragoncat.jpg" style="height: 200px;width:300px"/></a>

在这里插入图片描述
设置完嵌套后，点击图片即可完成相应的跳转。
在这里插入图片描述
3.不在原来网站上进行跳转，新开一个页面
上面的1.2.都是在本网页上打开一个新网页，那么如何使跳转的网页和本网页分开呢？解决办法是加上target=“_blank”。以图片的超连接跳转为例。

<a href="https://cn.bing.com/images/search?q=%e9%be%99%e7%8c%ab&form=HDRSC2&first=1" target="_blank"><img src="/static/dragoncat.jpg" style="height: 200px;width:300px"/></a>

在这里插入图片描述
这样，两个就可以同时存在了。
九、下拉框

<select><option>内容</option><option>内容</option><option>内容</option>
</select>

例如：

 <select><option>皮卡丘</option><option>可达鸭</option><option>杰尼龟</option></select>

运行效果：
在这里插入图片描述
十、多行文本

<textarea></textarea>

在这里插入图片描述
同时还可以调节文本框的大小，在文本框内是直接可以输入文字的。
在这里插入图片描述
十一、input系列
1.输入文本

<input type="text">

运行效果
在这里插入图片描述
2.输入密码

<input type="password">

运行效果在这里插入图片描述
在这里插入图片描述
3.选择文件

<input type="file">

运行效果：
在这里插入图片描述
会弹出窗口，让你选择本地文件。
4.按钮
（1）button

<input type="button"  value="内容">   普通按钮

（2）submit

<input type="submit"  value="内容">   提交表单

两个按钮在形式上基本一致。

<input type="button"  value="进入">
<input type="submit"  value="进入">

在这里插入图片描述
5.选择框

<input type="radio">

（1）单选框（选项互斥）

<input type="radio" name="n1">男
<input type="radio" name="n1">女

运行效果：
在这里插入图片描述

（2）多选框（选项不互斥）

<input type="checkbox" >皮卡丘
<input type="checkbox" >妙蛙种子
<input type="checkbox" >杰尼龟
<input type="checkbox" >可达鸭

运行效果：
在这里插入图片描述
十二、综合案例
设计一个注册的页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head><body><h1>游戏登陆</h1><div>username:<input type="text"></div><div>password:<input type="password"></div><div>gender:<input type="radio" name="n1">男 <input type="radio" name="n1">女</div><div>role:<input type="checkbox" >皮卡丘<input type="checkbox" >妙蛙种子<input type="checkbox" >杰尼龟<input type="checkbox" >可达鸭</div><div>area:<select><option>魔仙堡</option><option>奇迹大陆</option></select></div><div>ps:<textarea></textarea></div><div><input type="button"  value="enter"><input type="submit"  value="enter"></div></body>
</html>

运行结果：
在这里插入图片描述

相关文章：

网页开发基础——HTML

一、flask框架 Flask是一种轻量级的Python web应用程序框架&#xff0c;可以帮助使用者快速构建Web应用程序和API。由于其简洁、灵活和易于上手的特点&#xff0c;Flask被广泛用于开发小型到中型的Web应用程序和后端API。本次我们主要是使用flask框架&#xff0c;进行一个小型w…...

编程日记 2023/7/28 7:17:23

C# 继承，封装，多态等知识点

一&#xff1a;面向对象的三大特征&#xff1a;继承性&#xff0c;封装性&#xff0c;多态性 1&#xff1a;继承性&#xff1a;继承主要描述是类与类之间的关系&#xff0c;通过继承可以在无需重新编写原有的类的情况下&#xff0c;对原有的类的功能进行扩展。 2&#xff1a;封…...

编程日记 2023/7/28 7:16:22

决策树概述

文章目录 决策树介绍1.介绍**决策树API：**构建决策树的三个步骤决策树的优缺点通过sklearn实现决策树分类并进一步认识决策树2. ID3 决策树1. 信息熵2. 信息增益**定义：****根据信息增益选择特征方法是：****算法：**3. ID3算法步骤4. 例子：3. C4.5 决策树1. 信息增益率计算…...

编程日记 2023/7/28 7:15:21

青枫壁纸小程序V1.4.0（后端SpringBoot）

引言 那么距离上次的更新已经过去了5个多月&#xff0c;期间因为忙着毕业设计的原因&#xff0c;更新的速度变缓了许多。所以&#xff0c;这次的更新无论是界面UI、用户功能、后台功能都有了非常大的区别。希望这次更新可以给用户带来更加好的使用体验 因为热爱&#xff0c;更…...

编程日记 2023/7/28 7:14:20

Error: unknown flag: --export 【k8s，kubernets报错】

报错情况如下&#xff1a; [rootk8smaster ~]# kubectl get deploy nginx -oyaml --export > my2.yaml Error: unknown flag: --export See kubectl get --help for usage.原因&#xff1a; --export在所使用的版本中已被移除 解决&#xff1a;去除--export即可&#xff0c…...

编程日记 2023/7/28 7:13:19

进入linux系统中修改网段-ip

第一步 &#xff1a;开启虚拟机 cd 到 /etc/sysconfig/network-scripts 目录下&#xff0c;输入命令给ls,展示这个目录下文件和文件夹 第二步&#xff1a;进入到以ifcfg开头的文件 # ifcfg开头的文件&#xff0c;如果有多个网卡&#xff0c;有多个ifcfg-ensxx文件 命令…...

编程日记 2023/7/28 7:12:18

通过REST API接口上传Nexus仓库

一、Nexus API文档 API文档链接&#xff1a;Components API 二、上传API接口说明 在Nexus中可以直接调试api接口&#xff0c;url参考&#xff1a;http://localhost:8081/#admin/system/api 三、上传请求案例 $ curl -X POST "http://localhost:8081/service/rest/v1/c…...

编程日记 2023/7/28 7:11:17

Docker镜像端口映射简介及配置指南

目录 引言&#xff1a;什么是端口映射&#xff1f;配置端口映射的步骤&#xff1a;1. 创建Docker镜像&#xff1a;2. 选择要映射的端口&#xff1a;3. 运行容器并进行端口映射&#xff1a;4. 验证端口映射&#xff1a; 示例&#xff1a;结论&#xff1a; 引言&#xff1a; Doc…...

编程日记 2023/7/28 7:10:16

Excel双向柱状图的绘制

Excel双向柱状图在绘制增减比较的时候经常用到&#xff0c;叫法繁多&#xff0c;双向柱状图、上下柱状图、增减柱状图都有。 这里主要介绍一下Excel的基础绘制方法和复杂一点的双向柱状图的绘制 基础双向柱状图的绘制 首先升降的数据如下&#xff1a; 月份上升下降20220359-…...

编程日记 2023/7/28 7:09:14

Linux6.17 Docker 安全及日志管理

文章目录 计算机系统5G云计算第四章 LINUX Docker 安全及日志管理一、Docker 容器与虚拟机的区别1.隔离与共享2.性能与损耗 二、Docker 存在的安全问题1.Docker 自身漏洞2.Docker 源码问题 三、Docker 架构缺陷与安全机制1.容器之间的局域网攻击2.DDoS 攻击耗尽资源3.有漏洞的系…...

编程日记 2023/7/28 7:08:13

学好Elasticsearch系列-索引的CRUD

本文已收录至Github&#xff0c;推荐阅读 &#x1f449; Java随想录 文章目录 创建索引删除索引查询数据添加 & 更新数据cat命令公共参数 常用命令aliases 显示别名allocation 显示每个节点的分片数和磁盘使用情况count 显示整个集群或者索引的文档个数fielddata 显示每个节…...

编程日记 2023/7/28 7:07:11

Python - OpenCV机器视觉库的简单使用经验

OpenCV是一个开源的计算机视觉库&#xff0c;它支持多种编程语言&#xff0c;包括Python。下面是Python 3中OpenCV的详细解析&#xff1a; 安装OpenCV 在Python 3中安装OpenCV&#xff0c;可以使用pip命令来安装。例如&#xff0c;在终端中输入以下命令&#xff1a; pip ins…...

编程日记 2023/7/28 7:06:07

【计算机网络 01】说在前面 信息服务 因特网 ISP RFC技术文档 边缘与核心 交换方式 定义与分类 网络性能指标 计算机网络体系结构 章节小结

第一章--概述 说在前面1.1 计算机网络 信息时代作用1.2 因特网概述1.3 三种交换方式1.4 计算机网络 定义与分类1.5 计算机网络的性能指标1.6 计算机网络体系结构1 常见的计算机网络体系结构2 计算机网络体系结构分层的必要性3 计算机网络体系结构分层思想举例4 计算机网络体系结…...

编程日记 2023/7/28 7:05:06

POI信息点的diPointX、diPointY转化成经纬度

需求&#xff1a;接口返回某个地点的数据&#xff08;diPointX、diPointY&#xff09;&#xff0c;前端需把该地点转化成经纬度形式在地图上进行Marker标记。 实现&#xff1a;&#xff08;查找百度地图开发文档&#xff09; 代码验证&#xff1a; console.log(new BMap.Merca…...

编程日记 2023/7/28 7:04:05

虚拟机（VMware）安装Linux（Ubuntu）安装教程

清华大学开源网站镜像站网址&#xff1a;清华大学开源软件镜像站 | Tsinghua Open Source Mirror 进入之后在搜索框中搜索“ubuntu” 直接点击箭头所指的蓝色字体“ubuntu-20.04.1-desktop-amd64.iso”即可下载...

编程日记 2023/7/28 7:03:04

linux系统下（centos7.9）安装Jenkins全流程

一、卸载历史版本 # rpm卸载 rpm -e jenkins# 检查是否卸载成功 rpm -ql jenkins# 彻底删除残留文件 find / -iname jenkins | xargs -n 1000 rm -rf二、环境依赖安装 yum -y install epel-releaseyum -y install daemonize三、安装Jenkins Jenkins官网传送带&#xff1a; …...

编程日记 2023/7/28 7:02:02

Java版知识付费源码 Spring Cloud+Spring Boot+Mybatis+uniapp+前后端分离实现知识付费平台

提供职业教育、企业培训、知识付费系统搭建服务。系统功能包含&#xff1a;录播课、直播课、题库、营销、公司组织架构、员工入职培训等。 提供私有化部署&#xff0c;免费售后&#xff0c;专业技术指导&#xff0c;支持PC、APP、H5、小程序多终端同步&#xff0c;支持二次开发…...

编程日记 2023/7/28 7:01:01

[OnWork.Tools]系列 01-简介

说明 OnWork.Tools 是基于 Net6 的桌面程序。支持Windows7SP1及以上系统&#xff0c;主要是日常办公或者是开发工作过程中常用的工具集合。界面使用WPF Mvvm模式开发&#xff0c;目的是将开源项目中&#xff0c;好用的项目集成到一起&#xff0c;方便大家使用和学习。 功能 …...

编程日记 2023/7/28 6:59:58

神码ai火车头伪原创设置【php源码】

大家好&#xff0c;给大家分享一下python考什么内容&#xff0c;很多人还不知道这一点。下面详细解释一下。现在让我们来看看&#xff01; 火车头采集ai伪原创插件截图&#xff1a; 1、Python 计算机二级都考什么 Python要到什么程度 考试内容 一、Python语言的基本语法元素…...

编程日记 2023/7/28 6:58:57

QEMU源码全解析15 —— QOM介绍（4）

接前一篇文章&#xff1a;QEMU源码全解析14 —— QOM介绍&#xff08;3&#xff09; 本文内容参考&#xff1a; 《趣谈Linux操作系统》 —— 刘超&#xff0c;极客时间 《QEMU/KVM》源码解析与应用 —— 李强&#xff0c;机械工业出版社 特此致谢&#xff01; 上一回讲到pci…...

编程日记 2023/7/28 6:57:55

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2025/10/25 8:00:21

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2025/10/30 12:48:27

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/10/20 5:24:23

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/10/19 8:14:08

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

编程新知 2025/11/1 0:56:40

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2025/11/1 15:26:54

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/10/13 2:26:14

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

编程新知 2025/9/27 18:25:59

RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

编程新知 2025/11/2 7:50:40

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

编程新知 2025/11/3 2:08:32