分类 html 下的文章

原生html table固定高度并显示滚动条

2024-08-11

要在HTML表格中固定高度并显示滚动条，您可以使用CSS来设置表格的高度以及父容器的高度和overflow属性。以下是一个简单的示例：

HTML:




<div class="table-container">
  <table>
    <!-- 表头和表格数据 -->
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <!-- 填充足够多的行来超过设定的高度 -->
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <!-- 更多行... -->
    </tbody>
  </table>
</div>

CSS:




.table-container {
  height: 200px; /* 设置固定高度 */
  overflow-y: auto; /* 显示垂直滚动条 */
}
 
table {
  width: 100%; /* 表格宽度 */
  border-collapse: collapse; /* 可选的表格样式 */
}
 
th, td {
  border: 1px solid #ddd; /* 可选的表格样式 */
  padding: 8px; /* 可选的表格样式 */
  text-align: left; /* 可选的表格样式 */
}

在这个例子中，.table-container 类的高度被设置为200px，如果表格的内容超出这个高度，则会显示垂直滚动条。您可以根据需要调整 .table-container 的高度。

简易html满天星效果

2024-08-11

要创建一个简易的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;
    padding: 0;
  }
 
  .star {
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    animation: twinkle 1s infinite alternate ease-in-out;
  }
 
  @keyframes twinkle {
    from { 
      transform: scale(0.5);
      opacity: 0.5;
    }
    to { 
      transform: scale(1);
      opacity: 1;
    }
  }
</style>
</head>
<body>
<div class="star"></div>
<script>
  // 动态创建多个星星
  const numStars = 100; // 可以根据需要调整星星数量
  for (let i = 0; i < numStars; i++) {
    const star = document.createElement('div');
    star.classList.add('star');
    // 随机位置
    star.style.top = `${Math.random() * 100}%`;
    document.body.appendChild(star);
  }
</script>
</body>
</html>

这段代码会创建100个星星，它们随机分布在页面上，并通过CSS动画随机闪烁，模拟出星空中的满天星光效果。你可以根据需要调整.star的样式和@keyframes twinkle动画的细节来改变星星的大小、颜色和闪烁的速度。

【HTML——3d粒子特效（效果+代码）】，开发一个web站点

2024-08-11

以下是创建3D粒子特效的HTML和JavaScript代码示例。这个特效使用了Three.js库来创建和动画处理3D场景中的粒子。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D Particle Effect</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // 设置场景、相机和渲染器
        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.Geometry();
        const material = new THREE.ParticleBasicMaterial({ color: 0xFFFFFF, size: 0.05 });
        for (let i = 0; i < 1000; i++) {
            const particle = new THREE.Vector3(
                Math.random() * 2 - 1,
                Math.random() * 2 - 1,
                Math.random() * 2 - 1
            );
            particle.multiplyScalar(Math.random() * 10 + 10);
            geometry.vertices.push(particle);
        }
        const system = new THREE.ParticleSystem(geometry, material);
        scene.add(system);
 
        // 创建灯光
        const ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.5);
        scene.add(ambientLight);
 
        // 设置相机位置并开始渲染循环
        camera.position.z = 5;
        function animate() {
            requestAnimationFrame(animate);
            system.rotation.y += 0.001;
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>

这段代码创建了一个简单的3D粒子系统，每个粒子随机生成位置和大小，并被统一赋予白色。系统中有一个环境光源，提供基本的照明。场景、相机和渲染器被设置好后，通过requestAnimationFrame循环进行渲染，并且通过改变系统的旋转来创建动态效果。

在html文件中添加文字

2024-08-11

在HTML文件中添加文字，你可以使用<p>标签来创建一个段落，或者使用<span>标签来在特定位置添加文本。以下是一些示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加文字示例</title>
</head>
<body>
    <p>这是一个段落。</p>
    <span>这是行内文本。</span>
</body>
</html>

在这个例子中，<p>标签用于创建一个段落，段落间会有一些空白。<span>标签用于在文档中的特定位置添加文本，通常不会引入额外的格式化。

使用HTML制作静态网站作业——我的校园运动会(HTML+CSS)

2024-08-11

以下是一个简单的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 {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
  }
  .header {
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: white;
  }
  .content {
    padding: 20px;
  }
  .footer {
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: white;
  }
</style>
</head>
<body>
 
<div class="header">
  <h1>我的校园运动会</h1>
</div>
 
<div class="content">
  <h2>赛事信息</h2>
  <p>2023年10月15日，我校将举行一年一度的运动会，以下是相关的赛事信息：</p>
  <ul>
    <li>主题：“激情燎原”</li>
    <li>时间：周末 Both 10:00 AM - 6:00 PM</li>
    <li>地点：学校田径场</li>
  </ul>
  <h2>报名方式</h2>
  <p>报名将通过学校官方网站进行，链接：<a href="https://www.ourschool.edu.cn/sportsday">https://www.ourschool.edu.cn/sportsday</a></p>
</div>
 
<div class="footer">
  <p>版权所有 © 我校运动会组委会 2023</p>
</div>
 
</body>
</html>

这个示例展示了如何使用HTML创建一个简单的网页结构，并使用CSS为其添加样式。在.header、.content和.footer类中定义了不同部分的样式，使页面更具专业感和可读性。

Java：爬虫htmlunit抓取a标签

2024-08-11

以下是使用HtmlUnit库在Java中抓取a标签的示例代码：




import com.gargoylesoftware.htmlunit.WebClient;
import com.gargoylesoftware.htmlunit.html.HtmlPage;
import com.gargoylesoftware.htmlunit.html.HtmlAnchor;
 
import java.io.IOException;
import java.util.List;
 
public class HtmlUnitExample {
    public static void main(String[] args) {
        // 创建WebClient实例
        try (WebClient webClient = new WebClient()) {
            // 设置webClient属性，模拟浏览器
            webClient.getOptions().setCssEnabled(false); // 禁用CSS
            webClient.getOptions().setJavaScriptEnabled(false); // 禁用JavaScript
 
            // 获取网页
            HtmlPage page = webClient.getPage("http://example.com");
 
            // 获取所有a标签
            List<HtmlAnchor> anchors = page.getAnchors();
 
            // 遍历并打印a标签的HREF属性
            for (HtmlAnchor anchor : anchors) {
                System.out.println(anchor.getHrefAttribute());
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

确保你的项目中已经添加了HtmlUnit依赖。如果你使用Maven，可以在pom.xml中添加如下依赖：




<dependency>
    <groupId>net.sourceforge.htmlunit</groupId>
    <artifactId>htmlunit</artifactId>
    <version>2.48.0</version> <!-- 请检查最新版本 -->
</dependency>

请根据实际需要修改网页URL和HtmlUnit版本。

如何使用HTML制作个人网站（html网页制作）

2024-08-11

创建一个简单的个人网站，你可以使用以下基本的HTML结构：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人网站标题</title>
    <style>
        /* 在这里写入CSS样式 */
    </style>
</head>
<body>
    <header>
        <nav>
            <!-- 导航链接 -->
            <ul>
                <li><a href="#">主页</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">作品</a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </nav>
        <h1>个人网站标题</h1>
    </header>
 
    <section>
        <!-- 主要内容 -->
        <article>
            <h2>文章标题</h2>
            <p>这里是文章的内容。</p>
        </article>
    </section>
 
    <footer>
        <!-- 页脚信息 -->
        <p>版权信息</p>
    </footer>
</body>
</html>

在<style>标签中，你可以添加CSS来进一步美化你的网站。你可以使用外部CSS文件，只需将其链接到HTML头部：




<link rel="stylesheet" href="styles.css">

确保你的HTML文件和CSS文件位于同一目录中，或者调整href属性以正确指向你的CSS文件。

这是一个基本的网站架构，你可以根据需要添加更多的内容和样式。

HTML - 创建超链接

2024-08-11

在HTML中，创建超链接通常使用<a>标签。该标签需要一个href属性，指定链接的目标地址。可选的还可以使用target属性来指定在何处打开链接，例如_blank会在新窗口或标签页中打开链接。

下面是创建超链接的基本示例：




<!-- 外部链接 -->
<a href="https://www.example.com">访问Example网站</a>
 
<!-- 内部链接 -->
<a href="index.html">访问网站首页</a>
 
<!-- 链接到电子邮件地址 -->
<a href="mailto:support@example.com">发送邮件给支持</a>
 
<!-- 在新标签页中打开链接 -->
<a href="https://www.example.com" target="_blank">在新标签页中打开Example网站</a>

链接文本可以是文本字符串，也可以是图像或其他HTML元素。点击链接时，浏览器会尝试获取href属性中指定的地址的内容，并将其显示给用户。

HTML——广告弹窗

2024-08-11

在HTML中创建一个简单的广告弹窗，可以使用以下代码示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advertisement Popup</title>
<style>
  /* 弹窗的样式 */
  .modal {
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定位置 */
    z-index: 1; /* 位于顶层 */
    left: 0;
    top: 0;
    width: 100%; /* 宽度全屏 */
    height: 100%; /* 高度全屏 */
    background-color: rgba(0,0,0,0.5); /* 半透明背景 */
  }
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 垂直居中 */
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }
</style>
</head>
<body>
 
<button id="openBtn">打开广告</button>
 
<div id="myModal" class="modal">
  <div class="modal-content">
    <span id="closeBtn">&times;</span>
    <img src="ad-image.jpg" alt="广告图片" style="width:100%;">
  </div>
</div>
 
<script>
// 打开弹窗的函数
function openModal() {
  document.getElementById('myModal').style.display = 'block';
}
 
// 关闭弹窗的函数
function closeModal() {
  document.getElementById('myModal').style.display = 'none';
}
 
// 获取按钮，并添加点击打开弹窗的事件监听器
var openBtn = document.getElementById('openBtn');
openBtn.addEventListener('click', openModal);
 
// 获取关闭按钮，并添加点击关闭弹窗的事件监听器
var closeBtn = document.getElementById('closeBtn');
closeBtn.addEventListener('click', closeModal);
</script>
 
</body>
</html>

这段代码中，我们定义了一个简单的弹窗，其中包含关闭按钮和广告图片。用户点击"打开广告"按钮后，弹窗会显示，点击"×"按钮或者背景遮罩即可关闭弹窗。这个例子展示了如何使用HTML、CSS和JavaScript创建一个基本的弹窗效果。