分类 html5 下的文章

2024-08-17

😩抱歉，出了点小问题，请稍后重试

Threejs入门之十四：Threejs中的组(Group)对象

2024-08-17

在Three.js中，组（Group）对象是一种特殊类型的对象，它可以用来容纳和管理多个3D对象（如网格、材质、灯光等）。通过将这些对象添加到组中，可以将它们作为一个单一的实体进行变换、渲染和交互。

下面是创建一个组并向其中添加几个不同的3D对象的示例代码：

import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 创建几个不同的网格对象
const mesh1 = new THREE.Mesh(geometry, material);
const mesh2 = new THREE.Mesh(geometry, material);
const mesh3 = new THREE.Mesh(geometry, material);

// 创建一个组并添加网格对象
const group = new THREE.Group();
group.add(mesh1);
group.add(mesh2);
group.add(mesh3);

// 将组添加到场景
scene.add(group);

// 设置相机位置并指向组的中心
camera.position.z = 5;

// 渲染循环
function animate() {
  requestAnimationFrame(animate);

  // 旋转组中的所有对象
  group.rotation.x += 0.01;
  group.rotation.y += 0.01;

  // 渲染场景
  renderer.render(scene, camera);
}

animate();

在这个例子中，我们创建了一个包含3个网格对象的组，并将它添加到场景中。然后，我们在渲染循环中旋转这个组，从而使其中的所有网格对象一起旋转。这种方式可以用来创建复杂的3D对象，这些对象由许多小部件组成，可以以一个单元的形式进行管理和变换。

VUE 使用 HTML5原生拖放（draggable）

2024-08-17

在Vue中使用HTML5原生拖放功能，你可以通过绑定draggable属性到元素上，并监听相关的事件来实现拖放功能。以下是一个简单的例子：

<template>
  <div>
    <div
      v-for="(item, index) in items"
      :key="index"
      draggable="true"
      @dragstart="dragStart(index)"
      @dragover.prevent
      @drop="dragDrop(index, $event)"
      style="margin: 10px; cursor: move; user-select: none;"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      draggedIndex: null,
    };
  },
  methods: {
    dragStart(index) {
      this.draggedIndex = index;
    },
    dragDrop(index, e) {
      const draggedItem = this.items.splice(this.draggedIndex, 1)[0];
      this.items.splice(index, 0, draggedItem);
    },
  },
};
</script>

在这个例子中，我们有一个包含三个项的列表items。每个项通过draggable="true"来标记为可拖动。我们使用dragstart事件来记录被拖动项的索引，并在dragover事件上调用event.preventDefault()来允许放置。在drop事件中，我们移动被拖动的项到新位置。

tidy-html5: 简洁高效地清理和修复您的HTML代码

2024-08-17

tidy-html5 是一个用于清理和修复HTML代码的工具库。它遵循HTML5规范，并提供了一系列的选项来配置如何处理输入的HTML代码。

以下是一个使用 tidy-html5 的基本示例，它将格式化HTML代码并移除不必要的标签和属性：

const { tidyHtml5 } = require('tidy-html5');

const htmlContent = `
  <html>
    <head>
      <title>测试页面</title>
    </head>
    <body>
      <p>这是一个测试<strong>段落</strong>.</p>
    </body>
  </html>
`;

const options = {
  'indent-spaces': 2, // 设置缩进空格数
  'wrap': 0, // 禁用自动换行
  'show-errors': 0, // 不显示错误
  'quiet': 1 // 静默模式，不输出警告
};

const cleanedHtml = tidyHtml5(htmlContent, options);
console.log(cleanedHtml);

在这个例子中，tidyHtml5 函数接受HTML内容和一个配置对象作为参数，然后返回清理和格式化后的HTML代码。这个函数可以用于服务端脚本，以确保HTML内容符合规范并减少潜在的错误和潜在的安全问题。

html5设置不缓存

2024-08-17

在HTML5中，可以通过设置HTTP响应头来防止页面被缓存。这可以在服务器端配置，也可以在HTML文档中使用JavaScript来实现。

服务器端设置（例如，在Apache的.htaccess文件中或者Nginx配置中）:

<FilesMatch "\.(html|htm|js|css)$">
    FileETag None
    Header unset ETag
    Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</FilesMatch>

或者，如果你想在HTML文档内部设置，可以使用JavaScript来修改meta标签：

<!DOCTYPE html>
<html>
<head>
    <title>不缓存的页面</title>
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <script>
        (function() {
            if ('cache' in window.performance.getEntriesByType('navigation')[0]) {
                window.location.reload();  // 强制刷新页面
            }
        })();
    </script>
</head>
<body>
    <p>这个页面设置为不缓存。</p>
</body>
</html>

请注意，这些方法不是HTML5的一部分，而是HTTP协议的标准方式来控制缓存行为。在实际应用中，你可能需要根据具体的服务器配置和需求选择合适的方法。

HTML5 样板文件的 Web开发

2024-08-17

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 样板文件</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <!-- 头部内容 -->
    </header>
    <nav>
        <!-- 导航栏 -->
    </nav>
    <main>
        <!-- 主要内容 -->
    </main>
    <aside>
        <!-- 侧边内容 -->
    </aside>
    <footer>
        <!-- 底部内容 -->
    </footer>
    <script src="script.js"></script>
</body>
</html>

这个代码示例展示了如何使用HTML5的语义元素来构建一个标准的网页结构。它使用了<header>, <nav>, <main>, <aside>, 和 <footer>等元素来更明确地表示网页的不同区域。这样的结构有助于搜索引擎理解网页内容，同时也有助于开发者和设计师维护和理解代码。

2024-08-17

以下是一个简化的HTML和CSS代码示例，用于实现一个基于HTML5的美食菜谱网页设计。

<!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: 20px;
            background-color: #f7f7f7;
        }
        .recipe-card {
            background-color: #fff;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .recipe-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .recipe-ingredients {
            list-style-type: square;
            padding-left: 20px;
        }
        .recipe-instructions {
            margin-top: 20px;
        }
        .recipe-instructions p {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="recipe-card">
        <h2 class="recipe-title">香煎牛肉饭</h2>
        <ul class="recipe-ingredients">
            <li>500克牛肉</li>
            <li>2个西红柿</li>
            <li>2个蒜瓣</li>
            <li>2茶匙大葱</li>
            <li>1茶匙香菜</li>
            <li>1茶匙蒜末</li>
            <li>2茶匙食盐</li>
            <li>1.5茶匙黑胡椒</li>
            <li>1.5茶匙香料</li>
            <li>200毫升菜油</li>
            <li>200毫升牛奶</li>
        </ul>
        <div class="recipe-instructions">
            <h3>制作步骤:</h3>
            <p>1. 将牛肉切成块。</p>
            <p>2. 在锅中加热油，加入蒜瓣翻煎至其变色。</p>
            <p>3. 加入牛肉块，翻煎至金黄色后转为油润。</p>
            <p>4. 加入西红柿、大葱、香菜、蒜末等香料翻煎。</p>
            <p>5. 加入盐和胡椒，继续翻煎至香味充足。</p>
            <p>6. 加入牛奶，搅拌均匀后转小火慢炖10分钟。</p>
            <p>7. 炖煮过程中不断搅拌，直至汤汁浓稠。</p>
            <p>8. 出锅前撒上适量的香菜。</p>
        </div>
    </div>
</body>
</html>

这个示例展示了如何使用HTML结构化菜谱信息，并通过内嵌的CSS样式来增强页面的视觉效果。简洁的HTML和CSS使得页面易于维护，并且对屏幕阅读器和搜索引擎优化友好。

HTML5 扩展了 HTMLDocument 类型

2024-08-17

HTML5 对 HTMLDocument 类型进行了扩展，增加了一些新的属性和方法，以下是一些常见的 HTML5 特有的属性和方法：

readyState：返回文档的加载状态。
currentScript：返回当前正在运行的 script 元素。
activeElement：返回当前文档中聚焦的元素。
compatMode：返回当前文档的模式。
designMode：设置或返回文档的设计模式。
implementation：返回一个 DOMImplementation 对象，表示文档对象模型的功能。
URL：返回文档的URL。
domain：设置或返回文档的域。
referrer：返回加载当前文档的文档的 URL。
title：设置或返回当前文档的标题。

以下是一个简单的 HTML5 文档示例，展示了如何使用这些新属性：

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Document Properties Example</title>
</head>
<body>
    <script>
        // 使用 readyState 属性
        console.log('文档加载状态:', document.readyState);

        // 使用 URL 属性
        console.log('文档的 URL:', document.URL);

        // 使用 domain 属性
        console.log('文档的域:', document.domain);

        // 使用 referrer 属性
        console.log('引用文档的 URL:', document.referrer);

        // 使用 title 属性
        console.log('文档的标题:', document.title);

        // 设置 title 属性
        document.title = '新标题';

        // 使用 designMode 属性
        document.designMode = 'on'; // 开启设计模式
    </script>
</body>
</html>

在这个例子中，我们简单地读取并修改了几个文档属性。在实际开发中，你可以根据需要使用这些属性来编写更加动态和交互的网页应用程序。

HTML5语音输入和语音识别

2024-08-17

HTML5提供了一个名为webkitSpeech的语音输入API，可以用来实现语音识别功能。这个API可以集成到大多数现代浏览器中，但主要是Webkit引擎的浏览器，比如Chrome和Safari。

以下是一个简单的HTML5语音输入示例代码：

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Speech Input Example</title>
<script>
function startSpeechToText() {
  if (window.hasOwnProperty('webkitSpeechRecognition')) {
    const recognition = new webkitSpeechRecognition();

    recognition.continuous = false;
    recognition.lang = "en-US";
    recognition.interimResults = false;
    recognition.maxAlternatives = 1;

    recognition.start();

    recognition.onresult = function(event) {
      const query = event.results[0][0].transcript;
      document.getElementById('speech-input').value = query;
      recognition.stop();
    };

    recognition.onerror = function(event) {
      console.error('Speech Recognition Error:', event.error);
    }
  } else {
    alert('Speech Recognition is not supported by your browser.');
  }
}
</script>
</head>
<body>

<input type="text" id="speech-input" placeholder="Speech input here...">
<button onclick="startSpeechToText()">Start Speech</button>

</body>
</html>

在这个例子中，我们定义了一个名为startSpeechToText的函数，该函数检查浏览器是否支持webkitSpeechRecognition。如果支持，它将创建一个新的webkitSpeechRecognition实例，并设置一些属性，如语言和中间结果。然后，它启动语音识别并设置onresult事件处理程序来处理识别的结果。如果发生错误，它会在控制台中记录错误。如果浏览器不支持，它将弹出一个警告。

用户可以通过点击按钮来开始说话，说完后浏览器会将说话内容转换为文本并填充到输入框中。这个例子提供了一个基本的语音输入实现，你可以根据自己的需求进行扩展和定制。

Vue3 vant组件库Toast提示样式

2024-08-17

在Vue 3中使用vant组件库的Toast组件时，如果需要自定义样式，可以通过以下方式进行：

使用Toast的type属性来指定不同的图标，但这些图标是固定的。
使用Toast的icon属性来使用自定义图标，可以是图片链接或者SVG。
使用Toast的className属性来指定一个自定义的类名，然后在CSS中定义样式。
使用Toast的customStyle属性来直接在组件上应用内联样式。

以下是一个自定义Toast样式的例子：

<template>
  <button @click="showCustomToast">显示自定义Toast</button>
</template>

<script setup>
import { Toast } from 'vant';

const showCustomToast = () => {
  Toast({
    message: '自定义Toast',
    icon: 'https://example.com/custom-icon.png', // 自定义图标链接
    className: 'my-custom-toast', // 自定义类名
    customStyle: {
      color: '#fff', // 文本颜色
      background: 'rgba(0, 0, 0, 0.7)', // 背景颜色
      borderRadius: '5px', // 边框圆角
      padding: '10px', // 内边距
    }
  });
};
</script>

<style>
/* 自定义Toast样式 */
.my-custom-toast {
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  padding: 10px;
  /* 其他自定义样式 */
}
</style>

在这个例子中，我们创建了一个按钮，点击后会显示一个自定义样式的Toast。我们使用了icon属性来设置自定义图标，className属性来指定一个自定义的类名，并在customStyle属性中直接设置了样式。在CSS中，我们定义了.my-custom-toast类来应用这些样式。