1. 首页
  2. 分类
  3. html
HTML+CSS制作简单的家乡网页 ——我的家乡介绍广东 web前端期末大作业HTML静态网页作业
System
2024-08-21
所有,html

以下是一个简单的HTML和CSS结合的代码示例，用于创建一个介绍广东家乡特色的静态网页。




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的家乡 — 广东</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .header {
            text-align: center;
            padding: 20px;
            color: #fff;
            background-color: #333;
        }
        .content {
            margin: 20px 0;
            text-align: center;
        }
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>欢迎来到我的家乡 — 广东</h1>
    </div>
    <div class="content">
        <img src="guangdong.jpg" alt="广东">
        <p>广东，位于中国南部，东邻东海，西接广州海，是中国的经济大门面和重要的贸易中心。广东拥有美丽的自然景色、丰富的文化遗产和活跃的经济生态。</p>
        <!-- 更多内容可以根据实际添加 -->
    </div>
</body>
</html>

在这个示例中，我们使用了HTML定义了网页的结构，并通过内联CSS为页面添加了简单的样式。你可以根据实际情况替换图片和文本内容，以展示你家乡的特色。记得将guangdong.jpg替换为实际的图片文件路径。

- 阅读更多 -
Advance：HTML 中的视频标签和音频标签
System
2024-08-21
所有,html

HTML5 引入了 <video> 和 <audio> 标签，用于在网页中嵌入视频和音频内容。

视频标签 <video> 示例：




<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
  • width 和 height 属性用于设置视频显示的宽度和高度。
  • controls 属性添加视频播放控件，如播放、暂停和音量控制。
  • <source> 标签指定视频文件的路径和类型，可以设置多个源文件以支持不同的浏览器。
  • 最后的一行文本是在不支持 <video> 标签的浏览器中显示的替代文本。

音频标签 <audio> 示例：




<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>
  • controls 属性添加音频播放控件，如播放、暂停和音量控制。
  • <source> 标签指定音频文件的路径和类型，同样可以设置多个源文件。
  • 最后的替代文本显示在不支持 <audio> 标签的浏览器中。

请注意，为了确保跨浏览器的兼容性，您应该为 <video> 和 <audio> 提供多种格式的源文件。例如，对于视频，可能需要提供 MP4、WebM 和 Ogg 格式；对于音频，可能需要提供 MP3 和 Ogg 格式。

- 阅读更多 -
尚硅谷html5+css3html相关知识
System
2024-08-21
所有,html

HTML5 是 HTML 的一个新版本，于 2014 年 10 月由万维网联盟（W3C）完成标准化工作。HTML5 的目标是取代 1999 年制定的 HTML 4.01 和 XHTML 1.0 标准，并且提供更好的平台无关性和富媒体支持。

以下是一些基本的 HTML5 元素和属性的示例：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
</head>
<body>
    <header>
        <h1>我的网站</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#home">主页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contact">联系我们</a></li>
            <li><a href="#about">关于</a></li>
        </ul>
    </nav>
    <section id="home">
        <h2>欢迎来到主页</h2>
        <p>这是主页的内容。</p>
    </section>
    <section id="news">
        <h2>新闻</h2>
        <p>这里是新闻内容。</p>
    </section>
    <footer>
        <p>版权所有 © 2023 我的网站</p>
    </footer>
</body>
</html>

在这个例子中，我们使用了 <header>、<nav>、<section> 和 <footer> 等 HTML5 语义元素来构建一个简单的页面布局。这有助于搜索引擎理解页面内容的结构，提高搜索排名。

CSS3 是 CSS 的一个扩展，它提供了更强大的特性，比如阴影、渐变、变换等，并且增加了对响应式设计的支持。

以下是一个简单的 CSS3 示例，它使用了圆角、阴影和渐变效果：




/* CSS3 示例 */
body {
    background: linear-gradient(to right, #FFB3A4, #FFDCD8);
    font-family: Arial, sans-serif;
}
header {
    border-radius: 10px;
    box-shadow: 5px 5px 10px #888;
    margin: 20px;
    padding: 20px;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
nav li {
    display: inline;
    margin-right: 10px;
}
nav a {
    text-decoration: none;
    color: #333;
}
section {
    margin: 20px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 5px 5px 10px #888;
}
footer {
    text-align: center;
    margin-top: 20px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 5px 5px 10px #888;
}

在这个例子中，我们使用了 CSS3 的线性渐变（linear-gradient）、盒阴影（box-shadow）和圆角（border-radius）。这将为页面提供更加生动和现代化的视觉效果。

- 阅读更多 -
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实现更多复杂的效果。

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