Tech Blog

html三级菜单

2024-08-11

创建HTML三级菜单的基本步骤如下：

使用<ul>标签定义一个无序列表来表示菜单。
对于每个菜单项，使用<li>标签。
对于子菜单，可以在对应的<li>项中嵌套一个无序列表。
使用CSS来设置菜单的样式，比如隐藏和显示子菜单。

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




<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
ul li {
  position: relative;
}
 
ul li ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
 
ul li:hover > ul {
  display: block;
}
</style>
</head>
<body>
 
<ul>
  <li>一级菜单
    <ul>
      <li>二级菜单
        <ul>
          <li>三级菜单 1</li>
          <li>三级菜单 2</li>
          <li>三级菜单 3</li>
        </ul>
      </li>
      <li>二级菜单 2</li>
      <li>二级菜单 3</li>
    </ul>
  </li>
  <li>一级菜单 2
    <ul>
      <li>二级菜单 1</li>
      <li>二级菜单 2</li>
      <li>二级菜单 3</li>
    </ul>
  </li>
  <li>一级菜单 3</li>
</ul>
 
</body>
</html>

这个例子使用了CSS的伪类:hover来实现鼠标悬停时显示子菜单的效果。当然，你可以根据需要添加更多的样式和交互效果，比如使用JavaScript来控制子菜单的显示和隐藏。

- 阅读更多 -

【HTML网页设计】使用HTML做一个简单漂亮的页面（纯html代码）

System

2024-08-11

所有,html

以下是一个简单而漂亮的HTML页面示例。这个页面包含了基本的HTML结构、CSS样式和一些简单的交互元素，使用了现代化的CSS样式和JavaScript功能。




<!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: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f7f7f7;
        }
        .container {
            text-align: center;
            padding: 20px;
        }
        h1 {
            color: #333;
        }
        p {
            color: #666;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎来到我的页面</h1>
        <p>这是一个简单的HTML页面示例。</p>
        <button onclick="alert('按钮被点击')">点击我</button>
    </div>
</body>
</html>

这个页面使用了CSS Flexbox布局来居中内容，并包含了一个响应点击事件的按钮。这个示例展示了如何使用简单的HTML、CSS和JavaScript来创建一个基本的交互式网页。

- 阅读更多 -

gin框架 HTML 模板加载，渲染使用详解和总结

System

2024-08-11

所有,html




package main
 
import (
    "github.com/gin-gonic/gin"
)
 
func main() {
    router := gin.Default()
    // 指定模板文件所在的文件夹
    router.LoadHTMLGlob("templates/**/*")
 
    router.GET("/", func(c *gin.Context) {
        // 渲染模板到客户端
        // 模板文件：templates/hello.html
        // 模板中的{{ .T }}会被替换为"Hello, World!"
        c.HTML(200, "hello.html", gin.H{
            "T": "Hello, World!",
        })
    })
 
    // 启动服务器
    router.Run(":8080")
}

这段代码演示了如何在Gin框架中加载和渲染HTML模板。首先，使用LoadHTMLGlob函数指定所有模板文件的路径，这里使用了通配符来匹配templates目录下所有子目录中的HTML文件。然后，在GET请求处理函数中，使用c.HTML函数来渲染指定的模板，并将模板数据传递给模板引擎。最后，启动服务器并监听8080端口。这是一个简单的例子，实际项目中可能需要更复杂的模板渲染逻辑。

- 阅读更多 -

html中如何让网页禁用右键禁止查看源代码

System

2024-08-11

所有,html

在HTML中，可以通过JavaScript来禁用右键菜单，从而防止用户查看源代码或复制内容。以下是一个简单的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>禁用右键菜单</title>
<script>
// 禁用右键菜单函数
function disableContextMenu() {
    document.addEventListener('contextmenu', function(e) {
        e.preventDefault();
    }, false);
}
 
// 页面加载时调用禁用函数
window.onload = disableContextMenu;
</script>
</head>
<body>
<p>右键点击页面看看会发生什么。</p>
</body>
</html>

这段代码通过监听contextmenu事件，并调用事件的preventDefault方法来禁用默认的右键菜单。将此代码添加到HTML文件中，当用户尝试右键点击页面时，右键菜单将不会出现，从而防止用户查看源代码或复制内容。

- 阅读更多 -

结合sd用html制作记录自己运动的网页

System

2024-08-11

所有,html

为了创建一个可以记录和显示自己运动的网页，你可以使用HTML和JavaScript来实现。以下是一个简单的示例，它包含了记录运动数据的表单和显示运动数据的表格。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运动记录</title>
</head>
<body>
 
<h1>运动记录</h1>
 
<form id="workout-form">
    <label for="date">日期:</label>
    <input type="date" id="date" name="date"><br><br>
 
    <label for="time">时间 (HH:MM):</label>
    <input type="time" id="time" name="time"><br><br>
 
    <label for="distance">距离 (公里):</label>
    <input type="number" id="distance" name="distance" min="0" step="0.01"><br><br>
 
    <label for="calories">消耗的卡路里:</label>
    <input type="number" id="calories" name="calories" min="0"><br><br>
 
    <button type="submit">记录</button>
</form>
 
<table id="workouts-table">
    <tr>
        <th>日期</th>
        <th>时间</th>
        <th>距离</th>
        <th>卡路里</th>
    </tr>
    <!-- 运动数据将被插入到这里 -->
</table>
 
<script>
    const workoutForm = document.getElementById('workout-form');
    const workoutsTable = document.getElementById('workouts-table');
 
    workoutForm.addEventListener('submit', function(event) {
        event.preventDefault();
 
        const newWorkout = {
            date: workoutForm.date.value,
            time: workoutForm.time.value,
            distance: workoutForm.distance.value,
            calories: workoutForm.calories.value
        };
 
        // 在这里可以添加代码将newWorkout发送到服务器保存
        // 现在我们只是在前端显示它
 
        addWorkoutToTable(newWorkout);
 
        // 清空表单字段
        workoutForm.reset();
    });
 
    function addWorkoutToTable(workout) {
        const newRow = workoutsTable.insertRow();
        const dateCell = newRow.insertCell(0);
        const timeCell = newRow.insertCell(1);
        const distanceCell = newRow.insertCell(2);
        const caloriesCell = newRow.insertCell(3);
 
        dateCell.textContent = workout.date;
        timeCell.textContent = workout.time;
        distanceCell.textContent = workout.distance;
        caloriesCell.textContent = workout.calories;
    }
</script>
 
</body>
</html>

这个简单的网页包括一个运动记录表单和一个运动数据表格。当用户填写表单并提交时，数据将被捕获并显示在表格中。实际应用中，你可能需要将运动数据发送到服务器端保存，并从服务器获取已有的运动数据显示在页面上。这个示例只是在前端显示数据，并没有涉及到服务器端的代码。

- 阅读更多 -

HTML详解连载

System

2024-08-11

所有,html

在HTML中，<a>标签用于定义超链接，<img>标签用于插入图片。




<!-- 超链接 -->
<a href="https://www.example.com">访问Example网站</a>
 
<!-- 图片插入 -->
<img src="image.jpg" alt="描述性文本" />

在这个连载中，我们将会更深入地探讨HTML的其他元素和特性，包括表单、列表、表格、多媒体内容等。




<!-- 表单 -->
<form action="/submit" method="post">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username">
  <input type="submit" value="提交">
</form>
 
<!-- 无序列表 -->
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>
 
<!-- 有序列表 -->
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
</ol>
 
<!-- 表格 -->
<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</table>
 
<!-- 嵌入视频 -->
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持视频标签。
</video>

在这个连载中，我们将会更深入地探讨HTML的其他元素和特性，包括iframe嵌入网页、下拉框、多选框和单选按钮等。




<!-- iframe嵌入网页 -->
<iframe src="https://www.example.com" width="300" height="200"></iframe>
 
<!-- 下拉框 -->
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
 
<!-- 多选框 -->
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1">骑自行车</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">开汽车</label><br>
 
<!-- 单选按钮 -->
<input type="radio" id="male" name="gender" value="male">
<label for="male">男性</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女性</label><br>

在这个连载中，我们将会更深入地探讨HTML的其他元素和特性，包括Canvas绘图、HTML5表单验证和地理位置API等。




<!-- Canvas绘图 -->
<canvas id="myCanvas" width="200" height="100">
  您的浏览器不支持Canvas。
</canvas>
 
<!-- 数据验证 -->
<form action="/action_page.php" method="get">
  <label for="fname">名字（只能是字母）：</label><br>
  <input type="text" id="fname" name="fname" pattern="[A-Za-z]+" title="名字只能是字母">
  <input type="submit">
</form>
 
<!-- 地理位置API -->
<script>
  if ("geolocation" in navigator) {
    navigator.geol

- 阅读更多 -

ChatGPT对话：如何把Html文件转换为Markdown文件

System

2024-08-11

所有,html

要将HTML文件转换为Markdown文件，可以使用Python语言和html2text库。以下是一个简单的Python脚本，用于实现这一转换：

首先，安装html2text库（如果尚未安装）：




pip install html2text

然后，使用以下Python脚本进行转换：




import html2text
import sys
 
# 确保传入了HTML文件名和Markdown文件名
if len(sys.argv) < 3:
    print("Usage: python html_to_markdown.py input.html output.md")
    sys.exit(1)
 
html_file = sys.argv[1]
md_file = sys.argv[2]
 
# 读取HTML文件内容
with open(html_file, 'r', encoding='utf-8') as file:
    html_content = file.read()
 
# 使用html2text转换HTML到Markdown
h = html2text.HTML2Text()
h.ignore_links = True
markdown_content = h.handle(html_content)
 
# 将Markdown内容写入文件
with open(md_file, 'w', encoding='utf-8') as file:
    file.write(markdown_content)
 
print(f"Converted {html_file} to {md_file}")

使用方法：




python html_to_markdown.py input.html output.md

这个脚本会读取名为input.html的文件，将其转换为Markdown，并将转换后的内容保存到output.md文件中。

- 阅读更多 -

Java word转为html 两种方式

System

2024-08-11

所有,html

在Java中，可以使用Apache POI库和JavaFX的WebView组件将Word文档转换为HTML。以下是两种方法的示例代码：

方法一：使用Apache POI读取Word文档并转换为HTML。




import org.apache.poi.xwpf.usermodel.XWPFDocument;
import org.apache.poi.xwpf.usermodel.XWPFParagraph;
 
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.util.List;
 
public class WordToHtml {
    public static void main(String[] args) throws Exception {
        FileInputStream fis = new FileInputStream(new File("path/to/your/word/file.docx"));
        XWPFDocument document = new XWPFDocument(fis);
        StringBuilder htmlText = new StringBuilder();
 
        htmlText.append("<html><body>");
        List<XWPFParagraph> paragraphs = document.getParagraphs();
        for (XWPFParagraph para : paragraphs) {
            htmlText.append("<p>").append(para.getText()).append("</p>");
        }
        htmlText.append("</body></html>");
 
        fis.close();
 
        // 输出到HTML文件或直接返回htmlText.toString()
        OutputStream out = new FileOutputStream("output.html");
        out.write(htmlText.toString().getBytes());
        out.close();
    }
}

方法二：使用JavaFX的WebView加载Word文档保存为HTML。




import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
 
public class WordToHtmlFX extends Application {
    @Override
    public void start(Stage primaryStage) {
        WebView webView = new WebView();
        Scene scene = new Scene(webView);
 
        webView.getEngine().load(getClass().getResource("/your_word_file.html").toExternalForm());
 
        primaryStage.setTitle("Word to HTML");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

注意：以上两种方法都需要依赖外部库，Apache POI用于读取和转换Word文档，JavaFX的WebView用于显示HTML内容。需要在项目中添加相应的依赖。

- 阅读更多 -

pdf转HTML实践之ubuntu编译

System

2024-08-11

所有,html

在Ubuntu上编译pdf2htmlEX的实践步骤如下：

安装必要的依赖项：




sudo apt-update
sudo apt-get install build-essential autoconf libpng-dev libjpeg-dev libpango1.0-dev libcairo2-dev libgdk-pixbuf2.0-dev libpango-dev

下载pdf2htmlEX源代码：




wget https://github.com/coolwanglu/pdf2htmlEX/archive/v0.14.6.tar.gz
tar -xvzf v0.14.6.tar.gz
cd pdf2htmlEX-0.14.6/

配置并编译项目：




./autogen.sh
./configure
make

安装编译后的程序：




sudo make install

验证安装是否成功：




pdf2htmlEX --version

以上步骤将会在Ubuntu系统上编译和安装pdf2htmlEX工具。确保替换为最新的可用版本号。这样，你就可以使用pdf2htmlEX将PDF文件转换为HTML格式了。

- 阅读更多 -

陈表达学html-弹出显示下拉菜单-窗口案例

System

2024-08-11

所有,css3

在HTML中，可以使用<select>元素创建一个下拉菜单，并使用JavaScript结合window.alert()来实现弹出显示下拉菜单选中的值的简单示例如下：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单弹出选择值示例</title>
<script>
function showSelected() {
    var selectElement = document.getElementById("mySelect");
    var selectedValue = selectElement.options[selectElement.selectedIndex].text;
    window.alert("您选择了: " + selectedValue);
}
</script>
</head>
<body>
 
<select id="mySelect">
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
    <option value="option3">选项3</option>
</select>
 
<button onclick="showSelected()">弹出选择</button>
 
</body>
</html>

在这个例子中，我们定义了一个带有ID的<select>元素，并为其添加了三个<option>元素。然后，我们创建了一个按钮，当被点击时，会调用showSelected函数。这个函数会获取下拉菜单当前选中的值，并使用window.alert()将其弹出显示。

- 阅读更多 -