分类前端技术下的文章

2024-08-21

以下是一个简单的HTML表格，用于包含表单元素，以便用户输入数据，并可通过POST方法提交到服务器。




<!DOCTYPE html>
<html>
<head>
    <title>表格中的Form表单</title>
</head>
<body>
 
<table>
    <form action="/submit_data" method="post">
        <tr>
            <td>姓名：</td>
            <td><input type="text" name="name" /></td>
        </tr>
        <tr>
            <td>年龄：</td>
            <td><input type="number" name="age" /></td>
        </tr>
        <tr>
            <td>邮箱：</td>
            <td><input type="email" name="email" /></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="提交" /></td>
        </tr>
    </form>
</table>
 
</body>
</html>

在这个例子中，表格 (<table>) 包含了一个表单 (<form>)，表单内部有三个输入字段 (<input>) 分别用于收集用户的姓名、年龄和邮箱。表单的 action 属性指定了提交数据的服务器地址，method 属性设置为 "post" 表示提交方式是POST。最后一个输入字段是一个提交按钮 (<input type="submit">)，用户点击它将数据发送到服务器。

System

2024-08-21

所有,html




<template>
  <v-md-editor
    v-model="text"
    :disabled-menus="[]"
    @preview="handlePreview"
  />
</template>
 
<script setup lang="ts">
import { ref } from 'vue';
import VMarkdownEditor from '@/components/v-md-editor/v-md-editor.vue';
 
const text = ref('这是一个Markdown编辑器的示例文本。');
 
const handlePreview = (html: string) => {
  console.log('Markdown 转换后的 HTML:', html);
  // 在这里可以做其他的处理，比如展示预览
};
</script>

这个示例展示了如何在Vue 3项目中使用v-md-editor组件，并且如何在用户触发预览时获取Markdown转换后的HTML。这个功能对于需要在线显示用户输入的Markdown内容的应用程序非常有用。

- 阅读更多 -

7.JavaWeb&HTML：构建数字世界的语言和结构

System

2024-08-21

所有,html




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数字世界的门</title>
    <style>
        body {
            background-color: #F3F3F3;
            color: #333333;
            font-family: 'Arial', sans-serif;
            margin: 20px;
        }
        h1 {
            color: #005799;
            text-align: center;
        }
        p {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>数字世界的门</h1>
    <p>在这个数字世界里，你将体验编程的乐趣。</p>
    <p>点击下方的链接开始你的编程之旅：</p>
    <ul>
        <li><a href="https://www.codecademy.com/" target="_blank">Codecademy</a> - 在线编程学习平台</li>
        <li><a href="https://www.coursera.org/" target="_blank">Coursera</a> - 来自世界顶级大学的在线课程</li>
        <li><a href="https://www.edx.org/" target="_blank">edX</a> - 来自世界顶级大学的在线课程</li>
    </ul>
</body>
</html>

这段代码展示了如何在HTML中创建一个简单的页面，其中包括标题、段落和超链接列表，同时还包含了内联样式来增强页面的视觉效果。这是一个入门级的例子，展示了如何将HTML、CSS和链接结合在一起，构建一个基本的交互式数字世界的入口。

- 阅读更多 -

HBuilder 创建html无法运行预览404

System

2024-08-21

所有,html

报错解释：

HBuilder 创建的 HTML 文件无法运行预览时出现 404 错误通常意味着找不到请求的资源。这可能是因为文件没有正确部署到服务器，或者文件的路径不正确。

解决方法：

确认文件路径：检查文件是否在正确的目录中。如果是本地文件，确保文件的位置与你在浏览器中输入的URL路径相匹配。
检查服务器配置：如果你正在使用本地服务器进行预览，确保服务器正在运行，并且配置正确。
检查文件名：确保文件名没有拼写错误，并且服务器有权限访问该文件。
检查URL格式：如果是在线网站，确保URL格式正确，例如协议（http://或https://）、域名、端口（如果非标准端口）和路径。
清除缓存和Cookies：有时浏览器缓存可能导致问题，清除缓存和Cookies后再尝试。
检查HBuilder设置：确保HBuilder的设置中正确配置了服务器信息。

如果以上步骤无法解决问题，可以尝试重启HBuilder，或者查看HBuilder的日志文件获取更多信息。

System

2024-08-21

所有,html




<!DOCTYPE html>
<html>
<head>
    <title>Vue 初识</title>
    <!-- 引入 Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.5/dist/vue.js"></script>
</head>
<body>
    <!-- 绑定 Vue 的容器 -->
    <div id="app">
        <!-- 条件渲染 -->
        <div v-if="type === 'A'">
            A 类信息
        </div>
        <div v-else-if="type === 'B'">
            B 类信息
        </div>
        <div v-else-if="type === 'C'">
            C 类信息
        </div>
        <div v-else>
            其他类信息
        </div>
 
        <!-- 文本插值 -->
        <p>{{ message }}</p>
 
        <!-- HTML 插值，注意：不建议使用，可能会引起XSS攻击 -->
        <div v-html="rawHtml"></div>
 
        <!-- 事件绑定 -->
        <button v-on:click="sayHello">点击我</button>
    </div>
 
    <script>
        // 创建 Vue 实例
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                rawHtml: '<strong>Bold Message</strong>',
                type: 'A' // 根据这个属性来切换条件渲染
            },
            methods: {
                sayHello: function() {
                    alert('Hello, Vue!');
                }
            }
        });
    </script>
</body>
</html>

这段代码展示了如何使用Vue.js创建一个简单的应用，包括条件渲染、文本插值、HTML插值和事件绑定。注意，在实际开发中应避免使用v-html，因为它可能会引入XSS攻击风险。

- 阅读更多 -

分析 JS 与 CSS 是否阻塞 DOM 的渲染和解析

System

2024-08-21

所有,javascript

在浏览器中，JavaScript 和 CSS 的加载可能会阻塞 DOM 的渲染和解析。这是因为浏览器为了避免出现无样式内容的闪烁（FOUC - Flash of Unstyled Content）或无结构内容的空白屏，会在解析完 HTML 之后，立即渲染出 DOM，然后才执行 CSS 和 JavaScript 的下载及执行。

解决这个问题的关键是减少 JavaScript 和 CSS 文件的体积，使用异步加载（例如通过动态创建 <script> 或 <link> 标签），并且将它们放在文档的底部，接近 </body> 标签处。

以下是一个简单的示例，展示了如何将 CSS 和 JavaScript 文件置于底部加载：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 样式表置于头部但设置为异步加载 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 页面内容 -->
    <div>
        <h1>Hello World</h1>
    </div>
 
    <!-- JavaScript 文件置于底部 -->
    <script src="script.js" async></script>
</body>
</html>

在这个例子中，CSS 文件会阻塞 DOM 的渲染，但不会阻塞 JavaScript 的加载，因为我们使用了 async 属性。JavaScript 文件置于页面底部，不会阻塞 DOM 的解析，而且它会在文档加载完成后执行。这样可以提升页面的渲染性能。

- 阅读更多 -

Js——时间戳和普通日期（年月日）的相互转换

System

2024-08-21

所有,javascript

在JavaScript中，可以使用内置的Date对象来进行时间戳和普通日期（年月日）的互相转换。

时间戳转普通日期：




// 假设 timestamp 是一个时间戳（单位：毫秒）
var timestamp = 1609459200000; // 例如：2021-01-01 00:00:00
var date = new Date(timestamp);
var year = date.getFullYear();
var month = date.getMonth() + 1; // 月份是从0开始的
var day = date.getDate();
 
console.log(year, month, day); // 输出：2021 1 1

普通日期转时间戳：




// 假设 year, month, day 分别是年、月、日
var year = 2021;
var month = 1; // 实际月份应该是0-11的数字，1代表1月
var day = 1;
 
// 创建Date对象
var date = new Date(year, month - 1, day); // 注意月份是从0开始的
 
// 获取时间戳
var timestamp = date.getTime(); // 或者使用 date.valueOf() 或者 date.getTime()
 
console.log(timestamp); // 输出：1609459200000

请注意，在JavaScript中，月份是从0开始的，即0代表1月，11代表12月。因此在将年月日转换为Date对象时，月份应该减去1。而从Date对象获取月份时，应该加上1来获取正确的月份值。

- 阅读更多 -

HTML如何让文字底部线条不紧贴在文字下面（既在内容下方又超出内容区域）

System

2024-08-21

所有,html

在HTML中，要让文字底部的线条不紧贴文字下方，可以通过在文字外部添加一个线条元素，并通过CSS样式来调整其位置。以下是一个简单的例子：

HTML:




<div class="text-container">
  <div class="text">这里是文本内容</div>
  <div class="line"></div>
</div>

CSS:




.text-container {
  position: relative;
}
 
.text {
  /* 文本样式 */
}
 
.line {
  position: absolute;
  bottom: 0; /* 线条位于容器底部 */
  width: 100%; /* 线条宽度与容器宽度相同 */
  height: 2px; /* 线条高度 */
  background-color: black; /* 线条颜色 */
  margin-top: 5px; /* 文字和线条之间的间隔 */
}

在这个例子中，.text-container 是文本和线条的容器，.text 是包含文本的元素，.line 是线条元素。通过设置 .line 的 bottom 属性为 0，并且通过 margin-top 给文本和线条之间留出间隔，可以实现线条在文本内容区域之上、但又不紧贴文本内容的效果。

System

2024-08-21

所有,html

在使用 Element Plus 的 el-date-picker 组件时，若要将日期控件的语言换成中文，可以通过设置 locale 属性来实现。Element Plus 支持多语言，默认是使用英文。

以下是一个简单的例子，展示如何将日期控件的语言设置为中文：




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Date Picker Example</title>
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://unpkg.com/element-plus"></script>
  <script>
    const { createApp } = Vue;
    const { ElDatePicker } = ElementPlus;
 
    createApp({
      components: {
        'el-date-picker': ElDatePicker,
      },
    }).use(ElementPlus, {
      locale: ElementPlus.lang.zhCn,
    }).mount('#app');
  </script>
</head>
<body>
  <div id="app">
    <el-date-picker
      v-model="value"
      type="date"
      placeholder="选择日期"
      :locale="ElementPlus.lang.zhCn">
    </el-date-picker>
  </div>
</body>
</html>

在这个例子中，我们通过 ElementPlus.lang.zhCn 引入了中文语言包，并通过 :locale 属性将其传递给 el-date-picker 组件。这样，日期控件就会显示为中文界面。

- 阅读更多 -

html 内外边距区别以及解释

System

2024-08-21

所有,html

HTML中的内边距(padding)和外边距(margin)是CSS中两个非常重要的属性，它们用于控制元素与其他元素之间的空间。

内边距（padding）: 内边距是元素边界内部的空间，添加内边距不会影响元素在页面中的总体大小，只是会增加了元素的内容区域。

外边距（margin）: 外边距是元素边界外部的空间，添加外边距会影响元素在页面中的总体大小，根据CSS盒模型，外边距还会影响周围元素的布局。

解释和示例代码：




<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  padding: 20px; /* 内边距 */
  margin: 30px;  /* 外边距 */
}
</style>
</head>
<body>
 
<div class="box">Box with padding and margin</div>
 
</body>
</html>

在这个例子中，.box类定义了一个100x100像素的蓝色方块，并且设置了20像素的内边距和30像素的外边距。这意味着该方块的实际内容区域会比100x100像素大20像素（因为内边距在内容区域内部），整个元素（包括边界和内边距）将比100x100像素大20像素（因为外边距在边界外部），总共会增加100像素的大小。

- 阅读更多 -