分类 html 下的文章

2024-08-15

在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样式。

- 阅读更多 -

去空行小工具Html + Javascript

System

2024-08-14

所有,html

以下是一个使用JavaScript在HTML页面中去除字符串中空行的简单示例：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Remove Empty Lines</title>
</head>
<body>
    <textarea id="text" rows="10" cols="50">
 
这是一个文本示例，其中包含
空行。

- 阅读更多 -

制作一个简单HTML静态网页（HTML+CSS）

System

2024-08-14

所有,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 {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .header {
            background-color: #333;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }
        .navigation {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }
        .navigation li {
            float: left;
        }
        .navigation li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        .navigation li a:hover {
            background-color: #ddd;
            color: black;
        }
        .content {
            margin: 15px;
            padding: 20px;
        }
        .footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            position: absolute;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>我的网站</h1>
    </div>
 
    <ul class="navigation">
        <li><a href="#home">首页</a></li>
        <li><a href="#news">新闻</a></li>
        <li><a href="#contact">联系</a></li>
        <li><a href="#about">关于</a></li>
    </ul>
 
    <div class="content">
        <h2>内容</h2>
        <p>这里是内容...</p>
    </div>
 
    <div class="footer">
        <p>版权所有 &copy; 2023</p>
    </div>
</body>
</html>

这个示例添加了一个导航栏，并通过CSS样式使其浮动在页面顶部。同时，页脚被设置为绝对定位，始终显示在页面底部。这样的页面布局更加合理，便于用户理解页面结构。

- 阅读更多 -

十款好看简洁的个人引导页html源码

System

2024-08-14

所有,html

以下是一些简洁而美观的个人引导页的HTML模板示例。这些模板使用了简单而高效的HTML结构，并且大部分都配有用户指引图片。

基本的引导页模板：




<!DOCTYPE html>
<html>
<head>
    <title>引导页</title>
</head>
<body>
    <div class="intro-slider">
        <div class="slide active">
            <img src="image1.jpg" alt="指引1">
        </div>
        <div class="slide">
            <img src="image2.jpg" alt="指引2">
        </div>
        <div class="slide">
            <img src="image3.jpg" alt="指引3">
        </div>
        <!-- 更多的slide可以根据需要添加 -->
    </div>
    <button id="start-btn">开始</button>
 
    <style>
        .intro-slider {
            display: none;
        }
        .slide {
            display: none;
        }
        .active {
            display: block;
        }
        /* 添加更多样式来美化引导页 */
    </style>
    <script>
        // 这里可以添加控制引导页切换的脚本
    </script>
</body>
</html>

使用Bootstrap的引导页模板：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引导页</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="image1.jpg" alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="image2.jpg" alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="image3.jpg" alt="Third slide">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="butt

- 阅读更多 -

〖大前端 - 基础入门三大核心之 html 篇⑩〗- 图片标签

System

2024-08-14

所有,html

在HTML中，我们使用<img>标签来插入图片。<img>标签有两个必需的属性：src和alt。src属性用于指定图片的路径，而alt属性用于为图片提供替代文本，以便在图片无法显示时给出说明。

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

基本的图片插入：




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

指定图片宽度和高度：




<img src="image.jpg" alt="描述文本" width="500" height="300">

使用CSS来设置图片的样式：




<img src="image.jpg" alt="描述文本" style="width:500px; height:300px;">

图片作为链接：




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

在实际应用中，你可以根据需要选择合适的方式来插入和定制图片。

- 阅读更多 -

Qt5.14.2实现将html文件转换为pdf文件

System

2024-08-14

所有,html

在Qt5.14.2中，可以使用QtWebEngine模块来渲染HTML，并使用QPrinter和QPainter将渲染结果输出为PDF文件。以下是一个简单的例子：

首先，确保你的项目文件.pro中加入了对QtWebEngine模块的支持：




QT += webenginewidgets

然后，使用以下代码将HTML文件转换为PDF：




#include <QApplication>
#include <QWebEngineView>
#include <QPrinter>
#include <QFile>
 
void renderHtmlToPdf(const QString &htmlFilePath, const QString &pdfFilePath) {
    QApplication app(argc, argv);
 
    QWebEngineView view;
    QPrinter printer;
 
    printer.setOutputFormat(QPrinter::PdfFormat);
    printer.setOutputFileName(pdfFilePath);
    printer.setPageSize(QPrinter::A4);
    printer.setResolution(300);
 
    QFile file(htmlFilePath);
    if (!file.open(QFile::ReadOnly)) {
        qWarning("Cannot open file for reading");
        return;
    }
 
    QString html = file.readAll();
    file.close();
 
    view.setHtml(html);
    QObject::connect(&view, &QWebEngineView::loadFinished, &app, [&](bool)
        view.page()->print(&printer);
        app.quit();
    });
 
    view.show();
    app.exec();
}
 
int main() {
    QString htmlFilePath = "path/to/your/input.html";
    QString pdfFilePath = "path/to/your/output.pdf";
    renderHtmlToPdf(htmlFilePath, pdfFilePath);
    return 0;
}

确保替换htmlFilePath和pdfFilePath为你的输入和输出HTML及PDF文件路径。这段代码会启动一个事件循环，在HTML加载完成后将其渲染为PDF。

- 阅读更多 -

【HTML】超链接标签的使用

System

2024-08-14

所有,html

在HTML中，超链接是通过<a>标签来创建的。<a>标签的基本语法如下：




<a href="链接地址" target="目标窗口的位置" title="鼠标悬停时显示的文本">链接文本或图像</a>

href属性指定链接的目标地址，可以是相对路径或绝对路径。
target属性定义链接打开的位置，_blank表示在新窗口中打开，_self表示在当前窗口中打开（默认行为）。
title属性提供了鼠标悬停在链接上时显示的文本。

下面是一个超链接的例子：




<a href="https://www.example.com" target="_blank" title="访问示例网站">访问示例网站</a>

这段代码创建了一个指向https://www.example.com的超链接，当用户点击这个链接时，它会在新窗口或标签页中打开。当鼠标悬停在链接上时，会显示“访问示例网站”这段文本。

- 阅读更多 -

SpringBoot 怎么返回html界面

System

2024-08-14

所有,html

在Spring Boot中，你可以使用Thymeleaf作为模板引擎来返回HTML界面。首先，需要添加Thymeleaf的依赖到你的pom.xml文件中：




<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

然后，在src/main/resources/templates目录下创建你的HTML模板文件，比如greeting.html：




<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Greeting</title>
</head>
<body>
    <h1 th:text="'Hello, ' + ${name} + '!'"></h1>
</body>
</html>

在你的Spring Boot应用中的Controller中，你可以如下返回这个HTML视图：




import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
 
@Controller
public class GreetingController {
 
    @GetMapping("/greeting")
    public String greeting(@RequestParam(name="name", required=false, defaultValue="World") String name, Model model) {
        model.addAttribute("name", name);
        return "greeting";
    }
}

这段代码中，@Controller注解声明这是一个控制器，@GetMapping("/greeting")注解定义了一个处理GET请求的方法，并映射到/greeting路径。方法中，我们将传递给模板的参数放入Model对象中，并返回模板的名称（不包括.html扩展名），Spring Boot会处理剩下的渲染工作。

System

2024-08-14

所有,html

基础标签：




<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <a href="https://www.example.com">这是一个链接</a>
</body>
</html>

图片标签：




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

音频标签：




<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

视频标签：




<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>

超链接标签：




<a href="https://www.example.com">访问example.com</a>

无序列表标签：




<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>

有序列表标签：




<ol>
  <li>列表项1</li>
  <li>列表项2</li>
</ol>

表格标签：




<table border="1">
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</table>

布局标签（如使用CSS进行布局）：




<div>
  <h1>主标题</h1>
  <p>这是一个段落。</p>
</div>

CSS样式例：




<style>
  .container {
    width: 80%;
    margin: 0 auto;
  }
</style>
 
<div class="container">
  <!-- 内容 -->
</div>

这些代码示例展示了HTML中常用的标签和属性，包括图像、音频、视频嵌入，超链接，列表和表格的创建，以及简单的布局技巧。通过这些示例，开发者可以快速了解HTML的基本构建块。

- 阅读更多 -