最简单直接的方法（静态图片）

如果你的二维码是固定的，不随网页内容变化,这是最简单的方法。

html网页下面加二维码的代码
（图片来源网络，侵删）

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">网页底部二维码示例</title>
    <style>
        /* 基础样式，让页面看起来好看一点 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            color: #333;
        }
        .content {
            max-width: 800px;
            margin: 40px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        /* 二维码容器样式 */
        .qr-code-container {
            text-align: center; /* 让二维码居中 */
            margin-top: 50px;
            padding: 20px;
            border-top: 1px solid #eee;
        }
        .qr-code {
            width: 150px; /* 设置二维码的宽度 */
            height: auto; /* 高度自适应，保持比例 */
            border: 1px solid #ccc;
            padding: 10px;
            background-color: #f9f9f9;
            display: inline-block; /* 让margin和padding生效 */
        }
        .qr-code p {
            margin-top: 10px;
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>欢迎访问我的网站</h1>
        <p>这里是网站的主要内容，向下滚动可以看到底部的二维码。</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
    </div>
    <!-- 这是二维码部分的HTML -->
    <div class="qr-code-container">
        <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://www.example.com" alt="网站二维码" class="qr-code">
        <p>扫码访问移动版网站</p>
    </div>
</body>
</html>

如何使用

  1. 获取你的二维码图片：你可以使用在线二维码生成器（如 QR Code Generator 或上面代码中使用的 api.qrserver.com）将你的网址、文本等内容转换成一张图片（通常是 .png 或 .jpg 格式）。
  2. 替换 src 属性：将 <img> 标签中 src="..." 的内容替换成你自己的二维码图片链接或本地路径。
    • 在线链接：直接使用图片的URL。
    • 本地图片：将图片放在你的项目文件夹中，然后使用相对路径，src="images/my-qr-code.png"。

使用 CSS 创建一个简单的二维码占位符

如果你只是需要一个临时的、纯视觉效果的二维码，或者不想加载外部图片，可以用 CSS 画一个。

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">CSS 二维码示例</title>
    <style>
        body {
            font-family: sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .css-qr-code {
            width: 150px;
            height: 150px;
            background-image:
                repeating-linear-gradient(0deg, #000, #000 8px, #fff 8px, #fff 16px),
                repeating-linear-gradient(90deg, #000, #000 8px, #fff 8px, #fff 16px);
            position: relative;
        }
        /* 添加三个定位方块，使其更像二维码 */
        .css-qr-code::before,
        .css-qr-code::after {
            content: '';
            position: absolute;
            background-color: #000;
        }
        .css-qr-code::before {
            width: 40px;
            height: 40px;
            top: 0;
            left: 0;
        }
        .css-qr-code::after {
            width: 40px;
            height: 40px;
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <h1>这是一个用 CSS 制作的二维码</h1>
    <p>它只是一个占位符，无法被扫码识别。</p>
    <div class="css-qr-code"></div>
</body>
</html>

注意：这种方法生成的二维码不能被扫码识别,仅用于页面布局和设计预览。

更专业的做法（使用 JavaScript 库，动态生成）

如果你的二维码内容是动态的（根据当前页面的 URL 生成），或者你想在用户与页面交互后才显示二维码，使用 JavaScript 库是最佳选择，这里推荐一个非常流行的库：qrcode.js。

步骤 1：引入库

你可以从 CDNJS 获取 qrcode.js，并在你的 HTML 中引入它。

html网页下面加二维码的代码
（图片来源网络，侵删）
<!-- 在 <head> 或 <body> 的末尾引入 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

步骤 2：HTML 结构

先在页面中放置一个容器 <div>，JavaScript 会将二维码画在这个容器里面。

<!-- 在 <body> 的底部，<footer> 标签内 -->
<div id="qrcode"></div>

步骤 3：JavaScript 代码

在 <script> 标签中，调用 QRCode 函数来生成二维码。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">动态生成二维码</title>
    <style>
        #qrcode {
            width: 150px;
            height: 150px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <h1>动态二维码生成示例</h1>
    <p>这个二维码是根据当前页面 URL 生成的。</p>
    <!-- 二维码将在这里被渲染 -->
    <div id="qrcode"></div>
    <!-- 1. 引入 qrcode.js 库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <!-- 2. 编写你的 JavaScript 代码 -->
    <script>
        // 等待整个页面加载完毕后再执行
        document.addEventListener("DOMContentLoaded", function() {
            // 获取要生成二维码的容器
            const qrcodeContainer = document.getElementById('qrcode');
            // 定义要编码的数据，这里使用当前页面的完整URL
            const qrData = window.location.href;
            // 调用 QRCode 库来生成二维码
            new QRCode(qrcodeContainer, {
                text: qrData,       // 要编码的文本
                width: 150,         // 二维码的宽度
                height: 150,        // 二维码的高度
                colorDark: "#000000", // 前景色
                colorLight: "#ffffff", // 背景色
                correctLevel: QRCode.CorrectLevel.H // 容错级别，H为最高
            });
        });
    </script>
</body>
</html>

QRCode 函数常用参数

  • text: 必需,要编码的字符串。
  • width: 二维码的宽度（像素）。
  • height: 二维码的高度（像素）。
  • colorDark: 二维码深色模块的颜色（默认 #000000）。
  • colorLight: 二维码浅色模块（背景）的颜色（默认 #ffffff）。
  • correctLevel: 容错级别，可选 L (Low), M (Medium), Q (Quartile), H (High)，值越高，二维码越复杂，能修复的错误也越多,但尺寸也可能稍大。

总结与建议

方案 优点 缺点 适用场景
静态图片 简单、直接、性能最好（无 JS 依赖）、兼容性最好。 内容固定，无法动态更新。 固定，如公司官网、下载 App 等。
CSS 画 无需外部资源，加载快。 无法扫码识别，仅作占位。 设计稿阶段，或需要一个视觉符号时。
JS 库 灵活、动态，可生成任意内容，样式可定制。 需要引入 JS 库，有少量性能开销。 是动态的（如分享当前页）、需要交互后显示等。

对于绝大多数在网页底部添加二维码的需求，方案一（静态图片） 是最简单、最可靠的选择，如果需要根据页面动态生成，方案三（JS 库） 则是专业且强大的解决方案。

html网页下面加二维码的代码
（图片来源网络，侵删）