1. 首页
  2. 分类
  3. 所有
前端-第一部分-HTML
System
2024-08-17
所有,html

HTML是用于创建网页的标准标记语言，它指的是超文本标记语言（Hyper Text Markup Language）。HTML不是一种编程语言，而是一种标记语言，标记语言是一套标签，通过这些标签可以让你的网页包含各种内容，比如文字、图片、视频等。

以下是一些基本的HTML标签和它们的用法：

  1. 标题标签：<h1>到<h6>，<h1>最重要，<h6>最不重要。



<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
  1. 段落标签：<p>



<p>这是一个段落。</p>
  1. 链接标签：<a>



<a href="https://www.example.com">访问Example网站</a>
  1. 图像标签：<img>



<img src="image.jpg" alt="描述文字">
  1. 列表标签：无序列表<ul>和有序列表<ol>，列表项<li>



<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>
 
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
</ol>
  1. 块引用标签：<blockquote>和<q>



<blockquote>
  这是一个块引用。
</blockquote>
 
<q>这是一个短引用。</q>
  1. 表格标签：<table>, <tr>, <th>, <td>



<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</table>
  1. 视频标签：<video>



<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持视频标签。
</video>
  1. 注释标签：<!-- 注释内容 -->



<!-- 这是一个注释 -->
  1. 文档类型声明：在HTML文档的最顶部声明文档类型，有助于浏览器正确显示网页。



<!DOCTYPE html>
  1. 完整HTML页面的基本结构：



<!DOCTYPE html>
<html>
<head>
  <title>页面标题</title>
</head>
<body>
  <h1>这是一个标题</h1>
  <p>这是一个段落。</p>
  <!-- 更多内容 -->
</body>
</html>

以上就是HTML的一些基本知识和用法，你可以根据需要学习更多的HTML标签和相关的CSS（层叠样式表）和JavaScript（一种直译式脚本语言）来增强网页的功能和交互性。

- 阅读更多 -
用js-插入HTML元素
System
2024-08-17
所有,html

在JavaScript中，插入HTML元素可以通过创建新的元素并使用appendChild或insertBefore方法将它们添加到DOM中。以下是一些示例代码：

插入一个新的元素到某个元素的末尾：




// 创建一个新的div元素
var newDiv = document.createElement('div');
 
// 为新元素添加内容
newDiv.innerHTML = '这是新插入的div元素的内容';
 
// 找到要插入新元素的父元素
var parentElement = document.getElementById('parent');
 
// 在父元素的末尾插入新元素
parentElement.appendChild(newDiv);

插入一个新的元素到某个元素的开头：




// 创建一个新的p元素
var newParagraph = document.createElement('p');
 
// 为新元素添加内容
newParagraph.innerHTML = '这是新插入的p元素的内容';
 
// 找到要插入新元素的父元素
var parentElement = document.getElementById('parent');
 
// 在父元素的开头插入新元素
parentElement.insertBefore(newParagraph, parentElement.firstChild);

使用jQuery插入元素：

如果你使用jQuery库，可以使用$(html).appendTo(selector)或$(html).prependTo(selector)来插入元素。




// 使用jQuery插入一个新的div元素到#parent元素的末尾
$('<div>这是新插入的div元素的内容</div>').appendTo('#parent');
 
// 使用jQuery插入一个新的p元素到#parent元素的开头
$('<p>这是新插入的p元素的内容</p>').prependTo('#parent');

以上代码展示了如何使用原生JavaScript和jQuery两种方式来插入HTML元素。

- 阅读更多 -
vue 打印某个区域的HTML【print-js】
System
2024-08-17
所有,html

要在Vue中使用print-js库来打印特定区域的HTML，首先需要安装print-js：




npm install print-js --save

然后在Vue组件中引入并使用print-js：




import printJS from 'print-js';
 
export default {
  methods: {
    printContent() {
      printJS({
        printable: 'printable-area', // 指定需要打印的区域的ID
        type: 'html', // 指定打印内容的类型
        style: '@page { size: auto;  margin: 0mm; }' // 可以添加打印样式
      });
    }
  }
}

在模板中，确保有一个元素包含需要打印的内容，并设置一个ID：




<template>
  <div>
    <button @click="printContent">打印区域</button>
    <div id="printable-area">
      <!-- 需要打印的内容 -->
    </div>
  </div>
</template>

当用户点击按钮时，printContent方法将被触发，print-js将会打印出printable-area内的HTML内容。

- 阅读更多 -
【HTML实战】把爱心代码放在自己的网站上是一种什么体验？
System
2024-08-17
所有,html

这个问题似乎是在询问将爱心代码放置在自己网站上的体验如何。这里提供一个简单的爱心代码示例，您可以将其添加到自己的网站中：




<!DOCTYPE html>
<html>
<head>
<style>
.heart {
  position: relative;
  width: 100px;
  height: 90px;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123944/heart-transparent.png') no-repeat;
  background-size: cover;
  border-radius: 100px 100px 0 0;
  transform: rotate(-45deg);
  top: 40px;
  left: 40px;
  animation: beat .5s infinite;
}
 
@keyframes beat {
  0% {
    transform: scale(1) rotate(-45deg);
  }
  50% {
    transform: scale(1.1) rotate(-45deg);
  }
  100% {
    transform: scale(1) rotate(-45deg);
  }
}
</style>
</head>
<body>
 
<div class="heart"></div>
 
</body>
</html>

这段代码会在您的网页上创建一个旋转的爱心图案，它会不停地跳动，为访问者带来一些喜悦和关注。这种体验是简单而有趣的，它可以作为一种小型互动元素添加到您的网站上。

- 阅读更多 -
JS实现：计算字符串的字节数（UTF8编码）
System
2024-08-17
所有,javascript

在JavaScript中，可以使用内置的TextEncoder类来计算字符串的字节数（UTF-8编码）。以下是一个简单的函数，用于计算字符串的UTF-8字节数：




function calculateByteSize(str) {
    const encoder = new TextEncoder();
    const uint8Array = encoder.encode(str);
    return uint8Array.length;
}
 
// 示例使用
const str = "Hello, World!";
const byteSize = calculateByteSize(str);
console.log(byteSize); // 输出字符串的字节数

TextEncoder类的encode方法会将字符串转换为UTF-8编码的Uint8Array，然后你可以通过计算数组的长度来得到字节数。

- 阅读更多 -
[SpringBoot+Html]实现简单的文件上传并存储至本地，含前后端代码
System
2024-08-17
所有,html

后端SpringBoot代码：




import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
 
import java.io.File;
import java.io.IOException;
import java.nio.file.Paths;
 
@RestController
public class FileUploadController {
 
    @PostMapping("/upload")
    public String handleFileUpload(@RequestParam("file") MultipartFile file) {
        if (file.isEmpty()) {
            return "文件为空，请选择有效文件上传。";
        }
        try {
            String uploadDirectory = System.getProperty("user.dir") + "/uploads/";
            File directory = new File(uploadDirectory);
            if (!directory.exists()) {
                directory.mkdirs();
            }
            String filePath = uploadDirectory + file.getOriginalFilename();
            file.transferTo(Paths.get(filePath));
            return "文件上传成功：" + filePath;
        } catch (IOException e) {
            e.printStackTrace();
            return "文件上传失败：" + e.getMessage();
        }
    }
}

前端HTML和JavaScript代码：




<!DOCTYPE html>
<html>
<head>
    <title>文件上传示例</title>
</head>
<body>
    <form id="uploadForm" enctype="multipart/form-data">
        <input type="file" name="file" id="file" />
        <button type="button" onclick="uploadFile()">上传文件</button>
    </form>
 
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        function uploadFile() {
            var formData = new FormData($('#uploadForm')[0]);
            $.ajax({
                url: '/upload',
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    alert(response);
                },
                error: function() {
                    alert('文件上传失败');
                }
            });
        }
    </script>
</body>
</html>

在这个例子中，前端使用HTML定义了一个文件上传表单，并通过JavaScript使用FormData对象和Ajax请求发送文件到后端。后端SpringBoot应用通过@RestController和@PostMapping注解处理文件上传请求，并保存文件到服务器的uploads目录下。

- 阅读更多 -
Marked.js - HTML 中直接解析显示 Markdown
System
2024-08-17
所有,html



<!DOCTYPE html>
<html>
<head>
  <title>Marked in the Browser</title>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
  <div id="content"></div>
  <script>
    // 假设 `markdown` 是你想要转换的 Markdown 文本
    var markdown = `
# Markdown 标题
 
这是一个段落。
 
- 列表项一
- 列表项二
 
**粗体文本**
 
[链接](https://example.com)   `;
 
    // 使用 marked 转换 Markdown 到 HTML
    var html = marked(markdown);
 
    // 将转换后的 HTML 内容显示在 id 为 'content' 的元素中
    document.getElementById('content').innerHTML = html;
  </script>
</body>
</html>

这段代码演示了如何在浏览器中使用 marked.js 库将 Markdown 文本转换为 HTML。首先，通过 CDN 引入 marked.js 库。然后定义了一段 Markdown 文本，并使用 marked() 函数将其转换为 HTML 字符串。最后，将转换得到的 HTML 内容通过设置 innerHTML 属性直接插入到页面的指定元素中。

- 阅读更多 -
【JSON2WEB】05 前端开发三件套 HTML CSS JavaScript 速成
System
2024-08-17
所有,html

HTML、CSS 和 JavaScript 是前端开发的三个主要部分。以下是每个部分的简单速成教程。

HTML

定义： 超文本标记语言（Hypertext Markup Language）。

示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落。</p>
</body>
</html>

CSS

定义： 级联样式表（Cascading Style Sheets）。

示例代码：




body {
    font-family: Arial, sans-serif;
    background-color: #f8f8f8;
}
 
h1 {
    color: #333;
    text-align: center;
}
 
p {
    color: #555;
    font-size: 16px;
}

JavaScript

定义： 是一种在浏览器中使用的动态编程语言。

示例代码：




// 改变段落颜色
function changeParagraphColor() {
    document.querySelector('p').style.color = 'red';
}
 
// 当文档加载完成时执行
window.onload = function() {
    document.getElementById('myButton').onclick = changeParagraphColor;
};

在HTML文件中使用这些代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落。</p>
    <button id="myButton">点击我改变颜色</button>
    <script src="script.js"></script>
</body>
</html>

以上代码演示了如何将HTML、CSS和JavaScript文件应用到一个简单的网页中，实现了一个基本的交互功能。

- 阅读更多 -
Html 引入element UI + vue3 报错Failed to resolve component: el-button
System
2024-08-17
所有,html

解释：

这个错误表明Vue 3应用程序在尝试使用el-button组件时失败了，因为Vue 3无法解析这个组件。这通常是因为Element UI没有正确安装或者没有正确地在Vue 3项目中注册。

解决方法：

  1. 确保Element UI与Vue 3兼容。Element UI 2.x不兼容Vue 3，需要使用Element Plus，它是专门为Vue 3设计的。如果你正在使用Element UI，请考虑升级到Element Plus。
  2. 安装Element Plus：



npm install element-plus --save
# 或者
yarn add element-plus
  1. 在你的Vue 3项目中全局或局部注册Element Plus组件。

全局注册（在main.js或main.ts中）：




import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
 
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
  1. 如果你只想在某些组件中使用Element Plus，可以按需导入和注册：



<template>
  <el-button>按钮</el-button>
</template>
 
<script>
import { ElButton } from 'element-plus'
export default {
  components: {
    [ElButton.name]: ElButton,
  },
}
</script>
  1. 确保没有拼写错误，el-button应该是el-button。

如果按照以上步骤操作后仍然出现问题，请检查是否有其他的配置错误或者依赖冲突。

- 阅读更多 -
python 一点flask框架加一点html在本地登录注册
System
2024-08-17
所有,html

下面是一个简单的本地登录注册示例，使用Python的Flask框架和简单的HTML。

首先，安装Flask：




pip install Flask

然后，创建以下代码：




from flask import Flask, render_template, request, redirect, url_for, session
 
app = Flask(__name__)
app.secret_key = 'your_secret_key'
 
users = {
    'admin': 'admin',
    'user': 'password'
}
 
@app.route('/')
def index():
    return render_template('index.html')
 
@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']
        if username in users and users[username] == password:
            session['username'] = username
            return redirect(url_for('home'))
        return 'Login Failed. Please try again.'
    return render_template('login.html')
 
@app.route('/register', methods=['GET', 'POST'])
def register():
    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']
        if username in users:
            return 'User already exists. Please login.'
        users[username] = password
        return redirect(url_for('login'))
    return render_template('register.html')
 
@app.route('/home')
def home():
    if 'username' in session:
        return 'Hello, ' + session['username']
    return redirect(url_for('login'))
 
if __name__ == '__main__':
    app.run(debug=True)

在同一目录下创建templates文件夹，然后在templates文件夹中创建以下HTML文件：

index.html:




<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
</head>
<body>
    <h1>Welcome to the Local Login Registration Example</h1>
    <p>Please <a href="{{ url_for('login') }}">login</a> or <a href="{{ url_for('register') }}">register</a>.</p>
</body>
</html>

login.html:




<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
</head>
<body>
    <h1>Login</h1>
    <form method="post">
        <input type="text" name="username" placeholder="Username" required>
        <input type="password" name="password" placeholder="Password" required>
        <input type="submit" value="Login">
    </form>
</body>
</html>

register.html:




<!DOCTYPE html>
<html>
<head>
    <title>Register</title>
</head>
<body>
    <h1>Register</h1>
    <form method="post">
        <input type="text" name="username" placeholder="Username" required>
        <input type="password" name="password" pl
- 阅读更多 -
Copyright © 2026 Tech Blog
All Right Reserved | 京ICP备19053165号