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

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

news 2026/1/28 23:34:11

任务目标

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

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织在C中，结构体可以嵌套使用，形成更复杂的数据结构。例如，可以通过嵌套结构体描述多层级数据关系： struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/11/16 19:06:23

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势：专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发，是一款收费低廉但功能全面的Windows NAS工具，主打“无学习成本部署” 。与其他NAS软件相比，其优势在于： 无需硬件改造：将任意W…...

编程新知 2026/1/2 23:01:24

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2026/1/26 22:27:53

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中，我们可能会遇到一些流式数据处理的场景，比如接收来自上游接口的 Server-Sent Events（SSE） 或流式 JSON 内容，并将其原样中转给前端页面或客户端。这种情况下，传统的 RestTemplate 缓存机制会…...

编程新知 2025/8/11 8:18:44

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2026/1/28 11:11:03

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序，以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务，提供稳定高效的数据处理与业务逻辑支持；利用 uniapp 实现跨平台前…...

编程新知 2026/1/28 8:42:51

浅谈不同二分算法的查找情况

二分算法原理比较简单，但是实际的算法模板却有很多，这一切都源于二分查找问题中的复杂情况和二分算法的边界处理，以下是博主对一些二分算法查找的情况分析。需要说明的是，以下二分算法都是基于有序序列为升序有序的情况&#xf…...

编程新知 2025/9/14 7:37:32

CSS | transition 和 transform的用处和区别

省流总结： transform用于变换/变形，transition是动画控制器 transform 用来对元素进行变形，常见的操作如下，它是立即生效的样式变形属性。旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

编程新知 2025/10/17 20:59:57

鸿蒙HarmonyOS 5军旗小游戏实现指南

1. 项目概述本军旗小游戏基于鸿蒙HarmonyOS 5开发，采用DevEco Studio实现，包含完整的游戏逻辑和UI界面。 2. 项目结构 /src/main/java/com/example/militarychess/├── MainAbilitySlice.java // 主界面├── GameView.java // 游戏核…...

编程新知 2025/12/8 9:32:22

Vue3 PC端 UI组件库我更推荐Naive UI

一、Vue3生态现状与UI库选择的重要性随着Vue3的稳定发布和Composition API的广泛采用，前端开发者面临着UI组件库的重新选择。一个好的UI库不仅能提升开发效率，还能确保项目的长期可维护性。本文将对比三大主流Vue3 UI库（Naive UI、Element …...

编程新知 2026/1/26 18:34:54

任务目标

学习内容脑图

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

标签介绍

效果展示

步骤二：添加标题和简介

标签介绍

效果展示

步骤三：添加个人信息

标签介绍

效果展示

步骤四：添加照片

标签介绍

效果展示

步骤五：添加爱好

标签介绍

效果展示

步骤六：添加教育背景

标签介绍

效果展示

步骤七：添加联系方式

标签介绍

效果展示

步骤八：添加表格信息

标签介绍

效果展示

最终代码

总结

相关文章：