System 发布的文章

2024-08-23

HTML5标签和属性的列表是非常庞大的，因此我无法在一篇文章中全部涵盖。但我可以提供一些常用的HTML5标签和一些常用属性的例子。

常用HTML5标签:

<header>：页面或区段的头部
<nav>：导航链接
<section>：文档中的一个区段
<article>：独立的文章内容
<aside>：侧边内容
<footer>：页面或区段的底部
<details>：展开或收起内容来提供细节
<dialog>：对话框或窗口
<figure>：媒体内容和它的标题
<mark>：需要标记的文本
<time>：日期或时间
<canvas>：绘图
<video>：视频
<audio>：音频
<source>：媒体资源，用于<video>和<audio>
<progress>：任务进度
<meter>：已知范围内的数值
<datalist>：输入域的预定义选项
<keygen>：表单密钥生成器
<output>：不是输入的结果

常用HTML5属性:

placeholder：输入字段的占位文本
required：表单元素需要输入才能提交表单
pattern：用于输入验证的正则表达式
min 和 max：数值输入的最小值和最大值
step：数值输入的合法间隔
autofocus：页面加载时自动聚焦
multiple：允许输入域有多个值
form：将输入域关联到特定表单

例子:




<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Example</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <article>
            <header>
                <h1>Article Title</h1>
                <time datetime="2021-01-01">January 1st, 2021</time>
            </header>
            <p>This is an article about something interesting...</p>
            <footer>
                <mark>Highlighted text</mark>
            </footer>
        </article>
    </section>
    <aside>
        <details>
            <summary>Click to see details</summary>
            <p>This is the detail content.</p>
        </details>
    </aside>
    <footer>
        <p>Copyright &copy; 2021</p>
    </footer>
</body>
</html>

这个例子展示了一些常用的HTML5标签和属性，以及它们的基本用法。

elements-Plus Popover 弹出框自定义样式

2024-08-23

在Vue.js中使用element-plus的Popover组件时，可以通过slot和CSS来自定义弹出框的样式。以下是一个简单的例子，展示如何自定义Popover的样式：

使用默认插槽来自定义内容。
使用reference插槽来指定触发Popover的元素。
使用CSS来覆盖默认的Popover样式。




<template>
  <el-popover
    ref="popover"
    placement="top"
    width="200"
    trigger="hover"
    content="这是一个自定义样式的弹出框"
  >
    <template #reference>
      <el-button>悬停打开弹出框</el-button>
    </template>
 
    <template #default>
      <div class="custom-popover">
        自定义内容
      </div>
    </template>
  </el-popover>
</template>
 
<script>
export default {
  // 组件逻辑
};
</script>
 
<style>
/* 自定义弹出框样式 */
.custom-popover {
  background-color: #f9f9f9;
  color: #666;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 10px;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
}
 
/* 覆盖Popover箭头样式 */
.el-popover .popper__arrow {
  display: none; /* 如果不需要箭头，可以隐藏它 */
}
</style>

在这个例子中，.custom-popover 类定义了弹出框的自定义样式，.el-popover .popper__arrow 类则用于隐藏默认箭头，因为箭头可能与自定义内容的样式冲突。您可以根据需要调整CSS样式来达到所需的外观效果。

js获取ios安全区域的高度

2024-08-23

在iOS设备上，"安全区域"是指屏幕上不会被操作系统视图（如状态栏）覆盖的区域。你可以通过JavaScript和CSS来处理这个问题，使得内容不会被遮挡。

在WebKit中，提供了一个名为"env()"的CSS函数，允许开发者访问环境变量，包括安全区域。然而，这需要在支持的浏览器中使用，并且目前只有Safari支持。

在JavaScript中，你可以使用window的visualViewport属性来获取视口的信息，但是这不会直接告诉你安全区域的高度。不过，你可以通过检测视口的高度与设备屏幕的高度之间的差异来大致估算出安全区域的高度。

以下是一个JavaScript示例代码，用于获取iOS设备上状态栏的高度，这通常是安全区域的高度：




function getStatusBarHeight() {
  // 设备屏幕高度减去视口高度，即为状态栏的高度
  return window.screen.height - window.innerHeight;
}
 
console.log('状态栏高度（大致等同于安全区域高度）:', getStatusBarHeight());

请注意，这个方法不是100%准确的，因为它假设状态栏的高度就是安全区域的高度，这在有些情况下可能不正确。而且，这个方法不考虑顶部的安全区域（如iPhone X及以上机型）和底部的安全区域，只考虑了状态栏的高度。

如果你想要更精确地处理安全区域，可以使用WebKit提供的CSS的"env()"函数，并结合媒体查询来处理不同的设备和屏幕方向。但是，这通常需要结合服务器端的渲染或者JavaScript动态修改CSS的能力。

el-input 输入框相关校验及使用

2024-08-23

在Vue.js中，使用Element UI库的el-input组件进行输入时，可以利用其提供的验证规则（rules）来实现验证功能。以下是一个简单的例子，展示了如何在el-form和el-input中使用验证规则：




<template>
  <el-form :model="form" :rules="rules" ref="form" label-width="100px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('form')">提交</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script>
  export default {
    data() {
      return {
        form: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 10, message: '用户名长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 15, message: '密码长度在 6 到 15 个字符', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('提交成功!');
          } else {
            console.log('验证失败');
            return false;
          }
        });
      }
    }
  };
</script>

在这个例子中，我们定义了一个带有用户名和密码的表单，并为每个输入框设置了验证规则。当用户尝试提交表单时，会触发submitForm方法，该方法会调用表单的validate方法来进行验证。如果验证通过，会弹出一个提示框表示成功，否则会在控制台输出验证失败信息。

js获取图片原始宽高

2024-08-23

在JavaScript中，我们可以使用Image对象的naturalWidth和naturalHeight属性来获取图片的原始宽度和高度。下面是两种不同的实现方法：

方法一：




var image = new Image();
image.src = 'image.jpg';
image.onload = function() {
  var width = this.naturalWidth;
  var height = this.naturalHeight;
  console.log('图片的原始宽度：', width);
  console.log('图片的原始高度：', height);
};

方法二：




var image = document.createElement('img');
image.src = 'image.jpg';
image.addEventListener('load', function() {
  var width = this.naturalWidth;
  var height = this.naturalHeight;
  console.log('图片的原始宽度：', width);
  console.log('图片的原始高度：', height);
});

这两种方法都首先创建一个Image对象或img元素，并设置其src属性为要加载的图片的URL。然后，我们使用onload事件或addEventListener方法来监听图片加载完成的事件。在事件处理程序中，我们可以使用this.naturalWidth和this.naturalHeight来获取图片的原始宽度和高度。

编程笔记 html5&css&js 012 HTML分块

2024-08-23

在HTML中，分块通常意味着将页面内容划分为不同的部分，每个部分可以通过HTML元素进行标记。以下是一个简单的HTML分块示例：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分块示例</title>
    <style>
        .section {
            padding: 20px;
            margin: 10px 0;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <div class="section">
        <h2>第一部分标题</h2>
        <p>第一部分的内容...</p>
    </div>
    <div class="section">
        <h2>第二部分标题</h2>
        <p>第二部分的内容...</p>
    </div>
    <div class="section">
        <h2>第三部分标题</h2>
        <p>第三部分的内容...</p>
    </div>
</body>
</html>

在这个例子中，我们使用了<div>元素来创建分块布局，并通过CSS为.section类添加了边框和内边距。每个<div class="section">都是页面上的一个独立区块。这种方法可以用于构建更复杂的页面结构。

使用 Next SEO 在 Next.js 中管理 SEO

2024-08-23




import Head from 'next/head';
import { NextSeo } from 'next-seo';
 
export default function HomePage() {
  const title = '首页';
  const description = '这是首页的描述。';
 
  return (
    <>
      <NextSeo
        title={title}
        description={description}
        openGraph={{
          title: title,
          description: description,
          url: 'https://yourdomain.com',
          images: [
            {
              url: 'https://yourdomain.com/static/home-image.jpg',
              width: 800,
              height: 420,
              alt: '主页图片',
            },
          ],
        }}
        twitter={{
          handle: '@your_twitter',
          site: '@your_twitter',
          cardType: 'summary_large_image',
        }}
      />
      <Head>
        <meta name="msapplication-TileColor" content="#da532c" />
        <meta name="theme-color" content="#ffffff" />
      </Head>
      {/* 页面其余内容 */}
    </>
  );
}

这个代码实例展示了如何在一个Next.js应用中使用Next SEO来管理页面的SEO信息。我们定义了一个标题和描述，并且配置了Open Graph和Twitter卡片信息。同时，我们添加了两个meta标签来定制Windows平台的标签和设置应用的主题颜色。

用css搭建一个h5聊天界面

2024-08-23

下面是一个简单的H5聊天界面样式示例，使用了基本的CSS来构建界面。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H5聊天界面</title>
<style>
  body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: Arial, sans-serif;
  }
  .chat-container {
    width: 100%;
    max-width: 500px;
    background-color: #e6e6e6;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
  .chat-header {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
  }
  .message-input {
    width: 100%;
    padding: 10px;
    margin-top: 20px;
  }
  .message-input textarea {
    width: 100%;
    height: 100px;
    resize: none;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
  }
  .message-input button {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border: none;
    background-color: #555;
    color: white;
    cursor: pointer;
    border-radius: 5px;
  }
  .message-container {
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
  }
  .message {
    margin-bottom: 20px;
  }
  .message p {
    margin: 0;
    word-wrap: break-word;
  }
  .message-user {
    text-align: right;
  }
  .message-user p {
    background-color: #555;
    color: white;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 0;
  }
  .message-bot {
    text-align: left;
  }
  .message-bot p {
    background-color: #ddd;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 0;
  }
</style>
</head>
<body>
<div class="chat-container">
  <div class="chat-header">
    <h2>聊天室</h2>
  </div>
  <div class="message-container">
    <!-- 消息列表 -->
  </div>
  <div class="message-input">
    <textarea placeholder="输入消息..."></textarea>
    <button>发送</button>
  </div>
</div>
</body>
</html>

这个例子提供了一个简单的聊天界面框架，你可以根据需要添加JavaScript以实现发送消息、接收消息等功能。

头条案例（基于vue2）

2024-08-23

黑马头条案例是一个典型的新闻类应用，使用Vue.js框架实现。以下是一个简化版的黑马头条案例的代码实现：




<!DOCTYPE html>
<html>
<head>
    <title>Black马头条</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.5/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>Black马头条</h1>
        <div v-for="article in articles" :key="article.id">
            <h2>{{ article.title }}</h2>
            <p>{{ article.summary }}</p>
        </div>
    </div>
 
    <script>
        new Vue({
            el: '#app',
            data: {
                articles: [
                    { id: 1, title: 'Vue.js 2.7发布', summary: 'Vue.js 2.7版本现已发布，它带来了许多性能改进和新功能。' },
                    { id: 2, title: 'Node.js 14.0发布', summary: 'Node.js 14.0正式版已发布，带来了许多新特性和性能改进。' },
                    // ...更多新闻数据
                ]
            }
        });
    </script>
</body>
</html>

这个简单的例子展示了如何使用Vue.js创建一个基本的新闻列表。v-for指令用于循环渲染articles数组中的每篇文章，并通过:key绑定为每篇文章提供一个唯一的key，以助于Vue的渲染系统优化性能。

HTML5 ＜img＞标签

2024-08-23

HTML5 <img> 标签用于在网页中插入图像。

基本语法：




<img src="image_URL" alt="image_description" title="image_title" width="pixels" height="pixels">

参数说明：

src：必需。指定图像的路径。
alt：替代文本，图像不能显示时显示的文本。
title：鼠标悬停时显示的文本。
width和height：图像的宽度和高度，可以只设置其中之一，另一个会按比例缩放。

示例代码：




<img src="image.jpg" alt="Description of the image" title="Image Title" width="500" height="300">

这段代码将在网页上显示一个宽度为500像素，高度为300像素的图像，图像的路径是image.jpg。如果图像无法显示，将显示"Description of the image"文本，鼠标悬停时将显示"Image Title"。