HTML中常见的显示与隐藏可以通过以下几种方式实现：

1. 使用内联样式style属性直接控制元素的display属性。

<div style="display: none;">这个元素是隐藏的</div>

2. 使用CSS类来控制显示与隐藏。

<!-- CSS -->
<style>
  .hidden { display: none; }
</style>
 
<!-- HTML -->
<div class="hidden">这个元素是隐藏的</div>

3. 使用HTML5的hidden属性。

<div hidden>这个元素是隐藏的</div>

4. 使用JavaScript来动态控制元素的显示与隐藏。

<button onclick="document.getElementById('myDiv').style.display = 'none';">隐藏</button>
<button onclick="document.getElementById('myDiv').style.display = 'block';">显示</button>
<div id="myDiv">这个元素可以通过JavaScript隐藏或显示</div>

以上方法可以实现元素的显示与隐藏，但是应用场景各不相同，例如内联样式适合临时隐藏元素，CSS类和HTML5的hidden属性适合页面加载时就不显示元素，而JavaScript适合通过用户交互动态控制元素的显示与隐藏。

报错解释：

这个报错通常意味着你的项目在尝试安装react-dnd和react-dnd-html5-backend时，无法找到react/jsx-runtime模块。react/jsx-runtime是React 17及以上版本引入的新JSX转换，它不包含对JSX的处理，只提供了相关的运行时函数。

解决方法：

1. 确保你的项目使用的React版本是17或以上。如果不是，请升级React到最新稳定版本。
2. 如果你已经是React 17或更高版本，确保你的package.json中的依赖是正确的，并且没有任何版本冲突。
3. 确保你的项目构建配置（如Webpack、Babel等）已正确设置以使用新的JSX转换。
4. 如果你使用的是Create React App创建的项目，请确保你没有手动修改任何配置，Create React App内部已经处理了这些事情。
5. 如果问题依旧存在，尝试删除node_modules文件夹和package-lock.json或yarn.lock文件，然后重新运行npm install或yarn install来重新安装依赖。

如果你的项目不需要使用JSX转换，你也可以考虑安装旧版本的react-dnd和react-dnd-html5-backend，这些版本不依赖于新的JSX转换。但是，这通常不是推荐的做法，因为它可能与现代React项目的其他依赖和实践不兼容。

<!DOCTYPE html>
<html>
<head>
    <title>自定义Web视频播放器</title>
    <style>
        #videoPlayer {
            width: 640px;
            height: 360px;
            margin: auto;
            display: block;
        }
        .controls {
            text-align: center;
        }
        .controls button {
            margin: 5px;
            padding: 5px 10px;
            background: #000;
            color: #fff;
            border: none;
            outline: none;
            cursor: pointer;
        }
        .controls button:hover {
            background: #fff;
            color: #000;
        }
    </style>
</head>
<body>
    <video id="videoPlayer" controls>
        <source src="movie.mp4" type="video/mp4">
        对不起，您的浏览器不支持视频标签。
    </video>
    <div class="controls">
        <button onclick="playPause()">播放/暂停</button>
        <button onclick="makeBig()">变大</button>
        <button onclick="makeSmall()">变小</button>
        <button onclick="makeNormal()">正常大小</button>
        <script>
            var myVideo = document.getElementById("videoPlayer");
 
            function playPause() {
                if (myVideo.paused)
                    myVideo.play();
                else
                    myVideo.pause();
            }
 
            function makeBig() {
                myVideo.width = 1280;
                myVideo.height = 720;
            }
 
            function makeSmall() {
                myVideo.width = 320;
                myVideo.height = 180;
            }
 
            function makeNormal() {
                myVideo.width = 640;
                myVideo.height = 360;
            }
        </script>
    </div>
</body>
</html>

这段代码提供了一个简单的Web视频播放器，包括播放、暂停、调整视频大小等基本功能。使用HTML5的<video>元素和JavaScript，可以方便地为视频内容添加交互性。

由于提供源代码和数据库将不符合平台的规定，我无法直接提供源代码。但我可以提供一个概述和相关技术点，以及如何开始构建一个基于HTML5的网上购物系统的示例。

技术栈可能包括：

• Java后端开发（Spring Boot, Spring MVC等）
• HTML5和CSS3（前端页面设计）
• JavaScript（前端逻辑）
• MySQL（或其他数据库）进行数据存储

以下是一个简单的购物车功能的示例代码：

Java后端：

@RestController
@RequestMapping("/api/cart")
public class CartController {
 
    @PostMapping("/add")
    public ResponseEntity<?> addItemToCart(@RequestBody CartItem cartItem) {
        // 假设有一个服务来处理添加商品到购物车的逻辑
        cartService.addItem(cartItem);
        return ResponseEntity.ok("Item added to cart");
    }
 
    @GetMapping("/items")
    public ResponseEntity<List<CartItem>> getCartItems() {
        // 获取购物车中的商品列表
        List<CartItem> cartItems = cartService.getCartItems();
        return ResponseEntity.ok(cartItems);
    }
 
    // 其他购物车相关的APIs，例如结算、删除商品等
}

前端HTML和JavaScript：

<!-- 添加商品到购物车的表单 -->
<form id="addToCartForm">
    <input type="hidden" name="productId" value="123">
    <input type="number" name="quantity" value="1" min="1">
    <button type="submit">Add to Cart</button>
</form>
 
<script>
document.getElementById('addToCartForm').addEventListener('submit', function(event) {
    event.preventDefault();
    var formData = new FormData(this);
    fetch('/api/cart/add', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => alert(data.message))
    .catch(error => console.error('Error:', error));
});
</script>

数据库设计（示例）：

CREATE TABLE cart_items (
    id INT AUTO_INCREMENT PRIMARY KEY,
    product_id INT NOT NULL,
    quantity INT NOT NULL,
    user_id INT NOT NULL,
    FOREIGN KEY (product_id) REFERENCES products(id),
    FOREIGN KEY (user_id) REFERENCES users(id)
);

这只是一个简单的购物车功能示例，实际系统将涉及更多复杂的逻辑，如产品页面、搜索、支付集成、物流跟踪等。需要具体的文档和数据库设计，可以按照这个示例进行扩展和设计。

该项目是一个使用Node.js, Vue.js, Express.js, 和MySQL的毕设项目，涉及到一个名为"枣院二手图书交易系统"的Web应用程序。由于项目较为复杂且涉及多个文件和技术栈，我将提供一个简化版的后端服务器设置示例，使用Express.js搭建API服务，并连接MySQL数据库。

const express = require('express');
const mysql = require('mysql');
 
// 创建Express应用
const app = express();
 
// 设置MySQL连接
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'your_password',
  database: 'book_trading_system'
});
 
connection.connect(error => {
  if (error) throw error;
  console.log('Successfully connected to the database.');
});
 
// 示例API路由，用于获取图书信息
app.get('/api/books', (req, res) => {
  connection.query('SELECT * FROM books', (error, results) => {
    if (error) throw error;
    res.send(results);
  });
});
 
// 启动服务器
const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

在这个示例中，我们首先引入了Express和mysql模块，并创建了一个Express应用。然后，我们设置了MySQL数据库的连接，并在连接成功后的回调函数中打印了一条成功连接数据库的消息。接下来，我们定义了一个GET路由/api/books，用于模拟获取图书信息的API，并在路由处理函数中执行了一个简单的数据库查询。最后，我们启动了Express应用，监听了指定的端口。

请注意，这个示例假设您已经有了一个名为book_trading_system的MySQL数据库，并且该数据库中有一个名为books的表。您需要根据自己的数据库配置和表结构相应地修改连接参数和数据库查询。

这个示例仅展示了后端服务器的基础设置，并没有包含Vue.js前端代码或者项目的所有细节。实际项目中，你可能需要处理用户认证、图书上传、购买流程等复杂逻辑。

以下是一个使用HTML5和Canvas创建的全屏的520爱心表白页面的示例代码。这个示例仅包含HTML和JavaScript代码，没有提供CSS样式，因为样式可以根据您的喜好自定义。

<!DOCTYPE html>
<html>
<head>
    <title>520 Love Heart</title>
    <script>
        function init() {
            var canvas = document.getElementById('heartCanvas');
            var ctx = canvas.getContext('2d');
 
            // 设置canvas尺寸为全屏
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
 
            // 绘制爱心的函数
            function drawHeart(ctx, x, y, scale) {
                ctx.save();
                ctx.translate(x, y);
                ctx.scale(scale, scale);
                var dx = 100;
                var dy = 100;
                ctx.beginPath();
                ctx.moveTo(dx, dy);
                ctx.bezierCurveTo(dx, dy - 30, dx - 30, dy - 30, dx - 50, dy);
                ctx.bezierCurveTo(dx - 70, dy + 30, dx - 70, dy + 30, dx - 50, dy + 50);
                ctx.bezierCurveTo(dx - 30, dy + 70, dx - 30, dy + 70, dx, dy + 50);
                ctx.bezierCurveTo(dx + 30, dy + 70, dx + 30, dy + 70, dx + 50, dy + 50);
                ctx.bezierCurveTo(dx + 70, dy + 30, dx + 70, dy + 30, dx + 50, dy);
                ctx.bezierCurveTo(dx + 30, dy - 30, dx + 30, dy - 30, dx + 50, dy);
                ctx.bezierCurveTo(dx, dy - 30, dx, dy - 30, dx, dy);
                ctx.fillStyle = 'pink';
                ctx.fill();
                ctx.restore();
            }
 
            // 绘制背景
            ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
 
            // 绘制爱心
            for (var i = 0; i < 20; i++) {
                drawHeart(ctx, Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 2 + 1);
            }
        }
 
        window.onload = function() {
            init();
        };
 
        // 窗口大小改变时重绘
        window.onresize = function() {
            init();
        };
    </script>
</head>
<body onload="init()">
    <canvas id="heartCanvas"></canvas>
</body>
</html>

这段代码会在页面加载时自动调用init函数，该函数会设置canvas的尺寸为浏览器窗口的尺寸，并且在窗口大小改变时重新设置。它还定义了一个drawHeart函数，该函数用于绘制爱心形状，并在init函数中通过循环绘制多个随机大小和位置的爱心。

HTML5, CSS 和 JavaScript 代码示例，用于创建一个带有动态效果的简单列表：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple List</title>
<style>
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  li {
    background-color: #f9f9f9;
    border-bottom: 1px solid #eee;
    padding: 10px;
    transition: all 0.3s;
  }
  li:hover {
    background-color: #eee;
  }
</style>
</head>
<body>
 
<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
 
<script>
  // JavaScript 代码用于添加新列表项
  function addNewItem() {
    var list = document.getElementById("myList");
    var newItem = document.createElement("li");
    newItem.innerHTML = "New Item";
    list.appendChild(newItem);
  }
</script>
 
<button onclick="addNewItem()">Add New Item</button>
 
</body>
</html>

这段代码展示了如何创建一个简单的列表，并使用CSS为列表元素添加了一些样式。同时，使用JavaScript可以添加新的列表项。还有一个按钮用于触发添加新列表项的动作。这个示例简单直观，适合作为初学者学习HTML、CSS 和 JavaScript 列表处理的教学资料。

要使用jQuery获取当前页面的URL，你可以使用window.location.href属性，并通过jQuery进行访问。以下是一个简单的例子：

$(document).ready(function(){
    var currentUrl = $(location).attr('href');
    console.log(currentUrl); // 输出当前页面的URL
});

这段代码首先确保文档已经加载完毕，然后它定义了一个变量currentUrl来存储当前页面的URL。使用$(location).attr('href')来获取URL，并将其打印到控制台。

1. 使用addClass和removeClass方法来切换选中的tab样式，并使用show和hide方法来切换对应内容的显示和隐藏：

$(".tab-btn").click(function(){
    var index = $(this).index();
    $(this).addClass("active").siblings().removeClass("active");
    $(".tab-content").eq(index).show().siblings().hide();
});

2. 使用toggle方法来切换选中的tab样式，并使用fadeIn和fadeOut方法来切换对应内容的显示和隐藏：

$(".tab-btn").click(function(){
    var index = $(this).index();
    $(this).toggleClass("active").siblings().removeClass("active");
    $(".tab-content").eq(index).fadeIn().siblings().fadeOut();
});

3. 使用toggleClass方法来切换选中的tab样式，并使用fadeToggle方法来切换对应内容的显示和隐藏：

$(".tab-btn").click(function(){
    var index = $(this).index();
    $(this).toggleClass("active").siblings().removeClass("active");
    $(".tab-content").eq(index).fadeToggle().siblings().hide();
});

在jQuery中，您可以使用:checked选择器来获取当前选中的单选框的值。以下是一个简单的例子：

假设您有以下HTML单选框：

<form>
  <input type="radio" name="gender" value="male"> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other<br>
</form>
 
<button id="get-value">Get Value</button>

您可以使用以下jQuery代码来获取选中的单选框的值：

$('#get-value').click(function() {
  var selectedValue = $('input[name="gender"]:checked').val();
  alert("Selected value is: " + selectedValue);
});

当用户点击按钮时，这段代码会弹出一个警告框，显示当前选中的单选框的值。如果没有单选框被选中，$('input[name="gender"]:checked').val()将返回undefined。