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

【03.04】大数据教程--html+css基础

news 文章来源：https://blog.csdn.net/IamBird/article/details/130964439 2025/5/11 10:53:26

当谈到大数据时，HTML和CSS可能并不是最相关的技术。HTML和CSS主要用于构建网页和应用程序的用户界面，而大数据则涉及处理和分析大规模数据集。但是，如果您想展示有关大数据的信息或结果，并在网页上呈现，那么HTML和CSS可以用于创建具有吸引力和交互性的数据可视化。

以下是一个基础示例，展示如何使用Python生成一些模拟的大数据，并将其以表格和图表的形式在网页上呈现。我们将使用Flask作为Python的Web框架来创建一个简单的服务器，并使用HTML和CSS来呈现数据。

步骤1：安装必要的库

首先，确保您已经安装了Python和Flask。在命令行中运行以下命令安装Flask：

pip install flask

步骤2：创建一个Flask应用

创建一个名为app.py的Python文件，并在其中添加以下内容：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    data = [
        {'name': 'John', 'age': 25, 'country': 'USA'},
        {'name': 'Emma', 'age': 32, 'country': 'Canada'},
        {'name': 'Li', 'age': 28, 'country': 'China'},
        {'name': 'Anna', 'age': 30, 'country': 'Germany'},
    ]
    return render_template('index.html', data=data)

if __name__ == '__main__':
    app.run(debug=True)

上述代码创建了一个简单的Flask应用，并定义了一个名为index的路由。在该路由函数中，我们创建了一个包含一些模拟数据的Python列表，并将其作为参数传递给render_template函数。

步骤3：创建HTML模板

创建一个名为index.html的HTML文件，并在其中添加以下内容：

<!DOCTYPE html>
<html>
<head>
    <title>Big Data Visualization</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <h1>Big Data Visualization</h1>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Country</th>
            </tr>
        </thead>
        <tbody>
            {% for item in data %}
            <tr>
                <td>{{ item.name }}</td>
                <td>{{ item.age }}</td>
                <td>{{ item.country }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <div id="chart"></div>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script>
        var data = [
            {x: ['John', 'Emma', 'Li', 'Anna'], y: [25, 32, 28, 30], type: 'bar'}
        ];
        Plotly.newPlot('chart', data);
    </script>
</body>
</html>

上述代码

定义了一个简单的HTML模板。在<table>元素中，我们使用了一个for循环来迭代数据，并在表格中显示每个数据项的属性。在<div>元素中，我们使用了Plotly库来创建一个简单的柱状图，图表数据直接写在JavaScript中。

步骤4：创建CSS样式表

创建一个名为styles.css的CSS文件，并在其中添加以下内容：

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
}

th {
    background-color: #f2f2f2;
}

h1 {
    text-align: center;
}

#chart {
    width: 400px;
    height: 300px;
    margin: 0 auto;
}

上述代码定义了一些基本的CSS样式，用于美化表格和图表。

步骤5：运行应用

在命令行中运行以下命令来启动Flask应用：

python app.py

Flask应用将在本地主机上的默认端口（通常是http://127.0.0.1:5000/）启动。

本文由 mdnice 多平台发布

相关文章：

【03.04】大数据教程--html+css基础

当谈到大数据时&#xff0c;HTML和CSS可能并不是最相关的技术。HTML和CSS主要用于构建网页和应用程序的用户界面&#xff0c;而大数据则涉及处理和分析大规模数据集。但是&#xff0c;如果您想展示有关大数据的信息或结果&#xff0c;并在网页上呈现&#xff0c;那么HTML和CSS可…...

编程日记 2023/6/4 8:19:13

深入理解与实践Seata：分布式事务解决方案

✅作者简介&#xff1a;热爱Java后端开发的一名学习者&#xff0c;大家可以跟我一起讨论各种问题喔。 &#x1f34e;个人主页&#xff1a;Hhzzy99 &#x1f34a;个人信条&#xff1a;坚持就是胜利&#xff01; &#x1f49e;当前专栏&#xff1a;微服务 &#x1f96d;本文内容&…...

编程日记 2023/6/4 8:14:12

Python学习笔记 - 探索元组Tuple的使用

欢迎各位&#xff0c;我是Mr数据杨&#xff0c;你们的Python导游。今天&#xff0c;我要为大家讲解一段特殊的旅程&#xff0c;它与《三国演义》有关&#xff0c;而我们的主角是元组&#xff08;tuple&#xff09;。 让我们想象这样一个场景&#xff0c;三国演义中的诸葛亮&am…...

编程日记 2023/6/4 8:09:10

JAVA网络编程（一）

一、什么是网络编程 定义&#xff1a;在网络通信协议下&#xff0c;不同计算机上运行的程序&#xff0c;进行的数据传输。 应用场景&#xff1a;即时通信&#xff0c;网游&#xff0c;邮件等 不管什么场景&#xff0c;都是计算机与计算机之间通过网络在进行数据传输 java提供一…...

编程日记 2023/6/4 8:04:09

Python 线程队列

文章目录 Python 中的线程在 Python 中使用队列限制线程 本篇文章将介绍限制 Python 中的活动线程数。 Python 中的线程 Python 中的线程允许多个执行线程在单个进程中同时运行。 每个线程独立于其他线程运行&#xff0c;允许并发执行并提高性能。 线程对于执行受 I/O 限制或…...

编程日记 2023/6/4 7:59:08

创建web后端程序(servlet程序搭建)

目录 一、Servlet概述 二、创建servlet程序 1.创建类继承HttpServlet 2.重写HttpServlet类中 service、destroy、init方法 3.重新启动服务器 一、Servlet概述 Server Applet的简称&#xff0c;用Java编写的服务器端的程序。它运行在web服务器中&#xff0c;web服务器负责…...

编程日记 2023/6/4 7:54:07

【章节1】git commit规范 + husky + lint-staged实现commit的时候格式化代码

创建项目我们不多说&#xff0c;可以选择默认的&#xff0c;也可以用你们现有的项目。注意章节1和章节2请一起看&#xff01; 章节1: commit规范 husky lint-staged格式化代码 章节2: husky 检测是否有未解决的冲突 预检查debugger 自动检查是否符合commit规范 前言&#x…...

编程日记 2023/6/4 7:49:06

【入门】拐角III

【入门】拐角III Description 输入整数N&#xff0c;输出相应方阵。 Input 一个整数N。&#xff08; 0 < n < 10 ) Output 一个方阵&#xff0c;每个数字的场宽为3。 Sample Input 1 5 Sample Output 1 5 5 5 5 55 4 4 4 45 4 3 3 35 4 3 2 25 4…...

编程日记 2023/6/4 7:44:05

如何使用 Fail2ban 防止对 Linux 的暴力攻击？

在当今数字化世界中&#xff0c;网络安全成为了一个极其重要的话题。Linux 作为一种广泛使用的操作系统&#xff0c;也面临着各种网络攻击的风险&#xff0c;包括暴力攻击、密码破解和恶意登录等。为了保护 Linux 系统的安全&#xff0c;我们可以使用 Fail2ban 这样的工具来防止…...

编程日记 2023/6/4 7:39:04

2023年，真的别裸辞....

作为IT行业的大热岗位——软件测试&#xff0c;只要你付出了&#xff0c;就会有回报。说它作为IT热门岗位之一是完全不虚的。可能很多人回说软件测试是吃青春饭的&#xff0c;但放眼望去&#xff0c;哪个工作不是这样的呢&#xff1f;会有哪家公司愿意养一些闲人呢&#xff1f;…...

编程日记 2023/6/4 7:34:02

规则引擎架构-基于easy-rules

目录 概念理解实例和编码抽象出2条规则简单的规则引擎事实1的处理事实2的处理 easy-rules 规则的抽象和执行事实描述规则的抽象默认的规则 动态代理执行规则和动作规则的执行&#xff1a;org.jeasy.rules.core.DefaultRulesEngine#doFirepublic class RuleProxy implements Inv…...

编程日记 2023/6/4 7:29:00

【数据结构】第七周

目录 稀疏矩阵快速转置 三元组的矩阵加法 九宫格数独游戏 数组主元素 螺旋数字矩阵 蛇形矩阵 数组循环右移K位 稀疏矩阵快速转置 【问题描述】 稀疏矩阵的存储不宜用二维数组存储每个元素&#xff0c;那样的话会浪费很多的存储空间。所以可以使用一个一维数组存…...

编程日记 2023/6/4 7:23:59

人体三维重构论文集合：awesome 3d human reconstruction

A curated list of related resources for 3d human reconstruction. Your contributions are welcome! Contents papers AIGCnerf or pifugeo fusionphoto3D human whole body3D human...

编程日记 2023/6/4 7:18:58

揭秘Redis持久化原理，探索fork与Copy-on-Write的魔法！

大家好&#xff0c;我是小米&#xff0c;今天我将和大家一起探索Redis持久化原理中的两个关键概念&#xff1a;fork和Copy-on-Write。这两个概念对于理解Redis的数据持久化机制至关重要。让我们一起来揭开这些技术的神秘面纱吧&#xff01; Redis持久化简介 在开始之前&#…...

编程日记 2023/6/4 7:13:57

应届生如何提高职场竞争能力

摘要&#xff1a; 应届生面对竞争激烈的职场&#xff0c;需要不断提高自身的职业素养和竞争能力&#xff0c;才能在激烈的竞争中脱颖而出。本文从积极心态的培养、专业知识的优化、职业规划的制定、团队协作的加强和自我拓展的开展五个方面&#xff0c;提出了提高应届生职场竞争…...

编程日记 2023/6/4 7:08:56

ISIS 实验

(1)拓扑图 2&#xff09;需求&#xff1a; -实现PC1和PC2的通信 3&#xff09;配置步骤&#xff1a; -配置接口IP地址 -开启ISIS---类似于在OSPF中创建进程 -配置NET地址---类似于在OSPF中创建区域&#xff0c;指定Router-id -在接口上启用ISIS--类似于在OSPFv2中用ne…...

编程日记 2023/6/4 7:03:55

国产系统：麒麟之人大金仓数据库部署

一、基本信息和资源 1.1 查看服务器信息 [root7PGxjKPL4 ~]# cat /etc/*release Kylin Linux Advanced Server release V10 (Sword) DISTRIB_IDKylin DISTRIB_RELEASEV10 DISTRIB_CODENAMEjuniper DISTRIB_DESCRIPTION"Kylin V10" DISTRIB_KYLIN_RELEASEV10 DISTRI…...

编程日记 2023/6/4 6:58:53

flink1.17.0 集成kafka，并且计算

前言 flink是实时计算的重要集成组件&#xff0c;这里演示如何集成&#xff0c;并且使用一个小例子。例子是kafka输入消息&#xff0c;用逗号隔开&#xff0c;统计每个相同单词出现的次数&#xff0c;这么一个功能。 一、kafka环境准备 1.1 启动kafka 这里我使用的kafka版本…...

编程日记 2023/6/4 6:53:52

【华为OD机试】数组组成的最小数字【2023 B卷|100分】

【华为OD机试】-真题 !!点这里！！ 【华为OD机试】真题考点分类 !!点这里 !! 题目描述： 给定一个整型数组，请从该数组中选择3个元素组成最小数字并输出 （如果数组长度小于3，则选择数组中所有元素来组成最小数字）。 输入描述： 一行用半角逗号分割的字符串记录的整型数…...

编程日记 2023/6/4 6:48:51

Exponential Loss 中的关于indicator 函数的一个恒等式

− x y 2 I ( x ≠ y ) − 1 -xy2\mathbf{ I}(x \ne y)-1 −xy2I(xy)−1 其中 I \mathbf{ I} I 是 indicator 函数&#xff0c; 定义域 为True &#xff0c;函数值为 1 反之为 0 x,y 都 可以取值 {-1,1} 证明过程见下表&#xff1a; xy左式右式-1-1-1-111-1-1-11111-111...

编程日记 2023/6/4 6:43:49

【机器学习】浅析过拟合

过度拟合 我们来想象如下一个场景&#xff1a;我们准备了10000张西瓜的照片让算法训练识别西瓜图像&#xff0c;但是这 10000张西瓜的图片都是有瓜梗的&#xff0c;算法在拟合西瓜的特征的时候&#xff0c;将西瓜带瓜梗当作了一个一般性的特征。此时出现一张没有瓜梗的西瓜照片…...

编程日记 2023/6/4 6:38:48

尝试在UNet的不同位置添加SE模块

目录 &#xff08;1&#xff09;se-unet01&#xff08;在卷积后&#xff0c;下采样前&#xff0c;添加SE模块&#xff09; &#xff08;2&#xff09;se-unet02&#xff08;在卷积后&#xff0c;上采样前&#xff0c;添加SE模块&#xff09; &#xff08;3&#xff09;se-un…...

编程日记 2023/6/4 6:33:47

JVM垃圾回收篇之相关概念和算法

垃圾回收相关概念 什么是垃圾 垃圾就是指在运行程序中没有任何指针指向的对象,这个对象就是需要被回收掉的垃圾,如果不及时进行清理,越积越多就会导致内存溢出. 为什么需要GC 不进行回收,早晚会导致内存溢出,Java自动管理垃圾回收,不需要开发人员手动干预,这就有可能导致开…...

编程日记 2023/6/4 6:28:47

（学习日记）2023.04.27

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…...

编程日记 2023/6/4 6:23:45

亚马逊CPC广告每日该怎么调整？

01 CPC广告需要每日调整吗&#xff1f; 其实&#xff0c;亚马逊广告是不建议每天都做过多调整的。 为什么呢&#xff1f;调整太频繁了&#xff0c;看不到每天调整的结果是不是&#xff1f; 什么时候需要调整呢&#xff1f; 就是广告指标&#xff0c;比如说曝光、点击、转化率情…...

编程日记 2023/6/4 6:18:44

ffmpeg下载及ffmpy3安装使用

ffmpeg下载及ffmpy3安装使用 1.下载ffmpeg 进入网址&#xff1a;https://www.gyan.dev/ffmpeg/builds/ 在release builds中下载ffmpeg-release-full.7z 下载好后解压到自己想存放的目录&#xff0c;例如&#xff1a;D:\Tool\ffmpeg-6.0-full_build 2.配置环境变量 右键此电…...

编程日记 2023/6/4 6:13:44

设计模式之~原型模式

定义&#xff1a;用原型实例指导创建对象的种类&#xff0c;并且通过拷贝这些原型创建新的对象。原型模式其实就是从一个对象再创建另外一个可定制的对象&#xff0c;而且不需知道任何创建的细节。 优点&#xff1a; 一般在初始化的信息不发生变化的情况下&#xff0c;克隆是最…...

编程日记 2023/6/4 6:08:42

多传感器融合SLAM --- 8.LIO-SAM基础知识解读

目录 1 惯性测量单元简介及预积分 1.1 IMU 器件介绍及选型建议 1.2 IMU状态传递方程...

编程日记 2023/6/4 6:03:41

多模态大模型时代下的文档图像智能分析与处理

多模态大模型时代下的文档图像智能分析与处理 0. 前言1. 人工智能发展历程1.1 传统机器学习1.2 深度学习1.3 多模态大模型时代 2. CCIG 文档图像智能分析与处理论坛2.1 文档图像智能分析与处理的重要性和挑战2.2 文档图像智能分析与处理高峰论坛2.3 走进合合信息 3. 文档图像智…...

编程日记 2023/6/4 5:58:40

SAP-MM-内向外向交货单

1、内向&外向交货单概念 外向交货&#xff08;outbound delivery&#xff09;是用在客户与企业之间的交货单&#xff0c;而内向交货&#xff08;inbound delivery&#xff09;则是用在供应商与企业之间的交货单&#xff1b;换言之&#xff0c;外向交货多用于SD 模块&#…...

编程日记 2023/6/4 5:53:38