分类 html 下的文章

2024-08-11




import re
 
def extract_data_from_html(html_content, tag_name, attribute_name):
    """
    从HTML内容中提取特定标签的属性值。
    
    参数:
    - html_content: 字符串，包含HTML内容。
    - tag_name: 字符串，要提取的标签名称。
    - attribute_name: 字符串，要提取的属性名称。
    
    返回:
    - 属性值列表。
    """
    pattern = r'<{0}[^>]*{1}=["\']?([^"\'>]+)["\']?[^>]*>'.format(tag_name, attribute_name)
    matches = re.findall(pattern, html_content)
    return [match[0] for match in matches]
 
# 示例HTML内容
html_example = """
<html>
  <body>
    <img src="image1.png" alt="First Image">
    <img src="image2.png" alt="Second Image">
    <a href="link.html" class="my-link">Click Here</a>
  </body>
</html>
"""
 
# 使用函数提取img标签的src属性值
src_values = extract_data_from_html(html_example, 'img', 'src')
print('Image sources:', src_values)
 
# 使用函数提取a标签的href属性值
href_values = extract_data_from_html(html_example, 'a', 'href')
print('Links:', href_values)

这段代码定义了一个函数extract_data_from_html，它接受HTML内容、标签名称和属性名称作为参数，使用正则表达式匹配这些标签的属性值，并返回一个包含这些值的列表。然后，我们使用这个函数来提取示例HTML内容中img和a标签的src和href属性值，并打印结果。这是一个实际应用正则表达式从HTML中提取数据的例子。

- 阅读更多 -

HTML简单的注册表单验证

System

2024-08-11

所有,html




<!DOCTYPE html>
<html>
<head>
    <title>简单注册表单验证</title>
    <script>
        function validateForm() {
            var x = document.forms["myForm"]["fname"].value;
            if (x == "") {
                alert("名字必须填写");
                return false;
            }
            var email = document.forms["myForm"]["email"].value;
            var emailPat = /^(.+?)@(.+?)$/;
            if (!emailPat.test(email)) {
                alert("无效的邮箱格式");
                return false;
            }
            var pwd1 = document.forms["myForm"]["pwd1"].value;
            var pwd2 = document.forms["myForm"]["pwd2"].value;
            if (pwd1 != pwd2) {
                alert("密码不匹配");
                return false;
            }
        }
    </script>
</head>
<body>
    <form name="myForm" action="register_backend.php" onsubmit="return validateForm()" method="post">
        名字: <input type="text" name="fname">
        <br>
        电邮: <input type="text" name="email">
        <br>
        密码: <input type="password" name="pwd1">
        <br>
        确认密码: <input type="password" name="pwd2">
        <br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

这段代码在客户端对用户输入的数据进行简单的验证，如果输入不符合要求，则会弹出警告，并阻止表单的提交。这是一种常见的前端验证方式，可以提高用户体验，但不能确保安全性，后端验证是必须的以防止恶意用户绕过前端验证。

- 阅读更多 -

html实现网页插入音频

System

2024-08-11

所有,html

在HTML中插入音频可以使用<audio>标签。以下是一个基本的示例代码：




<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

controls 属性会向用户显示播放器的控件，如播放、暂停和音量控制。
<source> 标签定义了音频资源的路径和类型。src 指定文件路径，type 指定文件的MIME类型。
如果浏览器不支持 <audio> 元素，它会显示<source>标签之间的文本。

确保你的音频文件格式和编码是浏览器支持的。常见的格式包括 MP3、Ogg、WAV 等。如果需要兼容多种浏览器，你可以在<audio>标签中包含多个<source>标签，指定不同的文件格式。

System

2024-08-11

所有,html

在React中，你可以使用dangerouslySetInnerHTML属性来渲染HTML结构。这个属性名字很长，所以通常我们会把它和一个简单的别名一起使用，比如html。

这里是一个简单的例子：




function createMarkup(html) {
  return { __html: html };
}
 
function MyComponent({ htmlContent }) {
  return (
    <div dangerouslySetInnerHTML={createMarkup(htmlContent)} />
  );
}
 
// 使用组件
const htmlContent = '<strong>这是粗体文本</strong>';
ReactDOM.render(<MyComponent htmlContent={htmlContent} />, document.getElementById('root'));

在这个例子中，MyComponent接收一个htmlContent属性，它是将要被渲染的HTML字符串。createMarkup函数接收HTML字符串并返回一个对象，这个对象有一个特殊的__html属性，它包含了原始的HTML。

dangerouslySetInnerHTML属性接收这个对象，并把它的HTML内容设置到组件的innerHTML中。

请注意，使用dangerouslySetInnerHTML可能会带来跨站脚本攻击(XSS)的风险，因此只在你能够确信内容是安全的情况下使用它。如果你需要渲染用户提供的内容，请确保对内容进行清洗处理，例如使用库如DOMPurify。

- 阅读更多 -

html三级菜单

System

2024-08-11

所有,html

创建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

- 阅读更多 -