1. 首页
  2. 作者
  3. System
html将复选框变为圆形样例
System
2024-08-21
所有,html

要将HTML中的复选框变为圆形样式，可以使用CSS对原生复选框进行样式隐藏，然后利用标签的伪类:checked来显示一个自定义的圆形图标，并使用背景图片或者SVG图形。以下是一个简单的例子：

HTML:




<label class="checkbox-circle">
  <input type="checkbox" id="checkbox">
  <span></span>
</label>

CSS:




/* 隐藏原生复选框 */
.checkbox-circle input[type="checkbox"] {
  display: none;
}
 
/* 当复选框被选中时，显示一个圆形的背景 */
.checkbox-circle input[type="checkbox"]:checked + span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: blue;
  position: relative;
}
 
/* 未选中时，显示一个空心圆 */
.checkbox-circle span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  position: relative;
}

在这个例子中，当复选框被选中时，<span>标签会显示为蓝色背景的圆形，未被选中时，显示为带有边框的空心圆形。通过CSS，你可以自定义圆形的大小、颜色和其他样式。

- 阅读更多 -
html调用http接口
System
2024-08-21
所有,html

在HTML中直接调用HTTP接口通常不是一个好主意，因为这样做会涉及到跨域请求问题（CORS），但如果你需要进行这样的操作，可以使用以下几种方法：

  1. 使用JavaScript内置的XMLHttpRequest或fetch API。
  2. 使用HTML的<iframe>元素和window.postMessage方法进行跨域通信。
  3. 使用WebSocket代理服务器来转发请求。

以下是使用fetch API的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTTP Interface Call</title>
    <script>
        function callApi() {
            fetch('https://api.example.com/data', {
                method: 'GET', // 或者 'POST'
                headers: {
                    'Content-Type': 'application/json'
                    // 其他需要的头部信息
                },
                // 如果是POST请求，需要提供body
                // body: JSON.stringify({ key: 'value' })
            })
            .then(response => response.json())
            .then(data => {
                console.log(data);
                // 处理返回的数据
            })
            .catch(error => console.error('Error:', error));
        }
    </script>
</head>
<body>
    <button onclick="callApi()">Call API</button>
</body>
</html>

请注意，这段代码需要你有一个可访问的HTTP接口。如果你的页面与API服务器不是同源，你可能还需要在服务器上设置适当的CORS策略。

- 阅读更多 -
前端基础入门三大核心之HTML篇：Webpack、Vite、Grunt、Gulp的场景与实战运用
System
2024-08-21
所有,html

在前端工程化的过程中，Webpack、Vite、Grunt、Gulp都是重要的构建和任务运行工具，每个工具都有其特定的使用场景和优势。

场景与优势概览：

  • Webpack：强大的模块打包工具，配置复杂，但功能强大，可通过插件扩展，适合大型项目。
  • Vite：新型构建工具，以其快速的热重载能力和极速的启动速度吸引开发者，适合现代前端项目。
  • Grunt：早期流行的构建工具，配置简单，插件丰富，但已逐步被后来的工具替代。
  • Gulp：现代流构建工具，配置简单，API直观，适合简单和复杂的项目。

实战运用：

以下是Webpack、Vite、Grunt、Gulp的简单实例：




// Webpack 配置示例
const path = require('path');
const webpack = require('webpack');
 
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new webpack.ProgressPlugin(), // 显示编译进度
  ],
};
 
// Vite 配置示例（通常无需配置）
 
// Grunt 配置示例
grunt.initConfig({
  concat: {
    options: {
      separator: ';', // 定义连接文件的分隔符
    },
    dist: {
      src: ['src/module1.js', 'src/module2.js'],
      dest: 'dist/built.js', // 目标文件
    },
  },
});
grunt.loadNpmTasks('grunt-contrib-concat'); // 加载任务
grunt.registerTask('default', ['concat']); // 注册默认任务
 
// Gulp 配置示例
const gulp = require('gulp');
const concat = require('gulp-concat');
 
gulp.task('concat', function() {
  return gulp.src(['src/module1.js', 'src/module2.js'])
    .pipe(concat('built.js')) // 连接文件
    .pipe(gulp.dest('dist')); // 输出到目标目录
});
 
gulp.task('default', ['concat']); // 设置默认任务

以上代码分别展示了如何配置和使用Webpack、Vite、Grunt和Gulp。在实际项目中，你可以根据项目需求和团队习惯选择合适的工具。

- 阅读更多 -
网页端HTML使用MQTTJs订阅RabbitＭＱ数据
System
2024-08-21
所有,html

要在HTML页面中使用MQTT.js订阅RabbitMQ的数据，你需要首先引入MQTT.js库，并确保RabbitMQ服务器允许你的客户端连接。以下是一个简单的例子：




<!DOCTYPE html>
<html>
<head>
    <title>MQTT Subscribe Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqtt.min.js"></script>
    <script>
        var client;
 
        function connect() {
            var host = 'wss://your-rabbitmq-server:port/ws'; // 使用WebSocket连接
            client = new Paho.MQTT.Client(host, "your-client-id");
 
            var options = {
                timeout: 3,
                keepAliveInterval: 30,
                cleanSession: true,
                useSSL: true,
                userName: 'your-username', // 如果RabbitMQ配置了用户名和密码，则需要
                password: 'your-password',
                onSuccess: onConnect,
                onFailure: function (message) {
                    console.log("Connection failed: " + message.errorMessage);
                }
            };
 
            client.connect(options);
        }
 
        function onConnect() {
            console.log("Connected");
            client.subscribe('your-topic'); // 你要订阅的主题
        }
 
        function onFailure(message) {
            console.log("Failed to subscribe: " + message.errorMessage);
        }
 
        function receiveMessage() {
            client.onMessageArrived = function (message) {
                console.log("Message arrived: " + message.payloadString);
                // 处理接收到的消息
            };
        }
 
        // 页面加载完成后连接MQTT
        window.onload = function() {
            connect();
            receiveMessage();
        };
    </script>
</head>
<body>
    <h1>MQTT Subscribe Example</h1>
</body>
</html>

确保替换以下内容：

  • your-rabbitmq-server:port/ws：为你的RabbitMQ服务器的WebSocket端点。
  • your-client-id：为你的客户端ID，需要是唯一的。
  • your-username 和 your-password：如果RabbitMQ设置了用户名和密码，则需要这些信息。
  • your-topic：你要订阅的具体主题。

在实际部署时，请确保你的RabbitMQ服务器允许来自你客户端IP的WebSocket连接，并且正确配置了用户名和密码（如果有的话）。

- 阅读更多 -
使用html-webpack-plugin对HTML文件进行预处理
System
2024-08-21
所有,html



const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入html-webpack-plugin
 
module.exports = {
  // ... 其他webpack配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 指定原始的HTML文件
      filename: 'index.html', // 生成的HTML文件名
      inject: 'body', // 将js脚本注入到body底部
      // 如果需要修改原始HTML，可以在这里添加自定义处理逻辑
      // 例如，添加自定义head标签或者修改title等
      // 下面是一个简单的例子，添加一个meta标签
      head: {
        meta: {
          charset: { charset: 'utf-8' },
          viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'
        }
      }
    })
  ]
  // ... 其他webpack配置
};

这段代码展示了如何使用html-webpack-plugin来处理HTML文件。在webpack配置中，我们通过new HtmlWebpackPlugin()创建了一个插件实例，并指定了一些选项，如原始HTML模板路径、输出文件名以及脚本注入位置。我们还演示了如何通过head选项来添加或修改HTML文件的head部分。这是一个非常基础的例子，实际项目中可能需要更复杂的配置来满足具体的需求。

- 阅读更多 -
第二章-在HTML中使用JavaScript
System
2024-08-21
所有,html

在HTML中使用JavaScript的基本方法是在HTML文档中添加<script>标签，并在其中写入JavaScript代码。你可以将JavaScript代码直接放在<script>标签中，或者使用src属性来引用外部的JavaScript文件。

以下是一个简单的例子，展示了如何在HTML文档中嵌入JavaScript代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
    <script>
        // 直接写入JavaScript代码
        function showMessage() {
            alert('你好，世界!');
        }
    </script>
</head>
<body>
 
    <!-- 使用按钮触发JavaScript中的函数 -->
    <button onclick="showMessage()">点击我</button>
 
</body>
</html>

如果你有一个外部的JavaScript文件（例如script.js），你可以通过以下方式引入它：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
    <script src="script.js"></script> <!-- 引用外部JavaScript文件 -->
</head>
<body>
 
    <!-- 按钮事件可以调用外部JavaScript文件中定义的函数 -->
    <button onclick="externalFunction()">点击我</button>
 
</body>
</html>

在script.js文件中，你可以定义externalFunction等函数：




// script.js
function externalFunction() {
    alert('这是一个外部JavaScript函数!');
}

请确保你的HTML文件和JavaScript文件位于同一目录中，或者提供正确的路径来引用外部JavaScript文件。

- 阅读更多 -
「HTML和CSS入门指南」a 标签详解
System
2024-08-21
所有,html

在HTML中，<a>标签用于定义超链接，即一个指向另一个文档的链接。通过使用href属性，可以指定链接的目标地址。CSS可以用来控制<a>标签的外观和行为，比如链接的颜色、下划线、悬停时的样式等。

以下是一个简单的HTML和CSS代码示例，展示如何使用<a>标签以及相应的CSS样式：




<!-- HTML 部分 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接示例</title>
    <style>
        /* CSS 部分 */
        a {
            color: blue; /* 链接的颜色 */
            text-decoration: none; /* 去除下划线 */
        }
        a:hover {
            color: red; /* 悬停时的颜色 */
            text-decoration: underline; /* 悬停时显示下划线 */
        }
    </style>
</head>
<body>
    <!-- 使用 <a> 标签创建链接 -->
    <a href="https://www.example.com">访问示例网站</a>
</body>
</html>

在这个例子中，我们定义了一个样式，使得链接默认显示为蓝色并且没有下划线，当鼠标悬停在链接上时，颜色变为红色并且显示下划线。这是一个简单的链接样式设置，实际上可以通过CSS实现更多复杂的效果。

- 阅读更多 -
Android Native 与 HTML 交互
System
2024-08-21
所有,html

在Android中，你可以使用WebView组件来展示HTML内容，并通过JavaScript接口与WebView中的HTML页面进行交互。以下是一个简单的例子，展示了如何从Android原生代码中调用HTML页面中的JavaScript函数。

首先，在你的布局文件中添加WebView：




<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

然后，在你的Activity中设置WebView并加载你的HTML页面：




public class MainActivity extends AppCompatActivity {
 
    private WebView webView;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        webView = findViewById(R.id.webview);
 
        // 启用JavaScript
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
 
        // 设置WebViewClient用于加载页面
        webView.setWebViewClient(new WebViewClient());
 
        // 加载你的HTML页面
        webView.loadUrl("file:///android_asset/your_html_page.html");
 
        // 添加JavaScript接口用于与JavaScript交互
        webView.addJavascriptInterface(new WebAppInterface(this), "Android");
    }
 
    // 自定义的接口类
    public class WebAppInterface {
        Context mContext;
 
        WebAppInterface(Context c) {
            mContext = c;
        }
 
        // 显示Toast的JavaScript接口函数
        @JavascriptInterface
        public void showToast(String toast) {
            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
        }
    }
}

在HTML页面中，你可以这样调用Android原生函数：




<!DOCTYPE html>
<html>
<head>
    <title>Sample Page</title>
    <script type="text/javascript">
        function showAndroidToast(toast) {
            Android.showToast(toast);
        }
    </script>
</head>
<body>
    <button onclick="showAndroidToast('Hello from Web!')">
        Show Toast from Web
    </button>
</body>
</html>

当用户点击按钮时，它将调用Android.showToast()函数，并将来自HTML页面的消息传递给Android应用。这就实现了HTML与Android Native间的交互。

- 阅读更多 -
纯JS将HTML生成pdf
System
2024-08-21
所有,html

要在纯JavaScript中将HTML生成PDF，可以使用jsPDF库。以下是一个简单的例子，演示如何使用jsPDF库将HTML元素转换成PDF。

首先，确保在项目中包含了jsPDF库：




<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>

然后，可以使用以下JavaScript代码将特定HTML元素转换为PDF：




// 假设你要打印的HTML元素有一个id为"content"
const content = document.getElementById('content');
 
// 创建一个新的jsPDF实例
const pdf = new jspdf.jsPDF();
 
// 将HTML元素转换为Canvas
html2canvas(content).then(canvas => {
    // 将Canvas转换为图片
    const imgData = canvas.toDataURL('image/png');
    
    // 将图片添加到PDF中
    const imgProps= pdf.getImageProperties(imgData);
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
    pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
    
    // 保存生成的PDF
    pdf.save('download.pdf');
});

确保在调用上述代码之前，页面上已经加载了html2canvas库，因为jsPDF无法直接将HTML转换为PDF，它需要通过html2canvas先将HTML转换为Canvas，然后再转换为PDF支持的格式。




<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>

请注意，这个例子是一个简化的示例，实际使用时可能需要处理例如样式、跨域图片、大文件等问题。

- 阅读更多 -
前端编程之路一一HTML的常用标签大全
System
2024-08-21
所有,html

HTML是用来创建网页的标准标记语言，下面是一些常用的HTML标签：

  1. <!DOCTYPE html>：HTML5标准网页声明。
  2. <html></html>：HTML文档的开始标签和结束标签。
  3. <head></head>：包含了文档的元数据，如<title>、<meta>、<link>等。
  4. <title></title>：定义了网页的标题，显示在浏览器的标题栏上。
  5. <body></body>：包含了网页的主要内容，所有可见的页面都在这个元素里定义。
  6. <h1></h1> to <h6></h6>：定义标题，从最大字体到最小字体。
  7. <p></p>：定义一个段落。
  8. <br>：插入一个换行。
  9. <hr>：插入一个水平线。
  10. <b></b>：文本以粗体显示。
  11. <i></i>：文本以斜体显示。
  12. <a href=""></a>：创建一个超链接，href属性定义链接的目标地址。
  13. <img src="" alt="">：插入一张图片，src属性定义图片的路径，alt属性定义图片的替代文本。
  14. <ul></ul>：无序列表，每个列表项以 <li> 开始。
  15. <ol></ol>：有序列表，每个列表项以 <li> 开始。
  16. <div></div>：定义了文档的一个区块，没有特别的意义。
  17. <span></span>：用来组合文档中的行内元素。
  18. <form></form>：创建一个表单，用于用户输入。
  19. <input>：创建一个输入框，type属性定义输入类型（如text、radio、submit）。
  20. <select></select>：创建一个下拉列表，使用<option>定义列表项。

以上是一些基本的HTML标签，实际应用中可能还会用到更多的高级特性和标签。

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