分类 html5 下的文章

2024-08-19




<template>
  <div>
    <grid-layout
      :layout.sync="layout"
      :col-num="12"
      :row-height="30"
      :is-draggable="true"
      :is-resizable="true"
      :vertical-compact="true"
      :margin="[10, 10]"
      :use-css-transforms="true"
    >
      <grid-item
        v-for="item in layout"
        :key="item.i"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
      >
        {{ item.i }}
      </grid-item>
    </grid-layout>
  </div>
</template>
 
<script>
import Vue from 'vue';
import VueGridLayout from 'vue-grid-layout';
 
Vue.use(VueGridLayout);
 
export default {
  data() {
    return {
      layout: [
        {"x":0,"y":0,"w":2,"h":2,"i":"0"},
        {"x":2,"y":0,"w":2,"h":4,"i":"1"},
        {"x":4,"y":0,"w":2,"h":5,"i":"2"},
        // ...
      ]
    };
  }
};
</script>

这个代码实例展示了如何在Vue应用中使用vue-grid-layout组件来创建一个栅格布局系统。layout数据属性定义了网格的初始布局配置，其中包含每个网格项的位置、宽度、高度和标识。这个例子简单明了，适合作为学习如何在Vue项目中使用vue-grid-layout的起点。

- 阅读更多 -

HTML5新增API FileReader 显示缩略图

System

2024-08-19

所有,html5




<!DOCTYPE html>
<html>
<head>
    <title>FileReader 显示缩略图示例</title>
    <script>
        function previewFile() {
            var preview = document.querySelector('img');
            var file = document.querySelector('input[type=file]').files[0];
            var reader = new FileReader();
 
            reader.onload = function(e) {
                preview.src = e.target.result;
            };
 
            if (file) {
                reader.readAsDataURL(file);
            }
        }
    </script>
</head>
<body>
    <input type="file" onchange="previewFile()">
    <img src="placeholder.png" alt="Image preview..." style="width:100px; height:100px;">
</body>
</html>

这段代码演示了如何使用HTML5的FileReader API来读取用户选择的图片文件，并在网页上显示该图片的缩略图。当用户选择文件后，会触发input元素的onchange事件，然后调用previewFile函数。这个函数创建一个FileReader对象，当文件读取完毕后，会将图片的DataURL设置为img元素的src属性，从而显示图片的缩略图。

- 阅读更多 -

编程笔记 html5&css&js 085 JavaScript 内置函数

System

2024-08-19

所有,html5

JavaScript 内置函数是语言本身提供的，非常基础且常用的函数。以下是一些常见的 JavaScript 内置函数及其简单示例：

parseInt(string, radix)：将字符串转换为整数。如果不能转换，返回 NaN。radix 参数定义了要解析的数字的基数。




let num = parseInt("123", 10); // 返回 123

parseFloat(string)：将字符串转换为浮点数。如果不能转换，返回 NaN。




let num = parseFloat("123.45"); // 返回 123.45

isNaN(value)：检查某个值是否是非数字值。如果值是 NaN 或非数字值，返回 true；否则返回 false。




let result = isNaN(NaN); // 返回 true
result = isNaN("123"); // 返回 false，因为 "123" 可以转换为数字 123

eval(string)：计算字符串参数，并执行它包含的 JavaScript 代码。




let result = eval("1 + 2"); // 返回 3

encodeURI(uri)：将字符串编码为 URI。




let uri = encodeURI("https://www.example.com/?query=Hello World");
// 返回 "https://www.example.com/?query=Hello%20World"

decodeURI(uri)：将编码的 URI 解码成正常的字符串。




let uri = decodeURI("https%3A%2F%2Fwww.example.com%2F%3Fquery%3DHello%20World");
// 返回 "https://www.example.com/?query=Hello World"

encodeURIComponent(uriComponent)：将字符串编码为 URI 组件。




let uriComponent = encodeURIComponent("https://www.example.com/?query=Hello World");
// 返回 "https%3A%2F%2Fwww.example.com%2F%3Fquery%3DHello%20World"

decodeURIComponent(uriComponent)：将编码的 URI 组件解码。




let uriComponent = decodeURIComponent("https%3A%2F%2Fwww.example.com%2F%3Fquery%3DHello%20World");
// 返回 "https://www.example.com/?query=Hello World"

这些函数是 JavaScript 中最基本的内置函数，在日常开发中经常使用。

- 阅读更多 -

使用HTML5限制输入数字的最大值

System

2024-08-19

所有,html5

在HTML5中，可以使用max属性来限制输入字段的最大值。这个属性可以应用于<input>元素的type属性为number的情况。下面是一个例子：




<form>
  <label for="quantity">Enter quantity:</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
  <input type="submit">
</form>

在这个例子中，输入字段被限制为从1到5的数字。如果用户尝试输入一个高于5的值，浏览器将不会接受这个值，并可能显示一个警告。

- 阅读更多 -

html5-drag和drop拖拽

System

2024-08-19

所有,html5

HTML5提供了拖拽事件，可以用来创建拖拽和放置功能。以下是一个简单的拖拽和放置的例子：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Drop Example</title>
<style>
    #draggable {
        width: 150px;
        height: 150px;
        background: red;
        color: white;
        text-align: center;
        line-height: 150px;
        border: 2px dashed #333;
        cursor: move;
        position: absolute;
        top: 50px;
        left: 50px;
    }
 
    #droppable {
        width: 300px;
        height: 300px;
        background: green;
        position: absolute;
        top: 50px;
        left: 250px;
        border: 2px dashed #333;
    }
</style>
</head>
<body>
 
<div id="draggable" draggable="true">Drag me!</div>
<div id="droppable">Drop here!</div>
 
<script>
    const dragItem = document.getElementById('draggable');
    const dropArea = document.getElementById('droppable');
 
    dragItem.addEventListener('dragstart', function(event) {
        event.dataTransfer.setData('text/plain', event.target.id);
    });
 
    dropArea.addEventListener('dragover', function(event) {
        event.preventDefault();
    });
 
    dropArea.addEventListener('drop', function(event) {
        event.preventDefault();
        const data = event.dataTransfer.getData('text/plain');
        event.target.appendChild(document.getElementById(data));
    });
</script>
 
</body>
</html>

在这个例子中，我们创建了两个div元素，一个可以拖动(draggable)，另一个可以放置(droppable)。通过JavaScript，我们为可拖动的元素添加了dragstart事件监听器，该监听器在拖动开始时设置要传输的数据（这里是元素的ID）。同时，我们为可放置的元素添加了dragover和drop事件监听器，分别阻止默认行为并在放置时将拖动的元素添加为子元素。

- 阅读更多 -

HTML5废除的元素

System

2024-08-19

所有,html5

HTML5废除的元素主要是那些不再被推荐使用的元素。这些元素仍然可以在现代浏览器中使用，但是可能在未来的HTML标准中被彻底移除。

以下是一些HTML5废除的元素：

acronym - 使用 abbr 代替。
applet - 用于嵌入Java小程序，现在基本不再使用。
basefont - 用于定义基准字体大小，不推荐使用。
big - 用于放大文本，可以用CSS替代。
center - 文本居中，可以用CSS替代。
dir - 列出目录列表，可以用UL或OL代替。
font - 定义文本字体、大小、颜色，可以用CSS替代。
frame - 使用 iframe 代替。
frameset - 使用CSS布局代替。
isindex - 用于客户端表单的一种方式，不推荐使用。
noframes - 包含无法显示时的替代内容。
s - 表示不再重要的文本，用CSS替代。
strike - 表示删除线文本，用CSS替代。
tt - 等宽字体文本，用CSS替代。
u - 下划线文本，用CSS替代。

示例代码：




<!-- 旧的元素使用 -->
<acronym title="World Wide Web">WWW</acronym>
<basefont color="red">This text will be red</basefont>
<big>This text is big</big>
<center>This text is centered</center>
<dir>
  <li>Item 1</li>
  <li>Item 2</li>
</dir>
<font size="5" color="blue">This is blue text</font>
<frame src="content.html">
<frameset cols="25%,75%">
  <frame src="navigation.html">
  <frame src="content.html">
</frameset>
<isindex prompt="Enter search:">
<noframes>
  Your browser does not support frames.
</noframes>
<s>This text is no longer correct</s>
<strike>This text is striked through</strike>
<tt>This is monospaced text</tt>
<u>This text is underlined</u>
 
<!-- 新的替代方案 -->
<abbr title="World Wide Web">WWW</abbr>
<p style="color: red;">This text will be red</p>
<span style="font-size: larger;">This text is big</span>
<div style="text-align: center;">This text is centered</div>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<p style="font-size: 24px; color: blue;">This is blue text</p>
<!-- iframe 替代 frame 和 frameset -->
<iframe src="content.html" width="100%" height="100%">
  Your browser does not support iframes.
</iframe>
<!-- 使用JavaScript或服务器端检索 -->
<!-- 使用CSS替代u, strike, s, tt等元素 -->

在实际开发中，应该尽量避免使用废弃的元素，以保证代码的兼容性和可维护性。

- 阅读更多 -

HTML5-新增表单input属性

System

2024-08-19

所有,html5

HTML5引入了一些新的表单输入类型，以及一些新的表单元素属性，以简化表单的创建和验证过程。以下是一些常见的HTML5新增表单input属性：

placeholder - 提供输入字段的提示（hint），用户输入时消失。
required - 表示输入字段是必填的，如果为空则表单不能提交。
pattern - 定义输入字段的验证模式，用于检查输入值是否符合正则表达式。
min 和 max - 对于数值输入，设置最小值和最大值。
step - 对于数值输入，设置每次改变时的步长。
multiple - 允许输入字段接收多个文件。
email - 限制输入为电子邮件格式。
url - 限制输入为URL格式。
date - 选择日期。
time - 选择时间。
number - 为输入设置为数值类型。
search - 用于搜索框。

示例代码：




<form>
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" required>
 
  <label for="email">电子邮件:</label>
  <input type="email" id="email" name="email" required>
 
  <label for="birthday">生日:</label>
  <input type="date" id="birthday" name="birthday">
 
  <input type="submit">
</form>

在这个例子中，我们创建了一个简单的表单，包含了几个HTML5的新属性：required用于确保字段不为空，email用于验证电子邮件地址的格式，以及date类型用于选择日期。

- 阅读更多 -

HTML5实现QQ注册页面，QQ登录页面，豆瓣电影网页

System

2024-08-19

所有,html5

由于篇幅限制，我将提供一个简化的HTML5实现QQ注册页面和登录页面的示例代码。这里不包括CSS样式和JavaScript功能，仅提供基础的HTML结构。

注册页面（QQ\_register.html）:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ Register</title>
</head>
<body>
    <form action="#" method="post">
        <div>
            <label for="qq">QQ number:</label>
            <input type="text" id="qq" name="qq" required>
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
        </div>
        <div>
            <label for="confirm_password">Confirm password:</label>
            <input type="password" id="confirm_password" name="confirm_password" required>
        </div>
        <div>
            <button type="submit">Register</button>
        </div>
    </form>
</body>
</html>

登录页面（QQ\_login.html）:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ Login</title>
</head>
<body>
    <form action="#" method="post">
        <div>
            <label for="qq">QQ number:</label>
            <input type="text" id="qq" name="qq" required>
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
        </div>
        <div>
            <button type="submit">Login</button>
        </div>
    </form>
</body>
</html>

请注意，这些页面仅包含输入框和按钮，并且不包含任何样式或验证逻辑。实际应用中，你需要添加CSS来美化页面，并且使用JavaScript来增加验证和用户体验。对于豆瓣电影网页，由于内容非常丰富，我们可以简单地提供一个网址：https://movie.douban.com/。

- 阅读更多 -

django基于HTML5高校图书管理系统(程序+开题报告)

System

2024-08-19

所有,html5

由于提供完整的程序和开题报告将会超出答案字数限制，我将提供一个基于Django框架的简单图书管理系统的框架示例。这个示例将包括模型定义、视图函数和简单的HTML模板。

首先，安装Django:




pip install django

创建新的Django项目和应用:




django-admin startproject mylibrary
python manage.py startapp books

在books/models.py中定义图书模型:




from django.db import models
 
class Book(models.Model):
    title = models.CharField(max_length=100)
    author = models.CharField(max_length=100)
    publish_date = models.DateField()
 
    def __str__(self):
        return self.title

在books/views.py中定义视图函数:




from django.shortcuts import render
from .models import Book
 
def book_list(request):
    books = Book.objects.all()
    return render(request, 'books/book_list.html', {'books': books})
 
def book_create(request):
    # 处理POST请求以创建新书籍
    pass
 
def book_edit(request, pk):
    # 处理请求以编辑书籍
    pass
 
def book_delete(request, pk):
    # 处理请求以删除书籍
    pass

在books/templates/books/book_list.html中创建HTML模板:




<!DOCTYPE html>
<html>
<head>
    <title>图书列表</title>
</head>
<body>
    <h1>图书列表</h1>
    <ul>
        {% for book in books %}
        <li>{{ book.title }} by {{ book.author }} ({{ book.publish_date }})</li>
        {% empty %}
        <li>没有书籍记录。</li>
        {% endfor %}
    </ul>
    <a href="{% url 'book_create' %}">添加新书籍</a>
</body>
</html>

在mylibrary/urls.py中定义URL模式:




from django.urls import path
from books.views import book_list, book_create, book_edit, book_delete
 
urlpatterns = [
    path('books/', book_list, name='book_list'),
    path('books/create/', book_create, name='book_create'),
    path('books/edit/<int:pk>/', book_edit, name='book_edit'

- 阅读更多 -

使用canvas画树形结构关系图

System

2024-08-19

所有,html5

以下是一个简单的示例，使用HTML5 <canvas>元素绘制一个简单的树形结构关系图：




<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000000;"></canvas>
 
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
 
// 定义树的节点
function Node(x, y, text) {
  this.x = x;
  this.y = y;
  this.text = text;
}
 
// 绘制树的函数
function drawTree(node, ctx) {
  ctx.beginPath();
  ctx.moveTo(node.x, node.y);
  ctx.lineTo(node.x + 100, node.y);
  ctx.stroke();
 
  ctx.font = '12px Arial';
  ctx.fillText(node.text, node.x + 120, node.y + 5);
 
  // 绘制左子树
  if (node.left !== null) {
    ctx.moveTo(node.x + 50, node.y);
    ctx.lineTo(node.x + 50, node.y - 50);
    ctx.stroke();
    drawTree(node.left, ctx);
  }
 
  // 绘制右子树
  if (node.right !== null) {
    ctx.moveTo(node.x + 150, node.y);
    ctx.lineTo(node.x + 150, node.y - 50);
    ctx.stroke();
    drawTree(node.right, ctx);
  }
}
 
// 创建树的节点
var root = new Node(100, 100, 'A');
root.left = new Node(100, 50, 'B');
root.right = new Node(100, 50, 'C');
root.left.left = new Node(50, 25, 'D');
root.left.right = new Node(150, 25, 'E');
root.right.left = new Node(50, 75, 'F');
root.right.right = new Node(150, 75, 'G');
 
// 绘制树
drawTree(root, ctx);
</script>
 
</body>
</html>

这段代码定义了一个简单的Node类来表示树的节点，并且有一个drawTree函数来递归地绘制这棵树。每个节点的x和y坐标表示在canvas上的位置，text属性是将要显示的文本。这是一个基本的实现，可以根据需要添加更多的功能，比如节点的样式定制、支持更复杂的树形结构等。

- 阅读更多 -