分类 html 下的文章

2024-08-19

在HTML中，<meta>标签一般位于HTML文档的<head>部分，用来提供页面的元数据，它有多种用途和属性。以下是一些常见的用法和功能：

指定字符编码：




<meta charset="UTF-8">

这用于指定文档的字符编码，默认为UTF-8，这对于正确显示非ASCII字符非常重要。

指定页面的描述和关键词：




<meta name="description" content="页面描述">
<meta name="keywords" content="关键词1, 关键词2">

这些元标签用于搜索引擎优化(SEO)，描述页面内容，关键词可以帮助搜索引擎确定页面的主题。

定义视口宽度和缩放级别：




<meta name="viewport" content="width=device-width, initial-scale=1.0">

这个标签用于响应式设计，定义了视口宽度，初始缩放等属性。

指定页面的刷新和跳转：




<meta http-equiv="refresh" content="5">
<meta http-equiv="refresh" content="5;url=http://example.com">

这个标签用于页面的自动刷新，可以指定刷新间隔和跳转的URL。

控制页面缓存策略：




<meta http-equiv="Cache-Control" content="max-age=3600">

通过设置Cache-Control，可以控制浏览器如何缓存页面。

指定页面的过期时间：




<meta http-equiv="expires" content="Wed, 20 Jun 2025 22:33:00 GMT">

设置expires属性，可以指定页面的过期时间，用于控制缓存。

以上是一些常见的<meta>标签的用法，实际上<meta>标签还有其他很多属性和用法，可以根据具体需求进行使用。

System

2024-08-19

所有,html




// 获取元素
var element = document.querySelector('.my-element'); // 获取第一个class为my-element的元素
var elements = document.querySelectorAll('div.my-class'); // 获取所有class为my-class的div元素
 
// 操作元素
element.textContent = 'Hello, World!'; // 设置元素的文本内容
element.style.color = 'blue'; // 设置元素的文本颜色为蓝色
 
// 添加和移除类
element.classList.add('new-class'); // 添加一个新的类
element.classList.remove('old-class'); // 移除一个已存在的类
 
// 添加和删除属性
element.setAttribute('data-role', 'page'); // 添加一个新的属性
element.removeAttribute('data-role'); // 移除一个已存在的属性
 
// 添加和移除元素/节点
var newNode = document.createElement('p');
newNode.textContent = 'This is a new paragraph.';
element.appendChild(newNode); // 添加一个新的子节点
element.removeChild(newNode); // 移除一个已存在的子节点

这段代码展示了如何使用querySelector和querySelectorAll获取元素，并对其进行文本内容设置、样式更改、类的添加和移除、属性的添加和移除，以及如何添加和移除节点。这些是在进行DOM操作时常用的基本操作。

- 阅读更多 -

html--生日蜡烛

System

2024-08-19

所有,html

生日蜡烛可以通过HTML和CSS来实现。以下是一个简单的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Birthday Candle</title>
<style>
  .candle {
    width: 50px;
    height: 150px;
    background-color: red;
    margin: 50px;
    border-radius: 50px 50px 0 0;
    position: relative;
    animation: candle-burn 5s linear infinite;
  }
 
  .candle::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background-color: black;
    border-radius: 50%;
  }
 
  @keyframes candle-burn {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>
</head>
<body>
<div class="candle"></div>
</body>
</html>

这段代码创建了一个旋转的生日蜡烛图形，通过CSS动画candle-burn实现了燃烧的效果。

- 阅读更多 -

HTML实现简单的登录界面

System

2024-08-19

所有,html

以下是一个简单的HTML登录界面示例：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        form {
            display: flex;
            flex-direction: column;
            width: fit-content;
        }
        form label {
            padding: 10px 0;
        }
        form input {
            padding: 10px;
            margin-bottom: 15px;
            width: 200px;
        }
        form button {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
 
    <form action="/submit-your-login-form" method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        
        <button type="submit">Login</button>
    </form>
 
</body>
</html>

这个示例使用了HTML的<form>元素来创建登录表单，包含用户名和密码输入框以及提交按钮。CSS则用于增强用户体验，比如边距、填充、颜色和按钮的悬停效果。记得将action属性的值替换为处理登录请求的服务器路径。

System

2024-08-19

所有,html

要实现左侧DIV固定宽度，右侧DIV自适应宽度并填充剩余页面的布局，可以使用CSS的浮动（float）属性和calc()函数。以下是实现这种布局的示例代码：

HTML:




<div class="container">
    <div class="left">左侧内容</div>
    <div class="right">右侧内容 - 这里的宽度会自适应填充剩余空间</div>
</div>

CSS:




.container {
    overflow: hidden; /* 清除浮动 */
}
 
.left {
    float: left; /* 左侧DIV左浮动 */
    width: 200px; /* 左侧DIV固定宽度 */
    background-color: #ddd; /* 背景色，仅为了视觉效果 */
}
 
.right {
    margin-left: 200px; /* 右侧DIV左边距设置为左侧DIV宽度 */
    background-color: #f3f3f3; /* 背景色，仅为了视觉效果 */
    overflow: auto; /* 右侧内容过多时可滚动 */
}
 
/* 额外的样式，用于美化效果 */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}
 
.container, .left, .right {
    height: 100%;
}

这段代码中，.left类使得左侧DIV浮动并设置了固定宽度，.right类的左边距设置为200px（即左侧DIV的宽度），使得右侧DIV能够自适应宽度并填充剩余空间。通过给.container设置overflow: hidden;，可以清除浮动，避免影响其他内容。

- 阅读更多 -

HTML总结部分

System

2024-08-19

所有,html

HTML是用于创建网页的标准标记语言。以下是一些常用的HTML标签和它们的用途的简单概述：

<!DOCTYPE html>：HTML5标准网页声明。
<html>：整个网页的开始和结束标签。
<head>：包含了元数据，如<title>，CSS样式链接等。
<title>：定义网页的标题，显示在浏览器的标题栏上。
<body>：包含了网页的主要可见部分，如文本，图片，视频等。
<h1>至<h6>：定义不同级别的标题。
<p>：创建一个段落。
<a>：创建一个超链接，属性href定义目标URL。
<img>：插入一张图片，属性src定义图片的路径。
<ul>和<li>：创建无序列表。
<ol>和<li>：创建有序列表。
<div>：创建一个区块，用于样式化和布局。
<span>：用于文本的样式化。
<table>：创建表格。
<form>：创建表单，包括输入字段，提交按钮等。

示例代码：




<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
    <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>
    <form action="提交地址" method="提交方法">
        <input type="text" name="username" placeholder="用户名">
        <input type="submit" value="提交">
    </form>
</body>
</html>

这个示例展示了如何创建一个简单的网页，包含了文本，图片，链接，列表，布局元素，表格和表单。

2024-08-19

以下是一个简单的HTML和JavaScript代码示例，用于创建一个基本的动态圣诞树：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Christmas Tree</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  canvas {
    display: block;
  }
</style>
</head>
<body>
<canvas id="christmas-tree"></canvas>
 
<script>
// 定义树的属性
const tree = {
  size: 200,
  x: 300,
  y: 350,
  branches: 3,
  branchSize: 75,
  branchProb: 0.65,
  angle: 0,
  growSpeed: 10,
  maxBranches: 4,
  minSize: 10,
  color: '#336'
};
 
const canvas = document.getElementById('christmas-tree');
const ctx = canvas.getContext('2d');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
 
function drawTree(x, y, size, branches, branchSize, branchProb, angle, color) {
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate(angle);
  ctx.fillStyle = color;
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(0, -size);
  ctx.lineWidth = 10;
  ctx.strokeStyle = '#333';
  ctx.stroke();
  ctx.closePath();
 
  if (branches > 0) {
    for (let i = 0; i < branches; i++) {
      const p = branchProb * (0.7 + 0.6 * Math.random());
      const newSize = size * 0.7;
      const newBranches = Math.max(Math.ceil(branches * p), 1);
      const newBranchSize = branchSize * 0.7;
      const newAngle = angle + (Math.random() - 0.5) * 0.1;
      drawTree(0, -size, newSize, newBranches, newBranchSize, p, newAngle, color);
    }
  }
  ctx.restore();
}
 
function animate() {
  ctx.clearRect(0, 0, width, height);
  if (tree.branches < tree.maxBranches) {
    tree.branches++;
    tree.branchSize = tree.branchSize * 0.95;
    tree.size = tree.size * 0.97;
  }
  drawTree(tree.x, tree.y, tree.size, tree.branches, tree.branchSize, tree.branchProb, tree.angle, tree.color);
  window.requestAnimationFrame(animate);
}
 
animate();
</script>
</body>
</html>

这段代码使用了canvas元素来绘制一个简单的动态圣诞树。在浏览器中打开后，将会看到一个以雪花飘落效果增长的小树。你可以通过调整tree对象的属性来自定义树的外观和生长速度。

- 阅读更多 -

Vue2中v-html引发的安全问题

System

2024-08-19

所有,html

在Vue2中，使用v-html指令可能会引发安全问题，因为它会将字符串中的HTML标签渲染为真实的HTML元素，如果这些内容是用户提供的，那么可能会引入XSS攻击（跨站脚本攻击）。

解决方法：

使用v-html时，确保绑定的内容是可信的，即你完全控制内容的来源。
如果内容不是可信的，请使用其他方法，如计算属性或方法，来转义内容，避免直接使用v-html。
对于复杂的场景，可以使用第三方库，如DOMPurify，来清理和转义HTML内容。

示例代码：




<template>
  <div v-html="safeHtml"></div>
</template>
 
<script>
import { defineComponent, toRefs } from 'vue';
import DOMPurify from 'dompurify';
 
export default defineComponent({
  props: {
    rawHtml: String
  },
  computed: {
    safeHtml() {
      return DOMPurify.sanitize(this.rawHtml);
    }
  }
});
</script>

在这个例子中，我们使用了DOMPurify库来转义用户提供的HTML内容，确保渲染的内容是安全的，避免XSS攻击。这种方式是推荐的做法，因为它能够最大程度地减少安全风险。

- 阅读更多 -

利用HTML实现秒表功能

System

2024-08-19

所有,html

要实现秒表功能，我们可以使用JavaScript来控制时间的计数。以下是一个简单的HTML和JavaScript代码示例，实现了秒表功能：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stopwatch</title>
<script>
  var seconds = 0;
  var timer;
 
  function startTimer() {
    timer = setInterval(function() {
      seconds++;
      document.getElementById('timer').innerText = seconds + ' seconds';
    }, 1000);
  }
 
  function stopTimer() {
    clearInterval(timer);
  }
 
  function resetTimer() {
    stopTimer();
    seconds = 0;
    document.getElementById('timer').innerText = '0 seconds';
  }
</script>
</head>
<body>
<div id="timer">0 seconds</div>
<button onclick="startTimer()">Start</button>
<button onclick="stopTimer()">Stop</button>
<button onclick="resetTimer()">Reset</button>
</body>
</html>

这段代码包括了三个按钮，分别用于启动、停止和重置秒表。当秒表运行时，它会更新一个ID为timer的元素的文本，显示当前经过的秒数。这个例子使用了setInterval来每秒更新秒数，并用clearInterval来停止计时器。重置按钮会停止计时器，并将秒数重置为0。

- 阅读更多 -

html 动态设置下拉选项

System

2024-08-19

所有,html

在HTML中，您可以使用JavaScript来动态设置下拉菜单（<select>元素）的选项。以下是一个简单的例子，展示了如何使用JavaScript来向下拉菜单中添加选项：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Select Options</title>
</head>
<body>
 
<select id="mySelect">
</select>
 
<script>
// 获取下拉菜单元素
var select = document.getElementById("mySelect");
 
// 创建新的选项元素
var option1 = document.createElement("option");
option1.text = "Option 1";
option1.value = "1";
 
var option2 = document.createElement("option");
option2.text = "Option 2";
option2.value = "2";
 
var option3 = document.createElement("option");
option3.text = "Option 3";
option3.value = "3";
 
// 添加选项到下拉菜单
select.add(option1);
select.add(option2);
select.add(option3);
</script>
 
</body>
</html>

在这个例子中，我们首先获取了<select>元素的引用。然后，我们创建了三个<option>元素，并设置了它们的text和value属性。最后，我们使用add方法将这些选项添加到了下拉菜单中。

如果您需要从数据源动态生成选项，可以通过修改上述脚本来实现，例如通过AJAX请求获取数据，然后遍历数据并创建选项。

- 阅读更多 -