以下是一个简单的编程学习网站示例代码，使用 Python Flask + HTML/CSS + JavaScript 实现基础功能_以下是一个简单的锤击桩施工方案网页代码模板(html+css),包含图文布局框架,您-优快云博客

# app.py (后端)
from flask import Flask, render_template

app = Flask(__name__)

# 模拟课程数据
courses = [
    {
        'id': 1,
        'title': 'Python 基础',
        'description': '学习Python编程基础',
        'content': '''
            <h3>变量与数据类型</h3>
            <pre><code class="language-python">
            # 变量示例
            name = "Alice"
            age = 25
            print(f"姓名: {name}, 年龄: {age}")
            </code></pre>
        '''
    },
    {
        'id': 2,
        'title': 'Web 开发',
        'description': 'HTML/CSS/JavaScript基础',
        'content': '''
            <h3>HTML基础</h3>
            <pre><code class="language-html">
            &lt;!DOCTYPE html&gt;
            &lt;h1&gt;Hello World&lt;/h1&gt;
            </code></pre>
        '''
    }
]

@app.route('/')
def home():
    return render_template('index.html', courses=courses)

@app.route('/course/<int:course_id>')
def course(course_id):
    course = next((c for c in courses if c['id'] == course_id), None)
    return render_template('course.html', course=course)

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

<!-- templates/index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>编程学习网</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/prism.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar bg-dark navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="/">编程学习</a>
        </div>
    </nav>

    <div class="container mt-4">
        <h1>课程列表</h1>
        <div class="row">
            {% for course in courses %}
            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">{{ course.title }}</h5>
                        <p class="card-text">{{ course.description }}</p>
                        <a href="/course/{{ course.id }}" class="btn btn-primary">开始学习</a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    <script src="/static/js/prism.js"></script>
</body>
</html>

<!-- templates/course.html -->
<!DOCTYPE html>
<html>
<head>
    <title>{{ course.title }}</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/prism.css" rel="stylesheet">
    <style>
        .editor {
            height: 300px;
            border: 1px solid #ccc;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <nav class="navbar bg-dark navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="/">编程学习</a>
        </div>
    </nav>

    <div class="container mt-4">
        <div class="row">
            <div class="col-md-8">
                {{ course.content|safe }}
            </div>
            <div class="col-md-4">
                <h4>在线练习</h4>
                <div id="editor" class="editor"></div>
                <button class="btn btn-success" onclick="runCode()">运行代码</button>
                <div id="output" class="mt-3"></div>
            </div>
        </div>
    </div>

    <script src="/static/js/prism.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
    <script>
        // 初始化代码编辑器
        const editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.session.setMode("ace/mode/python");

        // 运行代码
        function runCode() {
            const code = editor.getValue();
            try {
                const output = eval(code);  // 注意：实际项目应使用安全的方式执行代码
                document.getElementById('output').innerHTML = 
                    `<pre>${JSON.stringify(output, null, 2)}</pre>`;
            } catch (error) {
                document.getElementById('output').innerHTML = 
                    `<div class="text-danger">${error}</div>`;
            }
        }
    </script>
</body>
</html>

需要创建以下目录结构：

project/
├── app.py
├── static/
│   ├── css/
│   │   └── prism.css
│   └── js/
│       └── prism.js
└── templates/
    ├── index.html
    └── course.html

功能特点：