Tech Blog

2024-08-15

以下是一个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, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        #particles-js {
            width: 100%;
            height: 100%;
            background-color: #000;
            position: fixed;
            top: 0;
        }
        .content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: #fff;
            font-size: 20px;
        }
    </style>
</head>
<body>
 
<div id="particles-js"></div>
<div class="content">
    <p>亲爱的，</p>
    <h1>祝你生日快乐！</h1>
</div>
 
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<script>
    /* 配置烟花动画 */
    particlesJS('particles-js', {
        "particles": {
            "number": {
                "value": 80,
                "density": {
                    "enable": true,
                    "value_area": 800
                }
            },
            "color": {
                "value": "#ffffff"
            },
            "shape": {
                "type": "circle",
                "stroke": {
                    "width": 0,
                    "color": "#000000"
                },
                "polygon": {
                    "nb_sides": 5
                },
                "image": {
                    "src": "img/github.svg",
                    "width": 100,
                    "height": 100
                }
            },
            "opacity": {
                "value": 0.5,
                "random": false,
                "anim": {
                    "enable": false,
                    "speed": 1,
                    "opacity_min": 0.25,
                    "sync": false
                }
            },
            "size": {
                "value": 5,
                "random": true,
                "anim": {
                    "enable": false,
                    "speed": 40,
                    "size_min": 0.1,
                    "sync": false
                }
            },
            "line_linked": {
                "enable": true,
                "distance":

- 阅读更多 -

js获取html中的img标签，图片标签，提取src属性并替换操作

System

2024-08-15

所有,html

要在JavaScript中获取HTML中所有的<img>标签，提取它们的src属性，并进行替换操作，可以使用document.querySelectorAll方法来选择所有的<img>元素，然后遍历它们以获取和设置src属性。以下是一个简单的例子：




// 选择页面上所有的<img>元素
const images = document.querySelectorAll('img');
 
// 遍历这些图片
images.forEach(function(image) {
  // 获取当前图片的src属性
  const currentSrc = image.getAttribute('src');
 
  // 这里可以进行src的替换操作
  // 例如，将所有的图片源替换为其他地址
  const newSrc = currentSrc.replace('旧地址', '新地址');
 
  // 设置新的src属性
  image.setAttribute('src', newSrc);
});

在这个例子中，我们使用了String.prototype.replace方法来替换图片源中的某个部分。你可以根据需要修改为其他的替换逻辑。

System

2024-08-15

所有,html

Content Security Policy (CSP) 是一种额外的安全层，用于检测和减少跨站点脚本攻击（XSS）的风险。CSP通过指定可以加载哪些资源（例如脚本、样式表、图片等）来增强网页的安全性。

要在HTML中使用CSP，你需要在<head>部分添加一个meta标签，并设置http-equiv属性为Content-Security-Policy。然后，你可以定义具体的策略规则来指明允许加载的资源。

例如，如果你只想允许加载你的网站的资源和https://trustedscripts.example.com的资源，你可以这样设置CSP：




<head>
  <!-- ... 其他的meta标签 ... -->
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src https://trustedscripts.example.com">
</head>

在这个例子中：

default-src 指定了默认的资源加载策略，'self' 表示只允许加载同源的资源。
script-src 指定了脚本的加载策略，这里指定了只允许从 https://trustedscripts.example.com 加载脚本。

你可以根据需要定义img-src, style-src, font-src, object-src, media-src, frame-src, 和其他多种资源类型的策略。

记住，CSP是一个强大的工具，它可以减少XSS攻击的风险，但它可能会阻止一些合法的资源加载，因此在应用之前需要仔细测试你的网站，以确保不会阻止需要的资源。

- 阅读更多 -

如何在html网页中插入视频（以及让视频自动播放的问题）

System

2024-08-15

所有,html

在HTML页面中插入视频，并让视频自动播放，可以使用<video>标签。以下是一个简单的例子：




<!DOCTYPE html>
<html>
<head>
<title>Video Example</title>
</head>
<body>
 
<video width="320" height="240" controls autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
 
</body>
</html>

在这个例子中，<video>标签的controls属性添加了播放器控件，autoplay属性让视频在就绪后自动播放。<source>标签指定了视频文件的路径和类型，以便浏览器能够选择合适的文件格式。

请注意，自动播放在某些浏览器上可能受到限制，尤其是在移动设备上，因为用户可能在没有声音的情况下访问网络，或者为了避免数据使用过多。

- 阅读更多 -

HTML CSS3动画

System

2024-08-15

所有,html

在HTML和CSS3中创建一个简单的动画，你可以使用@keyframes规则来定义动画，然后将其应用到一个元素上。以下是一个示例：

HTML:




<div class="animated-box"></div>

CSS:




.animated-box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: relative;
  animation: moveBox 2s infinite alternate;
}
 
@keyframes moveBox {
  0% {
    left: 0;
    top: 0;
  }
  100% {
    left: 200px; /* 修改为你希望动画停止的位置 */
    top: 200px; /* 修改为你希望动画停止的位置 */
  }
}

在这个例子中，.animated-box元素将沿着页面向右下角移动，动画将无限次数地执行，并且每次动画结束时它会反向播放。你可以通过调整@keyframes中的百分比来控制动画的开始和结束状态。

- 阅读更多 -

JavaWeb快速入门--HTML

System

2024-08-15

所有,html

在JavaWeb快速入门中，我们主要关注于HTML的基础知识，以便我们可以创建网页并在网页中添加基本的文本、图像、链接等内容。

以下是一个简单的HTML示例，它展示了如何创建一个包含文本、图像和链接的基本网页：




<!DOCTYPE html>
<html>
<head>
    <title>JavaWeb快速入门</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落。</p>
    <a href="https://www.example.com">点击这里访问我的主页</a>
    <img src="image.jpg" alt="示例图片">
</body>
</html>

在这个例子中，我们定义了一个HTML5文档，其中包括了一个标题(<h1>), 一个段落(<p>), 一个链接(<a>), 和一个图像(<img>). 这些都是构建网页的基本元素。

- 阅读更多 -

前端：纯前端快速实现html导出word和pdf

System

2024-08-15

所有,html

在纯前端快速实现HTML导出为Word和PDF的方法，可以使用html2canvas和jsPDF库。以下是实现的示例代码：

首先，确保安装了这两个库：




npm install html2canvas jspdf

然后，在前端代码中引入这两个库，并添加导出功能：




import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
 
// 导出为Word
function exportToWord(selector) {
    var element = document.querySelector(selector);
    var wordContent = element.outerHTML;
    var blob = new Blob(['\ufeff', wordContent], {
        type: 'application/msword'
    });
 
    // 指定文件名
    var fileName = 'document.doc';
    // 创建链接元素
    var link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = fileName;
    // 触发下载
    link.click();
    // 清除引用
    window.URL.revokeObjectURL(link.href);
}
 
// 导出为PDF
function exportToPDF(selector, pdfName) {
    var element = document.querySelector(selector);
    html2canvas(element).then(canvas => {
        var pdf = new jsPDF('p', 'mm', 'a4');
        var imgData = canvas.toDataURL('image/png');
        var width = pdf.internal.pageSize.getWidth();
        var height = pdf.internal.pageSize.getHeight();
        pdf.addImage(imgData, 'PNG', 0, 0, width, height);
        pdf.save(pdfName + '.pdf');
    });
}
 
// 使用示例
exportToWord('#content'); // 导出HTML元素为Word文档
exportToPDF('#content', 'myPDF'); // 导出HTML元素为PDF文件，命名为myPDF.pdf

在上述代码中，exportToWord函数将HTML元素导出为Word文档，而exportToPDF函数将HTML元素导出为PDF文件。两个函数都接受一个选择器参数，该参数指定了要导出的HTML元素。Word文档的文件名在exportToWord函数内指定，而PDF文件名作为exportToPDF函数的第二个参数传入。

请确保在一个真实的Web环境中使用这些函数，因为某些浏览器安全设置可能会阻止文件下载。此外，html2canvas可能需要一些调整才能正确处理更复杂的HTML结构和CSS样式。

- 阅读更多 -

Flex布局--完美解决部分元素被挤压(flex-shrink属性)

System

2024-08-15

所有,css3

在Flex布局中，如果容器内的子元素总宽度超过容器本身的宽度，默认情况下，子元素会根据flex-shrink属性的值来收缩自身大小以避免溢出。flex-shrink属性定义了项目的缩放比例，它的默认值是1，表示当空间不足时该项目会缩小。

如果你希望某些元素即使在空间不足的情况下也不被压缩，可以将其flex-shrink属性设置为0。

例如，假设有一个Flex容器，它有三个子元素，你想让第三个子元素不被压缩：




.container {
  display: flex;
}
 
.item1 {
  /* 默认的flex-shrink值为1，如果空间不足，将会缩小 */
}
 
.item2 {
  /* 同上 */
}
 
.item3 {
  flex-shrink: 0; /* 设置为0，不会缩小 */
  /* 为了保证不被压缩，可能还需要设置最小宽度或者其他样式来保证内容的可读性 */
  min-width: 0; /* 确保该元素的最小宽度为0，允许内容显示 */
}

HTML代码如下：




<div class="container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3 - 不会被压缩</div>
</div>

在这个例子中，item3将不会在空间不足时被缩小，从而避免其内容被压缩或者看不清楚。

- 阅读更多 -

css学习：轮播图

System

2024-08-15

所有,css3

创建一个简单的CSS轮播图可以通过使用@keyframes动画和animation属性来实现。以下是一个基本的例子：

HTML:




<div class="slider">
  <div class="slide active">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
</div>

CSS:




.slider {
  position: relative;
  overflow: hidden;
  height: 300px;
}
 
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
  animation-name: slideShow;
  animation-duration: 3s;
  animation-timing-function: steps(1);
  animation-iteration-count: infinite;
}
 
.slide.active {
  display: block;
  animation-play-state: running;
}
 
/* 动画 */
@keyframes slideShow {
  0% {
    transform: translateY(0);
  }
  33% {
    transform: translateY(-100%);
  }
  66% {
    transform: translateY(-200%);
  }
  100% {
    transform: translateY(-300%);
  }
}

这个例子中，.slider是包含轮播图的容器，.slide是每张幻灯片的类。通过animation-name引用@keyframes定义的动画，每张幻灯片会平行移动显示。这个例子使用了steps(1)来实现幻灯片的切换效果，每次只移动一个单位。这个例子中假设有三张幻灯片，实际使用时可以根据需要添加更多的幻灯片。

- 阅读更多 -

【CSS3】重点知识内容，快速上手

System

2024-08-15

所有,css3

在CSS3中，有许多重要的新特性，包括选择器、盒模型、背景和边框、文字效果、2D/3D转换、动画、多列布局等。以下是一些关键点和示例代码：

选择器：
- 属性选择器（例如，[type="text"]匹配所有type属性为text的元素）
- 结构性伪类选择器（例如，:nth-child(2)匹配其父元素的第二个子元素）
盒模型：
- box-sizing属性（border-box使元素的宽高包含边框和内边距）
背景和边框：
- 圆角（border-radius）
- 阴影（box-shadow）
- 渐变（线性linear-gradient和径向radial-gradient）
文字效果：
- 文字阴影（text-shadow）
- 字体变化（font-variant）
2D/3D转换：
- 转换（transform，包括translate, rotate, scale, skew）
动画：
- @keyframes规则（定义动画序列）
- animation属性（应用动画到元素上）
多列布局：
- column-count和column-gap控制列数和间隙

示例代码：




/* 圆角边框 */
div {
  border: 1px solid #000;
  border-radius: 10px;
}
 
/* 文字阴影 */
h1 {
  text-shadow: 2px 2px 2px #000;
}
 
/* 渐变背景 */
div {
  background: linear-gradient(to right, red, yellow);
}
 
/* CSS动画 */
@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}
 
div {
  animation-name: example;
  animation-duration: 4s;
}
 
/* 多列布局 */
article {
  column-count: 3;
  column-gap: 20px;
}

CSS3提供了丰富的样式和动画功能，使得网页设计师和开发者能创建更加引人入胜的网页。上述代码是CSS3的一些简单应用，可以作为学习和入门的示例。

- 阅读更多 -