/* 定义按钮的基本样式 */
.button {
  position: relative;
  background-color: #4285f4;
  border-radius: 4px;
  color: white;
  padding: 15px 20px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  transition: transform 0.2s;
}
 
/* 鼠标悬浮时按钮放大效果 */
.button:hover {
  transform: scale(1.1);
}
 
/* 定义剪裁路径，实现流动边框效果 */
.button::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
  background-color: #4285f4;
  border-radius: inherit;
  clip-path: inset(0 round 5px);
  animation: slide 2s infinite alternate linear;
}
 
/* 定义关键帧动画，实现左右移动的路径变换 */
@keyframes slide {
  from {
    clip-path: inset(0 round 5px);
  }
  to {
    clip-path: inset(0 0 0 0 round 5px);
  }
}

这段代码定义了一个按钮，并使用clip-path属性和关键帧动画创建了一个流动边框的效果。当鼠标悬浮在按钮上时，按钮会放大，并且带有流动边框的效果。这是一个简单而有效的方法，用于增强网页中按钮的交互体验。

在CSS3中，3D转换是一种强大的工具，可以创建丰富的交互式3D效果和动画。以下是一些关键的3D转换属性：

1. translate3d(tx, ty, tz): 定义3D转换，其中tx, ty, tz分别代表在X, Y, Z轴上的位移。
2. rotate3d(x, y, z, angle): 定义3D旋转，其中x, y, z代表旋转轴的方向的因子，angle代表旋转的角度。
3. perspective(n): 为3D转换元素提供透视视图。n代表透视的距离，通常需要设置在转换元素的父元素上。
4. transform-style(flat|preserve-3d): 指定内嵌元素如何在3D空间中显示。flat为默认值，表示内嵌元素不进行3D转换；preserve-3d表示内嵌元素应该保持其3D转换。

示例代码：

/* 设置父元素的透视效果 */
.parent {
  perspective: 600px;
}
 
/* 设置子元素进行3D转换 */
.child {
  transform-style: preserve-3d;
  transform: translate3d(50px, 100px, 20px) rotate3d(1, 1, 1, 30deg);
}

在这个例子中，.child元素相对于其父元素.parent进行了3D转换，先在X轴和Y轴上移动了50px和100px，在Z轴上移动了20px，然后绕X, Y, Z轴各旋转了30度。

CSS3弹性布局（Flexbox）是一种现代化的布局模型，使得复杂的布局变得更加简单。Flexbox可以使容器的子项在任何方向上排列，并且可以弹性地伸缩以填充可用空间。

以下是一个简单的Flexbox布局示例：

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:

.flex-container {
  display: flex; /* 使用弹性布局 */
  flex-direction: row; /* 设置主轴方向为水平 */
  justify-content: space-around; /* 子项在主轴方向上分散对齐 */
  align-items: center; /* 子项在交叉轴方向上居中对齐 */
  height: 100px; /* 容器高度 */
  background-color: lightblue; /* 背景颜色 */
}
 
.flex-item {
  margin: 5px; /* 子项间隔 */
  padding: 10px; /* 子项内填充 */
  background-color: coral; /* 子项背景颜色 */
  color: white; /* 字体颜色 */
  font-size: 16px; /* 字体大小 */
}

这个例子中，.flex-container 类使用 display: flex 属性启用Flexbox布局。flex-direction 属性设置为 row 表示子项沿着水平方向排列。justify-content 属性设置为 space-around 表示子项在水平方向上分散对齐，align-items 属性设置为 center 表示子项在垂直方向上居中对齐。

在Flex布局中，常用的几个属性包括：

1. flex-direction：定义了flex项在容器中的方向。
2. justify-content：定义了flex项在主轴方向上的对齐方式。
3. align-items：定义了flex项在交叉轴方向上的对齐方式。
4. flex-wrap：定义了flex项在一条轴线上不能全部展示时的换行方式。
5. align-content：定义了多根轴线对齐方式，仅在flex-wrap属性为wrap时有效。

以下是这些属性的简单示例代码：

.container {
  display: flex; /* 启用Flex布局 */
  flex-direction: row; /* 默认值，水平从左到右 */
  justify-content: flex-start; /* 默认值，左对齐 */
  align-items: center; /* 居中对齐，在交叉轴方向 */
  flex-wrap: wrap; /* 允许换行 */
  align-content: space-around; /* 在多行之间均匀分布空间 */
}

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <!-- 更多的flex项 -->
</div>

这段代码会创建一个flex容器，其中包含几个flex项，并且这个容器被设置为水平方向的布局，项目会在容器内居中对齐，并且如果空间不足，会允许项目换行，多行之间使用空间分布。

HTML5和CSS3在新版本中增加了许多新特性，以下是一些常见的新特性和示例代码：

1. HTML5 Canvas：

   Canvas 提供了一个绘图 API，可以用来创建图表、游戏等。

   
   
   
   <canvas id="myCanvas" width="200" height="100"></canvas>
   <script>
   var canvas = document.getElementById('myCanvas');
   var ctx = canvas.getContext('2d');
   ctx.fillStyle = '#FF0000';
   ctx.fillRect(0, 0, 150, 75);
   </script>

2. HTML5 视频和音频：

   使用 <video> 和 <audio> 标签可以轻松嵌入视频和音频内容。

   
   
   
   <video width="320" height="240" controls>
     <source src="movie.mp4" type="video/mp4">
     Your browser does not support the video tag.
   </video>
    
   <audio controls>
     <source src="song.mp3" type="audio/mpeg">
     Your browser does not support the audio element.
   </audio>

3. HTML5 新的表单输入类型：

   例如，日期选择器、数字输入、邮件输入等。

   
   
   
   <form>
     Email: <input type="email" name="user_email">
     Birthday: <input type="date" name="user_birthday">
     Age: <input type="number" name="user_age" min="0" max="100">
   </form>

4. HTML5 新的语义标签：

   如 <header>, <nav>, <section>, <article>, <aside>, <footer> 等，有利于搜索引擎和开发者理解页面内容。

   
   
   
   <header>
     <h1>My First HTML5 Document</h1>
   </header>
   <nav>
     <ul>
       <li>Home</li>
       <li>About</li>
       <li>Contact</li>
     </ul>
   </nav>
   <section>
     <h2>W3C</h2>
     <p>The World Wide Web Consortium (W3C) is a community of companies, governments, and individuals that work together to build open, universal standards for the World Wide Web.</p>
   </section>
   <footer>
     <p>© 2023 W3C. All Rights Reserved.</p>
   </footer>

5. CSS3 动画、变换和过渡：

   使得页面的效果更加丰富和生动。

   
   
   
   /* 关键帧动画 */
   @keyframes example {
     from {background-color: red;}
     to {background-color: yellow;}
   }
    
   /* 应用动画 */
   .example {
     animation-name: example;
     animation-duration: 4s;
   }
    
   /* 3D 变换 */
   .box {
     width: 100px;
     height: 100px;
     background-color: red;
     transform: rotateY(45deg);
   }
    
   /* 圆角边框 */
   .rounded-border {
     border: 2px solid #000;
     border-radius: 25px;
   }

6. CSS3 媒体查询：

   可以根据设备的屏幕大小和分辨率提供不同的样式规则。

   
   
   
   /* 针对宽度在 600px 以下的屏幕 */
   @media screen and (max-width: 600px) {
     body {
       background-color: lightblue;
     }
   }

这些新特性和示例代码只是HTML5和CSS3中的

CSS层叠样式表（Cascading Style Sheets, CSS）是一种用来描述HTML或XML（包括各种XML方言，如SVG，MathML等）文档样式的语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS的主要目的是确定页面元素如何展示，包括颜色、布局、字体、边距、宽度、高度等。

CSS的基本语法规则包括选择器和声明，其中每条声明由一个属性和一个值组成。

以下是一些CSS的基本使用示例：

1. 改变文本颜色和字体：

p {
  color: red;
  font-family: Arial, sans-serif;
}

2. 设置元素的宽度和高度：

div {
  width: 100px;
  height: 100px;
  background-color: blue;
}

3. 添加边框和边距：

h1 {
  border: 1px solid black;
  margin: 20px;
}

4. 设置元素的显示类型：

span {
  display: block;
}

5. 设置背景图片：

body {
  background-image: url('background.jpg');
}

CSS可以通过多种方式应用到HTML文档中，包括外部样式表、内部样式表和内联样式。

例如，外部样式表可以通过以下方式链接：

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

内部样式表可以直接在HTML的<head>部分编写：

<head>
  <style>
    p { color: red; }
  </style>
</head>

内联样式直接在元素的style属性中设置：

<p style="color: blue;">This is a paragraph.</p>

CSS是前端开发中一个非常重要的部分，可以实现页面的样式和布局，提高用户的体验。

为了在CSS中使图像同比缩小，你可以使用width或height属性，并设置一个百分比值，或者直接设置一个具体的像素值。如果你想要图像同时在宽度和高度上同比缩小，你可以设置width和height属性为相同的百分比值，或者直接设置一个新的像素值。

以下是几种使用CSS缩小图像的方法：

1. 使用百分比值来缩小图像：

img {
  width: 50%; /* 缩小到原来的50% */
  height: 50%; /* 同时缩小高度 */
}

2. 使用具体的像素值来缩小图像：

img {
  width: 200px; /* 缩小到200像素宽 */
  height: 150px; /* 同时缩小到150像素高 */
}

3. 如果你想保持图像的宽高比，只设置width或height中的一个：

img {
  width: 50%; /* 只设置宽度，高度将自动保持比例 */
}

确保你的HTML代码中有相应的<img>标签，并且已经引入了CSS。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
  img {
    width: 50%; /* 或者使用具体的像素值，如：width: 200px; */
    height: auto; /* 高度自动保持比例 */
  }
</style>
</head>
<body>
  <img src="path/to/your/image.jpg" alt="Responsive Image">
</body>
</html>

在这个例子中，图像会同比缩小到原来的50%，而且高度会自动保持相应的比例。如果你设置了具体的像素值，记得同时设置height: auto以保持图像的宽高比。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tooltip Example</title>
<style>
  .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* 可选的下划线提示 */
  }
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
 
    /* 位置 */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px; /* 使用负的宽度来居中 */
  
    /* 动画效果 */
    opacity: 0;
    transition: opacity 0.3s;
  }
  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }
</style>
</head>
<body>
 
<p>悬停鼠标在文本上查看工具提示：
<span class="tooltip">悬停显示工具提示
  <span class="tooltiptext">工具提示文本</span>
</span>
</p>
 
</body>
</html>

这段代码展示了如何使用HTML和CSS创建一个简单的工具提示（tooltip）。.tooltip 类用于定义一个包含工具提示文本的元素，.tooltiptext 类用于定义工具提示的样式，并在鼠标悬停时显示。通过使用position属性和transition属性，实现了平滑的显示效果。

# 导入必要的模块
import json
from channels.generic.websocket import AsyncWebsocketConsumer
 
class ChatConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        # 当WebSocket连接建立时调用
        self.room_group_name = 'chat_room'
        # 将用户加入到房间
        await self.channel_layer.group_add(
            self.room_group_name,
            self.channel_name
        )
        await self.accept()
 
    async def disconnect(self, close_code):
        # 当WebSocket连接断开时调用
        await self.channel_layer.group_discard(
            self.room_group_name,
            self.channel_name
        )
 
    async def receive(self, text_data):
        # 当接收到前端发送的消息时调用
        text_data_json = json.loads(text_data)
        message = text_data_json['message']
 
        # 广播消息到房间内所有的用户
        await self.channel_layer.group_send(
            self.room_group_name,
            {
                'type': 'chat_message',
                'message': message
            }
        )
 
    async def chat_message(self, event):
        # 处理群组消息
        message = event['message']
 
        # 发送消息到WebSocket
        await self.send(text_data=json.dumps({
            'message': message
        }))

这个示例代码展示了如何使用Django Channels框架来创建一个简单的WebSocket聊天服务器端。它定义了一个ChatConsumer类，用于处理WebSocket连接、断开连接和接收消息。当有新的消息发送到房间时，它会广播给该房间内的所有用户。这是一个典型的使用WebSocket进行实时通信的场景。

在Spring Boot中，你可以使用MultipartFile接口来处理文件上传。以下是使用Spring Boot和jQuery AJAX实现文件上传的简单示例。

首先，你需要在Spring Boot后端创建一个控制器来处理文件上传的请求：

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
 
@RestController
public class FileUploadController {
 
    @PostMapping("/upload")
    public String handleFileUpload(@RequestParam("file") MultipartFile file) {
        // 这里可以添加文件上传的处理逻辑
        // 例如保存文件到服务器、数据库等
        // 返回响应信息
        return "文件上传成功: " + file.getOriginalFilename();
    }
}

然后，你可以使用jQuery AJAX在前端发送文件：

<!DOCTYPE html>
<html>
<head>
<title>文件上传示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<form id="uploadForm">
    <input type="file" name="file" id="file" />
    <button type="button" id="upload">上传</button>
</form>
 
<script>
$(document).ready(function() {
    $('#upload').click(function() {
        var formData = new FormData($('#uploadForm')[0]);
        $.ajax({
            url: '/upload',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                alert(response);
            },
            error: function() {
                alert('文件上传失败');
            }
        });
    });
});
</script>
 
</body>
</html>

在这个HTML页面中，我们有一个表单用于选择文件，一个按钮用于触发文件上传。使用jQuery，我们捕捉到按钮点击事件，然后构建FormData对象，该对象包含了文件信息，并通过AJAX以POST请求发送到后端的/upload路径。

确保你的Spring Boot应用配置了multipart文件上传的支持，在application.properties或application.yml中添加以下配置：

spring.servlet.multipart.max-file-size=128KB
spring.servlet.multipart.max-request-size=128KB

以上代码实现了文件上传的基本功能，你可以根据实际需求对代码进行扩展和优化。