分类前端技术下的文章

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属性表示该输入框是必填的。

- 阅读更多 -

web基础之：内联框架iframe的使用

System

2024-08-15

所有,html5

内联框架（iframe）是一种HTML元素，可以用来在当前HTML页面中嵌入另一个HTML页面。这是一种在网页设计中常见的技术，尤其是在创建后备选项卡或在页面中嵌入小型导航时。

以下是一些使用内联框架的方法：

直接在HTML中使用iframe标签：




<iframe src="https://www.example.com" width="600" height="400">
  <p>Your browser does not support iframes.</p>
</iframe>

在这个例子中，iframe将会显示网站"www.example.com"的内容。如果浏览器不支持iframe，它将显示<p>标签中的文本。

使用JavaScript动态添加iframe：




<div id="myiframe"></div>
 
<script>
  function addiframe() {
    var iframe = document.createElement("iframe");
    iframe.src = "https://www.example.com";
    iframe.width = 600;
    iframe.height = 400;
    iframe.frameborder = 0;
    document.getElementById("myiframe").appendChild(iframe);
  }
  addiframe();
</script>

在这个例子中，我们首先创建了一个id为"myiframe"的div元素。然后我们使用JavaScript创建了一个iframe，并将其源设置为"www.example.com"，然后我们将其添加到我们之前创建的div中。

使用JavaScript动态改变iframe的src属性：




<iframe id="myframe" src="https://www.example.com" width="600" height="400">
  <p>Your browser does not support iframes.</p>
</iframe>
 
<script>
  function changeSource() {
    document.getElementById("myframe").src = "https://www.example2.com";
  }
  changeSource();
</script>

在这个例子中，我们首先创建了一个id为"myframe"的iframe，然后我们使用JavaScript改变其src属性，将其源改变为"www.example2.com"。

注意：在使用iframe时，你需要注意的一个重要问题是，如果嵌入的网页试图访问父页面的DOM，可能会遇到同源策略的问题，导致无法正确显示内容。因此，在嵌入不同源的网页时，需要确保这些网页是兼容的，并且他们之间的通信是在允许的范围内。

- 阅读更多 -

HTML入门：07HTML5语义化布局

System

2024-08-15

所有,html5




<!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

System

2024-08-15

所有,html5

要使用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属性，你可以进一步美化这个骰子。

System

2024-08-15

所有,html5




// 定义一个名为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播放器设置音量的方式实例源代码

System

2024-08-15

所有,html5




<!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布局的效果。如果需要进一步的帮助，请提供具体的代码示例和问题描述。

- 阅读更多 -