分类 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元素来让用户可以拖动来设置音量。

- 阅读更多 -

五种自定义tabbar导航demo

System

2024-08-15

所有,html5

自定义TabBar导航通常涉及到底部或顶部的一组按钮，用于在不同的视图控制器之间切换。以下是一个简单的自定义TabBar导航的实现示例：




import UIKit
 
class CustomTabBarController: UIViewController {
 
    override func viewDidLoad() {
        super.viewDidLoad()
        setupTabBar()
    }
 
    func setupTabBar() {
        let firstViewController = UIViewController()
        firstViewController.view.backgroundColor = .red
        let secondViewController = UIViewController()
        secondViewController.view.backgroundColor = .green
        
        addChild(firstViewController)
        addChild(secondViewController)
        
        view.addSubview(firstViewController.view)
        view.addSubview(secondViewController.view)
        
        firstViewController.view.translatesAutoresizingMaskIntoConstraints = false
        secondViewController.view.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            firstViewController.view.topAnchor.constraint(equalTo: view.topAnchor),
            firstViewController.view.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            firstViewController.view.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            firstViewController.view.bottomAnchor.constraint(equalTo: view.centerYAnchor),
            
            secondViewController.view.topAnchor.constraint(equalTo: view.centerYAnchor),
            secondViewController.view.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            secondViewController.view.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            secondViewController.view.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
        
        // 可以添加更多的视图控制器和相应的约束
    }
}
 
// 在AppDelegate中设置window的rootViewController
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // 创建一个自定义的TabBarController
    window?.rootViewController = CustomTabBarController()
    window?.makeKeyAndVisible()
    return true
}

这个示例展示了如何创建一个自定义的TabBarController，它有两个子视图控制器，每个视图控制器占据屏幕的一半。你可以根据需要添加更多的视图控制器和相应的TabBar按钮。这个例子使用了约束来布局子视图控制器的视图。

- 阅读更多 -

HTML+CSS实现个人简历

System

2024-08-15

所有,html5

以下是一个简单的HTML和CSS结合的个人简历示例：




<!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;
    margin: 0;
    padding: 20px;
  }
  .header {
    text-align: center;
    padding: 20px;
  }
  .section {
    margin-bottom: 10px;
  }
  .section-title {
    text-transform: uppercase;
    font-size: 14px;
    background-color: #f2f2f2;
    padding: 5px;
    margin-bottom: 5px;
  }
  .section-content {
    padding: 10px;
  }
  .contact-info {
    text-align: center;
    padding: 10px;
  }
</style>
</head>
<body>
 
<div class="header">
  <h1>张三</h1>
  <h3>个人简历</h3>
</div>
 
<div class="section">
  <div class="section-title">基本信息</div>
  <div class="section-content">
    <p>出生日期: 1990-01-01</p>
    <p>联系电话: +86 1234567890</p>
    <p>电子邮件: zhangsan@example.com</p>
    <p>居住地址: 123 Example Street, Example City</p>
  </div>
</div>
 
<div class="section">
  <div class="section-title">教育背景</div>
  <div class="section-content">
    <p>2009-2013: 大学名称, 本科, 专业名称</p>
    <p>2006-2009: 高中名称, 高中, 专业名称</p>
  </div>
</div>
 
<div class="section">
  <div class="section-title">技能</div>
  <div class="section-content">
    <p>HTML5</p>
    <p>CSS3</p>
    <p>JavaScript</p>
    <p>PHP</p>
  </div>
</div>
 
<div class="section">
  <div class="section-title">兴趣爱好</div>
  <div class="section-content">
    <p>运动</p>
    <p>旅游</p>
    <p>阅读</p>
  </div>
</div>
 
<div class="contact-info">
  <p>可通过提供的联系信息与我联系。</p>
</div>
 
</body>
</html>

这个简历使用了基本的HTML结构和CSS样式来展示个人信息和技能。你可以根据自己的需求添加更多的细节和信息。

- 阅读更多 -

html5语音合成speechsynthesisApi

System

2024-08-15

所有,html5

HTML5的SpeechSynthesisAPI允许开发者在浏览器中使用语音合成技术。以下是一个简单的示例，展示如何使用SpeechSynthesisAPI来实现文本到语音的转换：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Speech Synthesis Example</title>
</head>
<body>
 
<textarea id="text" rows="5" cols="40">
请输入需要转换的文本。
</textarea>
 
<button id="speak-btn">读出文本</button>
 
<script>
const textToSpeech = () => {
  const text = document.getElementById('text').value;
  const msg = new SpeechSynthesisMessage(text);
  window.speechSynthesis.speak(msg);
};
 
document.getElementById('speak-btn').addEventListener('click', textToSpeech);
</script>
 
</body>
</html>

在这个例子中，我们创建了一个textarea来允许用户输入文本，并有一个按钮来触发文本到语音的转换。当用户点击按钮时，textToSpeech函数会被调用，它将用户输入的文本封装在一个SpeechSynthesisMessage对象中，并通过speechSynthesis.speak方法读出。

请注意，SpeechSynthesisAPI可能不会在所有浏览器中都被支持，因此在使用前最好检查当前浏览器是否支持此API。

- 阅读更多 -

html5的css使用display: flex进行div居中的坑！

System

2024-08-15

所有,html5

在HTML5中，CSS的display: flex属性被广泛使用来实现各种布局。要使用flexbox来居中一个div，通常有两种方法：

使用justify-content: center和align-items: center来水平和垂直居中子元素。
使用margin: auto来居中单个子元素。

以下是使用第一种方法居中div的示例代码：




<!DOCTYPE html>
<html>
<head>
<style>
.centered-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Full height of the viewport */
}
</style>
</head>
<body>
 
<div class="centered-container">
  <div>居中的内容</div>
</div>
 
</body>
</html>

在这个例子中，.centered-container是一个flex容器，它使用justify-content和align-items属性将其子div完全居中。

如果你遇到了使用flexbox居中div时的问题，请确保你的HTML结构正确，CSS属性被正确应用，并且没有其他样式干扰flexbox布局的效果。如果需要进一步的帮助，请提供具体的代码示例和问题描述。

- 阅读更多 -

微前端：qiankun的五种通信方式

System

2024-08-15

所有,html5

在使用qiankun微前端架构时，通信是必不可少的。以下是qiankun提供的五种通信方式：

全局状态通信（Global State）：主应用和微应用都可以访问和修改的全局状态。




// 主应用中
import { initGlobalState } from 'qiankun';
 
const globalState = initGlobalState(initialState);
 
// 微应用中
import { getGlobalState } from 'qiankun';
const globalState = getGlobalState();

生命周期钩子函数通信：微应用可以通过导出生命周期钩子函数与主应用通信。




// 微应用中
export async function bootstrap() {
  console.log('微应用启动时只调用一次');
}
 
export async function mount() {
  console.log('微应用挂载时调用');
}
 
export async function unmount() {
  console.log('微应用卸载时调用');
}

单独的通信方式（Sandbox）：微应用可以访问自己的沙箱环境，但不能访问主应用或其他微应用的环境。




// 微应用中
import { sandbox } from 'qiankun';
 
const { container, instance } = sandbox;

微应用间通信（Inter-App Communication）：每个微应用都可以发送消息给主应用和其他微应用。




// 主应用中
import { initIntercom } from 'qiankun';
 
const intercom = initIntercom(globalState);
 
// 发送消息
intercom.publish(msg);
 
// 订阅消息
intercom.subscribe(callback);

导出业务接口（Exports Interface）：微应用可以导出业务接口供主应用调用。




// 微应用中
export function getData() {
  return data;
}
 
// 主应用中
import { loadMicroApp } from 'qiankun';
 
loadMicroApp({
  name: 'your-app',
  entry: '//your.micro.app/index.html',
  container: '#yourContainer',
  props: { getData }
});

这些通信方式可以满足大部分的通信需求。在实际使用时，开发者可以根据具体场景选择合适的通信方式。

- 阅读更多 -

html5 超链接标签（最全使用方法）

System

2024-08-15

所有,html5

HTML5 超链接 (<a> 标签) 是用来创建超链接的，即用于从一个页面链接到另一个页面。

基本用法：




<a href="https://www.example.com">访问示例网站</a>

在新窗口/标签中打开链接：




<a href="https://www.example.com" target="_blank">在新窗口打开示例网站</a>

链接到同一页面的不同部分：




<a href="#section2">跳转到第二部分</a>
...
<div id="section2">这是第二部分的内容</div>

链接到电子邮件地址：




<a href="mailto:someone@example.com">发送电子邮件</a>

下载链接：




<a href="download.pdf" download="custom_filename.pdf">下载文件</a>

链接到 Tel 号码：




<a href="tel:+1234567890">拨打电话</a>

这些是 <a> 标签的基本用法，可以根据需要结合 HTML5 的其他特性一起使用。

- 阅读更多 -

HTML5:七天学会基础动画网页11

System

2024-08-15

所有,html5

在HTML5中，我们可以使用CSS3的动画特性来创建复杂的动画效果。以下是一个简单的示例，演示如何使用CSS3创建一个简单的动画效果：




<!DOCTYPE html>
<html>
<head>
    <style>
        /* 定义关键帧动画 */
        @keyframes example {
            from {background-color: red;}
            to {background-color: yellow;}
        }
        
        /* 应用动画规则到元素上 */
        .animated-box {
            width: 50px;
            height: 50px;
            margin-top: 50px;
            background-color: red;
            /* 使用动画名称和持续时间 */
            animation-name: example;
            animation-duration: 4s;
        }
    </style>
</head>
<body>
 
<div class="animated-box"></div>
 
</body>
</html>

在这个例子中，我们定义了一个名为 example 的关键帧动画，它从红色渐变到黄色。然后我们创建了一个类 .animated-box，该类应用了这个动画。当页面加载时，.animated-box 元素将开始执行动画，4秒后完成颜色的过渡变化。

- 阅读更多 -

HTML5本地存储：从入门到精通

System

2024-08-15

所有,html5

HTML5引入了一个本地存储API，允许网站在用户浏览器中本地保存数据。这个API可以保存键值对数据，并提供了一些方法来读取和删除这些数据。

以下是使用本地存储API的基本示例：




<!DOCTYPE html>
<html>
<body>
 
<h2>本地存储示例</h2>
 
<p>键入一些文本，然后点击保存数据按钮。</p>
 
<input id="myText" type="text">
<button onclick="saveData()">保存数据</button>
<button onclick="loadData()">加载数据</button>
<button onclick="deleteData()">删除数据</button>
 
<p id="output"></p>
 
<script>
function saveData() {
    // 获取输入框的值
    const text = document.getElementById("myText").value;
    // 将数据保存到本地存储中
    localStorage.setItem("myKey", text);
}
 
function loadData() {
    // 从本地存储中读取数据
    const data = localStorage.getItem("myKey");
    // 显示读取的数据
    document.getElementById("output").innerText = data;
}
 
function deleteData() {
    // 删除保存的数据
    localStorage.removeItem("myKey");
}
</script>
 
</body>
</html>

这个示例包括了基本的本地存储操作：保存数据、加载数据和删除数据。用户在输入框中输入的文本会被保存到localStorage中，键名为myKey。加载数据时，会从localStorage中读取这个键对应的值并显示出来。删除数据按钮会移除保存的键值对。

- 阅读更多 -

HTML5标签属性大全

System

2024-08-15

所有,html5

HTML5 引入了许多新的语义和功能性标签，同时废弃了一些旧的标签。以下是一些常用的 HTML5 标签及其属性的简单概述：

<!DOCTYPE html>：声明文档类型。
<html>：HTML文档的根元素。
<head>：包含文档的元数据，如<title>、<meta>、<style>、<script>等。
<title>：定义文档的标题。
<body>：包含文档的主要内容。
<header>：定义文档的头部区域。
<nav>：定义导航链接。
<section>：定义文档中的一个区段或主题。
<article>：定义独立的、完整的相关内容。
<aside>：定义与页面主内容少关的内容。
<footer>：定义文档的底部区域。
<h1> to <h6>：定义标题1到6级别的标题。
<p>：定义段落。
<div>：定义文档中的一个区块，没有特殊语义。
<span>：定义文档中的一个区域，没有特殊语义，通常用于行内样式。
<img>：定义图像。属性有src、alt、title、width、height等。
<a>：定义超链接。属性有href、target（\_blank, \_self, \_parent, \_top）等。
<audio>：定义音频内容。属性有src、controls、autoplay、loop等。
<video>：定义视频内容。属性有src、width、height、controls、autoplay、loop等。
<form>：定义表单。属性有action、method（get, post）等。
<input>：定义表单输入元素。类型可以是text、radio、checkbox、submit、reset等。
<button>：定义按钮。
<select>：定义选择列表（下拉列表）。
<option>：定义选择列表中的一个选项。
<textarea>：定义多行文本输入控件。
<canvas>：定义图形，通常使用JavaScript进行绘图。
<datalist>：定义选项列表，与<input>配合使用。
<details>：定义元素的细节，可与<summary>标签配合使用。
<dialog>：定义对话框或窗口。
<figure>：定义媒体内容及其标题。
<figcaption>：定义<figure>的标题。
<menuitem>：定义用户可以从菜单中选择的项。
<script>：定义客户端脚本。属性有src、type（通常是text/javascript）等。
<style>：定义文档的样式信息。属性有type（通常是text/css）等。
<link>：定义文档与外部资源的关系。属性有rel（指定关系）、href（指定资源位置）等。

以上是一些常用的HTML5标签和属性，具体使用时需要根据需求和场景来选择合适的标签和编写相应的属性。

- 阅读更多 -