分类 html 下的文章

2024-08-15

要将离线的HTML文件及其资源文件夹转换为单个MHTML文件，可以使用以下Python代码示例：




import os
import shutil
from pathlib import Path
 
def convert_to_mhtml(html_file, output_mhtml_file, resources_dir):
    # 确保HTML文件的路径是绝对路径
    html_file_path = Path(html_file).resolve()
    output_mhtml_path = Path(output_mhtml_file).resolve()
    resources_dir_path = Path(resources_dir).resolve()
 
    # 创建资源的临时拷贝，并将所有资源的路径改为相对于资源文件夹的路径
    temp_resources_dir = output_mhtml_path.parent / 'resources'
    shutil.copytree(resources_dir_path, temp_resources_dir)
    relative_resources_dir = os.path.relpath(temp_resources_dir, output_mhtml_path.parent)
    relative_html_path = os.path.relpath(html_file_path, output_mhtml_path.parent)
 
    # 替换HTML文件中的资源路径为相对路径
    with open(html_file_path, 'r', encoding='utf-8') as file:
        html_content = file.read()
    html_content = html_content.replace(resources_dir, relative_resources_dir)
 
    with open(output_mhtml_path, 'w', encoding='utf-8') as file:
        file.write(html_content)
 
    # 使用os.system调用命令行工具进行MHTML转换
    command = f'wget --save-headers --header="Content-Disposition: attachment" -k -m "{relative_html_path}"'
    os.system(command)
 
    # 清理临时资源文件夹
    shutil.rmtree(temp_resources_dir)
 
# 使用示例
html_file = 'offline.html'
output_mhtml_file = 'archive.mhtml'
resources_dir = 'resources'
convert_to_mhtml(html_file, output_mhtml_file, resources_dir)

确保你的系统中已安装wget工具，因为上述代码中的os.system调用将依赖于wget来完成MHTML文件的创建。如果wget不可用，你可能需要根据你的操作系统进行适当的安装。

- 阅读更多 -

HTML实现移动端布局与页面自适应

System

2024-08-15

所有,html




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端布局示例</title>
    <style>
        /* 移动端常用布局样式 */
        .container {
            width: 100%;
            max-width: 768px; /* 最大宽度限制 */
            margin: 0 auto; /* 水平居中 */
            padding: 20px;
        }
        /* 响应式布局示例 */
        @media (max-width: 768px) {
            .column {
                width: 50%;
                float: left;
            }
        }
        @media (max-width: 480px) {
            .column {
                width: 100%;
                float: none;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="column">
            <p>列内容</p>
        </div>
        <div class="column">
            <p>列内容</p>
        </div>
    </div>
</body>
</html>

这个代码实例展示了如何使用HTML和内嵌样式创建一个在移动端友好的布局。它使用了响应式设计的原则，通过媒体查询根据屏幕宽度调整列的宽度和浮动方式。通过这种方式，页面可以在不同的设备上进行自适应显示。

System

2024-08-15

所有,html




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攻击的风险，但它可能会阻止一些合法的资源加载，因此在应用之前需要仔细测试你的网站，以确保不会阻止需要的资源。

- 阅读更多 -