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

制作一个简单的HTML个人网站

news 2026/2/2 5:37:27

在当今数字化的世界里，拥有一个个人网站已经成为了展示个人品牌、分享作品和信息的必备工具。虽然有各种复杂的内容管理系统（CMS）和平台可以帮助我们快速搭建个人网站，但对于初学者或者想要了解更多技术细节的人来说，从头开始创建一个简单的HTML网站是一个很好的学习与实践的方式。

在这篇文章中，我们将一步步地指导你如何制作一个简单的HTML个人网站。

一、规划和设计

首先，你需要明确你的网站要展示什么内容。考虑你希望在网站上展示的作品、文章、项目、联系方式等。同时，也要考虑网站的布局和设计。你可以使用手绘草图、线框图或者设计工具来帮助你规划网站的结构和设计。

二、创建HTML文件

在你的电脑上创建一个新的文件夹，作为你的网站文件夹。然后在该文件夹中创建一个新的HTML文件。你可以使用任何文本编辑器（如Notepad++、Sublime Text、VS Code等）来创建和编辑HTML文件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的个人网站</title>
</head>
<body><!-- 在这里添加你的内容 --></body>
</html>

三、编写HTML代码

在HTML文件中，你需要编写一些基本的标签来构建你的网站。以下是一个简单的HTML结构示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的个人网站</title><style>body {font-family: Arial, sans-serif;margin: 20px;padding: 20px;}header {text-align: center;padding: 20px;background-color: #f2f2f2;}section {margin-top: 20px;}h2 {color: #333;}p {line-height: 1.6;color: #666;}footer {text-align: center;margin-top: 20px;padding: 10px;background-color: #f2f2f2;}</style>
</head>
<body><header><h1>欢迎来到我的个人网站！</h1><p>这里记录了我的一些个人信息和兴趣爱好。</p></header><section><h2>关于我</h2><p>我是一个热爱编程和设计的人，喜欢探索新技术和创造有趣的项目。</p></section><section><h2>我的兴趣</h2><p>我喜欢编程、读书、旅行和摄影。在空闲时间，我喜欢学习新的技能和玩音乐乐器。</p></section><section><h2>联系方式</h2><p>你可以通过电子邮件联系我：myemail@example.com</p></section><footer><p>&copy; 2024 我的个人网站</p></footer></body>
</html>

 

四、添加内容

在<header>标签中，你可以添加网站的标题、导航栏等。在<main>标签中，你可以添加文章、作品展示等内容。在<footer>标签中，你可以添加版权信息、联系方式等。你可以使用<h1>到<h6>的标题标签来设置不同级别的标题，使用<p>标签来添加段落。

五、添加样式

在<style>标签中，你可以添加CSS样式来美化你的网站。例如，你可以设置字体样式、颜色、边距等。如果你对CSS不熟悉，可以查阅相关的教程和文档来学习更多。

六、保存和预览

保存你的HTML文件，然后在浏览器中打开该文件。你应该能够看到你的个人网站了！你可以根据需要修改和调整代码，以实现你想要的效果。

以上就是制作一个简单的HTML个人网站的基本步骤。当然，这只是一个起点，你可以在此基础上学习更多关于HTML、CSS、JavaScript等前端开发技术的知识，提升你的个人网站的功能和美观度。同时，也可以探索更多的网页设计和开发工具，让你的个人网站更加出色。

 

在HTML文件中，你可以使用以下基本标签来构建网站：

  1. <html>：这是HTML文档的根元素，所有其他HTML元素都是它的子元素。
  2. <head>：这个元素包含了文档的元数据，如标题、字符集、样式和脚本等。
  3. <title>：这个元素定义了浏览器标签栏中显示的标题。
  4. <body>：这个元素包含了网页的所有内容，如文本、图像、超链接、表格、列表等。

以下是一个简单的HTML文件示例，其中包含了这些基本标签：

 

html
 

<!DOCTYPE html> 
<html> 
<head> 
<title>我的个人网站</title> 
</head> 
<body> 
<h1>欢迎来到我的个人网站</h1> 
<p>这是一个简单的个人网站示例。</p> 
<ul> 
<li>关于我</li> 
<li>作品展示</li> 
<li>联系我</li> 
</ul> 
</body> 
</html>
 

在这个示例中，<h1>标签定义了一个一级标题，<p>标签定义了一个段落，<ul>和<li>标签定义了一个无序列表。你可以根据需要添加更多的标签和内容来构建你的个人网站。
 

 
 

HTML文件的基本标签有以下几个作用：
 

  1. <html>：表示整个HTML文档的开始和结束。所有其他HTML元素都包含在这个元素中。
  2. <head>：这个元素包含了文档的元数据，如标题、字符集、样式和脚本等。这些信息不会直接显示给用户看，而是提供给浏览器和搜索引擎使用。
  3. <title>：这个元素定义了浏览器标签栏中显示的标题，也就是网页的标题。它对于SEO（搜索引擎优化）非常重要，因为搜索引擎会使用这个标题来描述网页的内容。
  4. <body>：这个元素包含了网页的所有内容，如文本、图像、超链接、表格、列表等。所有需要在网页上显示给用户看的内容都应该放在这个元素中。
 

除了这些基本标签，HTML还提供了许多其他标签，用于定义各种内容和格式，如段落、标题、列表、表格、图像、链接等。通过合理使用这些标签，可以创建结构清晰、易于阅读和维护的网页。














相关文章：
















制作一个简单的HTML个人网站




在当今数字化的世界里&#xff0c;拥有一个个人网站已经成为了展示个人品牌、分享作品和信息的必备工具。虽然有各种复杂的内容管理系统&#xff08;CMS&#xff09;和平台可以帮助我们快速搭建个人网站&#xff0c;但对于初学者或者想要了解更多技术细节的人来说&#xff0c;从…...






编程日记
2024/1/26 21:07:10



















头歌C语言字符数组




目录 第1关：字符逆序 
任务描述 
相关知识（略） 
编程要求 
测试说明 
第2关：字符统计 
任务描述 
相关知识（略） 
编程要求 
测试说明 
第3关：字符插入 
任务描述 
相关知识（略） 
编程要求 
测试说明 
第4关：字符串处理 
任务描述 
相关知识（略）...






编程日记
2024/1/26 21:06:08



















【mongoDB】文档 CRUD




目录 1.插入文档 
批量插入&#xff1a; 
2.查询文档 
3.更新文档 
4.删除文档 
deleteOne()  
deleteMany() 
findOneAndDelete() 1.插入文档 
可以使用 insert () 方法或者 save() 方法向集合中插入文档 语法如下&#xff1a; db.collection_name.insert(document) collectio…...






编程日记
2024/1/26 21:05:07



















每日一题——LeetCode1337.矩阵中战斗力最弱的K行




方法一 个人方法 排序 
题目要求就是找出每行有多少个1&#xff0c;根据每行1的个数进行排序&#xff0c;但是是把每行在数组中的位置索引进行排序&#xff0c;并返回前k项 
所以先统计每行1的个数&#xff0c;并将数组转化为[index,count]就是索引加个数的数组形式&#xff0c…...






编程日记
2024/1/26 21:03:05



















docker指令存档




目录 
Docker 
1、概念 
2、架构图 
3、安装 
4、Docker怎么工作的&#xff1f; 
5、Docker常用命令 
帮助命令 
镜像命令 
1、查看镜像 
2、帮助命令 
3、搜索镜像 
4、拉取镜像 
5、删除镜像 
容器命令 
1、启动 
2、查看运行的容器 
3、删除容器 
4、启动&停止 
其他命令…...






编程日记
2024/1/26 20:55:58



















Pandas ------ 向 Excel 文件中写入含有 multi-index 和 Multi-column 表头的数据




Pandas ------ 向 Excel 文件中写入含有 multi-index 和 Multi-column 表头的数据 引言正文 引言 
之前在 《pandas向已经拥有数据的Excel文件中添加新数据》 一文中我们介绍了如何通过 pandas 向 Excel 文件中写入数据。那么对于含有多表头的数据&#xff0c;我们该如何将它们…...






编程日记
2024/1/26 20:53:57



















ChatGPT 和文心一言 | 两大AI助手哪个更胜一筹




欢迎来到英杰社区&#xff1a; https://bbs.csdn.net/topics/617804998 欢迎来到阿Q社区&#xff1a; https://bbs.csdn.net/topics/617897397 &#x1f4d5;作者简介&#xff1a;热爱跑步的恒川&#xff0c;致力于C/C、Java、Python等多编程语言&#xff0c;热爱跑步&#xff…...






编程日记
2024/1/26 20:52:56



















flink学习之窗口处理函数




窗口处理函数 
什么是窗口处理函数 
Flink 本身提供了多层 API&#xff0c;DataStream API 只是中间的一环&#xff0c;在更底层&#xff0c;我们可以不定义任何具体的算子&#xff08;比如 map()&#xff0c;filter()&#xff0c;或者 window()&#xff09;&#xff0c;而只是…...






编程日记
2024/1/26 20:51:55



















Python 基于pytorch从头写GPT模型；实现gpt实战




1.GPT简介 GPT&#xff08;Generative Pre-trained Transformer&#xff09;模型是一种基于Transformer架构的生成式预训练模型&#xff0c;由OpenAI开发。它采用了无监督学习的方式进行预训练&#xff0c;然后通过微调适应特定的任务。GPT模型的结构由多层Transformer解码器组…...






编程日记
2024/1/26 20:49:53



















2023年NOC大赛（学而思赛道）创意编程Python初中组决赛真题




2023年NOC大赛&#xff08;学而思赛道&#xff09;创意编程Python初中组决赛真题 
题目总数&#xff1a;7    总分数&#xff1a;100 
编程题 
第 1 题    问答题 
二进制回文 
编程实现: 输入一个正整数&#xff0c;判断它的二进制形式是否是回文数&#xff0c;如果是输出True…...






编程日记
2024/1/26 20:48:52



















头歌C++之Switch控制语句编程实训




目录 第1关：根据输入数字判断是星期几 
本关必读 
本关任务 
测试说明 
第2关：根据输入的数值和运算符做相应运算 
本关必读 
本关任务 
测试说明 
第3关：根据输入年月计算该月份的天数 
本关必读 
本关任务...






编程日记
2024/1/26 20:46:51



















CNN卷积理解




1 卷积的步骤 
1 过滤器&#xff08;卷积核&#xff09;&#xff08;Filter或Kernel&#xff09;&#xff1a; 卷积层使用一组可学习的过滤器来扫描输入数据&#xff08;通常是图像&#xff09;。每个过滤器都是一个小的窗口&#xff0c;包含一些权重&#xff0c;这些权重通过训…...






编程日记
2024/1/26 20:43:48



















DataKit迁移MySQL到openGauss




前言 
本文将分享DataKit迁移MySQL到openGauss的项目实战&#xff0c;供广大openGauss爱好者参考。 
1. 下载操作系统 
https://www.openeuler.org/zh/download https://support.huawei.com/enterprise/zh/doc/EDOC1100332931/1a643956 
https://support.huawei.com/enterprise…...






编程日记
2024/1/26 20:42:47



















Dockerfile里ADD * 保留原来的目录结构




1、问题 
给新模块写Dockerfile&#xff0c;很多静态资源分散在各个目录&#xff0c;于是Dockerfile里我直接一句&#xff1a; 
ADD ./* /dest/镜像出来后&#xff0c;启动容器&#xff0c;进入容器种后发现&#xff1a;文件拷贝成功&#xff0c;但原来的目录结构都不在了&…...






编程日记
2024/1/26 20:41:46



















C++ 利用容器适配器,仿函数实现栈,队列,优先级队列(堆),反向迭代器,deque的介绍与底层




C 利用容器适配器,仿函数实现栈,队列,优先级队列【堆】,反向迭代器,deque的介绍与底层 一.容器适配器的介绍二.利用容器适配器实现栈和队列1.stack2.queue 三.仿函数介绍1.什么是仿函数2.仿函数的使用3.函数指针的使用1.函数指针的用处2.利用函数指针完成回调3.利用仿函数完成回…...






编程日记
2024/1/26 20:40:45



















C语言实战系列二：简单超市收银系统




从一个简单的超市收银系统&#xff0c;我们来练习一个系统如何设计&#xff0c;然后如何实现的思路。 
在Ubuntu环境下使用C语言编写一个简单的超市收银系统。以下是一个基本的示例&#xff0c;涵盖了商品管理、购物车、交易处理等功能。 
代码 
#include <stdio.h>
#inc…...






编程日记
2024/1/26 20:39:43



















coding推送代码Jenkins自动构建部署




实现功能&#xff1a;我们向coding推送代码&#xff0c;通过webhook自动通知Jenkins&#xff0c;实现自动构建部署 
coding 
项目设置 / 开发者选项 / Service Hook 
输入以下参数 
发送POST请求服务 URL&#xff1a;htttp://xxx用户名&#xff1a;xxx密码&#xff1a;xxx 
Jen…...






编程日记
2024/1/26 20:36:41



















Kettle-Docker部署+Sqlserver数据同步Mysql+Start定时任务




一. 背景介绍 
1. ETL是什么 ETL&#xff08;Extract-Transform-Load&#xff09;&#xff0c;即数据抽取、转换、装载的过程。它是一种思想&#xff0c;主要是说&#xff0c;从不同的数据源获取数据&#xff0c;并通过对数据进行处理&#xff08;格式&#xff0c;协议等转换&a…...






编程日记
2024/1/26 20:32:37



















《微信小程序开发从入门到实战》学习九十三




7.1 视图容器组件 
7.1.3 swiper与swiper-item组件 
swiper组件的显示效果如下图所示&#xff1a; indicator-dots、indicator-color和indicator-active-color三个属性用于设置swiper组件下方的指示点。设置指示点的颜色时&#xff0c;可以使用HexColor&#xff0c;也可以使用r…...






编程日记
2024/1/26 20:31:37



















Java服务端使用freemarker+wkhtmltoimage生成Echart图片




目录 
1.通过 freemarker 将ftl转成html 
1.1 freemarker 手册:  
1.2 添加freemarker maven依赖 
1.3 添加 echart-test.ftl 模版文件 
1.4 添加 FreemarkerTool 工具类 
1.5 添加测试main方法 
1.6 运行,生成echart-test-时间戳.html 文件 
2. 通过wkhtmltoimage将html 转为p…...






编程日记
2024/1/26 20:30:36





















Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具




文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 
准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 
准备一个容器,例如: …...






编程新知
2026/1/31 6:09:18



















vue3 定时器-定义全局方法 vue+ts




1.创建ts文件 
路径&#xff1a;src/utils/timer.ts 
完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback  (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout>  new Map()// 创建定时器con…...






编程新知
2025/8/9 0:31:20



















04-初识css




一、css样式引入 
1.1.内部样式 
<div style"width: 100px;"></div>1.2.外部样式 
1.2.1.外部样式1 
<style>.aa {width: 100px;}
</style>
<div class"aa"></div>1.2.2.外部样式2 
<!-- rel内表面引入的是style样…...






编程新知
2026/1/29 17:54:05



















使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度




文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...






编程新知
2026/1/28 8:25:28



















【网络安全】开源系统getshell漏洞挖掘




审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE  system并且M_MODULE  include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...






编程新知
2026/1/31 2:59:25



















【Android】Android 开发 ADB 常用指令




查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...






编程新知
2025/11/18 18:31:30



















jmeter聚合报告中参数详解




sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 
sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...






编程新知
2025/12/18 6:00:45



















Linux系统部署KES




1、安装准备 
1.版本说明V008R006C009B0014 
V008&#xff1a;是version产品的大版本。
R006&#xff1a;是release产品特性版本。
C009&#xff1a;是通用版
B0014&#xff1a;是build开发过程中的构建版本2.硬件要求 
#安全版和企业版
内存&#xff1a;1GB 以上
硬盘&#xf…...






编程新知
2026/1/1 12:32:33



















掌握 HTTP 请求：理解 cURL GET 语法




cURL 是一个强大的命令行工具&#xff0c;用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中&#xff0c;cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 
一、cURL 基本概念 
cURL 是 "Client URL" 的缩写…...






编程新知
2025/7/9 20:52:19



















抽象类和接口（全）




一、抽象类 
1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 
2.语法 
在Java中&#xff0c;⼀个类如果被 abs…...






编程新知
2026/1/31 20:38:04