标签 html5 下的文章

2024-08-13

由于提出的问题涉及的内容较多，我将选取几个典型的HTML5特性及其用法进行解答。

用于媒体播放的<video>标签：




<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

用于绘图的<canvas>标签：




<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 150, 75);
</script>

用于地理定位的navigator.geolocation API：




navigator.geolocation.getCurrentPosition(function(position) {
  console.log("Latitude is :", position.coords.latitude);
  console.log("Longitude is :", position.coords.longitude);
});

用于本地存储的localStorage：




localStorage.setItem('key', 'value');
var data = localStorage.getItem('key');

用于表单验证的新的表单类型和属性：




<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  <input type="email" id="email" name="email" required>
  <input type="submit">
</form>

这些例子展示了HTML5中的一些常用特性及其简单用法。实际应用中，你可能需要根据具体需求来调整这些代码。

- 阅读更多 -

零基础学Java第二十七天之前端-HTML5详解

System

2024-08-13

所有,html5

在零基础学习Java的第二十七天前端HTML5详解中，我们主要关注于Web前端开发中的HTML5的学习。HTML5是最新的HTML标准，它为现代Web开发提供了丰富的功能和更好的体验。

以下是一些关键点和示例代码：

语义化标签：HTML5引入了一些语义化的标签，如<header>, <nav>, <section>, <article>, <aside>, <footer>，这些标签可以让页面更容易阅读和理解，同时有助于搜索引擎优化。




<header>
  <!-- 页面或页面一部分的头部内容 -->
</header>
<nav>
  <!-- 导航链接 -->
</nav>
<section>
  <!-- 页面的一个区块，可以用来分割内容 -->
</section>
<article>
  <!-- 一块独立的内容，如博客文章 -->
</article>
<aside>
  <!-- 与页面主内容关系不大的内容，如侧边栏 -->
</aside>
<footer>
  <!-- 页面或页面一部分的底部内容 -->
</footer>

画布（Canvas）和SVG：HTML5提供了<canvas>元素，允许通过JavaScript进行2D图形绘制。而SVG用于绘制矢量图形。




<!-- Canvas用于绘图 -->
<canvas id="myCanvas" width="200" height="100"></canvas>
 
<!-- SVG用于绘制矢量图形 -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

表单控件：HTML5增加了一些新的表单控件，如<email>, <url>, <range>, <date>, <time>等，这些控件提供了更好的数据校验和输入体验。




<form>
  <label for="email">Email:</label>
  <email id="email" name="email"></email>
 
  <label for="range">Range:</label>
  <range id="range" name="range" min="0" max="100" step="5">60</range>
 
  <input type="submit">
</form>

本地存储：HTML5的Web存储API允许在客户端存储数据。




// 存储数据
localStorage.setItem('key', 'value');
// 获取数据
let data = localStorage.getItem('key');
// 删除数据
localStorage.removeItem('key');
// 清除所有数据
localStorage.clear();

音频和视频：HTML5提供了<audio>和<video>标签，用于在页面中播放音频和视频。




<!-- 音频 -->
<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
 
<!-- 视频 -->
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

地理位置（Geolocation）API：HTML5提供了地理位置API，可以获取用户的当前位置。




if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(function(position) {
    console.log("Latitude is :", position.coords.latitude);
    console.log("Longitude is :

- 阅读更多 -

HTML5实现好看的天气预报网站源码

System

2024-08-13

所有,html5

由于原始代码已经很完整，我们可以直接参考其结构和样式来提供一个简化版本的HTML5天气预报网站模板。以下是一个简化版的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;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .header {
            text-align: center;
            padding: 20px;
            background-color: #fff;
        }
        .weather-data {
            text-align: center;
            padding: 50px;
            background-color: #fff;
            margin-top: 20px;
        }
        .weather-data h2 {
            font-size: 24px;
        }
        .weather-data p {
            margin: 0;
        }
        .search-bar {
            text-align: center;
            padding: 20px 0;
            background-color: #fff;
            margin-top: 20px;
        }
        input[type="text"] {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        input[type="submit"] {
            padding: 10px 20px;
            border: none;
            background-color: #005F6B;
            color: white;
            font-weight: bold;
            border-radius: 5px;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #048BA8;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>天气预报</h1>
    </div>
    <div class="search-bar">
        <form>
            <input type="text" placeholder="输入城市名称">
            <input type="submit" value="查看天气">
        </form>
    </div>
    <div class="weather-data">
        <h2>北京</h2>
        <p>天气：多云</p>
        <p>温度：28°C</p>
        <p>风速：2.5 m/s</p>
        <p>PM2.5：350</p>
    </div>
</body>
</html>

这个简化版本的代码包含了基本的HTML结构、CSS样式和一个搜索表单，用于获取用户输入的城市名称并显示相应的天气信息。样式使用了简单的CSS属性，没有使用复杂的CSS框架，以确保代码的简洁性和可读性。

- 阅读更多 -

HTML - 你如何使H5页面禁止手动缩放

System

2024-08-13

所有,html

在HTML页面中，可以通过在<head>标签内添加<meta>标签来禁止用户手动缩放页面。你可以设置viewport以确保页面不会缩放，并且提供user-scalable=no来指明用户不能手动缩放。

下面是禁止用户缩放的HTML页面的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>禁止手动缩放的页面</title>
    <!-- 禁止用户缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
    <h1>这个页面不能手动缩放。</h1>
</body>
</html>

在这个例子中，viewport 的 width=device-width 设置确保页面宽度与设备屏幕的宽度一致。initial-scale=1 确保初始缩放等级为1，即不缩放。user-scalable=no 则禁止用户进行缩放。

- 阅读更多 -

HTML5 CSS3 专题：诱人的实例 3D展示商品信息

System

2024-08-13

所有,css3

以下是一个简单的HTML和CSS代码示例，展示如何使用HTML5和CSS3创建一个3D呈现的商品信息卡片：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Product Card</title>
<style>
  .product-card {
    width: 200px;
    height: 260px;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    perspective: 1000px;
  }
 
  .product-card .face {
    position: relative;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: transform 0.6s;
  }
 
  .product-card .face.back {
    transform: rotateY(180deg);
    background-color: #f8f8f8;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #333;
  }
 
  .product-card .face.front {
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
  }
 
  .product-card .face.front img {
    width: 100%;
    height: 150px;
    object-fit: cover;
  }
 
  .product-card .face.front .info {
    padding: 10px;
  }
 
  .product-card:hover .face {
    transform: rotateY(180deg);
  }
</style>
</head>
<body>
 
<div class="product-card">
  <div class="face front">
    <img src="product-image.jpg" alt="Product Image">
    <div class="info">
      <p>Product Name</p>
      <p>$99.99</p>
    </div>
  </div>
  <div class="face back">
    Description of the product goes here.
  </div>
</div>
 
</body>
</html>

这个示例使用了CSS3的perspective和transform属性来创建3D效果，并使用:hover伪类来触发卡片翻转的动画。这个简单的3D卡片可以作为学习如何制作类似效果的起点。

- 阅读更多 -

JS特效第148弹：html5 css3圆形进度条倒计时页面跳转代码

System

2024-08-13

所有,css3

以下是一个简化的HTML和JavaScript代码示例，用于创建一个圆形进度条并在倒计时结束时跳转到指定页面。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆形进度条倒计时</title>
<style>
  .circle-timer {
    width: 100px;
    height: 100px;
    position: relative;
    border-radius: 50%;
    background: conic-gradient(#4db8ff 0%, #f9f900 50%, #ff3c5c 100%);
    text-align: center;
    line-height: 100px;
    font-size: 20px;
    font-weight: bold;
    color: white;
  }
</style>
</head>
<body>
<div id="timer" class="circle-timer">10</div>
 
<script>
function startTimer(duration, display) {
  var timer = duration, minutes, seconds;
  var interval = setInterval(function () {
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);
 
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
 
    display.textContent = minutes + ":" + seconds;
 
    if (--timer < 0) {
      clearInterval(interval);
      window.location.href = "https://www.example.com"; // 指定跳转的URL
    }
  }, 1000);
}
 
window.onload = function () {
  var timeLeft = 10 * 60,
    display = document.querySelector('#timer');
  startTimer(timeLeft, display);
};
</script>
</body>
</html>

这段代码实现了一个简单的圆形进度条，通过conic-gradient创建颜色渐变，并在倒计时结束时使用window.location.href跳转到指定的页面。你可以根据需要调整倒计时时间和目标页面的URL。

- 阅读更多 -

HTML5 CSS3 提高

System

2024-08-13

所有,css3

HTML5和CSS3是现代网页设计和开发的核心技术。以下是一些提高HTML5和CSS3使用技巧的方法：

学习HTML5的新特性：例如新的语义标签、表单控件、Canvas和SVG绘图、视频和音频支持等。
使用CSS3的特效和变换：比如rgba颜色、@font-face字体定义、box-shadow、border-radius、transform和animation等。
响应式设计：使用媒体查询和相应的布局技术，以适应不同屏幕尺寸。
语义化HTML：使用合适的HTML标签来表示内容的结构和意义。
优化CSS：使用CSS预处理器（如Sass、LESS）、CSS Architect（如BEM）方法来组织和维护样式表。
使用CSS3的Flexbox和Grid布局：简化复杂的布局设计。
优化图片：使用CSS3特效和优化技术，如Base64编码小图片、懒加载等。
代码组织：将CSS和JavaScript文件分离，并通过外部链接引入HTML文件。
性能优化：减少HTTP请求、压缩CSS和JavaScript文件、使用CDN等。
访问性改进：确保你的HTML标签具有良好的语义，同时为视觉障碍者提供良好的支持。

以下是一个简单的响应式导航栏的HTML和CSS示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navbar</title>
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  .navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
  .navbar li {
    float: left;
  }
  .navbar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  .navbar li a:hover {
    background-color: #111;
  }
  @media screen and (max-width: 600px){
    .navbar li {
      float: none;
    }
  }
</style>
</head>
<body>
 
<ul class="navbar">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
 
</body>
</html>

这个示例展示了如何创建一个基本的响应式导航栏，并且使用了HTML5语义化标签和CSS3媒体查询来实现在不同屏幕尺寸下的布局优化。

- 阅读更多 -

HTML5 CSS3 经典案例：无插件拖拽上传图片（支持预览与批量）

System

2024-08-13

所有,css3

以下是实现HTML5和CSS3拖拽上传图片功能的核心JavaScript代码，它支持图片预览和批量上传。




// 初始化文件输入框
document.getElementById('file-input').addEventListener('change', function(e) {
    var files = this.files;
    for (var i=0; i<files.length; i++) {
        var file = files[i];
        // 检查文件类型
        if (!file.type.match('image.*')) {
            continue;
        }
        // 创建图片预览
        var img = document.createElement('img');
        img.classList.add('preview');
        img.file = file;
        // 添加拖拽效果
        img.addEventListener('dragstart', dragStart, false);
        img.addEventListener('dragend', dragEnd, false);
        // 添加图片到预览区域
        document.getElementById('preview').appendChild(img);
        // 读取文件并显示
        var reader = new FileReader();
        reader.onload = (function(aImg) {
            return function(e) {
                aImg.src = e.target.result;
            };
        })(img);
        reader.readAsDataURL(file);
    }
});
 
// 拖拽开始事件
function dragStart(e) {
    this.style.opacity = '0.5';
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', null);
    e.dataTransfer.setImageData(this.src, 0, 0);
    e.dataTransfer.setData('img-file', this.file);
}
 
// 拖拽结束事件
function dragEnd(e) {
    this.style.opacity = '1';
}
 
// 拖拽进入目标区事件
function dragEnter(e) {
    e.stopPropagation();
    e.preventDefault();
}
 
// 拖拽覆盖目标区事件
function dragOver(e) {
    e.stopPropagation();
    e.preventDefault();
}
 
// 拖拽放置事件
function drop(e) {
    e.stopPropagation();
    e.preventDefault();
 
    var img = document.createElement('img');
    img.classList.add('preview');
    img.file = e.dataTransfer.getData('img-file');
    img.addEventListener('dragstart', dragStart, false);
    img.addEventListener('dragend', dragEnd, false);
 
    document.getElementById('preview').appendChild(img);
    var reader = new FileReader();
    reader.onload = (function(aImg) {
        return function(e) {
            aImg.src = e.target.result;
        };
    })(img);
    reader.readAsDataURL(img.file);
}
 
// 设置拖拽事件监听
document.getElementById('preview').addEventListener('dragenter', dragEnter, false);
document.getElementById('preview').addEventListener('dragover', dragOver, false);
document.getEleme

System

2024-08-13

所有,css3

以下是一个简单的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>
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
 
  li {
    float: left;
  }
 
  li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
 
  li a:hover, .dropdown:hover .dropbtn {
    background-color: #111;
  }
 
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
 
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
 
  .dropdown-content a:hover {background-color: #f1f1f1;}
 
  .dropdown:hover .dropdown-content {
    display: block;
  }
</style>
</head>
<body>
 
<ul>
  <li><a href="#home">首页</a></li>
  <li><a href="#news">新闻</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">下拉菜单</a>
    <div class="dropdown-content">
      <a href="#">链接1</a>
      <a href="#">链接2</a>
      <a href="#">链接3</a>
    </div>
  </li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>
 
</body>
</html>

这段代码提供了一个简单的横向二级导航菜单的实现，使用了HTML结构和CSS样式。当鼠标悬停在带有下拉内容的菜单项上时，会显示下拉菜单。这个示例可以作为学习如何创建导航菜单的起点，并可以根据具体需求进行扩展和修改。

System

2024-08-13

所有,css




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom HTML5 Video Player</title>
    <!-- Tailwind CSS -->
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <div class="mx-auto max-w-lg bg-white rounded-lg shadow overflow-hidden">
        <video id="video" class="w-full" controls>
            <source src="your-video-file.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div class="flex items-center justify-between px-2 py-2 bg-gray-100">
            <!-- Play/Pause Button -->
            <button id="playPause" class="text-blue-500" onclick="togglePlayPause()">
                Play/Pause
            </button>
            <!-- Progress Bar -->
            <div class="w-1/4">
                <input id="seek" type="range" min="0" max="100" value="0" onchange="seekTo()">
            </div>
            <!-- Timer -->
            <div id="timer" class="text-gray-600">00:00 / 00:00</div>
        </div>
    </div>
 
    <script>
        function togglePlayPause() {
            var video = document.getElementById('video');
            if (video.paused) {
                video.play();
            } else {
                video.pause();
            }
        }
 
        function seekTo() {
            var video = document.getElementById('video');
            var seekTo = (event.target.value / 100) * video.duration;
            video.currentTime = seekTo;
        }
 
        // Update the seek slider and timer
        function updateProgress() {
            var video = document.getElementById('video');
            var progress = (video.currentTime / video.duration) * 100;
            document.getElementById('seek').value = progress;
 
            // Calculate the time left and time total
            var minutes = Math.floor(video.currentTime / 60);
            if (minutes < 10) {
                minutes = '0' + minutes;
            }
            var seconds = Math.floor(video.currentTime % 60);
            if (seconds < 10) {
                seconds = '0' + seconds;
            }
            var totalMinutes = Math.floor(video.duration / 60);
            if (totalMinutes < 10) {
                totalMinutes = '0' + totalMinutes;
            }

- 阅读更多 -