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

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

news 2025/7/10 8:23:20

当谈到大数据时，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

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2025/7/9 7:21:59

进程地址空间（比特课总结）

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

编程新知 2025/7/9 17:20:48

React Native 导航系统实战（React Navigation）

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

编程新知 2025/6/21 7:48:44

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/6/27 0:59:29

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

编程新知 2025/7/9 10:44:55

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

编程新知 2025/7/9 1:18:48

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2025/7/4 8:53:19

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/7/9 17:51:06

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

编程新知 2025/6/21 6:23:38

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

编程新知 2025/7/10 2:41:09