分类 html 下的文章

【一种使用浏览器读取本地excel、josn等数据文件的方法】Python+JavaScript+HTML实现

2024-08-16

在Python、JavaScript和HTML的组合中，可以使用FileReader API在浏览器端读取本地文件。以下是一个简单的例子，展示如何使用JavaScript读取本地Excel文件（.csv格式）并在网页上显示。

HTML部分:




<input type="file" id="fileInput" />
<div id="content"></div>

JavaScript部分:




document.getElementById('fileInput').addEventListener('change', function(e) {
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
        var text = e.target.result;
        var lines = text.split('\n').map(function(line) {
            return line.split(',');
        });
        // 显示表格
        var table = document.createElement('table');
        lines.forEach(function(row) {
            var tr = table.insertRow();
            row.forEach(function(cell) {
                var td = tr.insertCell();
                td.textContent = cell;
            });
        });
        document.getElementById('content').appendChild(table);
    };
    reader.readAsText(file);
});

这段代码会在用户选择文件后，读取文件内容并将其解析为表格格式，然后在id为content的元素内显示出来。

对于JSON文件，可以使用同样的方法，只是需要在读取完文件后对文本内容使用JSON.parse()来解析JSON数据。

请注意，由于浏览器的安全限制，这种方法只能在用户的本地环境中工作，不适用于服务器端文件读取。

- 阅读更多 -

HTML5与HTML：不仅仅是标签的革新

System

2024-08-16

所有,html

HTML5是HTML的新标准，它在原有的基础上添加了新的元素，删除了一些不再使用的元素，并增加了新的API和功能，以便更好地支持视频、音频、图形、应用程序、游戏、存储等方面的内容。

例如，HTML5中新增的语义元素有：<header>, <nav>, <section>, <article>, <aside>, <footer>等，它们可以使页面的结构更清晰，有利于搜索引擎的爬取和页面的自动化处理。

以下是一个简单的HTML5页面示例：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Example</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <section>
        <article>
            <h2>Article Title</h2>
            <p>This is an example of an article in an HTML5 page.</p>
        </article>
        <article>
            <h2>Another Article Title</h2>
            <p>This is another example of an article in an HTML5 page.</p>
        </article>
    </section>
    <aside>
        <h3>Sidebar Title</h3>
        <p>This is the sidebar content.</p>
    </aside>
    <footer>
        <p>Copyright &copy; 2023 My Website</p>
    </footer>
</body>
</html>

在这个示例中，我们使用了HTML5中的新语义元素来构建页面的结构，使得页面的内容更具可读性和可访问性。

- 阅读更多 -

HTML、DOM 和 BOM：深入解析网页加载和渲染过程

System

2024-08-16

所有,html




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web Page Loading and Rendering</title>
</head>
<body>
    <h1>Web Page Loading and Rendering</h1>
    <p>
        When a web page is loaded, the browser's rendering engine parses the HTML and builds the DOM tree.
        Then, it creates the rendering tree, lays out the contents, and finally, paints the page.
    </p>
    <script>
        // JavaScript code that interacts with the DOM and BOM
        document.querySelector('h1').style.color = 'blue';
        console.log(window.innerWidth);
    </script>
</body>
</html>

这段HTML代码展示了一个简单的网页，其中包含了标题和一段文本。在<script>标签内，使用JavaScript代码修改了标题的颜色，并且打印了窗口的内宽。这个过程模拟了实际网页中的DOM操作和BOM使用，有助于理解页面加载和渲染的过程。

- 阅读更多 -

【 HTML 及浏览器】DOM 树

System

2024-08-16

所有,html

在HTML和浏览器中，DOM（Document Object Model）是文档对象模型的简称，它是一种用于HTML和XML文档的编程接口。DOM将网页或应用程序的标记转换为一个可以通过JavaScript进行访问和操作的对象模型。

DOM树是基于文档的层级结构创建的，它将每个HTML标签视为树中的一个节点。DOM树的根节点是document对象，每个节点都可以包含子节点，这些子节点可以是元素节点、文本节点、注释节点等。

以下是一个简单的HTML示例及其对应的DOM树：

HTML:




<html>
  <head>
    <title>Example DOM Tree</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

DOM树可以表示为：




document
├── html
│   ├── head
│   │   └── title
│   │       └── "#text" (节点包含文本: "Example DOM Tree")
│   └── body
│       ├── h1
│       │   └── "#text" (节点包含文本: "Welcome to My Website")
│       └── p
│           └── "#text" (节点包含文本: "This is a paragraph.")
└── "#document-fragment"

在这个DOM树中，每个元素都是一个节点，#text代表的是元素节点之间的文本内容。#document-fragment是一个虚拟节点，表示整个文档的片段。

通过JavaScript，你可以访问和操作DOM元素，例如：




// 获取页面标题
var title = document.title;
 
// 改变段落文本
var paragraph = document.querySelector('p');
paragraph.textContent = 'Updated paragraph.';

这些基本操作展示了如何通过JavaScript与DOM交互，从而动态地修改网页内容。

- 阅读更多 -

【pytest】html报告修改和汉化_from py

System

2024-08-16

所有,html




# 导入pytest和pytest-html模块
import pytest
 
# 修改pytest-html报告的样式
def pytest_html_report_style(report_style):
    report_style.extend({
        '.heading': {
            'font-family': 'Helvetica, Arial, sans-serif',
            'font-size': '1.1em',
            'color': '#333',
            'border-bottom': '1px solid #ccc',
            'padding-bottom': '0.5em',
        },
        # 添加更多样式规则...
    })
 
# 汉化pytest-html报告中的文本
def pytest_html_results_summary(prefix, summary, postfix):
    prefix.extend([
        '<p>测试结果总结:</p>',
        '<ul>',
        '<li>测试用例总数: {}</li>'.format(summary['total']),
        '<li>成功: {}</li>'.format(summary['passed']),
        '<li>失败: {}</li>'.format(summary['failed']),
        '<li>跳过: {}</li>'.format(summary['skipped']),
        '</ul>',
    ])
 
# 使用示例
def test_example():
    assert True
 
# 运行测试并生成HTML报告
if __name__ == '__main__':
    pytest.main(['-v', '--html=report.html'])

这段代码演示了如何使用pytest插件API来修改pytest-html报告的样式和汉化报告中的文本。在实际使用时，你可以根据自己的需求进一步定制这些函数的实现。

- 阅读更多 -

PHP编程技术揭秘：如何高效捕捉网页HTML元素？

System

2024-08-16

所有,html




<?php
// 引入QueryList类
include('QueryList.php');
 
// 目标网页
$url = 'https://www.example.com';
 
// 初始化QueryList
$ql = new QueryList();
 
// 发送请求并获取网页内容
$ql->use(HttpRequest::class)->get($url)->setOptions(['timeout' => 30])->success(function (QueryList $ql) {
    // 通过CSS选择器选取HTML元素
    $content = $ql->rules([
        'title' => ['h1', 'text'], // 获取h1标签中的文本作为title
        'desc'  => ['p > span', 'text'] // 获取p标签下的span中的文本作为desc
    ])->query()->getData();
 
    // 打印结果
    print_r($content->all());
});
 
// 处理可能的错误
$ql->error(function (Exception $e) {
    echo "Error: " . $e->getMessage();
});

这段代码使用QueryList库来高效地捕捉网页上的特定HTML元素。首先，我们引入QueryList类。然后，我们初始化QueryList并发送请求到目标网页。成功获取网页内容后，我们使用CSS选择器规则来选取特定的HTML元素，并打印出结果。最后，我们处理可能发生的错误。这个例子展示了如何使用PHP快速方便地抓取网页数据。

- 阅读更多 -

简约唯美的404HTML源码

System

2024-08-16

所有,html

如果您需要创建一个简单的404错误页面的HTML代码，以下是一个示例：




<!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 {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <h1>Error 404</h1>
    <p>The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.</p>
</body>
</html>

这段代码创建了一个简单的404页面，使用了Flexbox来垂直和水平居中内容。这是一个非常基础的示例，您可以根据需要添加更多的样式和个性化元素。

- 阅读更多 -

用HTML的原生语法实现两个div子元素在同一行中排列

System

2024-08-16

所有,html

要在HTML中使两个div元素在同一行中排列，可以使用CSS的display: inline或display: inline-block属性。以下是一个简单的例子：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div Inline Example</title>
<style>
  .inline-div {
    display: inline;
    margin-right: 10px; /* Optional space between divs */
  }
</style>
</head>
<body>
 
<div class="inline-div">
  <p>Div 1</p>
</div>
 
<div class="inline-div">
  <p>Div 2</p>
</div>
 
</body>
</html>

在这个例子中，两个div都应用了inline-div类，这个类通过设置display: inline属性使得div元素水平排列。如果需要在div之间添加空白，可以使用margin-right属性。

- 阅读更多 -

【jspdf】前端html生成pdf的两种办法以及引入中文字体

System

2024-08-16

所有,html

在前端生成PDF文件，可以使用jsPDF库。以下是两种常见的方法：

方法一：使用html2canvas将HTML转换为canvas，然后再将canvas转为图片。

方法二：使用html2pdf.js直接将HTML转为PDF。

引入中文字体，需要使用自定义字体或者将中文转为图片。

以下是具体的实现方式：

方法一：使用html2canvas将HTML转换为canvas，然后再将canvas转为图片。




//引入jsPDF
import jsPDF from 'jspdf';
//引入html2canvas
import html2canvas from 'html2canvas';
 
function downloadPDF() {
    const element = document.body; // 需要转换的DOM元素
    html2canvas(element).then((canvas) => {
        // 新建PDF文档，并添加图片
        const pdf = new jsPDF('p', 'mm', 'a4');
        const img = canvas.toDataURL('image/png');
        pdf.addImage(img, 'PNG', 0, 0, 210, 297);
        pdf.save('download.pdf'); // 保存
    });
}

方法二：使用html2pdf.js直接将HTML转为PDF。




//引入jsPDF
import jsPDF from 'jspdf';
//引入html2pdf.js
import html2pdf from 'html2pdf.js';
 
function downloadPDF() {
    const element = document.body; // 需要转换的DOM元素
    html2pdf().set({
        html2canvas: {
            scale: 2, // 提高分辨率
            dpi: 192, // 打印质量
            letterRendering: true, // 使用更佳的文字渲染
        },
        jsPDF: {
            unit: 'mm',
            format: 'a4',
            orientation: 'portrait' // 方向
        }
    }).from(element).save();
}

引入中文字体，可以使用jspdf的addFont方法，但是需要字体文件，并且需要将字体转为base64。




//引入自定义字体
import 'jspdf/dist/polyfills.js';
import font from 'jspdf/dist/standard_fonts/font.js';
import fontBase64 from '../path/to/font.base64'; // 中文字体的base64
 
// 添加自定义字体
font.addFont('中文字体', 'normal', 'normal', fontStyle.normal, fontWeight.normal, [fontBase64]);
 
// 使用自定义字体
const pdf = new jsPDF('p', 'mm', 'a4');
pdf.setFont('中文字体');
pdf.text('你好，世界！', 10, 20);
pdf.save('download.pdf');

由于中文字体较大，通常采用将中文字体转为图片的方式来解决。




//引入jsPDF
import jsPDF from 'jspdf';
 
// 创建canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
 
// 设置字体样式
ctx.font = '20px 微软雅黑';
// 设置字体颜色
ctx.fillStyle = '#000';
// 绘制文本
ctx.fillText('你好，世界！', 0, 20);
 
// 将canvas转为图片
const img = new Image();
img.src = canvas.toDataURL('image/png');
 
const pdf = new jsPDF('p', 'mm', 'a4');
pdf.addImage(img, 'PNG', 10, 10, 50, 20);
pdf.save('download.pdf');

以上就是使用jspdf生成PDF文件的两种方法以及引入中文字

- 阅读更多 -

HTML | DOM | 网页前端 | 常见HTML标签总结

System

2024-08-16

所有,html

HTML (Hypertext Markup Language) 是用于创建网页的标准标记语言。下面是一些常见的HTML标签及其用途的概述：

<!DOCTYPE html>：HTML5中用于声明文档类型。
<html>：定义整个HTML文档。
<head>：包含文档的元数据，如<title>、<meta>、样式链接和脚本链接。
<title>：定义浏览器工具栏中的标题。
<body>：包含文档的主要内容，比如标题、段落、链接、图片等。
<h1>至<h6>：从最大到最小定义标题。
<p>：创建一个段落。
<a>：创建一个超链接。
<img>：插入一张图片。
<div>：定义文档中的一个分区或节（division/section）。
<span>：被用来组合文档中的小块内容。
<ul>和<li>：创建无序列表。
<ol>和<li>：创建有序列表。
<table>：创建表格。
<form>：创建表单，用于用户输入。
<input>：用于收集用户信息，可以是文本、复选框、单选按钮等。
<button>：定义一个按钮。
<select>和<option>：创建下拉列表。
<textarea>：创建多行文本输入控件。
<style>：定义文档的样式信息。
<script>：定义客户端脚本，如JavaScript。

这些标签可以用来构建基本的网页结构和内容，HTML5 还引入了新的语义化标签和API，以改善网页的可访问性和搜索引擎优化。

- 阅读更多 -