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

掌握常用HTML标签：创建个人简介网页

news 文章来源：https://blog.csdn.net/qq_40254606/article/details/141004017 2025/5/10 23:23:13

任务目标

理解HTML文档的基本结构，掌握常见的HTML标签及其用途，创建一个简单的个人简介网页。

学习内容脑图

步骤一：创建基本的HTML结构

首先，我们需要创建一个HTML文档的基本结构。这是所有HTML文档的基础部分。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>我的个人简介</title>
</head>
<body>
</body>
</html>

标签介绍

<!DOCTYPE html>: 声明文档类型为HTML5。它告诉浏览器使用HTML5标准来解析这个文档。
<html>: 定义整个HTML文档的根元素。所有其他HTML元素都包含在这个元素内。
<head>: 包含文档的元数据（如标题、样式、脚本）。这些内容不会直接显示在网页上。
<meta charset="UTF-8">: 定义文档的字符编码为UTF-8，保证文档能够正确显示各种语言的字符。
<title>: 定义文档的标题，显示在浏览器的标题栏或标签页上。
<body>: 定义文档的主体内容，包含网页上显示的所有内容。

效果展示

创建基本的HTML结构后，在浏览器中打开文件，您将看到一个空白页面。虽然看起来没有内容，但这是一个有效的HTML文档。

步骤二：添加标题和简介

现在我们在<body>中添加一个标题和简介文本。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>我的个人简介</title>
</head>
<body><h1>我的个人简介</h1><p>欢迎来到我的个人主页，这是关于我的一些信息。</p>
</body>
</html>

标签介绍

<h1>: 定义一级标题，是文档中最重要的标题。HTML支持六级标题，<h1>到<h6>，依次降低重要性。
<p>: 定义一个段落。浏览器会在段落前后自动添加一些空白。

效果展示

此时在浏览器中打开文件，您将看到页面顶部有一个大标题“我的个人简介”，以及一段欢迎文本。

步骤三：添加个人信息

接下来，添加一个小标题和一些个人信息。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>我的个人简介</title>
</head>
<body><h1>我的个人简介</h1><p>欢迎来到我的个人主页，这是关于我的一些信息。</p><h2>个人信息</h2><p>姓名：张三</p><p>年龄：28</p><p>职业：前端开发工程师</p>
</body>
</html>

标签介绍

<h2>: 定义二级标题，重要性次于<h1>。

效果展示

现在，页面上将显示一个二级标题“个人信息”以及个人信息的具体内容。

步骤四：添加照片

在“个人信息”部分下添加一张照片。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>我的个人简介</title>
</head>
<body><h1>我的个人简介</h1><p>欢迎来到我的个人主页，这是关于我的一些信息。</p><h2>个人信息</h2><p>姓名：张三</p><p>年龄：28</p><p>职业：前端开发工程师</p><h2>照片</h2><img src="profile.jpg" alt="我的照片">
</body>
</html>

标签介绍

<img>: 用于嵌入图像。必须包含两个属性：
- src: 指定图像文件的路径。
- alt: 提供图像的替代文本，在图像无法显示时显示，有助于搜索引擎优化和无障碍访问。

效果展示

现在，页面上将显示一个标题“照片”以及一张图片（假设profile.jpg存在）。

步骤五：添加爱好

添加一个无序列表，列出你的爱好。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>我的个人简介</title>
</head>
<body><h1>我的个人简介</h1><p>欢迎来到我的个人主页，这是关于我的一些信息。</p><h2>个人信息</h2><p>姓名：张三</p><p>年龄：28</p><p>职业：前端开发工程师</p><h2>照片</h2><img src="profile.jpg" alt="我的照片"><h2>爱好</h2><ul><li>阅读</li><li>旅行</li><li>编程</li></ul>
</body>
</html>

标签介绍

<ul>: 定义一个无序列表。列表项前面通常有一个项目符号。
<li>: 定义列表中的每一项。

效果展示

页面上将显示一个标题“爱好”以及一个无序列表，列出你的爱好。

步骤六：添加教育背景

添加一个有序列表，列出你的教育背景。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>我的个人简介</title>
</head>
<body><h1>我的个人简介</h1><p>欢迎来到我的个人主页，这是关于我的一些信息。</p><h2>个人信息</h2><p>姓名：张三</p><p>年龄：28</p><p>职业：前端开发工程师</p><h2>照片</h2><img src="profile.jpg" alt="我的照片"><h2>爱好</h2><ul><li>阅读</li><li>旅行</li><li>编程</li></ul><h2>教育背景</h2><ol><li>小学</li><li>中学</li><li>大学</li></ol>
</body>
</html>

标签介绍

<ol>: 定义一个有序列表。列表项按顺序排列，前面通常有数字或字母。
<li>: 定义列表中的每一项。

效果展示

页面上将显示一个标题“教育背景”以及一个有序列表，列出你的教育背景。

步骤七：添加联系方式

最后，添加一个超链接来展示你的邮箱地址。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>我的个人简介</title>
</head>
<body><h1>我的个人简介</h1><p>欢迎来到我的个人主页，这是关于我的一些信息。</p><h2>个人信息</h2><p>姓名：张三</p><p>年龄：28</p><p>职业：前端开发工程师</p><h2>照片</h2><img src="profile.jpg" alt="我的照片"><h2>爱好</h2><ul><li>阅读</li><li>旅行</li><li>编程</li></ul><h2>教育背景</h2><ol><li>小学</li><li>中学</li><li>大学</li></ol><h2>联系方式</h2><p>邮箱：<a href="mailto:example@example.com">example@example.com</a></p>
</body>
</html>

标签介绍

<a>: 用于定义超链接。属性 href 用于指定链接目标。
- mailto:: 用于创建电子邮件链接。

效果展示

页面上将显示一个标题“联系方式”和一个电子邮件链接。点击该链接将打开默认的邮件客户端，并准备好发送邮件。

步骤八：添加表格信息

我们将添加一个表格来展示你的技能。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>我的个人简介</title>
</head>
<body><h1>我的个人简介</h1><p>欢迎来到我的个人主页，这是关于我的一些信息。</p><h2>个人信息</h2><p>姓名：张三</p><p>年龄：28</p><p>职业：前端开发工程师</p><h2>照片</h2><img src="profile.jpg" alt="我的照片"><h2>爱好</h2><ul><li>阅读</li><li>旅行</li><li>编程</li></ul><h2>教育背景</h2><ol><li>小学</li><li>中学</li><li>大学</li></ol><h2>联系方式</h2><p>邮箱：<a href="mailto:example@example.com">example@example.com</a></p><h2>技能</h2><table><tr><th>技能</th><th>熟练度</th></tr><tr><td>HTML</td><td>高级</td></tr><tr><td>CSS</td><td>高级</td></tr><tr><td>JavaScript</td><td>中级</td></tr></table>
</body>
</html>

标签介绍

<table>: 定义一个表格。
<tr>: 定义表格中的一行。
<th>: 定义表头单元格，通常加粗并居中。
<td>: 定义表格中的单元格。

效果展示

页面上将显示一个标题“技能”以及一个表格，展示你的技能和熟练度。

最终代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>我的个人简介</title>
</head>
<body><h1>我的个人简介</h1><p>欢迎来到我的个人主页，这是关于我的一些信息。</p><h2>个人信息</h2><p>姓名：张三</p><p>年龄：28</p><p>职业：前端开发工程师</p><h2>照片</h2><img src="profile.jpg" alt="我的照片"><h2>爱好</h2><ul><li>阅读</li><li>旅行</li><li>编程</li></ul><h2>教育背景</h2><ol><li>小学</li><li>中学</li><li>大学</li></ol><h2>联系方式</h2><p>邮箱：<a href="mailto:example@example.com">example@example.com</a></p><h2>技能</h2><table><tr><th>技能</th><th>熟练度</th></tr><tr><td>HTML</td><td>高级</td></tr><tr><td>CSS</td><td>高级</td></tr><tr><td>JavaScript</td><td>中级</td></tr></table>
</body>
</html>

总结

在这篇文章中，我们学习了如何创建一个基本的HTML文档结构，并逐步添加标题、段落、图片、列表、超链接和表格等内容。通过这些步骤，您已经掌握了HTML中的一些常用标签及其用途。希望这些内容对您的前端学习有所帮助。

如果您在学习过程中有任何问题，请在评论区留言，我会及时回复。如果觉得这篇文章对您有帮助，别忘了点赞、收藏和关注！

掌握常用HTML标签：创建个人简介网页

任务目标理解HTML文档的基本结构，掌握常见的HTML标签及其用途，创建一个简单的个人简介网页。学习内容脑图 #mermaid-svg-5GTdqH41gawr4v0h {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程日记 2024/12/23 20:12:00

音视频学习（二十五）：ts

TS（MPEG-TS，MPEG Transport Stream） 是一种广泛应用于流媒体传输和存储的容器格式。它最早由 MPEG（Moving Picture Experts Group）组织制定，用于视频和音频的压缩编码。在 HLS（HTTP Live Stream…...

编程日记 2024/12/23 20:05:53

10. 虚拟机VMware Workstation Pro下共享Ubuntu和Win11文件夹

本文记录当前最新版虚拟机VMware Workstation Pro（2024.12）如何在win11下共享文件，以实现Windows与Ubuntu互传文件的目的。 1. 创建共享文件夹 1.1 先关闭虚拟机的客户机，打开虚拟机设置 1.2 在虚拟机设置界面找到“选项”->“…...

编程日记 2024/12/23 20:00:46

单元测试mock框架Mockito

为了继续改进 Mockito 并进一步改善单元测试体验，我们希望您升级到 2.1.0！Mockito 遵循语义版本控制，仅在主要版本升级时包含重大更改。在库的生命周期中，重大更改是推出一组全新功能所必需的，这些功能会改变现有行为甚…...

编程日记 2024/12/23 19:52:37

Python从0到100（七十八）：神经网络--从0开始搭建全连接网络和CNN网络

前言： 零基础学Python：Python从0到100最新最全教程。想做这件事情很久了，这次我更新了自己所写过的所有博客，汇集成了Python从0到100，共一百节课，帮助大家一个月时间里从零基础到学习Python基础语法、Pyth…...

编程日记 2024/12/23 19:51:36

2024多模态大模型综述最新总结

摘要随着人工智能技术的快速发展，多模态大模型（MLLM）已成为研究的新热点。这些模型以强大的大型语言模型（LLM）为基础，能够处理和理解多种模态信息，如文本、图像、视频和音频。本文综述了MLLM的…...

编程日记 2024/12/23 19:49:35

Redis——缓存穿透

文章目录 1. 问题介绍1.1 定义1.2 举例 2. 解决方案2.1 方案一：空值缓存2.1.1 做法2.1.2 举例2.1.3 示例代码2.1.4 优点2.1.5 缺点 2.2 方案二：布隆过滤器2.2.1 思想2.2.2 做法2.2.3 示例代码2.2.4 优点2.2.5 缺点 2.3 方案三：限流3. 总结 1.…...

编程日记 2024/12/23 19:43:28

1.gitlab 服务器搭建流程

前提条件： 一、服务器硬件水平搭建gitlab服务器最低配置要求2核4G,低于这个配置的服务器运行效果很差。 gitlab官网：https://about.gitlab.com/ 下载地址：gitlab/gitlab-ce - Packages packages.gitlab.com 本机ubuntu 二、安装依赖 su…...

编程日记 2024/12/23 19:42:26

McDonald‘s Event-Driven Architecture 麦当劳事件驱动架构

原文链接 1 mcdonalds-technical-blog/ 原文链接 2 mcdonalds-technical-blog/ 麦当劳在异步、事务性和分析性处理用例中使用跨技术栈的事件，包括移动订单进度跟踪和向客户发送营销通信（交易和促销）。统一事件平台（unified eve…...

编程日记 2024/12/23 19:40:22

GTID详解

概念和组成 1，全局事务表示：global transaction identifiers 2, GTID和事务一一对应，并且全局唯一 3，一个GTID在一个服务器上只执行一次 4，mysql 5.6.5开始支持组成 GTID server_uuid:transaction_id 如&#xf…...

编程日记 2024/12/23 19:37:17

图解HTTP-HTTP状态码

状态码状态码的职责是当客户端向服务器端发送请求时，描述返回的请求结果。类别原因短语1XXInformational(信息状态码)接收的请求正在处理2XXSuccess（成功状态码）请求正常处理完毕4XXRedirection （重定向状态码）需要…...

编程日记 2024/12/23 19:35:13

sh cmake-linux.sh -- --skip-license --prefix = $MY_INSTALL_DIR

本文来自天工AI --------- 命令用于安装CMake的脚本，其中--skip-license参数表示跳过许可协议的显示，--prefix参数指定了CMake的安装目录。$MYINSTALLDIR是一个环境变量，应该在运行命令之前设置为您想要安装CMake的目录。 -------- sh xx…...

编程日记 2024/12/23 19:33:11

MySQL 在window免安装启动

复制my.ini文件初始化命令：mysqld --initialize --console 执行启动bat：启动mysql.bat 主要命令是：mysqld --standalone 免密码启动mysql： mysqld --defaults-file"D:\xxx\soft\mysql-8.0.40-winx64\my.ini" …...

编程日记 2024/12/23 19:31:10

[JavaScript] 我该怎么去写一个canvas游戏

首先你得知道canvas的基础语法，此处不过多赘述. 一、如何更新视图 canvas里面有个clearRect方法，可以遮住画布中一个矩形部分. 但是你想这样做就难免会遮住一些本不该遮住的东西，因为它是一个矩形，并且你还要计算它的位置和尺寸…...

编程日记 2024/12/23 19:30:07

【潜意识Java】深度解析黑马项目《苍穹外卖》与蓝桥杯算法的结合问题

目录为什么要结合项目与算法？ 1. 蓝桥杯与《苍穹外卖》项目的结合实例：基于蓝桥杯算法思想的订单配送路径规划问题描述： 代码实现：使用动态规划解决旅行商问题代码解析： 为什么这个题目与蓝桥杯相关&#x…...

编程日记 2024/12/23 19:28:03

python报错系列(16)--pyinstaller ????????

系列文章目录文章目录系列文章目录前言一、pyinstaller ????????1.报错如下2.安装pyinstaller3.报错如下：4.封装py文件为exe成功5.国内源总结前言一、pyinstaller ??? 1.报错如下 PS D:\Users\gxcaoty\Desktop\性能覆盖率> pyinstaller37.exe…...

编程日记 2024/12/23 19:20:56

Pytorch | 从零构建ResNet对CIFAR10进行分类

Pytorch | 从零构建ResNet对CIFAR10进行分类 CIFAR10数据集ResNet核心思想网络结构创新点优点应用 ResNet结构代码详解结构代码代码详解BasicBlock 类ResNet 类ResNet18、ResNet34、ResNet50、ResNet101、ResNet152函数训练过程和测试结果代码汇总resnet.pytrain.pytest.py 前…...

编程日记 2024/12/23 19:19:52

Spring Boot 配置Kafka

1 Kafka Kafka 是由 Linkedin 公司开发的，它是一个分布式的，支持多分区、多副本，基于 Zookeeper 的分布式消息流平台，它同时也是一款开源的基于发布订阅模式的消息引擎系统。 2 Maven依赖 <dependency><groupId>org.springframework.kafka</groupId><…...

编程日记 2024/12/23 19:16:44

基于单片机的火灾报警器（论文+源码）

1.系统设计本系统由火灾检测模块、A/D转换模块、信号处理模块、声光报警模块和灭火装置模块组成。火灾检测模块由温度检测和烟雾检测构成，其温度传感器选用DS18B20，烟雾传感器选用MQ-2烟雾传感器。A/D转换模块选用常用的模数转换芯片ADC0832。声光报警…...

编程日记 2024/12/23 19:11:39

分析excel硕士序列数据提示词——包含对特征的筛选，非0值的过滤

文章目录 1 分析出发点2 围绕出发点的文件分析3 功能模块计算重心相关性计算教学倾向百分比多列相关性计算结果封装证伪——过滤0后的交叉相关系数封装和总控——批量处理特征筛选——筛选提问倾向最大和最小的前五代码总的清洗1 分析出发点写一个python代码，遍历"D:\Ba…...

编程日记 2024/12/23 19:10:38

MongoDB 更新文档

关于MongoDB更新文档的操作，可以通过多种方法实现。以下是一些常用的方法： updateOne() 方法：用于更新匹配过滤器的单个文档。其语法为 db.collection.updateOne(filter, update, options)。其中，filter 用于查找文档的查询条件&a…...

编程日记 2024/12/23 18:59:24

分布式协同 - 分布式事务_TCC解决方案

文章目录导图Pre流程图2PC VS 3PC VS TCC2PC（Two-Phase Commit，二阶段提交）3PC（Three-Phase Commit，三阶段提交）TCC（Try-Confirm-Cancel）2PC、3PC与TCC的区别2PC、3PC与TCC的联系导…...

编程日记 2024/12/23 18:58:22

MFC/C++学习系列之简单记录13

MFC/C学习系列之简单记录13 前言memsetList Control代码注意总结前言今天记录一下memset和List control 的使用吧！ memset memset通常在初始化变量或清空内存区域的时候使用，可以对变量设定特定的值。使用： 头文件： C&#…...

编程日记 2024/12/23 18:49:09

PostgreSQL表达式的类型

PostgreSQL表达式是数据库查询中非常重要的组成部分，它们由一个或多个值、运算符和PostgreSQL函数组合而成，用于计算出一个单一的结果。这些表达式类似于公式，可以用查询语言编写，并用于查询数据库中的特定数据集。 PostgreSQL表…...

编程日记 2024/12/23 18:48:08

速通Python 第四节——函数

一、函数编程中的函数和数学中的函数有一定的相似之处. 数学上的函数, 比如 y sin x , x 取不同的值, y 就会得到不同的结果. 编程中的函数, 是一段可以被重复使用的代码片段代码示例 : 求一段范围的数的和 , 不使用函数 # 1. 求 1 - 100 的和 sum 0 for i in range(1, …...

编程日记 2024/12/23 18:47:07

如何在Windows系统上安装和配置Maven

Maven是一个强大的构建和项目管理工具，广泛应用于Java项目的自动化构建、依赖管理、项目构建生命周期控制等方面。在Windows系统上安装Maven并配置环境变量，是开发者开始使用Maven的第一步。本文将详细介绍如何在Windows系统上安装和配置Maven&#xff0…...

编程日记 2024/12/23 18:46:06

STM32之GPIO输出与输出

欢迎来到破晓的历程的博客 ⛺️不负时光，不负己✈️ 文章目录一.GPIO输入1.1GPIP简介1.2GPIO基本结构1.3GPIO位结构1.4GPIO的八种模式1.4.1浮空/上拉/下拉输入1.4.2 模拟输入1.4.3 推挽输出\开漏输出二.GPIO输入2.1.按键介绍2.2传感器模块介绍2.3按键电路一.G…...

编程日记 2024/12/23 18:38:59

目录 1 简单示例2 timer_create方式2.1 SIGEV_SIGNAL信号方式通知2.2 SIGEV_THREAD启动线程方式通知2.3 参数 1 简单示例 #include <stdio.h> #include <stdlib.h> #include <sys/time.h> #include <signal.h> #include <unistd.h>void setup_t…...

编程日记 2024/12/23 18:35:56

重拾设计模式--观察者模式

文章目录观察者模式（Observer Pattern）概述观察者模式UML图作用：实现对象间的解耦支持一对多的依赖关系易于维护和扩展观察者模式的结构抽象主题（Subject）：具体主题（Concrete Subject&#xf…...

编程日记 2024/12/23 18:34:51

Vue.js前端框架教程7：Vue计算属性和moment.js

文章目录计算属性（Computed Properties）基本用法缓存机制计算属性 vs 方法使用场景计算属性的 setter 和 getter结论Moment.js 进行时间处理1. 安装 Moment.js2. 在 Vue 组件中引入 Moment.js3. 在全局使用 Moment.js4. 使用 Vue 插件的方式引入 Moment.js5. 常用日期格式化…...

编程日记 2024/12/23 18:33:49

任务目标

学习内容脑图

步骤一：创建基本的HTML结构

标签介绍

效果展示

步骤二：添加标题和简介

标签介绍

效果展示

步骤三：添加个人信息

标签介绍

效果展示

步骤四：添加照片

标签介绍

效果展示

步骤五：添加爱好

标签介绍

效果展示

步骤六：添加教育背景

标签介绍

效果展示

步骤七：添加联系方式

标签介绍

效果展示

步骤八：添加表格信息

标签介绍

效果展示

最终代码

总结

相关文章：