标签 html5 下的文章

[HTML]Web前端开发技术12（HTMLCSSJavaScript ）——喵喵画网页

2024-08-15

在Web前端开发中，使用HTML5、CSS3和JavaScript可以创建出丰富多样的网页。以下是一个简单的示例，展示了如何使用这些技术创建一个简单的喵喵画页面：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shiba Inu Profile</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 25px;
        }
        .shiba-info {
            text-align: center;
            padding: 20px;
            background-color: #f2f2f2;
            border: solid 1px #ccc;
            margin-bottom: 15px;
        }
        .shiba-image {
            width: 200px;
            margin: 0 auto;
            display: block;
        }
    </style>
</head>
<body>
    <div class="shiba-info">
        <img class="shiba-image" src="shiba.jpg" alt="Shiba Inu">
        <h2>Shiba Inu Profile</h2>
        <p>The Shiba Inu is the smallest of the six original Shiba Inu dogs bred by Japanese farmers on the island of Hokkaido in the far northeast of the country.</p>
    </div>
 
    <script>
        // JavaScript code here to add dynamic functionality (if needed)
    </script>
</body>
</html>

在这个示例中，我们定义了一个简单的HTML结构，并通过内部样式表（<style>标签内）添加了一些基本的CSS样式。我们还包含了一张示例图片和一些关于喵喵的文本描述。这个页面可以进一步完善，比如添加交互性，使用JavaScript来处理用户事件或动态内容加载。但是，为了保持简洁，这里只提供了一个基础的静态示例。

- 阅读更多 -

css3新增属性和html5新增标签的出现和意义

System

2024-08-15

所有,css3

CSS3 是 CSS 的一个版本，引入了许多新特性，包括阴影、边框、渐变、变换等。HTML5 是 HTML 的一个版本，引入了新的语义标签、表单控件、音频和视频支持等。

CSS3 新特性例子：




/* 圆角 */
div {
  border: 1px solid #000;
  border-radius: 10px; /* 圆角的像素值 */
}
 
/* 渐变背景 */
div {
  background: linear-gradient(to right, red, yellow);
}
 
/* 阴影效果 */
div {
  box-shadow: 5px 5px 10px #888888;
}

HTML5 新特性例子：




<!-- 语义化的导航标签 -->
<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>
 
<!-- 本地存储 -->
<script>
  localStorage.setItem('key', 'value');
  console.log(localStorage.getItem('key'));
</script>
 
<!-- 视频标签 -->
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
 
<!-- 画布 Canvas 绘图 -->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 150, 75);
</script>

CSS3 和 HTML5 的出现意味着更好的用户体验，因为它们提供了更丰富的页面样式和更多的交互元素。开发者可以利用这些新特性创建更加动感和现代感的网页设计。

- 阅读更多 -

HTML5 CSS3 经典案例：无插件拖拽上传图片（支持预览与批量

System

2024-08-15

所有,css3

以下是一个简化的HTML和JavaScript代码示例，用于实现一个支持拖拽上传图片和预览的功能。这个示例不包括完整的错误处理和兼容性检测，但提供了核心功能。

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Drop Image Upload</title>
<style>
    #drop_area {
        width: 300px;
        height: 200px;
        border: 2px dashed #aaa;
        margin-bottom: 20px;
        text-align: center;
        line-height: 200px;
        font-size: 24px;
    }
    .preview {
        width: 100px;
        height: 100px;
        margin: 10px;
        float: left;
        overflow: hidden;
    }
    .preview img {
        width: 100%;
        height: auto;
    }
</style>
</head>
<body>
 
<div id="drop_area">Drag images here</div>
 
<script>
// JavaScript 代码
document.getElementById('drop_area').addEventListener('drop', handleDrop, false);
 
function handleDrop(evt) {
    evt.stopPropagation();
    evt.preventDefault();
 
    var files = evt.dataTransfer.files; // 获取拖拽进来的文件对象列表
    // 处理文件，这里只是简单地在控制台输出文件名
    for (var i = 0, f; f = files[i]; i++) {
        if (!f.type.match('image.*')) {
            continue; // 不是图片则跳过
        }
 
        var reader = new FileReader();
 
        reader.onload = (function(theFile) {
            return function(e) {
                // 创建图片预览
                var img = document.createElement('img');
                img.src = e.target.result;
                img.className = 'preview';
                document.body.appendChild(img);
            };
        })(f);
 
        reader.readAsDataURL(f); // 读取文件内容
    }
}
 
// 允许拖拽
document.getElementById('drop_area').addEventListener('dragover', function(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy';
}, false);
</script>
 
</body>
</html>

这段代码实现了基本的拖拽上传图片的功能，并在用户拖拽图片到指定区域时，创建图片的预览。它使用了HTML5的Drag and Drop API以及FileReader API来读取文件内容并显示为图片。这个例子不包括任何的错误处理，如检查浏览器是否支持所需的API或处理文件上传的逻辑。

- 阅读更多 -

H5实现录屏功能代码

System

2024-08-15

所有,css3

HTML5 提供了 MediaRecorder API 来实现录屏功能。以下是一个简单的例子，展示如何使用 MediaRecorder 来录制视频：




<!DOCTYPE html>
<html>
<head>
<title>Media Recorder Example</title>
</head>
<body>
 
<button id="start-recording">开始录制</button>
<button id="stop-recording" disabled>停止录制</button>
<button id="download-recording" disabled>下载录制</button>
 
<script>
  const startRecordingButton = document.getElementById('start-recording');
  const stopRecordingButton = document.getElementById('stop-recording');
  const downloadButton = document.getElementById('download-recording');
  let mediaRecorder;
  let recordedBlobs;
 
  startRecordingButton.addEventListener('click', () => {
    navigator.mediaDevices.getDisplayMedia({ video: true })
      .then(stream => {
        mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
        recordedBlobs = [];
 
        mediaRecorder.ondataavailable = event => {
          if (event.data && event.data.size > 0) {
            recordedBlobs.push(event.data);
          }
        };
 
        mediaRecorder.start();
        stopRecordingButton.disabled = false;
        console.log('Recording started');
      })
      .catch(error => console.error('Error:', error));
  });
 
  stopRecordingButton.addEventListener('click', () => {
    mediaRecorder.stop();
    stopRecordingButton.disabled = true;
    console.log('Recording stopped');
  });
 
  mediaRecorder.onstop = () => {
    const superBuffer = new Blob(recordedBlobs, { type: 'video/webm' });
    downloadButton.href = URL.createObjectURL(superBuffer);
    downloadButton.download = 'recording.webm';
    downloadButton.disabled = false;
  };
</script>
 
</body>
</html>

这段代码中，我们首先获取屏幕媒体流，然后创建 MediaRecorder 实例来录制视频。录制开始和结束时相关按钮会被禁用或启用。录制停止时，录制的视频会被保存到一个 Blob 中，并可以通过创建一个临时的 URL 并设置下载链接来进行下载。

System

2024-08-15

所有,css3

以下是一个简单的示例，展示了如何使用JavaScript和CSS创建一个简单的喵喵画网页版本。




<!DOCTYPE html>
<html>
<head>
    <title>喵喵画网</title>
    <style>
        body {
            background-color: #f7f7f7;
            font-family: Arial, sans-serif;
        }
        .container {
            width: 600px;
            margin: 100px auto;
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .title {
            text-align: center;
            color: #333;
            padding: 20px;
        }
        .input-container {
            text-align: center;
            padding: 20px 0;
        }
        input[type="text"] {
            width: 80%;
            padding: 10px;
            margin: 0 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        input[type="button"] {
            padding: 10px 20px;
            background-color: #5883d3;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        input[type="button"]:hover {
            background-color: #3d66a7;
        }
        #poem {
            text-align: center;
            padding: 20px;
            color: #333;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="title">喵喵画网</div>
        <div class="input-container">
            <input type="text" id="text" placeholder="请输入内容" />
            <input type="button" value="生成喵喵" onclick="generatePoem()" />
        </div>
        <div id="poem"></div>
    </div>
    <script>
        function generatePoem() {
            var text = document.getElementById('text').value;
            var poem = text.split('').join('<br>') + '<br>哞哞哞';
            document.getElementById('poem').innerHTML = poem;
        }
    </script>
</body>
</html>

这段代码展示了如何使用JavaScript获取用户输入，并通过简单的字符串操作生成“喵喵”（即通过换行分隔每个字符来模拟），最后将生成的喵喵和用户输入的内容显示在网页上。这个示例简单易懂，适合作为学习前端开发的入门项目。

System

2024-08-15

所有,css3

以下是一个简单的示例，展示了如何使用JavaScript和CSS创建一个简单的喵喵画网页版本。




<!DOCTYPE html>
<html>
<head>
    <title>喵喵画网</title>
    <style>
        body {
            background-color: #f7f7f7;
            font-family: Arial, sans-serif;
        }
        #container {
            width: 600px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        #title {
            text-align: center;
            color: #333;
        }
        #drawing-area {
            margin-top: 10px;
            text-align: center;
        }
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="container">
        <h1 id="title">喵喵画网</h1>
        <div id="drawing-area">
            <canvas id="drawing-canvas" width="500" height="500"></canvas>
        </div>
    </div>
 
    <script>
        const canvas = document.getElementById('drawing-canvas');
        const context = canvas.getContext('2d');
 
        // 绘制图形的函数
        function drawShape(shape) {
            context.beginPath();
            context.arc(250, 250, 200, 0, Math.PI * 2); // 圆形
            context.strokeStyle = 'blue';
            context.stroke();
        }
 
        // 清除画布
        function clearCanvas() {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }
 
        // 用户交互逻辑
        function handleInteraction(event) {
            clearCanvas();
            drawShape();
        }
 
        // 监听鼠标移动事件
        canvas.addEventListener('mousemove', handleInteraction);
    </script>
</body>
</html>

这段代码创建了一个简单的喵喵画网页，用户将在画布上绘制一个蓝色的圆形图案，当鼠标移动时触发重绘事件。这个示例主要用于演示如何使用JavaScript和HTML5的<canvas>元素进行基本的交互式绘图。

System

2024-08-15

所有,css

以下是一个简化的HTML和CSS代码示例，用于创建一个基本的3D动态相册。这个示例仅包含核心的HTML结构和CSS样式，没有包含JavaScript动画代码，因为这会使代码例子过于冗长。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D相册</title>
<style>
  /* 相册容器样式 */
  .album {
    width: 300px;
    height: 400px;
    perspective: 1000px;
    position: relative;
  }
 
  /* 相册页样式 */
  .page {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    transition: transform 1s;
  }
 
  /* 页面旋转动画 */
  .album:hover .page {
    transform: rotateY(180deg);
  }
 
  /* 第一页样式 */
  .page-1 {
    background-image: url('img_front.jpg');
  }
 
  /* 第二页样式 */
  .page-2 {
    background-image: url('img_back.jpg');
    transform: rotateY(180deg);
  }
</style>
</head>
<body>
<div class="album">
  <div class="page page-1"></div>
  <div class="page page-2"></div>
</div>
</body>
</html>

这个示例展示了如何使用CSS创建一个基本的3D旋转相册。当鼠标悬停在相册上时，通过给 .album:hover .page 添加 transition 属性来实现页面旋转的动画效果。这个例子没有包含JavaScript，因此动画是静态的，没有交互。如果需要实现动态的翻页效果，你需要添加JavaScript来处理鼠标事件并相应地更改页面的 transform 属性。

System

2024-08-15

所有,css

在Web前端开发中，CSS的定位机制主要用于控制元素在页面中的布局。CSS提供了三种定位机制：普通流定位、浮动定位和绝对定位。

普通流定位：元素按照其在HTML中的位置顺序依次排列，无需定位属性。
浮动定位：使用float属性，可以使元素向左或向右浮动，其他元素会围绕它排列。
绝对定位：使用position: absolute;，元素会相对于其最近的已定位的（即非static）祖先元素进行定位。如果没有，则相对于初始包含块。

示例代码：




<!DOCTYPE html>
<html>
<head>
    <style>
        /* 定位机制示例 */
        .static-position {
            /* 普通流定位 */
        }
 
        .relative-position {
            position: relative;
            top: 20px;
            left: 40px;
        }
 
        .absolute-position {
            position: absolute;
            top: 10px;
            right: 30px;
        }
 
        .float-position {
            float: right;
            margin-left: 10px;
        }
 
        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }
    </style>
</head>
<body>
 
<div>
    <div class="static-position">静态定位的元素</div>
    <div class="float-position">浮动定位的元素</div>
    <div class="clearfix"></div>
</div>
 
<div class="relative-position">相对定位的元素</div>
<div class="absolute-position">绝对定位的元素</div>
 
</body>
</html>

在这个例子中，.static-position类的元素使用了普通流定位，.relative-position类的元素使用了相对定位，.absolute-position类的元素使用了绝对定位，而.float-position类的元素使用了浮动定位。使用clearfix类来清除浮动，确保非浮动容器能包含浮动元素。

- 阅读更多 -