分类 html 下的文章

2024超好看的404单页HTML源码

2024-08-13




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Error 404 - 页面未找到</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Roboto', sans-serif;
        }
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #1a1a1a;
        }
        .error-container {
            text-align: center;
            color: #fff;
        }
        .error-container h1 {
            font-size: 150px;
            font-weight: 700;
            margin: 0;
            line-height: 1;
            letter-spacing: -2px;
        }
        .error-container h2 {
            font-size: 60px;
            font-weight: 700;
            margin: 0;
            line-height: 1;
            letter-spacing: -1px;
        }
        .error-container p {
            font-size: 20px;
            font-weight: 400;
            margin: 0;
            line-height: 1.5;
            color: #555;
        }
        .error-container a {
            text-decoration: none;
            color: #fff;
            background-color: #007bff;
            padding: 10px 20px;
            border-radius: 4px;
            display: inline-block;
            margin-top: 10px;
        }
        .error-container a:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="error-container">
        <h1>404</h1>
        <h2>页面未找到</h2>
        <p>很抱歉，你访问的页面不存在或者已经被移动。</p>
        <a href="javascript:history.back()">返回上一页</a>
        <a href="/">返回首页</a>
    </div>
</body>
</html>

这段代码展示了一个简洁而优雅的404错误页面设计，使用了简洁的HTML结构和CSS样式，包括自定义字体、颜色方案和响应式布局。同时，代码中的样式是直接插入到HTML文件中，没有使用外部样式表，使得整个页面文件更加自给自足。

System

2024-08-13

所有,html




// 引入jsPDF和html2canvas库
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
 
// 导出HTML为PDF的函数
export const exportHtmlAsPdf = async (elementId, pdfFileName) => {
  // 创建一个jsPDF实例
  const pdf = new jsPDF('p', 'mm', 'a4');
  const element = document.getElementById(elementId);
  const options = {
    scale: 2, // 提高清晰度，根据需要调整
    logging: false,
    width: element.scrollWidth,
    height: element.scrollHeight,
    windowWidth: element.scrollWidth,
    windowHeight: element.scrollHeight,
    useCORS: true, // 允许跨域
  };
 
  // 使用html2canvas将HTML元素转换为canvas
  try {
    const canvas = await html2canvas(element, options);
    const imgData = canvas.toDataURL('image/png');
 
    // 将canvas图像添加到PDF中
    const imgProps= pdf.getImageProperties(imgData);
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
    pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
 
    // 保存生成的PDF
    pdf.save(pdfFileName + '.pdf');
  } catch (error) {
    console.error('导出PDF时发生错误:', error);
  }
};

这段代码使用了html2canvas库来将HTML元素转换为canvas，并且使用了jspdf库来创建PDF文件。在转换过程中，我们可以通过调整scale参数来提高图像的清晰度，并且允许了图片的跨域使用。最后，我们保存了生成的PDF文件。这个解决方案可以有效地处理图片和表格在PDF中的展示问题，并且能够实现高清打印。

- 阅读更多 -

精美悬浮的岛屿动态错误页特效404单页HTML源码

System

2024-08-13

所有,html

这个问题似乎是在寻求一个动态的404错误页面的代码。这种页面可以用来提升用户体验，使得用户在访问一个不存在的页面时不会感到太过失望。以下是一个简单的HTML和JavaScript代码示例，用于创建一个动态的404错误页面：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Error 404 - Page Not Found</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #f7f7f7;
            font-family: Arial, sans-serif;
        }
        .error-container {
            text-align: center;
        }
        .error-number {
            padding: 100px 0;
            font-size: 100px;
        }
        .error-message {
            font-size: 30px;
            color: #333;
        }
        .error-redirect {
            font-size: 20px;
            color: #999;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="error-container">
        <div class="error-number">404</div>
        <div class="error-message">Oops! That page can't be found.</div>
        <div class="error-redirect">
            We're redirecting you back to the homepage...
        </div>
    </div>
    <script>
        setTimeout(function() {
            window.location.href = 'http://yourwebsite.com'; // Replace with your homepage URL
        }, 3000);
    </script>
</body>
</html>

这段代码创建了一个简单的404错误页面，使用CSS进行样式设计，并通过JavaScript在3秒后将用户重定向到主页。这个示例提供了一个基本的错误页面设计，你可以根据自己的需求进行更多的样式和功能添加。

- 阅读更多 -

前端学习＜一＞HTML——06-HTML标签：图片标签

System

2024-08-13

所有,html

在HTML中，我们可以使用<img>标签来插入图片。<img>标签有两个必需的属性：src和alt。src属性用于指定图片的路径，而alt属性则提供了图片的文本替代。

以下是一些使用<img>标签的示例：

示例1：基本的图片插入




<img src="image.jpg" alt="描述文本">

示例2：使用绝对路径




<img src="https://example.com/image.jpg" alt="描述文本">

示例3：使用相对路径




<img src="/images/image.jpg" alt="描述文本">

示例4：使用基64编码的图片




<img src="data:image/gif;base64,R0lGODlhEAAQAAA..." alt="描述文本">

请注意，图片的路径可以是相对路径，也可以是绝对路径，或者是一个Base64编码的数据URL。在实际开发中，你通常会将图片保存在项目的一个文件夹中，然后使用相对路径来引用这些图片。

System

2024-08-13

所有,html

由于篇幅限制，以下仅展示了一个HTML页面的核心代码，其他页面的实现方式相同，只是图片和文字内容不同。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <!-- 导航栏代码 -->
    </header>
    <main>
        <section class="jumbotron">
            <div class="container">
                <h1>欢迎来到成都旅游</h1>
                <p>这里有你需要的一切旅游信息</p>
            </div>
        </section>
 
        <!-- 其他页面的内容 -->
    </main>
    <footer>
        <!-- 页脚信息 -->
    </footer>
</body>
</html>

CSS样式表 style.css 将包含用于美化页面的样式规则，但由于篇幅限制，这里不再展示。

请注意，为了保证回答的简洁性，实际的图片资源、CSS样式和其他页面的HTML代码将不会在这个示例中展示。在实际的课程设计中，你需要自行添加这些内容来完成整个网站的设计。

- 阅读更多 -

基于php+mysql+html简单图书管理系统

System

2024-08-13

所有,html

以下是一个简单的PHP和MySQL结合HTML的图书管理系统的代码示例。请注意，这个示例仅包含了创建数据库表、连接数据库、添加图书、显示图书列表的基本功能。




<?php
// 数据库连接信息
$host = 'localhost';
$username = 'root';
$password = '';
$database = 'book_management_system';
 
// 创建数据库连接
$conn = new mysqli($host, $username, $password, $database);
 
// 检查连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
 
// 添加图书
if (isset($_POST['add_book'])) {
    $title = $_POST['title'];
    $author = $_POST['author'];
    $isbn = $_POST['isbn'];
 
    $sql = "INSERT INTO books (title, author, isbn) VALUES (?, ?, ?)";
    $stmt = $conn->prepare($sql);
    $stmt->bind_param('sss', $title, $author, $isbn);
    $stmt->execute();
    $stmt->close();
}
 
// 获取图书列表
$sql = "SELECT * FROM books";
$result = $conn->query($sql);
 
// 显示图书列表
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo "标题: " . $row["title"]. " - 作者: " . $row["author"]. " - ISBN: " . $row["isbn"]. "<br>";
    }
} else {
    echo "0 结果";
}
 
// 关闭数据库连接
$conn->close();
?>
 
<!-- HTML 部分 -->
<!DOCTYPE html>
<html>
<head>
    <title>图书管理系统</title>
</head>
<body>
 
<h2>添加图书</h2>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
    标题: <input type="text" name="title"><br>
    作者: <input type="text" name="author"><br>
    ISBN: <input type="text" name="isbn"><br>
    <input type="submit" name="add_book" value="添加图书">
</form>
 
<h2>图书列表</h2>
<!-- 图书列表将显示在这里 -->
 
</body>
</html>

这个简单的图书管理系统包含以下功能：

连接到MySQL数据库。
创建一个名为books的数据库表。
添加一本新的图书到数据库。
显示数据库中所有图书的列表。

请注意，这个示例没有包括错误处理和安全性措施，例如输入验证和防止SQL注入攻击。在实际应用中，你应该加强安全性，确保系统的稳定性和性能。

- 阅读更多 -

如何用HTML＋CSS编写灵活的Tab页

System

2024-08-13

所有,html




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexible Tab Page (2)</title>
<style>
  .tabs {
    display: flex;
    justify-content: space-between;
    background-color: #f2f2f2;
    padding: 10px;
  }
  .tab {
    padding: 10px;
    cursor: pointer;
    user-select: none;
  }
  .tab.active {
    background-color: #ccc;
  }
  .content {
    border: 1px solid #ccc;
    border-top: none;
    padding: 20px;
  }
</style>
</head>
<body>
 
<div class="tabs">
  <div class="tab active">Tab 1</div>
  <div class="tab">Tab 2</div>
  <div class="tab">Tab 3</div>
</div>
 
<div class="content">Content for Tab 1</div>
 
<script>
document.querySelectorAll('.tab').forEach(tab => {
  tab.addEventListener('click', () => {
    // Remove active class from all tabs
    document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
 
    // Add active class to the clicked tab
    tab.classList.add('active');
 
    // Get the name of the tab
    const tabName = tab.textContent.trim();
 
    // Show the content for the active tab
    document.querySelectorAll('.content').forEach(content => {
      if(content.textContent.trim() === `Content for ${tabName}`) {
        content.style.display = 'block';
      } else {
        content.style.display = 'none';
      }
    });
  });
});
</script>
 
</body>
</html>

这段代码使用了原生JavaScript来处理点击事件，当用户点击标签时，会更改标签的样式并显示对应的内容区域。这个例子简单直观，方便理解和学习。

System

2024-08-13

所有,html




// 引入Vue
import Vue from 'vue';
// 引入组件
import { qrcode } from 'qrcodejs2-fix';
import html2canvas from 'html2canvas';
 
// 注册Vue全局指令，用于生成二维码
Vue.directive('qrcode', {
  inserted: function (el, binding) {
    let content = binding.value;
    let qrcodeElement = el.querySelector('.qrcode');
    if (content && qrcodeElement) {
      qrcode.toCanvas(content, qrcodeElement);
    }
  }
});
 
// 自定义打印函数
function printContent(selector) {
  const element = document.querySelector(selector);
  html2canvas(element).then(canvas => {
    const printWindow = window.open('', '_blank');
    printWindow.document.write(canvas.outerHTML);
    printWindow.document.close();
    printWindow.focus();
    printWindow.print();
    printWindow.close();
  });
}
 
// 使用示例
new Vue({
  el: '#app',
  data: {
    qrcodeContent: 'https://www.example.com'
  },
  methods: {
    printQRCode() {
      this.$nextTick(() => {
        printContent('#printSection');
      });
    }
  }
});

这个代码示例展示了如何在Vue应用中注册一个全局指令来生成二维码，并使用html2canvas将指定DOM内容转换为图片，然后在新窗口中打开并执行打印操作。这是一个简化的实现，去除了一些非核心功能，如错误处理等。

System

2024-08-13

所有,html




import com.itextpdf.html2pdf.HtmlConverter;
import com.itextpdf.html2pdf.resolver.image.ImageDataFactory;
import com.itextpdf.kernel.font.PdfFontFactory;
import com.itextpdf.layout.element.List;
import com.itextpdf.layout.property.UnitValue;
import com.itextpdf.licensing.base.LicenseKey;
import com.itextpdf.styledxmlparser.css.media.MediaDeviceDescription;
import com.itextpdf.styledxmlparser.css.media.MediaType;
import com.itextpdf.kernel.pdf.PdfWriter;
import com.itextpdf.layout.Document;
import com.itextpdf.layout.element.IBlockElement;
import com.itextpdf.layout.element.IElement;
import com.itextpdf.layout.property.TextAlignment;
import com.itextpdf.layout.element.Paragraph;
 
import java.io.*;
import java.util.ArrayList;
import java.util.List;
 
public class PdfGenerator {
    public static void main(String[] args) throws IOException {
        String htmlContent = "<html><body><p>你好，这是PDF生成示例。</p><img src='image.jpg' /></body></html>";
        String pdfFilePath = "output.pdf";
 
        LicenseKey.loadLicenseFile("E:/workspace/itextkey.xml"); // 加载itext的授权文件
        PdfWriter writer = new PdfWriter(pdfFilePath);
        // 设置中文字体
        String fontPath = "E:/workspace/simsun.ttc";
        PdfFontFactory.register(fontPath);
        MediaDeviceDescription mediaDeviceDescription = new MediaDeviceDescription(MediaType.PRINT);
        List<IElement> elements = HtmlConverter.convertToElements(htmlContent, mediaDeviceDescription);
 
        // 解决中文不显示的问题
        for (IElement element : elements) {
            if (element instanceof List) {
                List list = (List) element;
                for (ListLabel label : list.getListItems()) {
                    for (IBlockElement blockElement : label.getBlockElements()) {
                        processElement(blockElement);
                    }
                }
            } else {
                processElement(element);
            }
        }
 
        // 解决图片不显示的问题
        Document document = new Document(writer);
        for (IElement element : elements) {
            if (element instanceof IBlockElement && "img".equals(((IBlockElement) element).getPropertyAsString(HtmlConverter.PROPERTY_TAG))) {
                String imageUrl = ((IBlockElement) element).getPropertyAsString(HtmlConverter.PROPERTY_SRC);
                InputStream imageStream = new FileInputStream(imageUrl);

- 阅读更多 -

python制作超炫流星雨表白,html写流星雨(完整代码)

System

2024-08-13

所有,html

以下是一个简单的HTML和JavaScript代码示例，用于创建流星雨效果。你可以将这段代码保存为HTML文件，并通过浏览器打开查看效果。




<!DOCTYPE html>
<html>
<head>
    <title>流星雨</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
 
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const W = window.innerWidth;
        const H = window.innerHeight;
        canvas.width = W;
        canvas.height = H;
 
        let particles = [];
        let particleCount = 200;
 
        function init() {
            for (let i = 0; i < particleCount; i++) {
                particles.push(new Particle());
            }
            animate();
        }
 
        function animate() {
            ctx.clearRect(0, 0, W, H);
            for (let i = 0; i < particleCount; i++) {
                let p = particles[i];
                p.draw();
                p.update();
            }
            requestAnimationFrame(animate);
        }
 
        function Particle() {
            this.x = Math.random() * W;
            this.y = Math.random() * H;
            this.vx = -.5 + Math.random();
            this.vy = -.5 + Math.random();
            this.size = Math.random() * 2;
            this.life = 1;
 
            this.draw = function() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fillStyle = 'white';
                ctx.fill();
            }
 
            this.update = function() {
                this.x += this.vx * 5;
                this.y += this.vy * 5;
                if (this.x > W || this.x < 0) this.vx *= -1;
                if (this.y > H || this.y < 0) this.vy *= -1;
            }
        }
 
        init();
    </script>
</body>
</html>

这段代码会在页面上创建一个canvas元素，并用JavaScript实现流星雨的效果。你可以根据需要调整particleCount来改变雨中星星的数量，以及通过调整颜色和大小来自定义样式。

- 阅读更多 -