分类前端技术下的文章

2024-08-19

HTML (Hypertext Markup Language) 是用于创建网页的标准标记语言。下面是一个简单的HTML页面示例，它包含了基本的页面结构和一些常用标签：




<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
    <a href="https://www.example.com">这是一个链接</a>
    <img src="image.jpg" alt="描述性文本">
</body>
</html>

这个示例包括了以下几个关键部分：

<!DOCTYPE html>: 文档类型声明，用于通知浏览器使用HTML的哪个版本进行解析。
<html>: 整个网页的开始和结束标签。
<head>: 包含了页面的元数据，如标题和字符集设置。
<title>: 设置页面的标题。
<body>: 包含了页面的主要内容。
<h1>: 定义了一级标题。
<p>: 定义了一个段落。
<a>: 定义了一个超链接，href属性指定了链接的目标地址。
<img>: 插入了一张图片，src属性指定了图片的路径，alt属性提供了图片的描述性文本。

- 阅读更多 -

【前端CSS】Html元素垂直对齐与水平的对齐的三种方式

System

2024-08-19

所有,html

在CSS中，可以通过多种方式实现HTML元素的垂直对齐和水平对齐。以下是三种常用的方法：

使用Flexbox布局




.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

使用Grid布局




.container {
  display: grid;
  place-items: center; /* 水平和垂直居中 */
}

使用绝对定位和transform




.container {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

HTML结构：




<div class="container">
  <div class="child">居中内容</div>
</div>

每种方法都可以实现子元素在容器中水平和垂直居中，选择哪种方法取决于项目需求和个人喜好。

- 阅读更多 -

使用JavaScript将富文本HTML转换为纯文本

System

2024-08-19

所有,html




// 将富文本HTML转换为纯文本的函数
function htmlToPlainText(htmlContent) {
    // 使用DOM解析器创建一个新的DOM元素
    var tempDiv = document.createElement("div");
    tempDiv.innerHTML = htmlContent;
  
    // 使用textContent获取所有文本内容，并清除空格
    var text = tempDiv.textContent || tempDiv.innerText || "";
    text = text.trim();
  
    return text;
}
 
// 示例HTML内容
var htmlContent = "<p>这是一个<b>富文本</b>示例。</p>";
 
// 使用函数转换HTML为纯文本
var plainText = htmlToPlainText(htmlContent);
console.log(plainText); // 输出: 这是一个富文本示例。

这段代码定义了一个htmlToPlainText函数，它接受HTML内容作为参数，创建一个临时的DOM元素，并将HTML内容作为其innerHTML。然后，它使用textContent或innerText属性来获取所有文本内容，并移除前后的空格。最后，它返回一个纯文本字符串。

- 阅读更多 -

Web前端新手入门系列：HTML

System

2024-08-19

所有,html

HTML是用于创建网页的标准标记语言。以下是一个简单的HTML页面示例，它包含了基本的页面结构和一些常用的HTML元素：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Web Front-End Journey!</h1>
    <p>This is a paragraph.</p>
    <a href="https://www.example.com">This is a link</a>
    <ul>
        <li>List Item 1</li>
        <li>List Item 2</li>
    </ul>
</body>
</html>

这个示例包括了一个页面的基本结构，包括一个标题(h1), 一个段落(p), 一个链接(a), 和一个无序列表(ul和li)。这些是构建网页内容的基本元素，是学习Web前端的好起点。

- 阅读更多 -

HTML导入并使用Axios

System

2024-08-19

所有,html

在HTML中使用Axios，首先需要通过<script>标签引入Axios库。可以从CDN引入，也可以从本地文件系统引入。以下是通过CDN引入Axios的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axios Example</title>
    <!-- 引入Axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <script>
        // 使用Axios发送GET请求
        axios.get('https://api.example.com/data')
            .then(response => {
                console.log(response.data); // 处理响应数据
            })
            .catch(error => {
                console.error(error); // 处理错误情况
            });
    </script>
</body>
</html>

在上述代码中，我们通过在<head>部分添加一个指向Axios CDN的<script>标签来引入Axios。然后在<body>的<script>标签中，我们使用Axios发送了一个GET请求到指定的URL，并在.then()回调中处理响应数据，在.catch()回调中处理可能发生的错误。

- 阅读更多 -

html实现动漫视频网站模板源码

System

2024-08-19

所有,html

以下是一个简单的HTML模板，用于创建一个动漫视频网站的首页。请注意，这只是一个基础模板，您可能需要添加更多的样式和功能来使其完整。




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动漫视频网站</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">动漫</a></li>
                <li><a href="#">新闻</a></li>
                <li><a href="#">关于我们</a></li>
            </ul>
        </nav>
        <h1><a href="/">动漫视频网站</a></h1>
        <div class="search">
            <input type="text" placeholder="搜索动漫">
            <button>搜索</button>
        </div>
    </header>
 
    <main>
        <section class="videos">
            <h2>最新动漫</h2>
            <div class="video-container">
                <!-- 视频播放器代码 -->
                <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
                <!-- 其他视频播放器 -->
            </div>
        </section>
 
        <section class="news">
            <h2>最新新闻</h2>
            <article>
                <h3><a href="#">新动漫剧集推出</a></h3>
                <p>2023年6月15日 - 某知名动漫作品的新剧集已正式发布...</p>
            </article>
            <!-- 其他新闻文章 -->
        </section>
    </main>
 
    <footer>
        <p>版权所有 © 2023 动漫视频网站</p>
    </footer>
</body>
</html>

在这个例子中，我们使用了一个简单的导航栏、搜索框和一个视频播放器。您可以将VIDEO_ID替换为您想要展示的YouTube视频ID。您还需要添加更多的视频播放器，以及新闻文章和样式来完善整个网站。

- 阅读更多 -

HTML - 请你说一下如何阻止a标签跳转

System

2024-08-19

所有,html

要阻止a标签的默认跳转行为，可以使用JavaScript添加事件监听器并在事件处理函数中阻止默认行为。以下是一个示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prevent Link Jump</title>
</head>
<body>
 
<a href="https://www.example.com" id="myLink">点击我，但不会跳转</a>
 
<script>
document.getElementById('myLink').addEventListener('click', function(event) {
    event.preventDefault();
    // 这里可以添加其他逻辑，比如打开新窗口或处理数据等
    alert('链接跳转被阻止！');
});
</script>
 
</body>
</html>

在这个例子中，当用户点击链接时，会触发注册的事件监听器。事件监听器调用event.preventDefault()方法阻止了默认的跳转行为，取而代之的是弹出一个警告框。

System

2024-08-19

所有,html

在JavaScript中，可以使用addEventListener方法为DOM元素添加事件监听器。这样当特定事件发生时，可以执行一些JavaScript代码。

以下是一个简单的例子，演示了如何为一个按钮添加点击事件监听器：




// 获取按钮元素
const myButton = document.getElementById('myButton');
 
// 为按钮添加点击事件监听器
myButton.addEventListener('click', function() {
    alert('按钮被点击了!');
});

在这个例子中，当按钮被点击时，会弹出一个警告框。

addEventListener方法接受两个参数：

事件名称：一个字符串，指定要监听的事件类型，例如'click'、'mouseover'等。
事件处理函数：当事件发生时要执行的函数。

你可以为同一个元素添加多个事件监听器，并且它们会按照被添加的顺序依次触发。如果同一个事件监听器被添加多次，它也会被多次触发。为了避免这种情况，可以使用removeEventListener方法移除不需要的监听器。

- 阅读更多 -

css修改滚动条样式

System

2024-08-19

所有,css3

在 CSS 中，可以使用 ::-webkit-scrollbar 选择器来修改滚动条的样式。以下是几种不同的实现方法：

使用 ::-webkit-scrollbar 修改滚动条的宽度、高度、颜色和背景：




/* 修改垂直滚动条 */
::-webkit-scrollbar {
  width: 10px; /* 修改宽度 */
}
 
/* 修改滚动条轨道背景色 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
 
/* 修改滚动条滑块颜色 */
::-webkit-scrollbar-thumb {
  background-color: #888;
}
 
/* 修改滚动条滑块悬停时的颜色 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

使用 ::-webkit-scrollbar 修改滚动条的样式，同时使用伪类 :hover 修改滚动条滑块悬停时的样式：




/* 修改垂直滚动条 */
::-webkit-scrollbar {
  width: 10px; /* 修改宽度 */
}
 
/* 修改滚动条轨道背景色 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
 
/* 修改滚动条滑块颜色 */
::-webkit-scrollbar-thumb {
  background-color: #888;
}
 
/* 修改滚动条滑块悬停时的颜色 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}
 
/* 修改滚动条滑块移动时的颜色 */
::-webkit-scrollbar-thumb:active {
  background-color: #333;
}
 
/* 修改滚动条滑块的圆角 */
::-webkit-scrollbar-thumb {
  border-radius: 5px;
}

使用 ::-webkit-scrollbar 修改垂直滚动条的样式，并通过 ::-webkit-scrollbar-thumb 自定义滑块的样式：




/* 修改滚动条的宽度和颜色 */
::-webkit-scrollbar {
  width: 10px;
  background-color: #f1f1f1;
}
 
/* 修改滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px; /* 修改滑块圆角 */
}
 
/* 修改滚动条滑块悬停时的样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

这些方法可以应用于大多数支持 WebKit 内核的浏览器，如 Chrome、Safari 等。请根据实际需求选择适合的方法进行滚动条样式的修改。

- 阅读更多 -

(已更新)2023春节倒计时新款HTML单页源码

System

2024-08-19

所有,css3




<!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 {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #2e3440;
            font-family: Arial, sans-serif;
            color: #d7dae0;
        }
        .countdown {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .timer {
            font-size: 3em;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="countdown">
        <div class="timer">
            <!-- 倒计时显示 -->
        </div>
        <button onclick="countdown()">开始倒计时</button>
    </div>
 
    <script>
        function countdown() {
            const newYear = new Date('2023-02-02T00:00:00'); // 假设为2023年春节
            const timer = document.querySelector('.timer');
 
            function updateClock() {
                const now = new Date();
                const distance = newYear - now;
 
                if (distance < 0) {
                    clearInterval(intervalId);
                    timer.innerHTML = '已经过春节！';
                    return;
                }
 
                const days = Math.floor(distance / (1000 * 60 * 60 * 24));
                const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((distance % (1000 * 60)) / 1000);
 
                timer.innerHTML = `剩余时间: <strong>${days} 天 ${hours} 小时 ${minutes} 分 ${seconds} 秒</strong>`;
            }
 
            updateClock(); // 首次运行
            const intervalId = setInterval(updateClock, 1000);
        }
    </script>
</body>
</html>

这个代码实例提供了一个简单的HTML页面，其中包含了一个倒计时器。当用户点击按钮时，页面上会显示春节剩余的天数、小时、分钟和秒数。代码使用了JavaScript来计算时间差异，并通过CSS为页面元素设置样式。这个实例可以作为创建类似功能

- 阅读更多 -