标签 html5 下的文章

H5 画布（canvas）的使用、元素的拖拽

2024-08-15




<!DOCTYPE html>
<html>
<head>
    <title>Canvas 拖拽元素示例</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        var dragging = false;
        var rect = {
            x: 100,
            y: 100,
            width: 100,
            height: 100
        };
 
        function drawRect() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.beginPath();
            ctx.rect(rect.x, rect.y, rect.width, rect.height);
            ctx.fillStyle = 'blue';
            ctx.fill();
            ctx.stroke();
        }
 
        canvas.addEventListener('mousedown', function(e) {
            var x = e.offsetX;
            var y = e.offsetY;
            if (x > rect.x && y > rect.y &&
                x < rect.x + rect.width && y < rect.y + rect.height) {
                dragging = true;
            }
        });
 
        canvas.addEventListener('mouseup', function() {
            dragging = false;
        });
 
        canvas.addEventListener('mousemove', function(e) {
            if (dragging) {
                rect.x = e.offsetX - rect.width / 2;
                rect.y = e.offsetY - rect.height / 2;
                drawRect();
            }
        });
 
        drawRect();
    </script>
</body>
</html>

这段代码创建了一个简单的画布，并在其中绘制了一个蓝色的矩形。通过鼠标拖拽矩形的任意位置，可以移动这个矩形。代码中使用了addEventListener来监听鼠标事件，并在相应的事件处理函数中更新矩形位置和重绘画布。这是一个基本的拖拽示例，但不包括边界检查或更复杂的交互逻辑。

HTML/HTML5常用标签大全

2024-08-15

HTML/HTML5常用标签大全：

<!DOCTYPE html>：定义文档类型为HTML5。
<html>：HTML文档的根元素。
<head>：包含了文档的元数据，如<title>、<meta>、<link>等。
<title>：定义了文档的标题，显示在浏览器的标题栏或者页面的选项卡上。
<body>：包含了页面的主要内容，如文本、图像、视频等。
<h1>至<h6>：定义了标题的级别，<h1>最重要，<h6>最不重要。
<p>：定义了一个段落。
<div>：定义了一个块级元素，用于组合其他HTML元素的容器。
<span>：定义了一个行内元素，用于组合文档中的小块内容。
<img>：定义了一个图像，src属性指定图像的路径，alt属性提供了图像的文本替代。
<a>：定义了一个超链接，href属性指定链接的目标地址。
<ul>：定义了无序列表，每个列表项以<li>开始。
<ol>：定义了有序列表，每个列表项以<li>开始。
<li>：定义了列表中的一个项目。
<table>：定义了一个表格。
<tr>：定义了表格中的一行。
<td>：定义了表格中的一个单元格。
<form>：定义了一个表单，用于用户输入。
<input>：定义了用户输入的字段，type属性定义了输入类型（如text、radio、submit等）。
<textarea>：定义了多行文本输入控件。
<select>：定义了下拉选择菜单，使用<option>定义选项。
<button>：定义了一个按钮。
<iframe>：定义了一个内联框架，用于嵌入另一个HTML页面。

示例代码：




<!DOCTYPE html>
<html>
<head>
    <title>示例页面</title>
</head>
<body>
    <h1>欢迎来到我的主页</h1>
    <p>这是一个段落。</p>
    <img src="image.jpg" alt="示例图片">
    <a href="https://www.example.com">点击访问我的网站</a>
    <ul>
        <li>列表项一</li>
        <li>列表项二</li>
    </ul>
    <table>
        <tr>
            <td>单元格一</td>
            <td>单元格二</td>
        </tr>
    </table>
    <form action="/submit">
        <input type="text" placeholder="输入名字">
        <input type="submit" value="提交">
    </form>
    <iframe src="otherpage.html" width="600" height="400"></iframe>
</body>
</html>

以上代码提供了HTML的基本结构和一些常用标签的使用示例。

Html5实用个人博客留言板模板源码

2024-08-15

以下是一个简单的Html5留言板模板的示例代码：




<!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; }
        form { width: 500px; margin: 20px auto; }
        form h2 { text-align: center; }
        form input[type="text"], form textarea { width: 100%; padding: 8px; margin: 8px 0; border: 1px solid #ccc; }
        form button { width: 100%; padding: 10px; margin-top: 10px; background-color: #5cb85c; border: none; color: white; }
    </style>
</head>
<body>
    <form action="submit_message.php" method="post">
        <h2>留言板</h2>
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" required><br>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" required><br>
        <label for="message">留言:</label>
        <textarea id="message" name="message" required></textarea><br>
        <button type="submit">提交</button>
    </form>
</body>
</html>

这个模板包含了一个简单的Html5文档，使用了CSS来进行样式设置。留言板包括姓名、邮箱和留言文本框，以及一个提交按钮。请注意，留言数据应该通过PHP脚本或其他服务器端语言进行处理，这里的action="submit_message.php"表明了提交动作应该发送到一个名为submit_message.php的服务器端脚本。

HTML5使用＜details＞标签：展开/收缩信息

2024-08-15

在HTML5中，<details> 标签用于创建一个可展开收缩的widget，它可以包含额外的信息或者提示。这个标签通常与 <summary> 标签一起使用，后者可以包含一个标题，当 <details> 展开时显示。

以下是使用 <details> 和 <summary> 标签的示例代码：




<details>
  <summary>点击查看更多信息</summary>
  <p>这里是隐藏的信息内容，点击上面的标题可以展开查看。</p>
</details>

在这个例子中，当页面加载时，隐藏的信息是不可见的。当用户点击"点击查看更多信息"时，隐藏的信息会展开显示。这个功能使得我们可以在不增加页面加载时间的同时，提供更多的内容选项。

2024-08-15

在HTML5中，新增了多种输入类型的表单元素，以下是邮箱输入、网址输入和日期输入的示例代码：




<!DOCTYPE html>
<html>
<head>
    <title>HTML5 新输入类型示例</title>
</head>
<body>
    <form>
        <!-- 邮箱输入 -->
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" required>
 
        <!-- 网址输入 -->
        <label for="url">网址:</label>
        <input type="url" id="url" name="url" required>
 
        <!-- 日期输入 -->
        <label for="date">生日:</label>
        <input type="date" id="date" name="date">
 
        <input type="submit">
    </form>
</body>
</html>

在这个示例中，我们创建了一个简单的表单，包含了邮箱、网址和日期三种类型的输入框。type="email"用于邮箱输入，type="url"用于网址输入，type="date"用于日期输入。每个输入框都有一个label标签，提供了一个可选的标签，以及一个for属性，指向输入元素的id，以提高可访问性。required属性表示该输入框是必填的。

HTML入门：07HTML5语义化布局

2024-08-15




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 语义化布局示例</title>
</head>
<body>
    <header>
        <h1>网站标题</h1>
        <nav>
            <ul>
                <li><a href="/">首页</a></li>
                <li><a href="/about">关于我们</a></li>
                <li><a href="/contact">联系我们</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <article>
            <header>
                <h2>文章标题</h2>
                <time datetime="2023-01-01">发布日期: 2023年1月1日</time>
            </header>
            <p>这里是文章内容...</p>
            <footer>
                <ul>
                    <li>标签1</li>
                    <li>标签2</li>
                </ul>
            </footer>
        </article>
    </section>
    <aside>
        <h3>侧边栏标题</h3>
        <section>
            <h4>子标题</h4>
            <p>侧边栏内容...</p>
        </section>
    </aside>
    <footer>
        <p>版权信息</p>
    </footer>
</body>
</html>

这个示例代码展示了如何使用HTML5的语义化标签来构建一个简单的网站布局。通过使用 <header>, <nav>, <section>, <article>, <aside>, 和 <footer> 等语义化标签，可以使得页面结构更清晰，有利于搜索引擎的爬取和页面的可访问性。

html5写骰子 css

2024-08-15

要使用HTML5和CSS创建一个骰子，你可以使用HTML定义结构，CSS进行样式设计。以下是一个简单的例子：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dice with HTML5 and CSS</title>
<style>
  .dice {
    width: 100px;
    height: 100px;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 50%;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
  }
  .dice::before, .dice::after {
    content: '';
    position: absolute;
    width: 50%;
    height: 50%;
    background: #fff;
    border: 1px solid #ccc;
    top: 25%;
    left: 25%;
    border-radius: 50%;
  }
  .dice::before {
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
  }
  .dice::after {
    border-bottom: none;
    border-right: none;
    transform: rotate(-45deg);
  }
</style>
</head>
<body>
<div class="dice"></div>
</body>
</html>

CSS:




.dice {
  width: 100px;
  height: 100px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 50%;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  position: relative;
}
.dice::before, .dice::after {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  background: #fff;
  border: 1px solid #ccc;
  top: 25%;
  left: 25%;
  border-radius: 50%;
}
.dice::before {
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.dice::after {
  border-bottom: none;
  border-right: none;
  transform: rotate(-45deg);
}

这段代码创建了一个简单的骰子形状，使用了CSS伪元素 ::before 和 ::after 来创建骰子的两个面。通过调整CSS属性，你可以进一步美化这个骰子。

2024-08-15




// 定义一个名为User的JavaScript对象构造函数
function User(name, age) {
    this.name = name;
    this.age = age;
}
 
// 创建User对象实例
var user1 = new User('Alice', 25);
var user2 = new User('Bob', 30);
 
// 打印对象信息
console.log(user1); // 输出: { name: 'Alice', age: 25 }
console.log(user2); // 输出: { name: 'Bob', age: 30 }
 
// 检查对象的类型
console.log(typeof user1); // 输出: object
console.log(user1 instanceof User); // 输出: true
 
// 为User对象添加方法
User.prototype.greet = function() {
    return 'Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.';
};
 
// 使用新添加的方法
console.log(user1.greet()); // 输出: Hello, my name is Alice and I am 25 years old.

这段代码首先定义了一个名为User的JavaScript对象构造函数，接着创建了两个实例user1和user2。然后，使用console.log打印了这些对象的信息，包括它们的属性和方法。最后，演示了如何为User对象的原型添加一个新的方法greet，并通过创建的实例调用这个方法。这个例子有助于理解JavaScript中对象类型的使用，并展示了如何扩展对象的行为。

html5播放器设置音量的方式实例源代码

2024-08-15




<!DOCTYPE html>
<html>
<body>
 
<h2>HTML5 视频播放器 - 调整音量</h2>
 
<video id="myVideo" width="320" height="176" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
 
<div>
  当前音量: <output id="volumeLevel">1</output>
</div>
 
<input type="range" min="0" max="1" step="0.1" id="volumeControl" value="1" onchange="setVolume(this.value)">
 
<script>
// 获取视频和音量控制条
var video = document.getElementById('myVideo');
var volumeControl = document.getElementById('volumeControl');
var volumeLevel = document.getElementById('volumeLevel');
 
// 设置音量的函数
function setVolume(newVolume) {
  video.volume = newVolume;
  volumeControl.value = newVolume;
  volumeLevel.value = newVolume;
}
 
// 当视频可以播放时，将音量控制与视频同步
video.addEventListener('loadedmetadata', function() {
  volumeControl.max = video.volumeMax;
  volumeControl.step = (video.volumeMax - video.volumeMin) / 100;
  setVolume(video.volume);
});
 
// 当音量改变时，更新显示的音量信息
video.addEventListener('volumechange', function() {
  setVolume(video.volume);
});
</script>
 
</body>
</html>

这个代码实例展示了如何使用HTML5和JavaScript来创建一个简单的视频播放器，并包括了调整视频音量的功能。代码中使用了HTML5的<video>元素来嵌入视频内容，并通过JavaScript来处理音量控制逻辑。代码还展示了如何使用output元素来显示当前的音量值，以及如何使用range类型的input元素来让用户可以拖动来设置音量。