1. 首页
  2. 分类
  3. 前端技术
[html]HTML 表单和输入
System
2024-08-08
所有,html



<!DOCTYPE html>
<html>
<head>
    <title>HTML 表单和输入样例</title>
</head>
<body>
    <form action="/submit-url" method="post">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required>
 
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required>
 
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email">
 
        <label for="birthday">生日:</label>
        <input type="date" id="birthday" name="birthday">
 
        <input type="submit" value="提交">
    </form>
</body>
</html>

这个HTML代码示例创建了一个简单的表单，包含了不同类型的输入元素，如文本框、密码框和日期选择器。每个输入元素都通过label标签的for属性和输入元素的id属性关联起来，增强了用户的可用性。其中，required属性表示这些输入是必填的。最后，表单通过submit类型的输入元素提交到服务器。

- 阅读更多 -
简易大气好看后台登录页面纯静态HTML源码分享
System
2024-08-08
所有,html

以下是一个简易大气好看的后台登录页面的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>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background: linear-gradient(to right, #f3e7e9, #f3e7e9);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        .login-container {
            background-color: #fff;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
        }
        h2 {
            color: #333;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        input[type="text"], input[type="password"] {
            width: 100%;
            padding: 15px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        input[type="submit"] {
            width: 100%;
            padding: 15px;
            background-color: #5cb85c;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        input[type="submit"]:hover {
            background-color: #4cae4c;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>后台登录</h2>
        <form action="">
            <input type="text" placeholder="用户名" required>
            <input type="password" placeholder="密码" required>
            <input type="submit" value="登录">
        </form>
    </div>
</body>
</html>

这段代码展示了一个简单而又高级的登录页面，使用了CSS3的渐变背景和盒阴影来增强页面的视觉效果。同时，使用了简洁的HTML结构和CSS样式，提升了用户的视觉体验。

- 阅读更多 -
如何在 HTML 中嵌套、引入其他的 HTML？
System
2024-08-08
所有,html

在HTML中嵌套或引入其他HTML的常见方法是使用iframe标签或者object标签。另外，也可以使用JavaScript来动态加载HTML内容。

  1. 使用iframe：



<iframe src="other-page.html" width="600" height="400">
  <p>Your browser does not support iframes.</p>
</iframe>
  1. 使用object标签：



<object type="text/html" data="other-page.html" width="600" height="400">
  <p>object标签不支持。</p>
</object>
  1. 使用JavaScript和fetch（现代浏览器支持）：



<div id="content"></div>
 
<script>
  fetch('other-page.html')
    .then(response => response.text())
    .then(data => {
      document.getElementById('content').innerHTML = data;
    });
</script>

选择哪种方法取决于你的具体需求和对不同技术的控制能力。iframe和object需要额外的HTTP请求，而JavaScript方法则更加灵活，可以直接将HTML内容嵌入到页面中，无需额外的HTTP请求。

- 阅读更多 -
使用Electron将HTML单页面打包为exe
System
2024-08-08
所有,html

要将HTML单页面应用打包成exe文件，可以使用Electron的打包工具。以下是一个简单的步骤和示例代码：

  1. 创建Electron项目：



npm install -g electron
electron-quick-start
cd electron-quick-start
  1. 删除默认的index.html文件，并替换为你的HTML文件。
  2. 修改main.js来加载你的HTML文件：



const { app, BrowserWindow } = require('electron');
 
function createWindow () {
  // 创建浏览器窗口
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
 
  // 加载你的HTML文件
  win.loadFile('index.html');
}
 
app.whenReady().then(createWindow);
  1. 修改package.json中的name和version字段。
  2. 使用以下命令打包应用：



npm install
electron-packager . YourAppName --platform=win32 --arch=x64 --out=./OutDir --overwrite --icon=your-icon.ico

替换YourAppName为你的应用名称，your-icon.ico为你的应用图标（可选）。

打包完成后，在OutDir文件夹中会有一个包含exe文件的文件夹，可以直接运行或分发给用户。

- 阅读更多 -
Java读取html 中标签的值
System
2024-08-08
所有,html

在Java中，可以使用Jsoup库来读取HTML中标签的值。Jsoup是一个用于解析和操作HTML的库，它提供了非常方便的API来获取标签的属性值。

以下是一个使用Jsoup读取HTML中标签值的简单示例：

首先，添加Jsoup依赖到你的项目中。如果你使用Maven，可以在pom.xml中添加以下依赖：




<dependency>
    <groupId>org.jsoup</groupId>
    <artifactId>jsoup</artifactId>
    <version>1.13.1</version>
</dependency>

然后，你可以使用以下Java代码来读取HTML中标签的值：




import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
 
public class HtmlParser {
    public static void main(String[] args) {
        String html = "<html><head><title>Sample Title</title></head>"
                    + "<body><p id='test' class='content'>Sample Content</p></body></html>";
        Document doc = Jsoup.parse(html);
        Element p = doc.select("p").first();
        String value = p.text();
        System.out.println("The value of the p tag is: " + value);
    }
}

在这个例子中，我们解析了一个包含<p>标签的HTML字符串，并使用select方法找到第一个<p>标签。然后，我们使用text()方法获取这个标签的文本内容。

如果你需要读取特定属性的值，可以使用attr方法：




String value = p.attr("class");
System.out.println("The class of the p tag is: " + value);

这将会输出p标签的class属性的值。

- 阅读更多 -
Vue中如何以HTML形式显示内容并动态生成HTML代码
System
2024-08-08
所有,html

在Vue中，你可以使用v-html指令来渲染实际的HTML内容。但是要注意，由于跨站脚本攻击（XSS）的原因，直接渲染任意HTML可能会有潜在的安全问题。如果你的内容是安全的或者你已经对内容进行了清洗，你可以这样使用v-html：




<div v-html="rawHtml"></div>

在Vue组件的JavaScript部分，你需要定义一个计算属性或者方法来返回你想要渲染的HTML字符串。




export default {
  data() {
    return {
      // 初始化一些数据
    };
  },
  computed: {
    rawHtml() {
      // 动态生成HTML字符串
      return "<p>这是动态生成的HTML内容</p>";
    }
  }
};

如果你需要动态生成复杂的HTML结构，你可以使用JavaScript的字符串模板或者使用createElement方法。




methods: {
  createHtmlContent() {
    // 使用JavaScript字符串模板
    return `<p>这是用JavaScript创建的HTML内容 - ${this.dynamicData}</p>`;
  }
}

请记住，直接渲染HTML内容可能会有XSS攻击的风险，因此在渲染用户提供的内容之前，务必进行适当的清洗和转义。

- 阅读更多 -
html 中video实现切换视频自动播放
System
2024-08-08
所有,html

在HTML中，要实现video切换自动播放，可以通过JavaScript监听video的play和pause事件，并在用户暂停视频时清除视频的autoplay属性，以此来实现切换播放。

以下是一个简单的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video Autoplay Toggle</title>
<script>
  function toggleAutoplay(video) {
    if (video.paused) {
      video.play(); // 播放视频
    } else {
      video.autoplay = false; // 禁用自动播放
      video.pause(); // 暂停视频
    }
  }
</script>
</head>
<body>
<video id="myVideo" width="320" height="240" controls autoplay>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
<button onclick="toggleAutoplay(document.getElementById('myVideo'))">
  Toggle Autoplay
</button>
</body>
</html>

在这个示例中，我们定义了一个名为toggleAutoplay的函数，该函数接收一个video元素作为参数。当用户点击按钮时，会触发toggleAutoplay函数，如果视频当前是暂停状态，则play()会使视频播放；如果视频正在播放，则通过将autoplay属性设置为false并调用pause()来暂停视频，这样在下次切换到播放状态时，视频将不会自动播放。

- 阅读更多 -
使用Html做一个简单的登陆页面
System
2024-08-08
所有,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 Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        form {
            width: 300px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
        }
        h2 {
            text-align: center;
        }
        input[type="text"], input[type="password"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
        }
        button[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #5cb85c;
            color: white;
            border: none;
            cursor: pointer;
        }
        button[type="submit"]:hover {
            background-color: #4cae4c;
        }
    </style>
</head>
<body>
 
<h2>Login to Your Account</h2>
 
<form action="/submit-your-login-form" method="post">
    <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>
    <div>
        <button type="submit">Login</button>
    </div>
</form>
 
</body>
</html>

这个HTML页面包含了一个简单的登录表单，使用了CSS来增强其视觉效果。表单包括用户名和密码字段，以及一个提交按钮。需要注意的是，action 属性应该指向处理登录请求的服务器端脚本。

- 阅读更多 -
html实战第二例
System
2024-08-08
所有,html

以下是一个简单的HTML页面示例，包含了标题、段落和有序列表：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个HTML页面</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。在这里，你可以添加你想要展示的文字内容。</p>
    
    <ol>
        <li>列表项一</li>
        <li>列表项二</li>
        <li>列表项三</li>
    </ol>
</body>
</html>

这个HTML页面包括了HTML5的DOCTYPE声明，设置了页面的字符编码为UTF-8，定义了页面标题，并在页面的body部分包含了一个标题（h1标签），一个段落（p标签），和一个有序列表（ol和li标签）。这个示例展示了如何在HTML中创建基本的文本内容和列表结构。

- 阅读更多 -
JQuery+HTML+JavaScript：实现地图位置选取和地址模糊查询
System
2024-08-08
所有,html

以下是一个简化的代码示例，展示了如何使用jQuery、HTML和JavaScript来实现地图位置选取和地址模糊查询的基本功能。




<!DOCTYPE html>
<html>
<head>
    <title>地图选点和模糊查询</title>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入地图相关的JS库 -->
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
    <style>
        #map {
            width: 500px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <input type="text" id="address" placeholder="请输入地址">
    <button id="findAddress">查询</button>
 
    <script>
        var map;
        var geocoder;
        var marker;
 
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -34.397, lng: 150.644},
                zoom: 8
            });
            geocoder = new google.maps.Geocoder();
            marker = new google.maps.Marker({map: map});
 
            $('#findAddress').on('click', function() {
                var address = $('#address').val();
                geocodeAddress(geocoder, map, marker, address);
            });
        }
 
        function geocodeAddress(geocoder, map, marker, address) {
            geocoder.geocode({'address': address}, function(results, status) {
                if (status === 'OK') {
                    map.setCenter(results[0].geometry.location);
                    marker.setPosition(results[0].geometry.location);
                } else {
                    alert('找不到地址: ' + status);
                }
            });
        }
    </script>
</body>
</html>

在这个示例中，我们首先在HTML中定义了地图容器和用于输入地址的输入框，以及一个触发地址查询的按钮。在JavaScript部分，我们初始化了Google地图，并在地图上设置了一个标记，用于表示用户选取的位置。我们还为查询按钮绑定了点击事件，当用户点击按钮时，会调用geocodeAddress函数，使用Google地理编码服务查询输入的地址，并将查询结果显示在地图上。

请注意，您需要替换YOUR_API_KEY为您自己的Google Maps API密钥，以确保地图功能正常。

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