分类 html 下的文章

【Node.js实战】一文带你开发博客项目之联调（导入HTML、Nginx反向代理、CORS解决跨域、与前端联调）

2024-08-08




// 导入必要的模块
const express = require('express');
const path = require('path');
const fs = require('fs');
const app = express();
 
// 设置静态文件目录
app.use(express.static('public'));
 
// 导入HTML文件
fs.readFile('routes/index.html', 'utf8', (err, html) => {
  if (err) {
    console.error('读取文件出错:', err);
    return;
  }
  app.get('/', (req, res) => {
    res.send(html);
  });
});
 
// 设置Nginx反向代理
app.all('/api/*', (req, res) => {
  // 假设Nginx运行在localhost的80端口
  req.pipe(request(req)).pipe(res);
});
 
// 设置CORS头部支持跨域请求
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});
 
// 监听3000端口
app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000/');
});

这段代码示例展示了如何在Node.js的Express框架中设置静态文件目录、导入HTML文件、配置Nginx反向代理以及处理CORS问题。在实际开发中，这些技术和实践都非常有用，并且是构建现代Web应用的标准做法。

- 阅读更多 -

流式 HTML – 无需 JavaScript 即可实现异步 DOM 更新

System

2024-08-08

所有,html

流式 HTML 是一种技术，它允许你在不使用 JavaScript 的情况下，异步更新 DOM。这是通过 HTML 中的 async 属性以及一些特殊的自定义元素实现的。

以下是一个简单的例子，展示如何使用流式 HTML 来异步更新 DOM：




<!DOCTYPE html>
<html>
<head>
    <title>Streaming HTML Example</title>
</head>
<body>
    <h1>流式 HTML 更新 DOM 示例</h1>
    <async-content>
        <!-- 在这里插入异步加载的内容 -->
    </async-content>
 
    <script>
        // 自定义元素的构造函数
        class AsyncContent extends HTMLElement {
            constructor() {
                super();
                // 创建一个 Shadow DOM
                const shadow = this.attachShadow({mode: 'open'});
                // 添加一个模板
                const template = document.createElement('template');
                template.innerHTML = `
                    <style>
                        p { color: blue; }
                    </style>
                    <p>加载中...</p>
                `;
                shadow.appendChild(template.content.cloneNode(true));
                
                // 异步获取内容并更新 DOM
                fetch('content.html')
                    .then(response => response.text())
                    .then(htmlContent => {
                        shadow.querySelector('p').innerHTML = htmlContent;
                    })
                    .catch(error => {
                        console.error('Error fetching content:', error);
                        shadow.querySelector('p').textContent = '内容加载失败';
                    });
            }
        }
 
        // 定义自定义元素
        customElements.define('async-content', AsyncContent);
    </script>
</body>
</html>

在这个例子中，我们定义了一个名为 async-content 的自定义元素，并在其构造函数中创建了一个 Shadow DOM。我们还添加了一个模板，其中包含加载时显示的文本。接着，我们使用 fetch API 异步获取外部内容，并在成功获取后更新 Shadow DOM 中的 <p> 元素的内容。如果获取过程中出现错误，我们会在 <p> 元素中显示错误信息。这个例子展示了如何使用流式 HTML 技术和自定义元素来实现 DOM 的异步更新，而无需 JavaScript。

- 阅读更多 -

HTML中 video标签样式铺满全屏

System

2024-08-08

所有,html

要使HTML中的<video>标签样式铺满全屏，可以使用CSS样式。以下是实现该效果的示例代码：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Fullscreen</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 确保视频内容覆盖整个视频元素 */
  }
</style>
</head>
<body>
<video controls autoplay muted loop>
  <source src="your-video-file.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
</body>
</html>

在这个例子中，<video>元素被赋予了width: 100%;和height: 100%;样式，使其铺满整个屏幕。object-fit: cover;样式确保视频内容能够覆盖整个视频元素，同时保持视频的宽高比。这样，当用户打开页面时，视频就会自动播放并铺满整个屏幕。

System

2024-08-08

所有,html




import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.Context;
import org.thymeleaf.templateresolver.ServletContextTemplateResolver;
import javax.servlet.http.HttpServletResponse;
import java.io.ByteArrayInputStream;
import java.io.InputStream;
import java.io.OutputStream;
 
@Controller
public class PdfController {
 
    private TemplateEngine templateEngine;
 
    public PdfController() {
        ServletContextTemplateResolver templateResolver = new ServletContextTemplateResolver();
        templateResolver.setPrefix("/WEB-INF/templates/");
        templateResolver.setSuffix(".html");
        templateResolver.setTemplateMode("HTML5");
        this.templateEngine = new TemplateEngine();
        this.templateEngine.setTemplateResolver(templateResolver);
    }
 
    @GetMapping("/generate-pdf")
    public void generatePdf(HttpServletResponse response) throws Exception {
        // 设置响应头
        response.setContentType("application/pdf");
        response.setHeader("Content-Disposition", "attachment; filename=\"example.pdf\"");
 
        // 创建输出流
        OutputStream os = response.getOutputStream();
 
        // 创建一个书写器
        PdfWriter writer = new PdfWriter(os);
 
        // 引入FontProvider来支持中文
        FontProvider fontProvider = new FontProvider();
        fontProvider.addFont("STSongStd-Light", "UniGB-UCS2-H", "UniGB-UCS2-V");
 
        // 文档属性
        PdfDocument pdf = new PdfDocument(writer);
        Document document = new Document(pdf, PageSize.A4);
 
        // 创建上下文
        Context context = new Context();
        context.setVariable("name", "世界");
 
        // 渲染HTML模板
        String htmlContent = templateEngine.process("templateName", context);
 
        // 将HTML转换为PDF
        ConverterProperties converterProperties = new ConverterProperties();
        converterProperties.setFontProvider(fontProvider);
        HtmlConverter.convertToPdf(htmlContent, pdf, converterProperties);
 
        // 关闭文档和流
        document.close();
        os.close();
    }
}

在这个代码实例中，我们首先创建了一个PdfController类，并在其构造函数中初始化了TemplateEngine。然后，我们定义了一个generatePdf方法，该方法会在Spring MVC的@GetMapping注解下被调用，生成PDF文件并写入响应流中。我们使用了itext7库来实现HTML到PDF的转换，并且通过Thymeleaf来处理模板引擎。这个例子展示了如何将Spring Boot应用程序中的HTML模板转换为PDF文档，并且可以作为生成PDF文件的参考。

System

2024-08-08

所有,html

以下是一个简化的代码示例，展示了如何在树莓派上使用Flask来提供一个基于HTML和JavaScript的用户界面，并与MQTT代理进行通信以使用文心一言进行自然语言处理：




from flask import Flask, render_template, request, jsonify
import paho.mqtt.client as mqtt
import requests
 
app = Flask(__name__)
 
# MQTT 配置
MQTT_BROKER = "your_mqtt_broker_address"
MQTT_PORT = 1883
MQTT_KEEPALIVE_TIME = 60
 
# MQTT 客户端实例
client = mqtt.Client("pi_control_system")
client.connect(MQTT_BROKER, MQTT_PORT, MQTT_KEEPALIVE_TIME)
client.loop_start()
 
# 文心一言API配置
WUJUN_API_URL = "http://your_wujunyiyan_api_address"
 
@app.route("/")
def index():
    return render_template("index.html")
 
@app.route("/ask", methods=["POST"])
def ask():
    question = request.form["question"]
    data = {"text": question}
    response = requests.post(WUJUN_API_URL, json=data)
    return jsonify(response.json)
 
@app.route("/control", methods=["POST"])
def control():
    device = request.form["device"]
    action = request.form["action"]
    client.publish(f"control/{device}", action)
    return jsonify({"status": "success"})
 
if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000)

在这个简化的代码示例中，我们创建了一个Flask应用程序，提供了两个路由：/用于渲染HTML页面，/ask用于向文心一言API发送请求并返回响应。另外，/control路由用于接收前端发送的控制命令，并将这些命令发送到MQTT代理，进而可能被树莓派上的其他智能设备执行。

注意：这个示例假设你已经有了文心一言API的有效地址和MQTT代理的配置信息。此外，对于MQTT客户端的实现和API请求的处理，你可能需要根据你的实际环境进行相应的调整。

- 阅读更多 -

JAVA HTML 转 PDF和增加水印

System

2024-08-08

所有,html

要将HTML转换为PDF并添加水印，可以使用以下方法：

使用iText库来创建PDF，并添加水印。
使用Flying Saucer项目将HTML转换为PDF。

以下是一个简单的例子，使用iText 7来生成PDF并添加水印：




import com.itextpdf.html2pdf.HtmlConverter;
import com.itextpdf.kernel.font.PdfFont;
import com.itextpdf.kernel.font.PdfFontFactory;
import com.itextpdf.kernel.pdf.*;
import com.itextpdf.layout.Document;
import com.itextpdf.layout.element.Paragraph;
import com.itextpdf.layout.property.TextAlignment;
import java.io.*;
 
public class HtmlToPdfWithWatermark {
    public static void main(String[] args) throws IOException {
        String htmlContent = "<html><head></head><body><p>Hello World!</p></body></html>";
        String pdfOutputPath = "output.pdf";
 
        PdfWriter writer = new PdfWriter(pdfOutputPath);
        PdfDocument pdfDoc = new PdfDocument(writer);
        Document doc = new Document(pdfDoc);
 
        // 添加水印
        PdfFont font = PdfFontFactory.createFont("Helvetica");
        String watermarkText = "CONFIDENTIAL";
        for (int i = 1; i <= pdfDoc.getNumberOfPages(); i++) {
            Paragraph watermark = new Paragraph(watermarkText)
                    .setFont(font)
                    .setFontSize(50)
                    .setRotationAngle(45)
                    .setBackgroundColor(new DeviceRgb(200, 200, 200))
                    .setTextAlignment(TextAlignment.CENTER)
                    .setFixedPosition(1);
            PdfPage page = pdfDoc.getPage(i).getPage();
            Rectangle pageSize = page.getPageSize();
            PdfCanvas canvas = new PdfCanvas(page.newContentStreamBefore(), page.getResources(), pdfDoc);
            canvas.beginText()
                    .moveText(pageSize.getWidth() / 2 - watermarkText.length() * 10, pageSize.getHeight() / 2)
                    .showText(watermarkText)
                    .endText();
            canvas.add(watermark);
            canvas.release();
        }
 
        // 转换HTML到PDF
        HtmlConverter.convertToPdf(htmlContent, pdfDoc);
 
        doc.close();
        System.out.println("PDF with watermark created successfully.");
    }
}

在这个例子中，我们首先创建了一个PdfWriter和PdfDocument对象，然后用这些对象初始化了Document对象。接着，我们通过循环遍历PDF的每一页，并在每一页上绘制水印。最后，我们使用HtmlConverter将HTML内容转换为PDF。

请注意，这个例子需要iText 7库。你可能需要添加对应的依赖到你的项目中去。

确保在实际环境中处理好异常和资源管理，这里为了简洁性没有包含这些代码。

- 阅读更多 -

[html]HTML 表单和输入

System

2024-08-08

所有,html




<!DOCTYPE html>
<html>
<head>
    <title>HTML 表单和输入样例</title>
</head>
<body>
    <form action="/submit-url" method="post">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required>
 
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required>
 
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email">
 
        <label for="birthday">生日:</label>
        <input type="date" id="birthday" name="birthday">
 
        <input type="submit" value="提交">
    </form>
</body>
</html>

这个HTML代码示例创建了一个简单的表单，包含了不同类型的输入元素，如文本框、密码框和日期选择器。每个输入元素都通过label标签的for属性和输入元素的id属性关联起来，增强了用户的可用性。其中，required属性表示这些输入是必填的。最后，表单通过submit类型的输入元素提交到服务器。

- 阅读更多 -

简易大气好看后台登录页面纯静态HTML源码分享

System

2024-08-08

所有,html

以下是一个简易大气好看的后台登录页面的HTML代码示例：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台登录</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background: linear-gradient(to right, #f3e7e9, #f3e7e9);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        .login-container {
            background-color: #fff;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
        }
        h2 {
            color: #333;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        input[type="text"], input[type="password"] {
            width: 100%;
            padding: 15px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        input[type="submit"] {
            width: 100%;
            padding: 15px;
            background-color: #5cb85c;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        input[type="submit"]:hover {
            background-color: #4cae4c;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>后台登录</h2>
        <form action="">
            <input type="text" placeholder="用户名" required>
            <input type="password" placeholder="密码" required>
            <input type="submit" value="登录">
        </form>
    </div>
</body>
</html>

这段代码展示了一个简单而又高级的登录页面，使用了CSS3的渐变背景和盒阴影来增强页面的视觉效果。同时，使用了简洁的HTML结构和CSS样式，提升了用户的视觉体验。

- 阅读更多 -

如何在 HTML 中嵌套、引入其他的 HTML？

System

2024-08-08

所有,html

在HTML中嵌套或引入其他HTML的常见方法是使用iframe标签或者object标签。另外，也可以使用JavaScript来动态加载HTML内容。

使用iframe：




<iframe src="other-page.html" width="600" height="400">
  <p>Your browser does not support iframes.</p>
</iframe>

使用object标签：




<object type="text/html" data="other-page.html" width="600" height="400">
  <p>object标签不支持。</p>
</object>

使用JavaScript和fetch（现代浏览器支持）：




<div id="content"></div>
 
<script>
  fetch('other-page.html')
    .then(response => response.text())
    .then(data => {
      document.getElementById('content').innerHTML = data;
    });
</script>

选择哪种方法取决于你的具体需求和对不同技术的控制能力。iframe和object需要额外的HTTP请求，而JavaScript方法则更加灵活，可以直接将HTML内容嵌入到页面中，无需额外的HTTP请求。

- 阅读更多 -

使用Electron将HTML单页面打包为exe

System

2024-08-08

所有,html

要将HTML单页面应用打包成exe文件，可以使用Electron的打包工具。以下是一个简单的步骤和示例代码：

创建Electron项目：




npm install -g electron
electron-quick-start
cd electron-quick-start

删除默认的index.html文件，并替换为你的HTML文件。
修改main.js来加载你的HTML文件：




const { app, BrowserWindow } = require('electron');
 
function createWindow () {
  // 创建浏览器窗口
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
 
  // 加载你的HTML文件
  win.loadFile('index.html');
}
 
app.whenReady().then(createWindow);

修改package.json中的name和version字段。
使用以下命令打包应用：




npm install
electron-packager . YourAppName --platform=win32 --arch=x64 --out=./OutDir --overwrite --icon=your-icon.ico

替换YourAppName为你的应用名称，your-icon.ico为你的应用图标（可选）。

打包完成后，在OutDir文件夹中会有一个包含exe文件的文件夹，可以直接运行或分发给用户。

- 阅读更多 -