前端 html页面中各个元素介绍 head、body

HTML 文档中，<head> 和 <body> 是两个主要的部分

<head> 元素

  • 作用：包含文档的元数据(metadata)，不会直接显示在页面中

  • 包含内容：

    • 文档标题 (<title>)

    • 字符集声明 (<meta charset="utf-8">)

    • 视口设置 (<meta name="viewport">)

    • 样式表链接 (<link rel="stylesheet">)

    • JavaScript 文件链接 (<script src="">)

    • 网站图标 (<link rel="icon">)

    • SEO 相关的元数据 (<meta name="description"> 等)

    • 其他不会直接显示的信息

<body> 元素

  • 作用：包含所有在浏览器中可见的内容

  • 包含内容：

    • 文本内容

    • 图片 (<img>)

    • 链接 (<a>)

    • 表格 (<table>)

    • 列表 (<ul>, <ol>)

    • 表单 (<form>)

    • 多媒体内容

    • 所有用户可见的 HTML 元素

区别：

可见性：head 内容不可见(除了 title，title在浏览器框上可见)，body 内容可见

功能：head 用于定义文档属性和资源，body 用于定义文档内容

html页面中的常用关键字：

一、文档结构关键字

  1. <!DOCTYPE html> - 声明文档类型为HTML5

  2. <html> - HTML文档的根元素

  3. <head> - 包含文档的元数据(metadata)

  4. <title> - 定义浏览器标签页标题

  5. <meta> - 提供文档的元数据(如字符集、视口设置等)

  6. <body> - 包含文档的可见内容

二、内容与排版标签

文本相关

  1. <h1>到<h6> - 定义标题(1级到6级)

  2. <p> - 定义段落

  3. <span> - 行内文本容器(无语义)

  4. <div> - 块级容器(无语义)

  5. <br> - 插入换行符

  6. <hr> - 创建水平分隔线

  7. <strong> - 表示重要文本(默认加粗)

  8. <em> - 表示强调文本(默认斜体)

  9. <u> - 定义下划线文本

  10. <del> - 定义删除文本

  11. <sup> - 上标文本

  12. <sub> - 下标文本

多媒体

  1. <img> - 嵌入图像

  • src - 图像URL

  • alt - 替代文本

  • width/height - 尺寸

  1. <video> - 嵌入视频

  2. <audio> - 嵌入音频

  3. <iframe> - 嵌入另一个HTML页面

三、链接与导航

  1. <a> - 创建超链接

  • href - 链接目标URL

  • target - 打开方式(_blank为新窗口)

  1. <nav> - 定义导航链接区域

四、列表

  1. <ul> - 无序列表

  2. <ol> - 有序列表

  3. <li> - 列表项

  4. <dl> - 定义列表

  5. <dt> - 定义术语

  6. <dd> - 定义描述

五、表格

  1. <table> - 定义表格

  2. <tr> - 表格行

  3. <th> - 表头单元格

  4. <td> - 表格数据单元格

  5. <caption> - 表格标题

  6. <thead>/<tbody>/<tfoot> - 表格分区

六、表单元素

  1. <form> - 定义表单容器

  • action - 提交地址

  • method - 提交方法(GET/POST)

  1. <input> - 输入控件

  • type - 类型(text,password,email,number,checkbox,radio等)

  • name - 字段名称

  • value - 默认值

  • placeholder - 占位文本

  • required - 必填项

  1. <textarea> - 多行文本输入

  2. <select> - 下拉选择框

  3. <option> - 下拉选项

  4. <button> - 可点击按钮

  5. <label> - 表单标签(与输入关联)

  6. <fieldset> - 表单分组

  7. <legend> - 分组标题

七、语义化标签(HTML5)

  1. <header> - 页眉/区块头

  2. <footer> - 页脚/区块尾

  3. <article> - 独立内容块

  4. <section> - 文档章节

  5. <aside> - 侧边栏/附属内容

  6. <main> - 文档主要内容

  7. <figure> - 独立内容(如图像)

  8. <figcaption> - 图/表标题

  9. <time> - 日期/时间

八、元数据与资源

  1. <link> - 链接外部资源

  • rel="stylesheet" - CSS样式表

  • rel="icon" - 网站图标

  1. <script> - 嵌入或引用JavaScript

  • src - 脚本URL

  • async/defer - 加载方式

  1. <style> - 内嵌CSS样式

  2. <meta charset="UTF-8"> - 字符编码声明

  3. <meta name="viewport" content="width=device-width, initial-scale=1.0"> - 移动端视口设置

九、全局属性

  1. id - 元素唯一标识

  2. class - 元素类名(用于CSS/JS选择)

  3. style - 内联样式

  4. title - 额外信息(工具提示)

  5. data-* - 自定义数据属性

  6. hidden - 隐藏元素

  7. lang - 语言定义

案例：

image

 

前端html页面：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大模型交互界面</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <style>
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            color: #2c3e50;
        }
        .input-section {
            margin-bottom: 20px;
        }
        textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            min-height: 100px;
            resize: vertical;
            font-size: 16px;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 10px;
        }
        button:hover {
            background-color: #2980b9;
        }
        button:disabled {
            background-color: #95a5a6;
            cursor: not-allowed;
        }
        .output-section {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            min-height: 150px;
            background-color: #f9f9f9;
        }
        .loading {
            color: #7f8c8d;
            font-style: italic;
        }
        .error {
            color: #e74c3c;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>大模型交互界面</h1>

        <div class="input-section">
            <textarea id="userInput" placeholder="请输入您的问题或指令..."></textarea>
            <button id="submitBtn">生成响应</button>
        </div>

        <div class="output-section" id="output">
            <p>大模型的响应将显示在这里...</p>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const submitBtn = document.getElementById('submitBtn');
            const userInput = document.getElementById('userInput');
            const outputDiv = document.getElementById('output');

            submitBtn.addEventListener('click', async function() {
                const inputText = userInput.value.trim();

                if (!inputText) {
                    outputDiv.innerHTML = '<p class="error">请输入有效内容</p>';
                    return;
                }

                // 禁用按钮，防止重复提交
                submitBtn.disabled = true;
                outputDiv.innerHTML = '<p class="loading">大模型正在思考，请稍候...</p>';

                try {
                    const response = await fetch('/api/generate', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({ input: inputText })
                    });

                    if (!response.ok) {
                        throw new Error('网络响应不正常');
                    }

                    const data = await response.json();
                    outputDiv.innerHTML = `<p>${data.response}</p>`;
                } catch (error) {
                    outputDiv.innerHTML = `<p class="error">发生错误: ${error.message}</p>`;
                } finally {
                    submitBtn.disabled = false;
                }
            });

            // 允许按Enter键提交（Shift+Enter换行）
            userInput.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    submitBtn.click();
                }
            });
        });
    </script>
</body>
</html>

后端flask应用：

from flask import Flask, render_template, request, jsonify
import time  # 用于模拟处理延迟

app = Flask(__name__)


# 静态模板渲染
@app.route('/')
def home():
    return render_template('index2.html')


@app.route('/api/generate', methods=['POST'])
def generate_response():
    data = request.json
    user_input = data.get('input', '')

    # 这里应该是调用大模型生成响应的逻辑
    # 为了演示，我们模拟一个简单的响应和延迟
    time.sleep(1)  # 模拟处理时间

    # 模拟大模型响应
    response = f"这是大模型对您输入 '{user_input}' 的响应。在实际应用中，这里会是大模型生成的文本。"

    return jsonify({'response': response})


if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=5000)

 

posted @ 2025-08-14 11:24  wangssd  阅读(137)  评论(0)    收藏  举报