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

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

news 2025/7/8 13:02:29

任务目标

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

day52 ResNet18 CBAM

在深度学习的旅程中，我们不断探索如何提升模型的性能。今天，我将分享我在 ResNet18 模型中插入 CBAM（Convolutional Block Attention Module）模块，并采用分阶段微调策略的实践过程。通过这个过程，我不仅提升…...

编程新知 2025/7/8 4:49:20

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用，可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器，能够帮助开发者更好地管理复杂的依赖关系，而 GraphQL 则是一种用于 API 的查询语言，能够提…...

编程新知 2025/7/6 21:33:24

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 （一）多模态数据融合引擎跨模态语义对齐通过Transformer架构实现图像、语音、文字的语义关联。例如，当用户上传一张“蓝色连衣裙”的图片时，接口可自动提取图像中的颜色（RGB值&…...

编程新知 2025/7/7 1:12:07

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据准备一个容器,例如: …...

编程新知 2025/7/5 21:38:25

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包： for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2025/7/6 9:01:35

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一，概述 1. 目的将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本：2014.07； Kernel版本：Linux-3.10； 二，Uboot 1. sys_config.fex改动使能uart3(TX:PH00 RX:PH01)，并让boo…...

编程新知 2025/7/7 16:25:34

企业如何增强终端安全？

在数字化转型加速的今天，企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机，到工厂里的物联网设备、智能传感器，这些终端构成了企业与外部世界连接的 “神经末梢”。然而，随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2025/7/7 21:10:42

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。多个 Bean 的依赖关系构成环形链路，例如：双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/6/16 11:26:44

网站指纹识别

网站指纹识别网站的最基本组成：服务器（操作系统）、中间件（web容器）、脚本语言、数据厍为什么要了解这些？举个例子：发现了一个文件读取漏洞，我们需要读/etc/passwd，如…...

编程新知 2025/7/4 11:46:51

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama（有网络的电脑）2.2.3 安装Ollama（无网络的电脑）2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2025/7/7 22:47:18

任务目标

学习内容脑图

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

标签介绍

效果展示

步骤二：添加标题和简介

标签介绍

效果展示

步骤三：添加个人信息

标签介绍

效果展示

步骤四：添加照片

标签介绍

效果展示

步骤五：添加爱好

标签介绍

效果展示

步骤六：添加教育背景

标签介绍

效果展示

步骤七：添加联系方式

标签介绍

效果展示

步骤八：添加表格信息

标签介绍

效果展示

最终代码

总结

相关文章：