System 发布的文章

2024-08-23

在移动端Web页面开发中，常用的HTML头部标签设置包括指定字符集、禁止缩放、添加移动端友好的视口设置、以及添加对移动端特定功能的支持，如下所示：




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>移动端页面标题</title>
    <meta name="author" content="作者名字">
    <meta name="keywords" content="页面关键词">
    <meta name="description" content="页面描述">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="HandheldFriendly" content="true">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

在这个例子中，<meta charset="UTF-8"> 指定了字符编码，<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 设置了视口宽度等于设备屏幕宽度，初始缩放比例为1，并禁用了用户缩放。其他的meta标签则提供了一些额外的功能，比如禁止将手机号码显示为电话号码、设置iOS中的Web App是否可以添加到主屏幕上，并指定了状态栏的样式等。最后，链接了一个网页图标和样式表。

- 阅读更多 -

web前端之HTML全部笔记（包含html5)

System

2024-08-23

所有,html5

HTML是用于创建网页的标准标记语言，HTML5是其最新版本，添加了新的元素和功能，如画布、视频、地理位置等。

以下是HTML5的基本结构和一些常用元素的简单示例：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
    <a href="https://www.example.com">链接到example.com</a>
</body>
</html>

HTML5 添加了一些新的元素，如 <header>, <nav>, <section>, <article>, <aside>, <footer> 等，以及多媒体支持，如 <video>, <audio>, 和 <canvas>。

视频元素示例：




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

画布元素示例：




<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
  您的浏览器不支持Canvas。
</canvas>

记住，为了确保跨浏览器的兼容性，您应该在使用HTML5的新特性时，考虑到老旧浏览器的兼容性问题。

- 阅读更多 -

HTML5登录+注册界面

System

2024-08-23

所有,html5

以下是一个简单的HTML5登录和注册界面的示例代码。这个界面包括了表单的创建、输入元素的使用以及一些基本的CSS样式。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login & Register Form</title>
<style>
  body { font-family: Arial, sans-serif; }
  form { width: 300px; margin: 50px auto; }
  form h1 { text-align: center; }
  form div { margin-top: 10px; }
  form label { display: block; margin-bottom: 5px; }
  form input[type="text"], form input[type="password"] { width: 100%; padding: 10px; margin-top: 2px; }
  form input[type="submit"] { width: 100%; padding: 10px; margin-top: 10px; }
</style>
</head>
<body>
 
<form action="/submit-your-form" method="post">
  <h1>Login</h1>
  <div>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
  </div>
  <div>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>
  </div>
  <input type="submit" value="Login">
</form>
 
<form action="/submit-your-form" method="post">
  <h1>Register</h1>
  <div>
    <label for="username-reg">Username:</label>
    <input type="text" id="username-reg" name="username" required>
  </div>
  <div>
    <label for="password-reg">Password:</label>
    <input type="password" id="password-reg" name="password" required>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </div>
  <input type="submit" value="Register">
</form>
 
</body>
</html>

这个代码实例包括了两个表单：一个用于登录，另一个用于注册。每个表单都有其自己的<h1>标题、输入字段以及提交按钮。CSS样式用于增强表单的视觉效果，并提供了一定的布局和视觉聚焦。这个简单的例子可以作为开发者开始构建更复杂登录和注册界面的起点。

- 阅读更多 -

html5 draggable 随意拖动任意位置

System

2024-08-23

所有,html5

HTML5 的 draggable 属性允许您使元素可拖动。然而，draggable 属性本身并不提供拖动后放置的功能。您需要使用 JavaScript 来处理拖动事件。

以下是一个简单的例子，展示了如何使元素可拖动，并且能够在页面上任意拖动：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Draggable Element</title>
<style>
#draggable {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
  text-align: center;
  line-height: 100px;
  border: 2px dashed black;
  cursor: move;
}
</style>
</head>
<body>
 
<div id="draggable" draggable="true">Drag me!</div>
 
<script>
// 获取可拖动元素
var dragItem = document.getElementById('draggable');
 
// 监听拖动开始事件
dragItem.addEventListener('dragstart', function(event) {
  // 设置数据类型和值
  event.dataTransfer.setData('text/plain', 'draggedItem');
});
 
// 监听拖动结束事件
dragItem.addEventListener('dragend', function(event) {
  // 可以在这里执行操作，比如更新应用状态
});
 
// 为页面添加拖动over和drop事件
document.addEventListener('dragover', function(event) {
  event.preventDefault(); // 阻止默认行为
});
 
document.addEventListener('drop', function(event) {
  event.preventDefault(); // 阻止默认行为
 
  // 获取被拖动的元素
  var draggedItem = document.getElementById(event.dataTransfer.getData('text/plain'));
 
  // 如果元素存在，将其添加到放置目标
  if (draggedItem) {
    draggedItem.style.position = 'relative';
    draggedItem.style.left = event.clientX - draggedItem.offsetWidth / 2 + 'px';
    draggedItem.style.top = event.clientY - draggedItem.offsetHeight / 2 + 'px';
  }
});
</script>
 
</body>
</html>

在这个例子中，draggable 属性被用于使元素可拖动。dragstart 和 dragend 事件用于处理拖动的开始和结束。dragover 和 drop 事件用于处理拖动过程中的元素放置。通过 JavaScript，我们在 drop 事件中更新了元素的位置，使其能够在页面上任意拖动。

- 阅读更多 -

UE4引擎支持HTML5

System

2024-08-23

所有,html5

Unreal Engine 4（UE4）确实支持HTML5，但这主要是通过一个叫做“WebBrowser”的模块来实现的，它允许你在UE4中嵌入HTML内容。这对于创建自定义的用户界面或者是一个可以在多种平台上运行的游戏版本（比如通过HTML5来运行在桌面和移动设备上）是非常有用的。

要在UE4中使用HTML5，你需要做以下几步：

在你的项目设置中启用WebBrowser模块。
使用C++代码来创建和管理WebBrowser的实例。
加载你想要显示的HTML内容。

下面是一个简单的例子，展示了如何在UE4中创建一个WebBrowser实例并加载一个HTML页面：




#include "WebBrowserModule.h"
#include "WebBrowserWidget.h"
 
TSharedPtr<IWebBrowserWindow> WebBrowser;
 
void AMyActor::BeginPlay()
{
    Super::BeginPlay();
 
    IWebBrowserModule& WebBrowserModule = FModuleManager::LoadModuleChecked<IWebBrowserModule>(TEXT("WebBrowser"));
    TSharedPtr<IWebBrowserWindow> WebBrowserWindow = WebBrowserModule.CreateWebBrowserWindow(TAttribute<FVector2D>::Create(TAttribute<FVector2D>::FGetter::CreateRaw(this, &AMyActor::GetWindowSize)), nullptr);
 
    if (WebBrowserWindow.IsValid())
    {
        WebBrowser = WebBrowserWindow;
        WebBrowser->LoadURL(TEXT("http://www.mywebsite.com/index.html"));
    }
}
 
FVector2D AMyActor::GetWindowSize() const
{
    return FVector2D(1024.0f, 768.0f); // Replace with your desired size
}

在这个例子中，当你的游戏开始运行时，BeginPlay函数会被调用，并创建一个WebBrowser窗口，然后加载指定的URL。GetWindowSize函数返回了窗口的大小，你可以根据需要进行修改。

请注意，虽然UE4支持HTML5，但是并不是所有的HTML5特性都被支持。例如，它不支持所有的JavaScript API，或者GPU加速的canvas和SVG。如果你需要更高级的HTML5支持，可能需要使用其他的方法，比如嵌入一个完整的浏览器进程或者使用外部的Web技术。

- 阅读更多 -

原生小案例：如何使用HTML5 Canvas构建画板应用程序

System

2024-08-23

所有,html5




<!DOCTYPE html>
<html>
<head>
    <title>Simple Paint App</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
 
        let isDrawing = false;
        let lastX = 0;
        let lastY = 0;
        let hue = 0;
        const mobile = false;
 
        function draw(e) {
            if (!isDrawing) return;
            ctx.beginPath();
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(e.offsetX, e.offsetY);
            ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
            ctx.lineWidth = mobile ? 20 : 10;
            ctx.stroke();
            lastX = e.offsetX;
            lastY = e.offsetY;
            hue++;
        }
 
        function startPosition(e) {
            isDrawing = true;
            [lastX, lastY] = [e.offsetX, e.offsetY];
        }
 
        function stopPosition() {
            isDrawing = false;
        }
 
        canvas.addEventListener('mousedown', startPosition);
        canvas.addEventListener('mousemove', draw);
        canvas.addEventListener('mouseup', stopPosition);
        canvas.addEventListener('mouseleave', stopPosition);
 
        // Support for mobile devices
        canvas.addEventListener('touchstart', e => {
            mobile = true;
            startPosition(e.touches[0]);
            e.preventDefault();
        });
        canvas.addEventListener('touchmove', e => {
            draw(e.touches[0]);
            e.preventDefault();
        });
        canvas.addEventListener('touchend', stopPosition);
    </script>
</body>
</html>

这段代码实现了一个简单的画板应用程序，它可以在网页上运行。用户可以使用鼠标或触摸设备在画布上绘制。代码包括了鼠标和触摸事件的监听，并且对移动设备进行了适配。

- 阅读更多 -

新手入门Java和HTML5之间的交互式操作

System

2024-08-23

所有,html5

在Java和HTML5之间进行交互操作，通常是通过Web应用服务器来实现的。以下是一个简单的例子，展示了如何使用Java Spring框架的控制器来处理来自HTML5页面的请求。

Java后端代码 (Spring Controller):




import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
 
@Controller
@RequestMapping("/api")
public class InteractionController {
 
    @GetMapping("/greeting")
    @ResponseBody
    public String greeting() {
        return "Hello, HTML5!";
    }
}

HTML5前端代码 (使用JavaScript和Fetch API进行异步请求):




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Interaction with Java</title>
    <script>
        function fetchGreeting() {
            fetch('/api/greeting')
                .then(response => response.text())
                .then(greeting => {
                    document.getElementById('greeting').textContent = greeting;
                });
        }
    </script>
</head>
<body>
    <button onclick="fetchGreeting()">Fetch Greeting</button>
    <p id="greeting"></p>
</body>
</html>

在这个例子中，当用户点击按钮时，JavaScript会发送一个GET请求到/api/greeting。Java后端的Spring控制器接收请求并返回文本 "Hello, HTML5!"。然后，HTML5页面使用这个响应更新页面上的段落。这是一个非常基础的交互示例，但展示了如何通过Web服务器后端和客户端JavaScript进行通信。

- 阅读更多 -

HTML5如何在页内显示另外的页面

System

2024-08-23

所有,html5

在HTML5中，可以使用iframe元素来在页面内显示另一个页面。iframe允许你在当前HTML文档中嵌入一个完全独立的HTML文档。

下面是一个简单的例子：




<!DOCTYPE html>
<html>
<head>
    <title>内嵌页面示例</title>
</head>
<body>
    <h1>主页面</h1>
    <iframe src="nested-page.html" width="600" height="400">
        抱歉，您的浏览器不支持内嵌框架(iframe)。
    </iframe>
</body>
</html>

在这个例子中，iframe的src属性指定了嵌入页面的URL。width和height属性设置了iframe的尺寸。如果浏览器不支持iframe，则会显示iframe标签中的文本。

- 阅读更多 -

网页js版音频数字信号处理：H5录音+特定频率信号的特征分析和识别提取

System

2024-08-23

所有,html5

以下是一个简化的示例，展示了如何使用Web Audio API进行音频数字信号处理，并进行频率特征分析：




// 获取页面中的按钮和显示结果的元素
const startButton = document.getElementById('start-button');
const stopButton = document.getElementById('stop-button');
const result = document.getElementById('result');
 
let audioContext = null;
let mediaStreamSource = null;
let analyser = null;
let javascriptNode = null;
 
// 当用户点击开始按钮时，开始录音
startButton.addEventListener('click', () => {
  if (navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({ audio: true })
      .then(gotStream)
      .catch(e => console.log('Error:', e));
  } else {
    alert('getUserMedia not supported on your browser!');
  }
});
 
// 处理获取的媒体流
function gotStream(stream) {
  audioContext = new AudioContext();
  // 创建一个MediaStreamAudioSourceNode
  // 它连接到音频流，作为音频处理的起点
  mediaStreamSource = audioContext.createMediaStreamSource(stream);
 
  // 创建一个分析器节点
  analyser = audioContext.createAnalyser();
  analyser.fftSize = 2048;
  mediaStreamSource.connect(analyser);
  javascriptNode = audioContext.createScriptProcessor(2048, 1, 1);
 
  // 连接分析器节点和脚本处理节点，并定义处理函数
  analyser.connect(javascriptNode);
  javascriptNode.connect(audioContext.destination);
  javascriptNode.onaudioprocess = function(e) {
    // 获取音频数据
    var array = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(array);
 
    // 对数组进行处理，例如寻找特定频率
    // ...
 
    // 将处理结果显示出来
    result.textContent = '处理结果: ' + processingResult;
  };
}
 
// 当用户点击停止按钮时，停止媒体流
stopButton.addEventListener('click', () => {
  mediaStreamSource.mediaStream.getTracks()[0].stop();
});

这段代码展示了如何使用Web API从用户的麦克风获取实时音频流，并通过AudioContext进行音频数据的处理。它使用了createMediaStreamSource来连接媒体流，并使用createAnalyser创建了一个分析器节点来进行FFT变换。然后，它创建了一个脚本处理节点javascriptNode，并在其上设置了onaudioprocess事件处理函数，在这个函数中进行了音频数据的处理。最后，它展示了如何停止媒体流。

这个例子是一个简化的实现，实际应用中可能需要更复杂的信号处理和识别技术。

System

2024-08-23

所有,html5

在HTML中，可以通过CSS样式来设置元素的边框。以下是设置正方形边框的三种方法：

直接在HTML元素中使用style属性设置边框：




<div style="width: 100px; height: 100px; border: 2px solid black;"></div>

在<head>中使用<style>标签定义CSS样式，然后在元素中使用class或id引用样式：




<style>
  .square {
    width: 100px;
    height: 100px;
    border: 2px solid black;
  }
</style>
 
<div class="square"></div>

在外部CSS文件中定义样式，然后在HTML中引用：




/* styles.css */
.square {
  width: 100px;
  height: 100px;
  border: 2px solid black;
}




<link rel="stylesheet" href="styles.css">
 
<div class="square"></div>

以上三种方法均可以创建一个边框正好是100像素宽高的正方形。

- 阅读更多 -