当前位置： 首页 > article >正文

Html常用代码

article 2026/3/22 5:01:28

Html常用代码

文章目录

  • Html常用代码
  • 1-常用的Html代码
    • 1-Html模板
  • 2-快速部署Live-Server
    • 1-Windows系统
      • 步骤 1：安装 Node.js
      • 步骤 2：安装 `live - server`
      • 步骤 3：使用 `live - server` 运行本地项目
    • 2-Mac系统
      • 步骤 1：安装 Node.js
      • 步骤 2：安装 `live - server`
      • 步骤 3：使用 `live - server` 运行本地项目
      • 注意事项

1-常用的Html代码

1-Html模板

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>XXXXX</title><link rel="stylesheet" href="styles.css"></head><body><header><nav><div class="logo">XXXX</div><ul class="nav-links"><li><a href="#">首页</a></li><li><a href="#trainers">item1</a></li><li><a href="#pricing">item2</a></li><li><a href="#">item3</a></li></ul></nav></header><section id="trainers1" class="trainers-section">XXXXX</section><section id="trainers2" class="trainers-section">XXXXX</section><footer><p>© 2025 XXXXX. 保留所有权利</p></footer></body>
</html>

2-快速部署Live-Server

live - server 是一个轻量级的开发服务器，具备实时重新加载功能，能够在文件发生变化时自动刷新浏览器，有助于提高开发效率。以下分别介绍在 Windows 和 macOS 系统上快速安装 live - server 并使用它运行本地项目的详细步骤。

1-Windows系统

步骤 1：安装 Node.js

live - server 是基于 Node.js 的工具，因此首先需要安装 Node.js。

  • 访问 Node.js 官方网站，下载适用于 Windows 的安装包。
  • 运行安装包，按照安装向导的提示完成安装。在安装过程中，可以保持默认设置。
  • 安装完成后，打开命令提示符（CMD）或 PowerShell，输入以下命令检查 Node.js 和 npm（Node.js 包管理器）是否安装成功：
node -v
npm -v

如果分别输出版本号，则说明安装成功。

步骤 2：安装 live - server

在命令提示符或 PowerShell 中输入以下命令来全局安装 live - server：

npm install -g live-server

-g 表示全局安装，这样在系统的任何位置都可以使用 live - server 命令。

步骤 3：使用 live - server 运行本地项目

  • 打开命令提示符或 PowerShell，使用 cd 命令切换到本地项目所在的目录。例如，如果项目文件夹在 D:\myproject，则输入：
cd D:\myproject
  • 进入项目目录后，输入以下命令启动 live - server：
live-server
  • 启动成功后，live - server 会自动在默认浏览器中打开项目，并监听文件的变化。当项目中的文件发生更改时，浏览器会自动刷新。

2-Mac系统

步骤 1：安装 Node.js

  • 可以使用 Homebrew 来安装 Node.js。如果尚未安装 Homebrew，可以在终端中执行以下命令进行安装：
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  • 安装 Homebrew 后，在终端中输入以下命令安装 Node.js：
brew install node
  • 安装完成后，在终端中输入以下命令检查 Node.js 和 npm 是否安装成功：
node -v
npm -v

步骤 2：安装 live - server

在终端中输入以下命令全局安装 live - server：

npm install -g live-server

步骤 3：使用 live - server 运行本地项目

  • 打开终端，使用 cd 命令切换到本地项目所在的目录。例如，如果项目文件夹在 /Users/username/myproject，则输入：
cd /Users/username/myproject
  • 进入项目目录后，输入以下命令启动 live - server：
live-server
  • 启动成功后，live - server 会自动在默认浏览器中打开项目，并监听文件的变化。当项目中的文件发生更改时，浏览器会自动刷新。

注意事项

  • 确保项目中包含一个 index.html 文件，因为 live - server 默认会加载该文件。
  • 如果项目需要特定的端口，可以使用 --port 选项指定端口号，例如：
live-server --port=8080

相关文章：

Html常用代码

Html常用代码 文章目录 Html常用代码1-常用的Html代码1-Html模板 2-快速部署Live-Server1-Windows系统步骤 1&#xff1a;安装 Node.js步骤 2&#xff1a;安装 live - server步骤 3&#xff1a;使用 live - server 运行本地项目 2-Mac系统步骤 1&#xff1a;安装 Node.js步骤 2…...

编程日记 2025/7/8 21:22:28

c++中的一些控制符

控制符在<iomanip>头文件里 一、设置显示小数精度 &#xff1a;setprecision() float A3.1234&#xff1b; 默认有效位为6位&#xff0c;steprecision(3)→设置有效位为3位 【3.12】 可以与fixed搭配用&#xff0c;cout<<fixed<<setprecision(3)<&l…...

编程日记 2026/3/13 20:53:46

Go语言里面的堆跟栈 + new 和 make + 内存逃逸 + 闭包

在 Go 语言中&#xff0c;堆&#xff08;Heap&#xff09;和栈&#xff08;Stack&#xff09;是内存管理中的两个重要概念&#xff0c;它们在内存分配、数据存储和使用场景等方面存在明显差异。 栈&#xff08;Stack&#xff09; 栈是一种具有后进先出&#xff08;LIFO&#…...

编程日记 2025/7/8 0:33:31

蓝桥备赛（11）- 数据结构、算法与STL

一、数据结构 1.1 什么是数据结构&#xff1f; 在计算机科学中&#xff0c;数据结构是一种 数据组织、管理和存储的格式。它是相互之间存在一种 或多种特定关系的数据元素的集合。 ---> 通俗点&#xff0c;数据结构就是数据的组织形式 &#xff0c; 研究数据是用什么方…...

编程日记 2026/3/13 10:40:40

react 19版中路由react-router-dom v7版的使用

路由的安装&#xff1a; npm install react-router-dom在src目录下建一个router文件夹 在router文件夹里面建一个index.tsx index.tsx内容&#xff1a; import React from react; import {BrowserRouter as Router,Routes,Route,Link } from react-router-dom; import ManuLi…...

编程日记 2025/7/9 16:19:51

WPS工具栏添加Mathtype加载项

问题描述&#xff1a; 分别安装好WPS和MathType之后&#xff0c;WPS工具栏没直接显示MathType工具&#xff0c;或者是前期使用正常&#xff0c;由于WPS更新之后MathType工具消失&#xff0c;如下图 解决办法 将文件“MathType Commands 2016.dotm”和“MathPage.wll”从Matht…...

编程日记 2026/3/15 9:33:18

Tauri+React+Ant Design跨平台开发环境搭建指南

TauriReactAnt Design跨平台开发环境搭建指南 一、环境配置与工具链搭建 1.1 基础环境准备 必备组件&#xff1a; Rust工具链&#xff08;v1.77&#xff09;&#xff1a; curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh Node.js LTS&#xff08;v20.11.1&a…...

编程日记 2025/10/23 4:26:37

PDF转JPG（并去除多余的白边）

首先&#xff0c;手动下载一个软件&#xff08;poppler for Windows&#xff09;&#xff0c;下载地址&#xff1a;https://github.com/oschwartz10612/poppler-windows/releases/tag/v24.08.0-0 否则会出现以下错误&#xff1a; PDFInfoNotInstalledError: Unable to get pag…...

编程日记 2026/3/16 22:46:06

std::string的模拟实现

目录 string的构造函数 无参数的构造函数 根据字符串初始化 用n个ch字符初始化 用一个字符串的前n个初始化 拷贝构造 用另一个string对象的pos位置向后len的长度初始化 [ ]解引用重载 迭代器的实现 非const版本 const版本 扩容reserve和resize reserve resize p…...

编程日记 2026/3/19 10:10:11

wordpress自定the_category的输出结构

通过WordPress的过滤器the_category来自定义输出内容。方法很简单&#xff0c;但是很实用。以下是一个示例代码&#xff1a; function custom_the_category($thelist, $separator , $parents ) {// 获取当前文章的所有分类$categories get_the_category();if (empty($categ…...

编程日记 2026/1/21 11:20:43

doris: Oracle

Apache Doris JDBC Catalog 支持通过标准 JDBC 接口连接 Oracle 数据库。本文档介绍如何配置 Oracle 数据库连接。 使用须知​ 要连接到 Oracle 数据库&#xff0c;您需要 Oracle 19c, 18c, 12c, 11g 或 10g。 Oracle 数据库的 JDBC 驱动程序&#xff0c;您可以从 Maven 仓库…...

编程日记 2026/1/24 1:18:36

mysql中什么机制保证宕机数据恢复

MySQL 通过多种机制来保证在宕机或意外崩溃时数据的完整性和可恢复性。这些机制主要包括 事务日志、崩溃恢复 和 数据持久化 等。以下是 MySQL 中保证数据恢复的核心机制： 1. 事务日志（Transaction Log） 事务日志是 MySQL 实现数据恢复的核心机制之一，主要包括 Redo Log（…...

编程日记 2026/1/27 22:58:10

前端面试技术性场景题

87.场景面试之大数运算&#xff1a;超过js中number最大值的数怎么处理 在 JavaScript 中&#xff0c;Number.MAX_SAFE_INTEGER&#xff08;即 2^53 - 1&#xff0c;即 9007199254740991&#xff09;是能被安全表示的最大整数。超过此值时&#xff0c;普通的 Number 类型会出现…...

编程日记 2025/7/8 22:39:03

解决CentOS 8.5被恶意扫描的问题

CentOS 8 官方仓库已停止维护（EOL），导致一些常用依赖包如fail2ban 无法正常安装。 完整解决方案： 一、问题根源 CentOS 8 官方仓库已停更：2021 年底 CentOS 8 停止维护，默认仓库的包可能无法满足依赖关系。EPEL 仓库兼容性：EPEL 仓库可能未适配 CentOS 8.5 的旧版本依赖…...

编程日记 2025/4/21 4:20:01

探秘基带算法：从原理到5G时代的通信变革【四】Polar 编解码（二）

文章目录 2.3.3 极化编码巴氏参数与信道可靠性比特混合生成矩阵编码举例 2.3.4 极化译码最小单元译码串行抵消译码&#xff08;SC译码&#xff09;算法SCL译码算法 2.3.5 总结**Polar 码的优势****Polar 码的主要问题****Polar 码的应用前景** 2.3.6 **参考文档** 本博客为系列…...

编程日记 2026/3/16 10:57:40

机器学习准备工作

机器学习准备工作 机器学习概述常见算法动手实践 深度学习基础框架应用领域 数学基础线性代数概率论和统计学微积分 编程基础Python基础数据处理工具 项目实战入门1. Scikit-learn 示例项目2. TensorFlow/Keras 入门项目3. Kaggle 入门竞赛 进阶1. PyTorch 官方教程2. MMDetect…...

编程日记 2025/7/8 19:19:50

汽车智能钥匙中PKE低频天线的作用

PKE&#xff08;Passive Keyless Entry&#xff09;即被动式无钥匙进入系统&#xff0c;汽车智能钥匙中PKE低频天线在现代汽车的智能功能和安全保障方面发挥着关键作用&#xff0c;以下是其具体作用&#xff1a; 信号交互与身份认证 低频信号接收&#xff1a;当车主靠近车辆时…...

编程日记 2026/3/16 10:44:16

Codepen和tailwindcss 进行UI布局展示

html <html lang"zh"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>设备管理仪表盘</title><script src"https://cdn.tailw…...

编程日记 2025/7/8 13:44:54

准备好了数据集之后，如何在ubuntu22.04上训练一个yolov8模型。

在Ubuntu 22.04上训练YOLOv8模型的步骤如下&#xff1a; 1. 安装依赖 首先&#xff0c;确保系统已安装Python和必要的库。 sudo apt update sudo apt install python3-pip python3-venv2. 创建虚拟环境 创建并激活虚拟环境&#xff1a; python3 -m venv yolov8_env source…...

编程日记 2026/3/14 22:37:08

集合框架、Collection、list、ArrayList、Set、HashSet和LinkedHashSet、判断两个对象是否相等

DAY7.1 Java核心基础 集合框架 Java 中很重要的一个知识点&#xff0c;实际开发中使用的频录较高&#xff0c;Java 程序中必备的模块 集合就是长度可以改变&#xff0c;可以保存任意数据类型的动态数组 最上层是一组接口&#xff0c;接下来是接口的实现类&#xff0c;第三层…...

编程日记 2026/3/18 19:14:24

宝塔 Linux 计划任务中添加运行项目网站PHP任务-定时任务

一、指定php版运行&#xff0c; cd /www/wwwroot/www.xxx.com/ && /www/server/php/56/bin/php think timedtasks start >> /tmp/timedtasks.log 2>&1 二、不指定php版 cd /www/wwwroot/www.xxx.com/ && php think timedtasks start >> …...

编程日记 2026/2/9 6:51:58

JDK ZOOKEEPER KAFKA安装

JDK17下载安装 mkdir -p /usr/local/develop cd /usr/local/develop 将下载的包上传服务器指定路径 解压文件 tar -zxvf jdk-17.0.14_linux-x64_bin.tar.gz -C /usr/local/develop/ 修改文件夹名 mv /usr/local/develop/jdk-17.0.14 /usr/local/develop/java17 配置环境变量…...

编程日记 2026/3/16 0:26:30

c++雅兰亭库 (yalantinglibs) 介绍及使用(序列化、json和结构体转换、协程

c雅兰亭库 (yalantinglibs) 介绍及使用(序列化、json和结构体转换、协程)-CSDN博客 雅兰亭库(yalantinglibs)介绍 雅兰亭库&#xff0c;名字很优雅&#xff0c;也很强大。它是阿里开源的一个现代C基础工具库的集合, 现在包括 struct_pack, struct_json, struct_xml, struct_yam…...

编程日记 2025/10/28 17:21:14

深度融合，智领未来丨zAIoT 全面集成 DeepSeek，助力企业迎接数据智能新时代

前言 Introduction 在数字化浪潮汹涌澎湃的当下&#xff0c;数据智能成为企业破局与创新的关键驱动力。zAIoT 作为云和恩墨面向 AIData 时代推出的数据智能平台软件&#xff0c;凭借其全面且强大的“采存算用”一体化功能体系&#xff0c;正在为航空航天、工业制造等领域和态势…...

编程日记 2026/3/21 11:17:29

类和对象—多态—案例2—制作饮品

案例描述&#xff1a; 制作饮品的大致流程为&#xff1a;煮水-冲泡-倒入杯中-加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作产品基类&#xff0c;提供子类制作咖啡和茶叶 思路解析&#xff1a; 1. 定义抽象基类 - 创建 AbstractDrinking 抽象类&#xff0c;该类…...

编程日记 2026/3/15 22:35:16

VSCode 配置优化指南：打造高效的 uni-app、Vue2/3、JS/TS 开发环境

VSCode 配置优化指南，适用于 uni-app、Vue2、Vue3、JavaScript、TypeScript 开发，包括插件推荐、设置优化、代码片段、调试配置等，确保你的开发体验更加流畅高效。 1. 安装 VSCode 如果你还未安装 VSCode，可前往 VSCode 官网 下载最新版并安装。 2. 安装推荐插件 (1) Vue…...

编程日记 2025/11/6 15:50:34

低代码平台的后端架构设计与核心技术解析

引言&#xff1a;低代码如何颠覆传统后端开发&#xff1f; 在传统开发模式下&#xff0c;一个简单用户管理系统的后端开发需要&#xff1a; 3天数据库设计5天REST API开发2天权限模块对接50个易出错的代码文件 而现代低代码平台通过可视化建模自动化生成&#xff0c;可将开发…...

编程日记 2026/2/20 6:29:32

Redis中多大的Key算热key，该如何解决

在 Redis 中&#xff0c;“热key” 是指频繁访问的 Redis 键。这些键通常会导致 Redis 服务器的性能下降&#xff0c;甚至可能导致 Redis 服务不可用。热key 的大小是相对的&#xff0c;通常来说&#xff0c;以下几个因素可能导致一个 Redis 键成为热key&#xff1a; 访问频率…...

编程日记 2025/11/25 4:33:25

机器学习数学基础：43.外生变量与内生变量

外生变量与内生变量&#xff1a;模型中的因果角色 在因果模型&#xff08;像结构方程模型、回归分析这类&#xff09;里&#xff0c;外生变量和内生变量是用来区分变量来源和相互关系的重要概念。下面从定义、实例、差异以及应用场景四个方面来详细介绍&#xff1a; 一、定义…...

编程日记 2025/12/24 2:34:22

单元测试与仿真程序之间的选择

为什么写这篇文章 现在的工作需求&#xff0c;让我有必要总结和整理一下。 凡事都有适用的场景。首先这里我需要提示一下&#xff0c;这里的信息&#xff0c;可能并不普适。 但是可以肯定一点的是&#xff0c;有些人&#xff0c;不论做事还是写书&#xff0c;上下文还没有交待…...

编程日记 2025/12/17 0:30:53