Html常用代码
文章目录
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