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

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

news 2025/11/23 1:03:31

任务目标

理解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

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子，用于处理异步操作（如数据加载）中的错误。下面我将详细解释其用途并提供代码示例。一、useAsyncError 用途处理异步错误：捕获在 loader 或 action 中发生的异步错误替…...

编程新知 2025/10/27 7:52:30

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务中文乱码问题： 下面创建一个简单的Flask RESTful API示例。首先，我们需要创建环境，安装必要的依赖，然后…...

编程新知 2025/11/20 13:20:47

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留，CCA-Attention为LLM长文本建模带来突破性进展琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制（CCA-Attention），…...

编程新知 2025/11/21 9:38:58

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...

编程新知 2025/11/18 4:33:09

Mac软件卸载指南，简单易懂！

刚和Adobe分手，它却总在Library里给你写"回忆录"？卸载的Final Cut Pro像电子幽灵般阴魂不散？总是会有残留文件，别慌！这份Mac软件卸载指南，将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2025/11/21 20:49:18

数据库分批入库

今天在工作中，遇到一个问题，就是分批查询的时候，由于批次过大导致出现了一些问题，一下是问题描述和解决方案： 示例： // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2025/7/18 1:50:27

dify打造数据可视化图表

一、概述在日常工作和学习中，我们经常需要和数据打交道。无论是分析报告、项目展示，还是简单的数据洞察，一个清晰直观的图表，往往能胜过千言万语。一款能让数据可视化变得超级简单的 MCP Server，由蚂蚁集团 AntV 团队…...

编程新知 2025/11/22 9:35:19

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码：‘allure’ �����ڲ����ⲿ���Ҳ���ǿ�&am…...

编程新知 2025/11/19 11:49:42

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

编程新知 2025/11/17 9:12:21

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

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

编程新知 2025/11/16 23:25:10

任务目标

学习内容脑图

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

标签介绍

效果展示

步骤二：添加标题和简介

标签介绍

效果展示

步骤三：添加个人信息

标签介绍

效果展示

步骤四：添加照片

标签介绍

效果展示

步骤五：添加爱好

标签介绍

效果展示

步骤六：添加教育背景

标签介绍

效果展示

步骤七：添加联系方式

标签介绍

效果展示

步骤八：添加表格信息

标签介绍

效果展示

最终代码

总结

相关文章：