1. 首页
  2. 标签
  3. html5
HTML5 基础标签
System
2024-08-08
所有,html5

HTML5 引入了许多新的语义化标签，以下是一些基本的HTML5标签及其用法示例：

  1. <header> - 页面或区域的头部



<header>
    <h1>网站标题</h1>
    <p>网站副标题</p>
</header>
  1. <nav> - 导航链接



<nav>
    <ul>
        <li><a href="#">主页</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">服务</a></li>
    </ul>
</nav>
  1. <section> - 定义文档中的一个区段



<section>
    <h2>区段标题</h2>
    <p>区段内容。</p>
</section>
  1. <article> - 独立的内容



<article>
    <h2>文章标题</h2>
    <p>这是一篇文章的内容。</p>
    <footer>
        <p>文章底部信息</p>
    </footer>
</article>
  1. <aside> - 非正文的侧边内容



<aside>
    <p>侧边内容，如广告等。</p>
</aside>
  1. <footer> - 底部信息



<footer>
    <p>版权信息</p>
</footer>

这些标签有助于提高代码的可读性和可维护性，同时有助于搜索引擎的索引排名。

- 阅读更多 -
HTML5七夕情人节表白网页制作【抖音3D立方体图像库】HTML+CSS+JavaScript html生日快乐祝福网页制作
System
2024-08-08
所有,html5

要创建一个HTML5的七夕情人节表白页面，我们可以使用一个简单的3D立方体GIF动画作为背景，来提升页面的视觉效果。以下是一个简单的HTML和CSS示例，用于创建带有3D立方体背景的表白页面：




<!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, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  .container {
    perspective: 1000px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .cube {
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: rotate 5s infinite linear;
  }
  .side {
    width: 200px;
    height: 200px;
    position: absolute;
    background-size: cover;
    box-shadow: 0 0 5px #fff;
  }
  @keyframes rotate {
    0% {
      transform: rotateX(0deg) rotateY(0deg);
    }
    100% {
      transform: rotateX(360deg) rotateY(360deg);
    }
  }
</style>
</head>
<body>
<div class="container">
  <div class="cube">
    <div class="side" style="background-image: url('img1.gif'); transform: translateZ(100px);"></div>
    <div class="side" style="background-image: url('img2.gif'); transform: rotateY(90deg) translateZ(100px);"></div>
    <div class="side" style="background-image: url('img3.gif'); transform: rotateY(-90deg) translateZ(100px);"></div>
    <div class="side" style="background-image: url('img4.gif'); transform: rotateX(90deg) translateZ(100px);"></div>
    <div class="side" style="background-image: url('img5.gif'); transform: rotateX(-90deg) translateZ(100px);"></div>
    <div class="side" style="background-image: url('img6.gif'); transform: rotateY(180deg) translateZ(100px);"></div>
  </div>
</div>
</body>
</html>

在这个示例中，我们创建了一个带有6个面的3D立方体，每个面使用了不同的GIF动图作为背景。通过CSS中的transform-style: preserve-3d;属性，我们可以让立方体内部的元素保持3D效果。动画通过CSS的@keyframes规则创建，使立方体不断旋转。

请替换img1.gif到img6.gif为你自己的图片链接。这个简单的例子可以作为你创建更复杂3D立方体效果的起点。

- 阅读更多 -
HTML5前端基础--前端B/S架构
System
2024-08-08
所有,html5

在B/S（Browser/Server）架构中，客户端只需要一个浏览器，服务端负责处理所有的业务逻辑和数据存储。前端负责构建Web页面和交互，后端负责提供API接口和数据。

以下是一个简单的前端代码示例，展示了如何使用HTML5和JavaScript向服务端发送请求：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>B/S架构示例</title>
</head>
<body>
    <h1>B/S架构前端示例</h1>
    <button id="fetchData">获取数据</button>
    <div id="dataContainer">数据加载中...</div>
 
    <script>
        document.getElementById('fetchData').addEventListener('click', function() {
            fetch('https://api.example.com/data')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('dataContainer').textContent = JSON.stringify(data, null, 2);
                })
                .catch(error => console.error('Error:', error));
        });
    </script>
</body>
</html>

在这个例子中，我们使用了fetch函数来向服务端的API发送请求，并在按钮点击事件中处理响应。服务端需要提供一个可访问的URL（如https://api.example.com/data），并确保响应的内容是可解析的（在这个例子中是JSON格式）。这样，前端只需要处理用户界面，所有的业务逻辑和数据处理都在服务器端进行。

- 阅读更多 -
HTML5七夕情人节表白网页制作【流星动画3D相册】HTML+CSS+JavaScript
System
2024-08-08
所有,html5

以下是一个简化的HTML和JavaScript代码示例，用于创建一个流星落到地面的动画效果。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流星动画</title>
<style>
  canvas {
    background: #000;
    display: block;
  }
</style>
</head>
<body>
 
<canvas id="canvas"></canvas>
 
<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const W = canvas.width = window.innerWidth;
  const H = canvas.height = window.innerHeight;
  const halfW = W * 0.5;
  const halfH = H * 0.5;
 
  class Star {
    constructor() {
      this.x = Math.random() * W;
      this.y = Math.random() * H;
      this.coords = this.calculateCoords(this.x, this.y);
      this.velocity = {
        x: (Math.random() - 0.5) * 5,
        y: (Math.random() - 0.5) * 5
      };
      this.angle = Math.atan2(this.velocity.y, this.velocity.x);
      this.speed = 2;
      this.size = Math.random() * 2;
      this.brightness = Math.random() * 255;
    }
 
    update() {
      this.x += this.velocity.x * this.speed;
      this.y += this.velocity.y * this.speed;
      if(this.x > W || this.x < 0) this.velocity.x *= -1;
      if(this.y > H || this.y < 0) this.velocity.y *= -1;
    }
 
    draw() {
      ctx.beginPath();
      ctx.fillStyle = `hsl(25, 100%, ${this.brightness}%)`;
      ctx.arc(...this.coords, this.size, 0, Math.PI * 2);
      ctx.fill();
    }
 
    calculateCoords(x, y) {
      const angle = Math.atan2(halfH - y, halfW - x);
      const r = Math.hypot(halfW - x, halfH - y);
      return [
        halfW + r * Math.cos(angle),
        halfH + r * Math.sin(angle)
      ];
    }
  }
 
  const starfield = [];
  const starCount = 1000;
  for (let i = 0; i < starCount; i++) {
    starfield.push(new Star());
  }
 
  function animate() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
    ctx.fillRect(0, 0, W, H);
    starfield.forEach((star, index) => {
      star.update();
      star.draw();
    });
    requestAnimationFrame(animate);
  }
 
  animate();
</script>
 
</body>
</html>

这段代码创建了一个流星类，其中包含流星的属性，如位置、速度、颜色和大小。calculateCoords函数将2D平面上的坐标转换为3D空间中的坐标。update方法更新流星的位置，如果它超出了屏幕边界，就反弹。draw方法在画布上绘制流星。主循环中创建了一个流星数组，并在animate函数中更新和绘制它们。

- 阅读更多 -
情人节程序员用HTML网页表白【七夕烟花】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
System
2024-08-08
所有,html5

以下是一个简单的HTML和CSS代码示例，用于创建一个表白页面，模仿烟花绽放的视觉效果：




<!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, html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
  }
 
  .fireworks {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100px;
    height: 100px;
    background: #f00;
    border-radius: 50%;
    opacity: 0;
    animation: fireworks-animation 2s infinite;
  }
 
  @keyframes fireworks-animation {
    0% {
      opacity: 0;
      transform: translateX(-50%) translateY(-50%) scale(0.5);
    }
    100% {
      opacity: 1;
      transform: translateX(-50%) translateY(-50%) scale(1);
    }
  }
</style>
</head>
<body>
<div class="fireworks"></div>
<script>
  function createFirework() {
    const firework = document.createElement('div');
    firework.classList.add('fireworks');
    document.body.appendChild(firework);
    setTimeout(() => {
      firework.remove();
    }, 2000);
  }
 
  setInterval(createFirework, 1000);
</script>
</body>
</html>

这段代码通过CSS创建了一个简单的火焰图案，通过JavaScript定时创建火焰图案的效果，模拟烟花在空中飘落的视觉效果。这个示例可以作为表白页面的一个简单的视觉娱乐，但是要注意，应该尊重对方的感受，不要给不喜欢这种表白方式的人带来不愉快。

- 阅读更多 -
HTML5引入element
System
2024-08-08
所有,html5

HTML5 引入了新的元素，这些元素不仅提供了更好的语义，还有助于改善搜索引擎优化（SEO）和屏幕阅读器的访问。

以下是一些常见的HTML5新元素：

  1. <header> - 表示页面或页面中一个区块的头部区域。
  2. <nav> - 表示页面中导航链接的部分。
  3. <section> - 表示文档中的一个区块，比如章节、头部或内容。
  4. <article> - 表示文档中独立的、完整的内容。
  5. <aside> - 表示与页面主内容少关的内容。
  6. <footer> - 表示页面或页面中一个区块的底部区域。

使用这些元素的例子：




<!DOCTYPE html>
<html>
<head>
    <title>示例页面</title>
</head>
<body>
    <header>
        <h1>我的网站</h1>
        <nav>
            <ul>
                <li><a href="/home">主页</a></li>
                <li><a href="/about">关于</a></li>
                <li><a href="/contact">联系</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <article>
            <header>
                <h2>文章标题</h2>
            </header>
            <p>这里是文章的内容...</p>
            <footer>
                <p>这里是文章的脚注...</p>
            </footer>
        </article>
    </section>
    <aside>
        <p>这里是侧边栏内容...</p>
    </aside>
    <footer>
        <p>版权所有 © 2023 我的网站</p>
    </footer>
</body>
</html>

这段代码展示了如何在HTML5中使用这些新的语义元素来构建一个典型页面的结构。这有助于改善页面的可访问性和可读性，同时也有助于搜索引擎更好地理解页面内容。

- 阅读更多 -
HTML5新手入门指南，源码解读-别再说你不知道HashMap原理
System
2024-08-08
所有,html5



<!DOCTYPE html>
<html>
<head>
    <title>HashMap 示例</title>
    <script>
        // 定义 HashMap 类
        class HashMap {
            constructor() {
                this.storage = {};
                this.count = 0;
            }
 
            // 添加键值对
            set(key, value) {
                if (!this.storage.hasOwnProperty(key)) {
                    this.count++;
                }
                this.storage[key] = value;
            }
 
            // 获取指定键的值
            get(key) {
                return this.storage.hasOwnProperty(key) ? this.storage[key] : undefined;
            }
 
            // 移除指定键
            remove(key) {
                if (this.storage.hasOwnProperty(key)) {
                    delete this.storage[key];
                    this.count--;
                }
            }
 
            // 获取 HashMap 的大小
            get size() {
                return this.count;
            }
 
            // 清空 HashMap
            clear() {
                this.storage = {};
                this.count = 0;
            }
        }
 
        // 使用 HashMap
        const map = new HashMap();
        map.set('name', 'Alice');
        map.set('age', 25);
        console.log(map.get('name')); // 输出: Alice
        console.log(map.size); // 输出: 2
        map.remove('name');
        console.log(map.get('name')); // 输出: undefined
        console.log(map.size); // 输出: 1
    </script>
</head>
<body>
    <h1>HashMap 示例</h1>
</body>
</html>

这段代码定义了一个简单的 HashMap 类，并展示了如何使用它来添加、获取、移除键值对，以及获取 HashMap 的大小。这个实现没有提供哈希碰撞解决或加载因子的处理，但足以作为一个基本示例来教学。

- 阅读更多 -
html5：webSocket 基础使用
System
2024-08-08
所有,html5



<!DOCTYPE html>
<html>
<head>
    <title>WebSocket 基础使用</title>
    <script type="text/javascript">
    function init() {
        output = document.getElementById('output');
        output.innerHTML = '连接中...';
        
        // 创建WebSocket实例，指定服务器地址和端口
        ws = new WebSocket('ws://localhost:8181');
        
        // 监听WebSocket的打开事件
        ws.onopen = function(evt) { 
            output.innerHTML = '已连接'; 
        };
        
        // 监听WebSocket的消息事件
        ws.onmessage = function(evt) {
            output.innerHTML += '<br>收到消息: ' + evt.data;
        };
        
        // 监听WebSocket的错误事件
        ws.onerror = function(evt) {
            output.innerHTML += '<br>发生错误'; 
        };
        
        // 监听WebSocket的关闭事件
        ws.onclose = function(evt) {
            output.innerHTML += '<br>连接已关闭'; 
        };
    }
    
    // 发送消息的函数
    function sendMessage() {
        var message = document.getElementById('message').value;
        ws.send(message);
    }
    </script>
</head>
<body onload="init();">
    <h1>WebSocket 实例</h1>
    <div id="output"></div>
    <input type="text" id="message" value="Hello, WebSocket!">
    <button onclick="sendMessage()">发送消息</button>
</body>
</html>

这段代码展示了如何在一个HTML页面中使用JavaScript来初始化一个WebSocket连接，并且提供了简单的接口来发送和接收消息。代码中包含了对WebSocket生命周期中常见事件的监听和处理：打开、接收消息、错误以及关闭连接。

- 阅读更多 -
HTML5基本语法大全
System
2024-08-08
所有,html5

HTML5是HTML的最新标准，它的基础语法主要包括以下几个部分：

  1. 文档类型声明：



<!DOCTYPE html>
  1. 页面的开始和结束标签：



<html>
    <head>
        <!-- 页面的元数据和标题 -->
        <title>页面标题</title>
    </head>
    <body>
        <!-- 页面内容 -->
        <h1>这是一个标题</h1>
        <p>这是一个段落。</p>
    </body>
</html>
  1. 元素的属性：



<!-- 例如，为图片添加alt属性 -->
<img src="image.jpg" alt="描述文字">
  1. 注释：



<!-- 这是一个注释 -->
  1. 标题：



<h1>最重要的标题</h1>
<h2>次重要的标题</h2>
<!-- 以此类推，h3, h4, h5, h6 -->
  1. 段落和换行：



<p>这是一个段落。</p>
<br> <!-- 换行 -->
  1. 文本格式化标签：



<strong>粗体文本</strong>
<em>斜体文本</em>
<del>被删除的文本</del>
<ins>被插入的文本</ins>
  1. 链接：



<a href="https://www.example.com">链接到example.com</a>
  1. 图片：



<img src="image.jpg" alt="描述文字">
  1. 列表：



<!-- 有序列表 -->
<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>
 
<!-- 无序列表 -->
<ul>
    <li>第一项</li>
    <li>第二项</li>
</ul>
 
<!-- 定义列表 -->
<dl>
    <dt>项目 1</dt>
    <dd>描述 1</dd>
    <dt>项目 2</dt>
    <dd>描述 2</dd>
</dl>
  1. 表格：



<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>数据1</td>
        <td>数据2</td>
    </tr>
</table>
  1. 表单和输入：



<form action="/submit" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="username">
    <input type="submit" value="提交">
</form>
  1. 帧（iframe）：



<iframe src="page.html" name="iframe_name"></iframe>
  1. 视频和音频：



<!-- 视频 -->
<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.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  您的浏览器不支持音频元素。
</audio>
  1. Canvas绘图：



<canvas id="myCanvas" width="200" height="100">
  您的浏览器不支持Canvas。
- 阅读更多 -
HTML5新增的input元素类型：number、range、email、color、date等
System
2024-08-08
所有,html5

HTML5引入了一些新的input类型，使得表单的创建更加方便和有效。这些新的input类型包括：

  1. number - 允许用户输入数字。
  2. range - 允许用户从指定范围内选择一个值。
  3. email - 强制输入格式为电子邮件的文本。
  4. color - 允许用户选择颜色。
  5. date - 允许用户选择日期。

以下是这些新input类型的基本用法示例：




<form>
  <!-- 数字输入 -->
  <input type="number" name="quantity" min="1" max="5" step="1" value="1">
 
  <!-- 滑块输入 -->
  <input type="range" name="points" min="0" max="10" step="1" value="5">
 
  <!-- 电子邮件输入 -->
  <input type="email" name="email" required>
 
  <!-- 颜色选择器 -->
  <input type="color" name="color">
 
  <!-- 日期选择器 -->
  <input type="date" name="birthday">
 
  <input type="submit">
</form>

这些新的input类型提供了原生的输入验证和格式化，使得表单的处理更加直观和方便。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号