0
0

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

任务目标

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

学习内容脑图

#mermaid-svg-5GTdqH41gawr4v0h {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-5GTdqH41gawr4v0h .error-icon{fill:#552222;}#mermaid-svg-5GTdqH41gawr4v0h .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-5GTdqH41gawr4v0h .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-5GTdqH41gawr4v0h .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-5GTdqH41gawr4v0h .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-5GTdqH41gawr4v0h .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-5GTdqH41gawr4v0h .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-5GTdqH41gawr4v0h .marker{fill:#333333;stroke:#333333;}#mermaid-svg-5GTdqH41gawr4v0h .marker.cross{stroke:#333333;}#mermaid-svg-5GTdqH41gawr4v0h svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-5GTdqH41gawr4v0h .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-5GTdqH41gawr4v0h .cluster-label text{fill:#333;}#mermaid-svg-5GTdqH41gawr4v0h .cluster-label span{color:#333;}#mermaid-svg-5GTdqH41gawr4v0h .label text,#mermaid-svg-5GTdqH41gawr4v0h span{fill:#333;color:#333;}#mermaid-svg-5GTdqH41gawr4v0h .node rect,#mermaid-svg-5GTdqH41gawr4v0h .node circle,#mermaid-svg-5GTdqH41gawr4v0h .node ellipse,#mermaid-svg-5GTdqH41gawr4v0h .node polygon,#mermaid-svg-5GTdqH41gawr4v0h .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-5GTdqH41gawr4v0h .node .label{text-align:center;}#mermaid-svg-5GTdqH41gawr4v0h .node.clickable{cursor:pointer;}#mermaid-svg-5GTdqH41gawr4v0h .arrowheadPath{fill:#333333;}#mermaid-svg-5GTdqH41gawr4v0h .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-5GTdqH41gawr4v0h .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-5GTdqH41gawr4v0h .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-5GTdqH41gawr4v0h .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-5GTdqH41gawr4v0h .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-5GTdqH41gawr4v0h .cluster text{fill:#333;}#mermaid-svg-5GTdqH41gawr4v0h .cluster span{color:#333;}#mermaid-svg-5GTdqH41gawr4v0h div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-5GTdqH41gawr4v0h :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

       掌握常用HTML标签 
     

       !DOCTYPE html: 声明文档类型 
     

       html: 根元素 
     

       head: 元数据 
     

       meta : 字符编码等 
     

       title: 文档标题 
     

       body: 主体内容 
     

       h1到h6: 标题 
     

       p: 段落 
     

       img: 图像 
     

       ul: 无序列表 
     

       ol: 有序列表 
     

       li: 列表项 
     

       a: 超链接 
     

       table: 表格 
     

       tr: 表格行 
     

       th: 表头单元 
     

       td: 表格单元

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

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

<!DOCTYPEhtml><html><head><metacharset="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>

中添加一个标题和简介文本。

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

标签介绍

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

效果展示

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

步骤三：添加个人信息

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

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

标签介绍

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

效果展示

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

步骤四：添加照片

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

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

标签介绍

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

效果展示

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

profile.jpg

存在）。

步骤五：添加爱好

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

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

标签介绍

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

效果展示

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

步骤六：添加教育背景

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

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>我的个人简介</title></head><body><h1>我的个人简介</h1><p>欢迎来到我的个人主页，这是关于我的一些信息。</p><h2>个人信息</h2><p>姓名：张三</p><p>年龄：28</p><p>职业：前端开发工程师</p><h2>照片</h2><imgsrc="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>: 定义列表中的每一项。

效果展示

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

步骤七：添加联系方式

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

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>我的个人简介</title></head><body><h1>我的个人简介</h1><p>欢迎来到我的个人主页，这是关于我的一些信息。</p><h2>个人信息</h2><p>姓名：张三</p><p>年龄：28</p><p>职业：前端开发工程师</p><h2>照片</h2><imgsrc="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>邮箱：<ahref="mailto:[email protected]">[email protected]</a></p></body></html>

标签介绍

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

效果展示

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

步骤八：添加表格信息

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

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>我的个人简介</title></head><body><h1>我的个人简介</h1><p>欢迎来到我的个人主页，这是关于我的一些信息。</p><h2>个人信息</h2><p>姓名：张三</p><p>年龄：28</p><p>职业：前端开发工程师</p><h2>照片</h2><imgsrc="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>邮箱：<ahref="mailto:[email protected]">[email protected]</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>: 定义表格中的单元格。

效果展示

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

最终代码

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>我的个人简介</title></head><body><h1>我的个人简介</h1><p>欢迎来到我的个人主页，这是关于我的一些信息。</p><h2>个人信息</h2><p>姓名：张三</p><p>年龄：28</p><p>职业：前端开发工程师</p><h2>照片</h2><imgsrc="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>邮箱：<ahref="mailto:[email protected]">[email protected]</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 前端
本文转载自: https://blog.csdn.net/qq_40254606/article/details/141004017
版权归原作者 捕风捉你 所有， 如有侵权，请联系我们删除。
登录后发布评论

“掌握常用HTML标签：创建个人简介网页”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

PNOZ 安全继电器中文说明书：工程安全的得力助手

安全生产许可证是什么？

盘点测评：5大顶级临时邮箱神器，探索哪款能让邮件沟通更安全更便捷

gitlab SSH的使用

移动端如何实现智能语音交互

conda创建虚拟环境，安装Stable Diffusion webui

Linux 系统上部署 RabbitMQ

文章导航