System 发布的文章

2024-08-23

HTML 文档的加载和解析过程是浏览器的一个系列步骤，其中包括从服务器请求文档、解析 HTML 结构、然后构建 DOM（文档对象模型）树、之后解析 CSS 并合并到 DOM 树中、最后渲染页面。

以下是一个简单的 HTML 页面模板，展示了基本的页面结构：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a simple paragraph.</p>
    <img src="image.jpg" alt="Sample Image">
    <script src="script.js"></script>
</body>
</html>

解释：

<!DOCTYPE html>：HTML5 文档类型声明。
<html>：整个文档的根元素。
<head>：包含文档的元数据，如 <title>、<meta>\` 标签和样式表链接。
<title>：定义了浏览器工具栏的标题和页面标签的标题。
<body>：包含了页面的主要内容，如文本、图片、视频等。
<link>：链接外部 CSS 样式表。
<script>：引入外部 JavaScript 文件。

注意：

为了最佳性能，通常建议将 <script> 标签放在 <body> 标签的底部，即紧接在关闭 </body> 标签之前。这是因为脚本的加载会阻塞页面内容的渲染，将脚本放在页面底部可以先显示页面内容，然后再运行脚本。
对于外部 CSS 和 JavaScript 资源，应该尽可能地使用多个域名来加载，这样会提高浏览器的并行下载数量，加快页面加载速度。

- 阅读更多 -

解决vite打包的项目不能直接用浏览器运行HTML文件

System

2024-08-23

所有,html

报错解释：

当你尝试直接在浏览器中打开Vite打包的项目中的HTML文件时，可能会遇到一个错误，通常是因为HTML文件试图通过JavaScript模块导入其他资源，但是浏览器不支持这种导入机制。这是因为Vite打包项目通常会生成一个或多个JavaScript入口文件，这些文件会处理模块的动态导入和静态资源的加载。

解决方法：

确保你已经正确构建了项目，通常是通过运行npm run build或yarn build。
构建完成后，将dist目录中的文件部署到你的服务器或者静态资源托管服务上。
通过服务的URL访问你的应用，而不是直接打开本地的HTML文件。

如果你需要本地测试，可以使用本地服务器来运行你的应用。一种简单的方式是使用serve工具：

安装serve：npm install -g serve
在dist目录下运行serve：serve
服务器将会启动，并且会提供一个可以在浏览器中访问的URL。

确保在部署到生产环境时，你仍然需要使用适当的服务器来提供这些静态资源。直接打开本地文件系统上的HTML文件通常不会工作，除非你在一个特殊的环境中（例如使用了特定的服务器软件或者开发服务器软件），该环境能够解析HTML中的JavaScript模块导入。

- 阅读更多 -

spring-boot-starter-thymeleaf加载外部html文件

System

2024-08-23

所有,html

在Spring Boot项目中使用Thymeleaf加载外部HTML文件，你可以通过以下步骤实现：

在pom.xml中添加Thymeleaf依赖（如果尚未添加）：




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

将你的外部HTML文件放在src/main/resources/templates目录下。
在Controller中指定要渲染的视图名称，并确保Thymeleaf配置能正确找到这个视图。
使用Thymeleaf的标准语法来引用外部HTML文件。

例如，假设你有一个名为external.html的外部HTML文件，放在src/main/resources/templates目录下：




<!-- src/main/resources/templates/external.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>External Content</title>
</head>
<body>
    <h1>This is external content</h1>
</body>
</html>

然后，创建一个Controller来渲染这个视图：




import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
 
@Controller
public class MyController {
 
    @GetMapping("/showExternal")
    public String showExternal() {
        return "external"; // 这里的"external"对应templates目录下的external.html文件名
    }
}

最后，在你的HTML模板中使用Thymeleaf的th:replace属性来引用外部HTML：




<!-- src/main/resources/templates/main.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Main Template</title>
</head>
<body>
    <div th:replace="~{external.html}"></div>
</body>
</html>

当你访问/showExternal时，main.html中的th:replace会将external.html的内容插入到<div>标签中。

- 阅读更多 -

uni-app加载HTML网页

System

2024-08-23

所有,html

在uni-app中加载HTML页面，可以使用web-view组件。以下是一个简单的示例：




<template>
  <view>
    <web-view src="https://www.example.com"></web-view>
  </view>
</template>

确保你的页面配置中包含了web-view组件的权限：




{
  "permission": {
    "web-view": {
      "optional": ["https://www.example.com"]
    }
  }
}

请替换https://www.example.com为你想要加载的HTML页面的URL。这个组件允许你在uni-app应用中嵌入一个web页面。

- 阅读更多 -

html js加载本地文件报错处理，跨域问题

System

2024-08-23

所有,html

在HTML和JavaScript中处理本地文件时，出现跨域问题通常是因为浏览器的安全策略阻止了本地文件系统中的文件被访问。

解决方法：

使用本地服务器：通过在本地运行一个Web服务器来避免跨域问题。可以使用如Python的SimpleHTTPServer模块或其他Web服务器软件。
修改浏览器设置：在某些浏览器中（例如Chrome），可以启动带有禁用安全策略的标签页，但这种方法不推荐用于生产环境。
修改JavaScript代码：如果确实需要直接操作本地文件，可以使用特定的API（如果存在），例如在部分浏览器中，可以使用<input type="file">让用户选择文件，然后使用File API进行操作。

示例代码：




// 使用File API读取用户选择的文件
document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (!file) {
        return;
    }
    const reader = new FileReader();
    reader.onload = function(e) {
        const contents = e.target.result;
        // 处理文件内容
    };
    reader.onerror = function(e) {
        console.error("File could not be read! Code " + e.target.error.code);
    };
    reader.readAsText(file); // 或者其他方式，如readAsArrayBuffer等
});

HTML部分：




<input type="file" id="fileInput">

请注意，这些方法可能会根据浏览器的具体实现和安全设置有所不同。在实际生产环境中，为了安全和稳定性，应尽量避免跨域操作，并使用服务器端处理文件。

- 阅读更多 -

[html]HTML 速查列表

System

2024-08-23

所有,html

HTML 速查列表包括常用的 HTML 标签、属性和特殊字符。

文件标签：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
 
</body>
</html>

标题标签：




<h1>标题 1</h1>
<h2>标题 2</h2>
...
<h6>标题 6</h6>

段落和换行标签：




<p>这是一个段落。</p>
<br>  <!-- 换行 -->

文本格式化标签：




<strong>粗体文本</strong>
<em>斜体文本</em>
<del>被删除的文本</del>
<ins>被插入的文本</ins>

链接和图像标签：




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

列表标签：




<ul>
    <li>无序列表项1</li>
    <li>无序列表项2</li>
</ul>
<ol>
    <li>有序列表项1</li>
    <li>有序列表项2</li>
</ol>

块和内联标签：




<div>块级元素</div>
<span>内联元素</span>

表格标签：




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

多媒体标签：




<audio src="audio.mp3" controls></audio>
<video src="video.mp4" controls></video>

表单和输入标签：




<form action="/submit" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="username">
    <input type="submit" value="提交">
</form>

特殊字符：




&lt;   <!-- 小于号 -->
&gt;   <!-- 大于号 -->
&amp;  <!-- 和号 -->
&quot; <!-- 引号 -->
&copy; <!-- 版权符号 -->

这些是 HTML 的基础知识，可以帮助你快速创建一个基本的网页。对于更高级的功能，你可能需要学习 CSS 和 JavaScript。

System

2024-08-23

所有,html

HTML、CSS、JavaScript 和 jQuery 是网页开发中的基本技术。

HTML (Hypertext Markup Language):
HTML 是用来创建网页的标准标记语言。它被用来结构化信息，并给网页提供意义。




<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
</body>
</html>

CSS (Cascading Style Sheets):
CSS 是用来描述网页样式的语言。它可以控制字体、颜色、布局等外观方面。




body {
  background-color: lightblue;
}
 
h1 {
  color: navy;
  margin-left: 20px;
}

JavaScript:
JavaScript 是一种编程语言，可以在网页中实现复杂的交互功能。




function myFunction() {
  alert('Hello, World!');
}

jQuery:
jQuery 是一个 JavaScript 库，它简化了 JavaScript 编程。它使得处理 HTML 文档、事件处理、动画和 Ajax 变得更简单。




$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

这些是基本的网页开发技术，每个技术都有其特性和用途。在实际开发中，通常会将它们结合起来，创建富有交互性的网页应用程序。

- 阅读更多 -

HTML知识点

System

2024-08-23

所有,html

HTML是用于创建网页的标准标记语言。以下是一些常见的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="描述文字" />

超链接：




<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>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

表单和输入：




<form action="submit.php" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="提交">
</form>

多媒体元素：

视频：




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

音频：




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

样式和脚本：

内联样式：




<p style="color:blue;">这是一个蓝色的段落。</p>

外部脚本：




<script src="script.js"></script>

内联样式：




<style>
    body {background-color: powderblue;}
    h1   {color: blue;}
    p2   {color: red;}
</style>

以上是一些基本的HTML知识点和示例代码，实际应用中可能还会涉及更多标签和属性。

- 阅读更多 -

突破界面开发的边界：使用Fizzgui将Go语言和HTML/CSS相结合

System

2024-08-23

所有,html




package main
 
import (
    "github.com/go-fizz/fizz"
    "github.com/go-fizz/fizz/plugins/html"
    "log"
    "os"
)
 
func main() {
    // 创建一个新的Fizz GUI应用
    app := fizz.NewApp()
 
    // 创建HTML插件
    htmlPlugin := html.NewPlugin()
 
    // 加载HTML文件
    err := htmlPlugin.Load("index.html")
    if err != nil {
        log.Fatal(err)
    }
 
    // 将HTML插件添加到Fizz应用中
    app.Add(htmlPlugin)
 
    // 运行应用
    err = app.Run()
    if err != nil {
        log.Fatal(err)
    }
}

这段代码演示了如何使用Fizzgui库创建一个简单的GUI应用，并加载一个HTML文件。首先，我们创建了一个新的Fizz应用，然后创建了一个HTML插件并加载了一个HTML文件。最后，我们将插件添加到应用中并运行它。这个例子简单明了地展示了如何将Go语言和HTML/CSS结合起来，是进行GUI开发的一个很好的起点。

- 阅读更多 -

html粒子代码灵感。

System

2024-08-23

所有,html




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Particle Code Inspiration</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .particles {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #000;
        }
        canvas {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="particles" class="particles">
        <canvas></canvas>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/three@0.125.1/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.125.1/examples/js/postprocessing/EffectComposer.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.125.1/examples/js/postprocessing/RenderPass.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.125.1/examples/js/postprocessing/ShaderPass.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.125.1/examples/js/shaders/CopyShader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.125.1/examples/js/shaders/DotScreenShader.js"></script>
    <script>
        const {
            Scene,
            PerspectiveCamera,
            WebGLRenderer,
            Mesh,
            MeshBasicMaterial,
            PlaneGeometry,
            Vector2,
            Raycaster,
            TextureLoader,
            BufferGeometry,
            BufferAttribute,
            PointsMaterial,
            Points,
            AdditiveBlending,
            Color,
            BackSide,
            SpotLight,
            MeshPhongMaterial
        } = THREE;
 
        let scene, camera, renderer, composer;
        const container = document.querySelector('.particles');
        const mouse = new Vector2();
        const raycaster = new Raycaster();
        const objects = [];
        const params = {
            exposure: 1,
            bloomStrength: 1.6,
            bloomThreshold: 0,
            bloomRadius: 0.
        };
 
        init();
        animate();
 
        function init() {
            scene = new Scene();
            camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
            c

- 阅读更多 -