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

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

news 2026/4/1 7:51:43

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

    • 1.1 硬件
      • 1.1.1 一台电脑
      • 1.1.2 配置要求
    • 1.2 系统
    • 1.3 软件
  • 二、制作一个简单的HTML个人网页
    • 1.创建一个HTML网页
      • 1.1 新建文本文档
      • 1.2 另存文本文档
      • 1.3 命名为index.html
    • 2.编写HTML代码
      • 2.1 打开HTML
      • 2.2 复制HTML代码
      • 2.3 粘贴HTML代码
      • 2.4 保存HTML
    • 3.预览HTML个人网页
      • 3.1 浏览器打开HTML个人网页
      • 3.2 浏览器预览HTML个人网页
  • 三、题外话
    • 1.定制化页面
    • ​
    • 2.添加内容

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

【简化版】

新建文本黏贴以下代码，另存为index.html（另存时，保存类型选所有文件），制作一个简单的HTML个人网页已在3秒内完成。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一个简单的HTML个人网页</title>
<style>
/* 在这里添加CSS样式 */
</style>
</head>
<body>
<header>
<!-- 在这里添加页眉内容 -->
</header>
<nav>
<!-- 在这里添加导航菜单 -->
</nav>
<main>
<!-- 在这里添加主要内容 -->
一个简单的HTML个人网页
</main>
<footer>
<!-- 在这里添加页脚内容 -->
Python老吕制作
</footer>
</body>
</html>
【完整版教程】
# 一、准备工作 `制作一个简单的HTML个人网页`之前，准备以下工具：

1.1 硬件

1.1.1 一台电脑

台式机、笔记本都可以

1.1.2 配置要求

新机、老机都可以，只要能正常使用的电脑

1.2 系统

Windows、Linux、macOS、Chromium OS、BSD、DOS任一系统均可

有电脑还没有装系统，或者想换换系统的可以浏览这个专栏下载系统
各种操作系统原版镜像

1.3 软件

系统自带的文本编辑器、浏览器就可以了

大家可能发现了，只要你手头上有台能用的电脑，直接安装我这个文章，复制一下我的代码另存为指定文件，直接打开预览，立马就是一个简单的HTML个人网页了，制作一个简单的HTML个人网页是不是很简单呢？
嘿嘿，参与的朋友，在文末点击一下秒数投票吧，支持一下 Python老吕 吧。

二、制作一个简单的HTML个人网页

1.创建一个HTML网页

1.1 新建文本文档

在桌面，鼠标右键→新建→文本文档
制作一个简单的HTML个人网页

1.2 另存文本文档

打开文本文档→点击菜单栏文件→点击另存为

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

1.3 命名为index.html

文件名输入→index.html
保存类型选择→所有文件
点击保存

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

2.编写HTML代码

2.1 打开HTML

选择index.html文件，鼠标右键→打开方式→选择其他应用→更多应用→下拉→选择记事本→点击确定
制作一个简单的HTML个人网页

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

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

2.2 复制HTML代码

一个简单的HTML个人网页
结构示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Python老吕的个人网页</title>
<style>
/* 在这里添加CSS样式 */
</style>
</head>
<body>
<header>
<!-- 在这里添加页眉内容 -->
</header>
<nav>
<!-- 在这里添加导航菜单 -->
</nav>
<main>
<!-- 在这里添加主要内容 -->
Python老吕的个人网页
</main>
<footer>
<!-- 在这里添加页脚内容 -->
</footer>
</body>
</html>

在这个结构中，您需要将页眉内容放在<header>标签中，导航菜单放在<nav>标签中，主要内容放在<main>标签中，页脚内容放在<footer>标签中。您可以使用任意数量的HTML标签来创建您想要的页面布局和内容。

复制以上代码

2.3 粘贴HTML代码

在已经打开的记事本编辑器 index - 记事本 →点击粘贴
制作一个简单的HTML个人网页

2.4 保存HTML

点击菜单栏文件→保存

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

3.预览HTML个人网页

3.1 浏览器打开HTML个人网页

选择index.html文件，右键打开方式→Internet Explorer

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

3.2 浏览器预览HTML个人网页

恭喜你，成功制作一个简单的HTML个人网页
制作一个简单的HTML个人网页

三、题外话

1.定制化页面

你可以根据自己的喜好和需要，对网页进行定制。例如：

  • 添加图片： 使用 标签可以添加图片到你的网页上。
  • 调整样式： 使用 CSS 来修改字体、颜色、布局等方面的样式。
  • 增加链接： 使用 标签来添加链接到其他网页或者文件。
  • 更多内容： 添加更多的部分和内容，展示你的技能、项目或者其他你想要分享的信息。

为了美化您的网页，您可以在

（在<style>黏贴CSS样式</style>中）

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f8f8;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
}
nav {
background-color: #555;
padding: 10px;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
}

制作一个简单的HTML个人网页
在这个样式中，我们设置了body、header、nav、main和footer的背景颜色、字体样式和边距等属性。您可以根据您的喜好进行调整和修改。

复制完了之后，是这样的：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Python老吕的个人网页</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f8f8;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
}
nav {
background-color: #555;
padding: 10px;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
}
</style>
</head>
<body>
<header>
<!-- 在这里添加页眉内容 -->
</header>
<nav>
<!-- 在这里添加导航菜单 -->
</nav>
<main>
<!-- 在这里添加主要内容 -->
Python老吕的个人网页
</main>
<footer>
<!-- 在这里添加页脚内容 -->
</footer>
</body>
</html>

​

2.添加内容

现在，您可以在HTML结构中的各个部分添加内容了。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><h1>欢迎来到Python老吕的个人网页</h1> </title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f8f8;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
}
nav {
background-color: #555;
padding: 10px;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
}
</style>
</head>
<body>
<header>
<!-- 在这里添加页眉内容 -->
</header>
<nav> 
<ul> 
<li>
<a href="#">首页</a>
</li> 
<li>
<a href="#">关于Python老吕</a>
</li> 
<li>
<a href="#">Python老吕的项目</a>
</li> 
<li><a href="#">联系Python老吕</a>
</li> 
</ul> 
</nav> 
<main>
<h2>关于Python老吕</h2> 
<p>在这里写上关于Python老吕的简短介绍。</p> 
</main>
<footer> 
<p>版权所有 &copy; 2024 Python老吕的个人网页 制作一个简单的HTML个人网页</p> 
</footer> 
</body>
</html>

在这个示例中，我们在

  • 在<header>标签中添加了一个标题，
  • 在<nav>标签中添加了一个简单的导航菜单，
  • 在<main>标签中添加了一个关于我的段落，
  • 在<footer>标签中添加了版权信息。

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

您可以根据您的需求和兴趣添加更多内容和布局。
今天就教这么多，你学会了吗？

相关文章：

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

制作一个简单的HTML个人网页 1.1 硬件1.1.1 一台电脑1.1.2 配置要求 1.2 系统1.3 软件 二、制作一个简单的HTML个人网页1.创建一个HTML网页1.1 新建文本文档1.2 另存文本文档1.3 命名为index.html 2.编写HTML代码2.1 打开HTML2.2 复制HTML代码2.3 粘贴HTML代码2.4 保存HTML 3.预…...

编程日记 2024/3/6 21:05:48

HM2019创建载荷工况

该案例中将介绍载荷、工况、约束的创建 步骤一&#xff1a;首先创建两个载荷集(Load Collector)用来存放载荷和约束 步骤二&#xff1a;在Analysis面板下创建约束(Analysis→constraints) 注意&#xff1a;Load type选择SPC表示统计过程控制(Statistical Process Control) 步…...

编程日记 2024/3/6 21:04:47

Effective C++ 学习笔记 条款14 在资源管理类中小心copying行为

条款13导入这样的观念&#xff1a;“资源取得时机便是初始化时机”&#xff08;Resource Acquisition Is Initialization&#xff0c;RAII&#xff09;&#xff0c;并以此作为“资源管理类”的脊柱&#xff0c;也描述了auto_ptr和tr1::shared_ptr如何将这个观念表现在heap-base…...

编程日记 2024/3/6 21:01:43

c++数据结构算法复习基础-- 3 --线性表-单向链表-笔试面试常见问题

1、单链表逆序 思路图 代码实现 //著: 链表结构里记得加 friend void ReverseLink(Clink& link); void ReverseLink(Clink& link) {Node* p link.head_->next_;while( p nullptr){return;}Node* q p->next_;link.head_->next_ nullptr;while(p ! nullpt…...

编程日记 2024/3/6 21:00:41

【踩坑专栏】追根溯源，从Linux磁盘爆满排查故障：mycat2与navicat不兼容导致日志暴增

昨天遇到了一个比较奇怪的问题&#xff0c;就是在挂起虚拟机的时候&#xff0c;虚拟机提示我XX脚本正在运行&#xff0c;很奇怪&#xff0c;我没有运行脚本&#xff0c;为什么会提示我这个呢。今天恢复虚拟机&#xff0c;也提示了一下脚本的问题&#xff0c;而且发现Linux明显异…...

编程日记 2024/3/6 20:57:36

DolphinScheduler——奇富科技的调度实践

目录 一、技术架构 二、业务挑战 2.1 调度任务量大 2.2 运维复杂 2.3 SLA要求高 三、调度优化实践 3.1 重复调度 3.2 漏调度 3.3 Worker服务卡死 3.4 任务重复运行 四、服务监控 4.1 方法耗时监控 4.2 任务调度链路监控 五、用户收益 原文大佬的这篇调度系统案例…...

编程日记 2024/3/6 20:49:27

2024年最全洗地机选购攻略盘点丨希亦、小米、云鲸、海尔洗地机哪款值得入手？

在现代家居清洁中&#xff0c;洗地机是不可或缺的得力助手&#xff0c;它融合了吸尘、拖地等多种功能。面对市场上琳琅满目的洗地机品牌和型号&#xff0c;选择一个可靠的品牌至关重要。优质的品牌能够提供高品质的产品&#xff0c;使您的清洁工作更加轻松高效。本文将向您推荐…...

编程日记 2024/3/6 20:48:25

HTML笔记3

21&#xff0c;label标签 <label for"...">...</label> <label>...</label> <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content&qu…...

编程日记 2024/3/6 20:47:24

利用Python副业赚钱，看完这篇你就懂了！

Python都可以做哪些副业&#xff1f; 1、兼职处理数据Excel整理数据功能虽然很强大&#xff0c;但在Python面前&#xff0c;曾经统治职场的它也的败下阵来。因为Python在搜集数据整理分析数据的过程中更加便捷&#xff0c;通过几行代码还可以实现自动化操作。 如果你学会Pyth…...

编程日记 2024/3/6 20:44:21

FP16（半精度浮点数）、FP32（单精度浮点数）和INT8

在深度学习和计算机视觉领域中&#xff0c;FP16&#xff08;半精度浮点数&#xff09;、FP32&#xff08;单精度浮点数&#xff09;和INT8&#xff08;8 位整数&#xff09;是常见的数据类型或精度表示方式。它们在不同的场景下有各自的优势和用途。 FP16&#xff08;半精度浮…...

编程日记 2024/3/6 20:42:19

MySQL数据管理二

1.数据库的完整性 数据库中的数据是从外界输入的&#xff0c;而数据的输入由于种种原因&#xff0c;会发生输入无效或错误信息。保证输入的数据符合规定&#xff0c;成为了数据库系统&#xff0c;尤其是多用户的关系数据库系统首要关注的问题。 它是应防止数据库中存在不符合语…...

编程日记 2024/3/6 20:41:18

sqoop-import 详解

文章目录 前言一、介绍1. sqoop简介2. sqoop import的作用3. 语法3.1 sqoop import 语法3.2 导入配置属性 二、导入参数1. 常见参数2. 验证参数3. 导入控制参数4. 用于覆盖映射的参数5. 增量导入参数6. 输出行格式参数7. 输入解析参数8. Hive 参数9. HBase 参数10. Accumulo 参…...

编程日记 2024/3/6 20:37:14

第二周opencv

一、边缘检测算子 边缘检测算子是用于检测图像中物体边界的工具。边缘通常表示图像中灰度值或颜色发生显著变化的地方。边缘检测有助于识别图像中的物体形状、轮廓和结构。这些算子通过分析图像的灰度或颜色梯度来确定图像中的边缘。 梯度算子 要得到一幅图像的梯度&#xff0c…...

编程日记 2024/3/6 20:32:08

python_读取txt文件绘制多条曲线II

从给定的列表中来匹配txt文件对应列的数据&#xff1b; import matplotlib.pyplot as plt import re from datetime import datetime from pylab import mplmpl.rcParams["font.sans-serif"] ["SimHei"] # 设置显示中文字体 mpl.rcParams["axes.un…...

编程日记 2024/3/6 20:31:07

java排序简单总结和推荐使用套路（数据排序，结构体排序）

了解int和Integer的区别 int是Java的基本数据类型&#xff0c;用于表示整数值。Integer是int的包装类&#xff0c;它是一个对象&#xff0c;可以包含一个int值并提供一些额外的功能。 Java集合框架中的集合类&#xff08;如List、Set、Map&#xff09;只能存储对象&#xff0c;…...

编程日记 2024/3/6 20:30:06

掘根宝典之C语言联合和枚举

联合 C语言中的联合&#xff08;Union&#xff09;是一种特殊的数据类型&#xff0c;它允许在同一块内存空间中存储不同类型的数据。 联合与结构体类似&#xff0c;但不同的是&#xff0c;在给联合变量赋值时&#xff0c;它只能存储最后一次赋值的值。 创建联合 在C语言中&…...

编程日记 2024/3/6 20:28:04

【debug】element-ui时间控件回显后不可编辑且显示为空

问题&#xff1a;使用element-ui的时间控件回显数据&#xff0c;编辑数据没有反应&#xff1a;点时间和“确认”按钮都没反应。 输入框中会显示数据&#xff0c;但提交时的校验显示为空。 <el-form-item label"开始时间" prop"limitStartTime"><…...

编程日记 2024/3/6 20:26:02

【Linux从青铜到王者】进程信号

——————————————————————————————————————————— 信号入门 在了解信号之前有许多要理解的相关概念 我们可以先通过一个生活例子来初步认识一下信号 1.生活角度的信号 你在网上买了很多件商品&#xff0c;再等待不同商品快递的到来…...

编程日记 2024/3/6 20:25:01

MyBatis-Plus 快速入门

介绍 j​​​​​MyBatis-Plus (opens new window)&#xff08;简称 MP&#xff09;是一个 MyBatis (opens new window)的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。 官网&#xff1a;MyBatis-Plus (baomidou.com) 1.…...

编程日记 2024/3/6 20:23:59

iOS调起高德/百度/腾讯/谷歌/苹果地图并使用GCJ02坐标进行导航

使用演示: 2.地图API相关网站 : 高德:...

编程日记 2024/3/6 20:17:53

从零部署到实战标注：SUSTechPOINTS 3D点云标注平台全流程指南

1. 为什么选择SUSTechPOINTS进行3D点云标注 在自动驾驶研发过程中&#xff0c;3D点云标注是个绕不开的苦差事。我最早用过不少商业标注工具&#xff0c;不是价格贵得离谱&#xff0c;就是功能残缺不全。直到去年团队接手一个校企合作项目&#xff0c;才发现南方科技大学开源的这…...

编程新知 2026/4/1 7:25:11

FCOS3D vs PGD：单目3D检测两大算法核心差异与选型指南

FCOS3D与PGD&#xff1a;单目3D检测技术深度对比与工程实践指南 1. 技术背景与核心挑战 在自动驾驶和机器人感知领域&#xff0c;单目3D目标检测技术因其硬件成本优势和部署便捷性&#xff0c;正成为工业界关注的焦点。这项技术仅需单个摄像头即可实现对三维空间中物体的定位和…...

编程新知 2026/4/1 5:57:16

告别轮询！用STM32F407的USART3+DMA+空闲中断实现高效串口数据接收

STM32F407高效串口通信&#xff1a;USART3DMA空闲中断实战指南 在嵌入式开发中&#xff0c;串口通信是最基础也最常用的外设之一。传统的中断接收方式虽然简单&#xff0c;但在高速或大数据量传输时&#xff0c;频繁的中断响应会显著增加CPU负担&#xff0c;甚至导致数据丢失。…...

编程新知 2026/4/1 5:39:02

Deepin系统远程桌面实战：从零配置xrdp服务到Windows无缝连接

Deepin系统远程桌面实战&#xff1a;从零配置xrdp服务到Windows无缝连接 在跨平台协作成为常态的今天&#xff0c;远程桌面技术让不同操作系统间的无缝协作成为可能。对于使用Deepin系统的用户而言&#xff0c;如何高效地通过Windows设备远程访问和控制Deepin桌面&#xff0c;是…...

编程新知 2026/4/1 5:18:55

用STM32和示波器搞定美的/格力空调红外遥控（附完整C代码）

STM32实战&#xff1a;从示波器捕获到空调红外协议逆向全解析 红外遥控技术看似简单&#xff0c;却蕴含着精妙的时序设计和协议逻辑。作为一名长期混迹于硬件开发领域的工程师&#xff0c;我经常遇到需要逆向控制家电的场景。最近在智能家居项目中&#xff0c;就遇到了需要通过…...

编程新知 2026/4/1 3:02:47

如何在旧款Mac上安装最新macOS：OpenCore Legacy Patcher完整指南

如何在旧款Mac上安装最新macOS&#xff1a;OpenCore Legacy Patcher完整指南 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 还在为苹果官方停止支持的老旧Ma…...

编程新知 2026/4/1 2:12:00

告别外挂EEPROM：手把手教你用AUTOSAR Fee模块在MCU内部Flash存数据（附Vector DaVinci配置）

告别外挂EEPROM&#xff1a;用AUTOSAR Fee模块实现MCU内部Flash数据存储实战指南 在汽车电子控制单元&#xff08;ECU&#xff09;开发中&#xff0c;非易失性数据存储一直是硬件选型的重要考量点。传统方案往往需要外挂一颗EEPROM芯片来存储参数、标定值和故障码等关键数据&am…...

编程新知 2026/4/1 1:51:47

Java调用C/C++/Rust的5种方式：FFI vs JNI vs JNA vs JNR vs Panama——2024权威对比评测

第一章&#xff1a;Java外部函数接口概述与技术演进脉络Java外部函数接口&#xff08;Foreign Function & Memory API&#xff09;&#xff0c;即Project Panama的核心成果&#xff0c;是Java平台为高效、安全地与本地代码&#xff08;如C/C库&#xff09;及非堆内存交互而…...

编程新知 2026/4/1 0:23:58

新手友好：在快马平台通过可交互代码学习OpenClaw Onboard抓取基础

今天想和大家分享一个特别适合机器人领域新手的实践项目——通过InsCode(快马)平台学习OpenClaw Onboard框架的基础操作。作为一个刚接触机械臂控制的小白&#xff0c;我发现这个平台能直接把抽象的控制概念变成可交互的代码&#xff0c;学习效率提升了好几倍。 项目环境搭建零…...

编程新知 2026/3/31 23:32:59

2020年目标跟踪算法性能大盘点：速度与精度的较量

1. 目标跟踪算法的速度与精度之争 目标跟踪算法就像是一个永不疲倦的"数字猎手"&#xff0c;它的任务是在视频序列中持续锁定目标物体。2020年涌现的算法在速度和精度这两个关键指标上展开了激烈角逐。想象一下&#xff0c;你正在用手机拍摄一只快速移动的小猫&#…...

编程新知 2026/3/31 23:04:45