分类 html 下的文章

Python自定义HtmlTestRunner测试报告_htmltestrunner自动化测试报告

2024-08-15




import unittest
import HTMLTestRunner
 
class MyTestCase(unittest.TestCase):
    def test_case1(self):
        self.assertEqual(1 + 1, 2)
 
    def test_case2(self):
        self.assertTrue(isinstance(123, int))
 
# 创建测试套件
suite = unittest.TestSuite()
suite.addTest(MyTestCase('test_case1'))
suite.addTest(MyTestCase('test_case2'))
 
# 设置报告路径和文件名
report_path = 'my_test_report.html'
 
# 定义报告标题、描述等信息
title = '自定义测试报告'
description = '这是一个自定义的测试报告示例'
 
# 打开文件用于写入报告
with open(report_path, 'wb') as report_file:
    runner = HTMLTestRunner.HTMLTestRunner(
        stream=report_file,
        title=title,
        description=description
    )
    # 运行测试套件并写入报告
    runner.run(suite)
 
print(f'测试报告生成在: {report_path}')

这段代码定义了一个简单的测试用例类MyTestCase，并添加了两个测试案例。接着创建了一个测试套件，并向其中添加了这些测试案例。然后，代码定义了报告的路径和标题等信息，并使用with语句安全地打开文件。最后，代码使用HTMLTestRunner运行测试套件并将报告写入文件。

- 阅读更多 -

【HTML】HTML基础6.2（表格之合并单元格）

System

2024-08-15

所有,html

在HTML中，可以使用rowspan和colspan属性来合并表格中的行和列。

rowspan用于合并多个行的单元格。
colspan用于合并多个列的单元格。

以下是一个简单的示例，演示如何合并表格中的单元格：




<!DOCTYPE html>
<html>
<head>
    <title>HTML 表格单元格合并示例</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>城市</th>
        </tr>
        <tr>
            <td>张三</td>
            <td rowspan="2">25</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>上海</td>
        </tr>
        <tr>
            <td>王五</td>
            <td colspan="2">30</td>
        </tr>
    </table>
</body>
</html>

在这个例子中：

第二列的第一个单元格被合并了两行，因此“年龄”只显示一次。
第三列的第二个单元格被合并了两列，因此“上海”出现在同一行的两个单元格中。
第四行的第一个单元格跨越了两列，因此“王五”的单元格横跨整个表格的两列。

- 阅读更多 -

基于 HTML+ECharts 实现的数据可视化大屏案例（含源码）

System

2024-08-15

所有,html




<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <!-- This is the script to generate the visualization. -->
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('container'));
 
        var option = {
            // ... 配置项（此处省略具体配置细节）
        };
 
        myChart.setOption(option);
 
        // 自适应窗口大小
        window.onresize = function() {
            myChart.resize();
        };
    </script>
</body>
</html>

这段代码展示了如何在HTML页面中嵌入ECharts图表的基本结构。首先，我们通过<script>标签引入ECharts库。然后，在一个<div>元素中准备用于渲染图表的容器。接下来，在<script>标签内，我们初始化ECharts实例，并设置图表的配置项（option）。最后，我们添加了一个窗口大小改变的监听器，以确保图表能正确适应不同的屏幕尺寸。

System

2024-08-15

所有,html

在LangChain中，可以使用DocumentLoader来加载多种文档格式。以下是一个简单的示例，展示如何使用LangChainDocumentLoader加载多种格式的文档：




from langchain.document_loaders import LangChainDocumentLoader
 
# 创建DocumentLoader实例
document_loader = LangChainDocumentLoader()
 
# 加载不同格式的文件
documents = [
    document_loader.load("example.md"),
    document_loader.load("example.docx"),
    document_loader.load("example.xls"),
    document_loader.load("example.ppt"),
    document_loader.load("example.pdf"),
    document_loader.load("example.html"),
    document_loader.load("example.json"),
]
 
# 打印加载的文档内容
for doc in documents:
    print(doc.content)

在这个例子中，LangChainDocumentLoader尝试加载一系列不同格式的文件，并打印出它们的内容。LangChain的文档加载器能够处理广泛的文件格式，并将它们转换为统一的内部表示，以便进一步处理。

请注意，为了运行这段代码，你需要安装LangChain库，并确保相应的文件扩展名文件存在于你的文件系统中。对于某些复杂格式，可能需要额外的依赖或者特定的库来支持解析，比如对于PDF，可能需要安装pdfminer.six。

- 阅读更多 -

【编码效率】VS Code配置 JavaScript、HTML 自动化格式

System

2024-08-15

所有,html

在VS Code中配置JavaScript和HTML的自动格式化工具，可以使用Prettier插件。以下是配置步骤和示例代码：

安装Prettier插件：
打开VS Code，按下Ctrl+P（或Cmd+P在Mac上），输入ext install esbenp.prettier-vscode，然后点击安装。
安装Prettier本身作为开发依赖：
```
npm install --save-dev prettier
```

配置VS Code的settings.json文件：

打开VS Code设置（可以通过点击左下角的设置图标或通过Ctrl+,快捷键打开），然后在settings.json文件中添加以下配置：




{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[html]": {
    "editor.formatOnSave": true
  },
  "prettier.singleQuote": true,
  "prettier.trailingComma": "es5",
  "prettier.printWidth": 80,
  "prettier.tabWidth": 2,
  "prettier.useTabs": false,
  "prettier.semi": true,
  "prettier.arrowParens": "avoid",
  "prettier.bracketSpacing": true,
  "prettier.endOfLine": "auto",
  "prettier.htmlWhitespaceSensitivity": "css",
  "prettier.jsxBracketSameLine": false,
  "prettier.jsxSingleQuote": false,
  "prettier.requirePragma": false,
  "prettier.proseWrap": "preserve",
  "prettier.quoteProps": "as-needed",
  "prettier.tslintIntegration": false,
  "prettier.vueIndentScriptAndStyle": false,
  "files.autoSave": "off",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

这样配置后，每次保存文件时，Prettier会自动格式化JavaScript和HTML文件。你可以根据项目需求调整Prettier的规则。

- 阅读更多 -

HTML生日快乐-生日祝福（烟花+粒子动画）

System

2024-08-15

所有,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, 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中的百分比来控制动画的开始和结束状态。

- 阅读更多 -