1. 首页
  2. 标签
  3. html5
html5知识点：超文本标记语言编程_html可拓展超文本标记语言的页面标记
System
2024-08-08
所有,html

在HTML5中，可拓展超文本标记语言(HTML)的页面标记(4)主要是指如何使用HTML5的标签和属性来构建一个具有良好结构的网页。以下是一个简单的HTML5页面示例：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例页面</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>
                <p>这里是文章的脚注...</p>
            </footer>
        </article>
    </section>
    <aside>
        <h3>侧边栏</h3>
        <p>可以放置其他内容或广告...</p>
    </aside>
    <footer>
        <p>版权所有 &copy; 2023年我的网站</p>
    </footer>
</body>
</html>

在这个示例中，我们使用了HTML5的<header>, <nav>, <section>, <article>, <aside>, 和 <footer>等语义化标签来构建页面结构，这有助于搜索引擎理解页面内容并改善SEO效果。同时，我们也使用了<time>标签来标识日期和时间信息，这对于搜索引擎和用户来说都是非常有帮助的。

- 阅读更多 -
❤️创意网页：HTML5,canvas创作科技感粒子特效（科技感粒子、js鼠标跟随、粒子连线）
System
2024-08-08
所有,html5

以下是一个使用HTML5和canvas创建的科技感的粒子效果示例，其中的粒子会跟随鼠标移动：




<!DOCTYPE html>
<html>
<head>
    <title>创意网页: HTML5 Canvas创造科技感粒子特效</title>
    <style>
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="particles-canvas"></canvas>
    <script>
        const canvas = document.getElementById('particles-canvas');
        const ctx = canvas.getContext('2d');
        const mouse = {x: 0, y: 0};
        let particles = [];
 
        // 鼠标跟随的粒子
        class Particle {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.vx = (Math.random() - 0.5) * 2;
                this.vy = (Math.random() - 0.5) * 2;
                this.radius = Math.random() * 1.5;
                this.life = 1;
            }
 
            update() {
                this.x += this.vx;
                this.y += this.vy;
                this.life -= 0.001;
            }
 
            draw() {
                ctx.beginPath();
                ctx.globalAlpha = this.life;
                ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
                ctx.fillStyle = '#fff';
                ctx.fill();
            }
        }
 
        // 鼠标跟随函数
        function followMouse(event) {
            mouse.x = event.clientX;
            mouse.y = event.clientY;
        }
 
        // 初始化和动画循环
        function init() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            window.addEventListener('mousemove', followMouse);
            setInterval(update, 16);
        }
 
        function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            particles = particles.filter(particle => particle.life > 0);
            while (particles.length < 100) {
                particles.push(new Particle(mouse.x, mouse.y));
            }
            for (let i = 0; i < particles.length; i++) {
                particles[i].update();
                particles[i].draw();
            }
        }
 
        init();
    </script>
</body>
</html>

这段代码定义了一个Particle类，它表示跟随鼠标移动的粒子。有一个particles数组跟踪这些粒子，并且每个粒子都有随机生

- 阅读更多 -
HTML5（H5)的前生今世
System
2024-08-08
所有,html5

HTML5（简称H5）是HTML的第五个版本，于2014年被W3C推荐为标准。它在原有的基础上增加了新的特性，如Canvas、本地存储、多媒体、表单控件等，旨在简化Web开发并提高Web应用的用户体验。

以下是一些HTML5的关键特性和用法示例：

  1. Canvas：用于绘图的标签，可以通过JavaScript进行编程绘制。



<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>
  1. 本地存储：使用JavaScript可以在用户的浏览器中本地保存数据。



localStorage.setItem('key', 'value');
var data = localStorage.getItem('key');
  1. 多媒体：支持视频和音频标签。



<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>
  1. 新的表单控件：如日期选择器、时间选择器等。



<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="birthday">Birthday:</label><br>
  <input type="date" id="birthday" name="birthday"><br>
  <input type="submit" value="Submit">
</form>
  1. 绘图标签：使用<svg>标签进行矢量图形的绘制。



<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
  1. 新的语义标签：如<header>, <nav>, <section>, <article>, <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 develop open standards for the Web.</p>
</section>
<footer>
  <p>© W3C, 2023</p>
</footer>

以上是HTML5的一些关键特性和用法示例，HTML5的发展为Web开发带来了前所未有的灵活性和功能丰富性。

- 阅读更多 -
编程笔记 html5&css&js 093 JavaScript 窗口对象
System
2024-08-08
所有,html5

在JavaScript中，window对象代表浏览器窗口。它是全局对象，提供了与浏览器窗口交互的方法和属性。

以下是一些使用JavaScript窗口对象的常见示例：

  1. 打开新窗口：



window.open('http://www.example.com', 'newwindow', 'width=400,height=200');
  1. 关闭窗口：



window.close();
  1. 弹出警告框：



window.alert('这是一个警告框！');
  1. 弹出确认框：



if (window.confirm('你确定要继续吗？')) {
    // 用户点击了确定
} else {
    // 用户点击了取消
}
  1. 弹出提示框：



var userInput = window.prompt('请输入您的名字：', '');
if (userInput != null) {
    // 用户输入了数据，userInput 变量存储输入的值
} else {
    // 用户点击了取消
}
  1. 滚动窗口到顶部：



window.scrollTo(0, 0);
  1. 滚动窗口到底部：



window.scrollTo(0, document.body.scrollHeight);
  1. 获取窗口宽度和高度：



var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
  1. 监听窗口大小变化：



window.addEventListener('resize', function() {
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;
    // 处理窗口大小变化的逻辑
});

这些是window对象的一些常见用法，在实际开发中可以根据需要使用其提供的其他属性和方法。

- 阅读更多 -
HTML5新增的input元素属性：placeholder、required、autofocus、min、max等
System
2024-08-08
所有,html5

HTML5 提供了一些新的 input 元素属性，包括 placeholder、required、autofocus、min、max 等。这些属性可以帮助开发者更好地控制表单数据的输入和验证过程。

解决方案和实例代码如下：

  1. placeholder：提供输入字段的提示信息，用户输入时提示信息会消失。



<input type="text" placeholder="请输入您的名字">
  1. required：指示输入字段在提交表单之前必须填写。



<input type="text" required>
  1. autofocus：指示字段在页面加载时自动获得焦点。



<input type="text" autofocus>
  1. min 和 max：指定输入数字的最小值和最大值。



<input type="number" min="0" max="100">
  1. pattern：指定输入字段的验证模式，使用正则表达式。



<input type="text" pattern="[A-Za-z]{3}">
  1. step：指定输入数字的步长。



<input type="number" step="5">
  1. multiple：允许输入字段输入多个值（例如，邮件输入字段）。



<input type="email" multiple>
  1. list 和 datalist：与 input 元素配合使用，创建可下拉选择的输入值列表。



<input type="text" list="colors">
<datalist id="colors">
  <option value="red">
  <option value="green">
  <option value="blue">
</datalist>

以上就是 HTML5 新增的 input 元素属性的解决方案和实例代码。

- 阅读更多 -
html5&css&js代码 012 我的像册
System
2024-08-08
所有,html5

以下是一个简单的HTML、CSS和JavaScript代码示例，用于创建一个可以上传照片并展示的“我的相册”页面。

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Gallery</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="gallery">
  <h2>My Gallery</h2>
  <input type="file" id="imageUpload" multiple>
  <div id="imagePreview"></div>
</div>
 
<script src="script.js"></script>
</body>
</html>

CSS (styles.css):




.gallery {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}
 
.gallery img {
  width: 150px;
  margin: 10px;
}
 
#imagePreview {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

JavaScript (script.js):




document.getElementById('imageUpload').addEventListener('change', handleFiles);
 
function handleFiles() {
  let files = this.files;
  let imagePreview = document.getElementById('imagePreview');
  
  imagePreview.innerHTML = ''; // Clear the preview
  
  for (let i = 0; i < files.length; i++) {
    let file = files[i];
    let imageType = /image.*/;
    
    if (file.type.match(imageType)) {
      let img = document.createElement('img');
      img.file = file;
      img.classList.add('gallery__image');
      
      // Preview the image
      let reader = new FileReader();
      reader.onload = (e) => img.src = e.target.result;
      reader.readAsDataURL(file);
      
      imagePreview.appendChild(img);
    }
  }
}

这个示例中，用户可以通过点击<input>元素选择图片文件。当文件被选中后，handleFiles函数会被触发，读取这些文件并逐个预览显示在<div id="imagePreview">中。这个简单的例子演示了如何使用HTML5的文件API来处理用户上传的文件，并使用JavaScript和CSS进行展示。

- 阅读更多 -
HTML5实现动态视频背景
System
2024-08-08
所有,html5

在HTML5中，可以使用<video>元素来实现动态的视频背景。以下是一个简单的示例代码：




<!DOCTYPE html>
<html>
<head>
<style>
  /* 设置video元素全屏并置于所有内容之后 */
  .video-background {
    position: fixed;
    right: 0; 
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto;
    z-index: -1; 
  }
 
  /* 设置主要内容的样式 */
  .content {
    position: absolute;
    z-index: 1;
    color: white;
    text-align: center;
  }
</style>
</head>
<body>
 
<video autoplay loop class="video-background">
  <source src="your-video-file.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
 
<div class="content">
  <h1>这里是内容</h1>
  <p>这里是你的文本或其他内容。</p>
</div>
 
</body>
</html>

在这个例子中，<video>元素被设置为全屏并且置于所有内容之后（z-index: -1），从而作为视频背景显示。同时，.content类被设置为z-index: 1，确保文本和其他内容显示在视频背景之上。

请确保替换your-video-file.mp4为你的视频文件路径，并且视频格式要兼容HTML5的<video>元素。

- 阅读更多 -
一个酷炫的HTML页面的代码，一个基于HTML5 Canvas实现的预加载动画效果
System
2024-08-08
所有,html5

以下是一个HTML页面的代码实例，它展示了如何使用HTML5 Canvas创建一个简单的预载动画：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cool Preloader Animation</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        canvas {
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="preloader"></canvas>
 
    <script>
        const canvas = document.getElementById('preloader');
        const ctx = canvas.getContext('2d');
        const width = canvas.width = window.innerWidth;
        const height = canvas.height = window.innerHeight;
 
        // Utility function to get a random number
        function rand(min, max) {
            return Math.random() * (max - min) + min;
        }
 
        // Utility function to draw a circle
        function drawCircle(x, y, radius) {
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
            ctx.fillStyle = 'white';
            ctx.fill();
        }
 
        // Animation loop
        function animate() {
            ctx.clearRect(0, 0, width, height); // Clear canvas
            const numCircles = 5; // Number of circles to draw
 
            for (let i = 0; i < numCircles; i++) {
                const x = rand(0, width);
                const y = rand(0, height);
                const radius = rand(10, 50);
                drawCircle(x, y, radius);
            }
 
            requestAnimationFrame(animate); // Repeat animation
        }
 
        // Start the animation
        animate();
    </script>
</body>
</html>

这段代码使用了HTML5 <canvas> 元素来创建一个简单的动画预载器。它定义了一个rand函数来生成随机数，并使用drawCircle函数在画布上绘制圆形。animate函数会在每一帧清除画布并重绘随机的圆形，从而形成动态的预载动画。

- 阅读更多 -
Android Studio将html5网址封装成APP
System
2024-08-08
所有,html5

在Android Studio中，将HTML5网址封装成APP通常涉及以下步骤：

  1. 创建一个新的Android项目。
  2. 添加一个WebView组件到你的布局文件中。
  3. 在你的Activity中，设置WebView组件加载你的HTML5网址。

以下是一个简单的示例代码：




import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import androidx.appcompat.app.AppCompatActivity;
 
public class MainActivity extends AppCompatActivity {
 
    private WebView webView;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        webView = findViewById(R.id.webView);
        webView.setWebViewClient(new WebViewClient());
        webView.getSettings().setJavaScriptEnabled(true); // 启用JavaScript
        webView.loadUrl("https://your-html5-website.com"); // 替换为你的网址
    }
}

布局文件 activity_main.xml：




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
 
</RelativeLayout>

这样，你就创建了一个简单的Android应用，它通过WebView组件加载了你的HTML5网页。这个应用可以被打包成APK文件，并分发到Android市场（如Google Play）或者直接分发给用户。

要注意的是，将HTML5网页封装成APP并不意味着你可以轻松获得一个阿里巴巴Android岗位的offer。这需要通过实践和技术能力的积累，以及可能的网络效应和机遇。通常，面试官会评估你的技术能力和项目经验。10天拿到阿里Android岗offer的可能性极低，通常需要经过严格的面试流程。

- 阅读更多 -
HTML5- 拖拽功能
System
2024-08-08
所有,html5

HTML5 提供了一个内建的拖拽API，使得元素可以被拖动。以下是一个简单的示例，展示了如何实现一个可拖动的图片：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽功能示例</title>
<style>
#draggable {
  width: 150px;
  height: 150px;
  cursor: move; /* 更改鼠标光标表示可拖动 */
}
</style>
</head>
<body>
 
<img id="draggable" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1200px-Google_2015_logo.svg.png" draggable="true">
 
<script>
// 获取可拖动元素
var dragItem = document.getElementById('draggable');
 
// 添加拖动事件监听器
dragItem.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text/plain', null); // 开始拖动时需要设置
});
 
// 页面其它地方可以放置拖动的元素
document.body.addEventListener('dragover', function(event) {
  event.preventDefault(); // 阻止默认行为，允许放置
});
 
document.body.addEventListener('drop', function(event) {
  event.preventDefault(); // 阻止文件的默认放置行为
  var x = event.clientX, y = event.clientY; // 获取放置位置的坐标
  dragItem.style.position = 'absolute'; // 设置绝对定位
  dragItem.style.left = x + 'px'; // 设置元素的新位置
  dragItem.style.top = y + 'px';
});
</script>
 
</body>
</html>

在这个示例中，我们创建了一个可拖动的图片元素，并为它添加了一些样式。通过监听 dragstart 和 dragover 事件，我们可以实现在页面上拖动这个图片元素。当拖动停止时，我们可以通过 drop 事件处理程序更新元素的位置。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号