任务目标
理解HTML文档的基本结构，掌握常见的HTML标签及其用途，创建一个简单的个人简介网页。
学习内容脑图
掌握常用HTML标签 !DOCTYPE html: 声明文档类型 html: 根元素 head: 元数据 meta : 字符编码等 title: 文档标题 body: 主体内容 h1到h6: 标题 p: 段落 img: 图像 ul: 无序列表 ol: 有序列表 li: 列表项 a: 超链接 table: 表格 tr: 表格行 th: 表头单元 td: 表格单元
步骤一：创建基本的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>中添加一个标题和简介文本。
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的个人简介</title>
</head>
<body>
<h1>我的个人简介</h1>
<p>欢迎来到我的个人主页，这是关于我的一些信息。</p>
</body>
</html>标签介绍
<h1>: 定义一级标题，是文档中最重要的标题。HTML支持六级标题，<h1>到<h6>，依次降低重要性。<p>: 定义一个段落。浏览器会在段落前后自动添加一些空白。
效果展示
此时在浏览器中打开文件，您将看到页面顶部有一个大标题"我的个人简介"，以及一段欢迎文本。
步骤三：添加个人信息
接下来，添加一个小标题和一些个人信息。
html
<!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>。
效果展示
现在，页面上将显示一个二级标题"个人信息"以及个人信息的具体内容。
步骤四：添加照片
在"个人信息"部分下添加一张照片。
html
<!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存在）。
步骤五：添加爱好
添加一个无序列表，列出你的爱好。
html
<!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>: 定义列表中的每一项。
效果展示
页面上将显示一个标题"爱好"以及一个无序列表，列出你的爱好。
步骤六：添加教育背景
添加一个有序列表，列出你的教育背景。
html
<!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>: 定义列表中的每一项。
效果展示
页面上将显示一个标题"教育背景"以及一个有序列表，列出你的教育背景。
步骤七：添加联系方式
最后，添加一个超链接来展示你的邮箱地址。
html
<!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:: 用于创建电子邮件链接。
效果展示
页面上将显示一个标题"联系方式"和一个电子邮件链接。点击该链接将打开默认的邮件客户端，并准备好发送邮件。
步骤八：添加表格信息
我们将添加一个表格来展示你的技能。
html
<!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>: 定义表格中的单元格。
效果展示
页面上将显示一个标题"技能"以及一个表格，展示你的技能和熟练度。
最终代码
html
<!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中的一些常用标签及其用途。希望这些内容对您的前端学习有所帮助。
如果您在学习过程中有任何问题，请在评论区留言，我会及时回复。如果觉得这篇文章对您有帮助，别忘了点赞、收藏和关注！