制作一个简单的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 打开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个人网页

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/270278.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Map集合体系——遍历，HashMap，TreeMap，LikedHashMap

Map集合体系——遍历，HashMap，TreeMap，LikedHashMap

认识Map集合 Map集合体系特点 方法 代码示例 package com.zz.Map;import java.util.*;public class Test {public static void main(String args[]){Map<String, Integer> map new HashMap <>();//经典代码&#xff0c;按照键 无序 不重复 无索引map.put("…
阅读更多...
阻塞队列、生产者消费者模型、阻塞队列的模拟实现等干货

阻塞队列、生产者消费者模型、阻塞队列的模拟实现等干货

文章目录 &#x1f490;生产者消费者模型&#x1f490;模拟实现阻塞队列&#x1f4a1;注意点一&#x1f4a1;注意点二 阻塞队列是一种“特殊”的数据结构&#xff0c;但是也遵循队列的“先进先出”特性&#xff0c;它的特殊在于&#xff1a; 阻塞队列的两个特性&#xff1a; 1…
阅读更多...
学习基于 JavaScript 语言 的计算机界三大神书”之一 ——SICP

学习基于 JavaScript 语言 的计算机界三大神书”之一 ——SICP

如何阅读“计算机界三大神书”之一 ——SICP 《计算机程序的构造和解释》&#xff08;Structure and Interpretation of Computer Programs&#xff0c;简记为SICP&#xff09;是MIT的基础课教材&#xff0c;出版后引起计算机教育界的广泛关注&#xff0c;对推动全世界大学计算…
阅读更多...
C switch 语句

C switch 语句

一个 switch 语句允许测试一个变量等于多个值时的情况。每个值称为一个 case&#xff0c;且被测试的变量会对每个 switch case 进行检查。 语法 C 语言中 switch 语句的语法&#xff1a; switch(expression){case constant-expression :statement(s);break; /* 可选的 */ca…
阅读更多...
【小白友好】LeetCode 打家劫舍 III

【小白友好】LeetCode 打家劫舍 III

https://leetcode.cn/problems/house-robber-iii/description/ 前言 建议还是先看看动态规划的基础题再看这个。动态规划是不刷题&#xff0c;自己100%想不出来的。 基础题&#xff1a; 最大子数组和乘积最大子数组最长递增子序列 最大升序子数组和 小白想法 现在我们想遍…
阅读更多...
前端语义化标签及实例

前端语义化标签及实例

常用的语义化标签的以下几种&#xff1a; header、nav、article、section、aside、footer、abbr、dfn、address、del、ins、pre、meter、progress <header> 定义文章的页眉信息 <header><h1>我的网站标题</h1><nav><ul><li><a …
阅读更多...
[GYCTF2020]EasyThinking --不会编程的崽

[GYCTF2020]EasyThinking --不会编程的崽

看标题就知道&#xff0c;这大概率是关于thinkphp的题目。先尝试错误目录使其报错查看版本号 thinkphp v6.0.0&#xff0c;在网上搜索一下&#xff0c;这个版本有一个任意文件上传漏洞。参考以下文章。 https://blog.csdn.net/god_zzZ/article/details/104275241 先注册一个账…
阅读更多...
【Android】位置修改相关

【Android】位置修改相关

获取位置服务总开关状态 //获取LOCATION_MODE值&#xff0c;但adb状态下无法获取 //0为关闭&#xff0c;1 gps、2 network、3 高精度等 int state Settings.Secure.getInt(mContext.getContentResolver(),Settings.Secure.LOCATION_MODE,Settings.Secure.LOCATION_MODE_HIGH_…
阅读更多...
three.js可以对3D模型做什么操作和交互，这里告诉你。

three.js可以对3D模型做什么操作和交互，这里告诉你。

Three.js 提供了多种交互功能&#xff0c;可以对 3D 模型进行各种操作和交互。以下是一些常见的交互功能&#xff1a; 鼠标交互 通过鼠标事件&#xff0c;可以实现模型的拖拽、旋转、缩放等操作。例如&#xff0c;可以通过鼠标拖拽来改变模型的位置或角度。 触摸交互 对于支…
阅读更多...
PackagesNotFoundError:学习利用报错信息找到解决方法

PackagesNotFoundError:学习利用报错信息找到解决方法

反思&#xff1a;之前看到报错经常是直接复制报错信息去网上搜&#xff0c;但很多情况下报错信息里其实就给出了解决方案 报错信息&#xff1a; Collecting package metadata (current_repodata.json): done Solving environment: unsuccessful initial attempt using frozen …
阅读更多...
MySQL 篇-深入了解多表设计、多表查询

MySQL 篇-深入了解多表设计、多表查询

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 多表设计概述 1.1 多表设计 - 一对多 1.2 多表设计 - 一对一 1.3 多表设计 - 多对多 2.0 多表查询概述 2.1 多表查询 - 内连接 2.2 多表查询 - 外连接 2.3 多表查…
阅读更多...
cetos7 Docker 安装 gitlab

cetos7 Docker 安装 gitlab

一、gitlab 简单介绍和安装要求 官方文档&#xff1a;https://docs.gitlab.cn/jh/install/docker.html 1.1、gitlab 介绍 gitLab 是一个用于代码仓库管理系统的开源项目&#xff0c;使用git作为代码管理工具&#xff0c;并在此基础上搭建起来的Web服务平台&#xff0c;通过该平…
阅读更多...
【C语言】指针初阶2.0版本

【C语言】指针初阶2.0版本

这篇博文我们来继续学习指针的其他内容 指针2.0 传值调用与传址调用传值调用传址调用 一维数组与指针理解数组名使用指针深入理解一维数组 二级指针指针数组二维数组与指针 传值调用与传址调用 在开始之前&#xff0c;我们需要先了解这个概念&#xff0c;后面才能够正常的学习…
阅读更多...
Material UI 5 学习01-按钮组件

Material UI 5 学习01-按钮组件

Material UI 5 学习01-按钮组件 一、安装Material UI二、 组件1、Button组件1、基础按钮2、variant属性3、禁用按钮4、可跳转的按钮5、disableElevation属性6、按钮的点击事件onClick 2、Button按钮的颜色和尺寸1、Button按钮的颜色2、按钮自定义颜色3、Button按钮的尺寸 3、图…
阅读更多...
vulhub中ThinkPHP5 SQL注入漏洞 敏感信息泄露

vulhub中ThinkPHP5 SQL注入漏洞 敏感信息泄露

漏洞原理 传入的某参数在绑定编译指令的时候又没有安全处理&#xff0c;预编译的时候导致SQL异常报错。然而thinkphp5默认开启debug模式&#xff0c;在漏洞环境下构造错误的SQL语法会泄漏数据库账户和密码 启动后&#xff0c;访问http://your-ip/index.php?ids[]1&ids[]2…
阅读更多...
nodejs安装教程（及过程中的易错）

nodejs安装教程（及过程中的易错）

nodejs&#xff1a;Nodejs 是基于 Chrome 的 V8 引擎开发的一个 C 程序&#xff0c;目的是提供一个 JS 的运行环境。 npm&#xff1a;npm 是 Node Package Manager 的缩写&#xff0c;意思是 Node 的包管理系统&#xff0c;是最大的软件包仓库 下载nodejs 首先我们需要在node…
阅读更多...
智慧城市中的数据力量：大数据与AI的应用

智慧城市中的数据力量：大数据与AI的应用

目录 一、引言 二、大数据与AI技术的融合 三、大数据与AI在智慧城市中的应用 1、智慧交通 2、智慧环保 3、智慧公共安全 4、智慧公共服务 四、大数据与AI在智慧城市中的价值 1、提高城市管理的效率和水平 2、优化城市资源的配置和利用 3、提升市民的生活质量和幸福感…
阅读更多...
去除PDF论文行号的完美解决方案

去除PDF论文行号的完美解决方案

去除PDF论文行号的完美解决方案 1. 遇到的问题 我想去除论文的行号&#xff0c;但是使用网上的Adobe Acrobat裁剪保存后 如何去掉pdf的行编号&#xff1f; - 知乎 (zhihu.com) 翻译时依然会出现行号&#xff0c;或者是转成word&#xff0c;这样就大大损失了格式&#xff0c…
阅读更多...
C语言结构体的大小，结构体内存对齐

C语言结构体的大小，结构体内存对齐

1. 结构体的大小 在自己正真了解过之前&#xff0c;一直认为结构体的大小就是结构体内部成员大小的总和。 但当你去尝试打印结构体的大小时&#xff0c;会发现事实并非如此&#xff0c;也不会像你想的那样简单。 #include <stdio.h>struct S1 {char c1;char c2;int i;…
阅读更多...
springcloud：3.7测试线程池服务隔离

springcloud：3.7测试线程池服务隔离

服务提供者【test-provider8001】 Openfeign远程调用服务提供者搭建 文章地址http://t.csdnimg.cn/06iz8 相关接口 测试远程调用&#xff1a;http://localhost:8001/payment/index 服务消费者【test-consumer-resilience4j8004】 Openfeign远程调用消费者搭建 文章地址http://t…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023