本文目录导读：
在数字化时代，HTML（超文本标记语言）作为构建网页的标准标记语言，几乎成为了每个网站开发者的必备技能，HTML不仅用于创建网页的结构，还能通过各种标签的巧妙组合，实现丰富的网页效果和交互功能，HTML的基本标签都有哪些呢？它们又该如何使用呢？就让我们一起走进HTML的世界,探索这些神奇的标签吧！
HTML基本标签概览
HTML标签是用来描述网页内容的元素，它们可以出现在文档的开始部分（如<head>），也可以出现在文档的主体部分（如<body>），以下是一些常用的HTML基本标签：
标签：用于定义网页的标题，常见标签有<h1>到<h6>，其中<h1>表示最高级别的标题，<h6>表示最低级别的标题。
- 段落标签：用于定义段落，常见标签有
<p>。 - 链接标签：用于创建超链接，常见标签有
<a>。 - 图片标签：用于插入图片，常见标签有
<img>。 - 列表标签：用于创建列表，常见标签有
<ul>（无序列表）和<ol>（有序列表）。 - 表格标签：用于创建表格，常见标签有
<table>、<tr>（表格行）、<th>（表格头）和<td>（表格数据）。
下面是一个简单的HTML页面结构示例,展示了这些基本标签的用法：
<!DOCTYPE html>
<html>
<head>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个段落。</p>
<a href="https://www.example.com">点击访问example.com</a>
<img src="image.jpg" alt="示例图片">
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
</table>
</body>
</html>
HTML标签详解
我们将详细介绍这些基本标签的用法和作用。
标签（Headings）
标签用于定义网页的不同级别标题，从<h1>到<h6>，每个标签都有其独特的样式和用途。<h1>通常用于显示主标题，而<h6>则用于显示子标题或简短的说明文字。
<h1>这是一个H1级别的标题</h1> <h2>这是一个H2级别的标题</h2> <!-- 更多标题标签 -->
- 段落标签（Paragraphs）
段落标签用于定义文档中的段落，在HTML中,段落由一个或多个连续的文本行组成。
<p>这是一个段落。</p> <p>这是另一个段落。</p>
- 链接标签（Links）
链接标签用于创建超链接，允许用户通过点击链接来导航到其他网页或资源，链接标签使用href属性指定链接的目标地址。
<a href="https://www.example.com">点击访问example.com</a>
- 图片标签（Images）
图片标签用于在网页中插入图片，它使用src属性指定图片的来源URL，alt属性提供图片的替代文本（用于可访问性和SEO优化）。
<img src="image.jpg" alt="示例图片">
- 列表标签（Lists）
列表标签用于创建有序或无序的列表，无序列表使用 表格标签用于在网页中创建表格，表格由行和列组成，常用于展示结构化数据，表格标签包括 为了更好地理解这些基本标签的实际应用，让我们来看一个简单的案例：创建一个包含标题、段落、链接、图片和表格的网页。 在这个案例中，我们使用了 通过本篇文章的学习，相信你对HTML的基本标签有了更深入的了解，掌握这些标签是进行网页开发的基础，它们可以帮助你创建出结构清晰、内容丰富的网页，随着学习的深入，你还可以探索更多高级的HTML标签和属性,以满足更复杂的需求。 我想说的是，学习HTML是一个持续的过程，在实际开发中，你会遇到各种问题和挑战，但只要保持好奇心和求知欲，不断学习和实践，你一定能够成为一名优秀的网页开发者,加油！ 知识扩展阅读 嘿,小伙伴们！今天咱们不聊高大上的编程理论，就来点接地气的网页制作基础——HTML基本标签！别被吓跑，这玩意儿比你想象的要简单得多，想象一下，HTML就像是在建房子，每个标签就是一块块砖头，组合起来就是一幢漂亮的网页大楼！ 【引言：HTML是什么鬼？】
HTML全称是超文本标记语言，简单来说就是网页的骨架，它不像CSS那样负责网页的颜值，也不像JavaScript那样负责网页的互动，它只管搭建结构，就像盖房子先打地基一样，HTML是网页制作的第一步。
HTML标签大乱斗】
标签（h1-h6）标签就像是一篇文章的小标题，从h1到h6，数字越小字号越大，重要性越高，h1一般用在页面最顶部的大标题，h6用在最细小的副标题。
标签对比表： 案例：看看这个网页标题怎么写： 《肖申克的救赎》 《教父》 段落标签（p）
段落标签p就是用来放正文的，它会自动在段落前后加上空行，让文字看起来更舒服，如果连续写文字不加标签，那可就乱成一锅粥了！ 案例： 这是一个段落标签的例子,HTML是网页的基础，学习它就像学好网页制作的第一步，别担心，看起来复杂，其实很简单！ 水平线标签（hr）
hr标签用来在页面上画一条水平线，分隔内容区块，现在用得不多了，但了解总是没错的！ 案例： 这是第一段内容... 这是第二段内容... 换行标签（br）
br标签用来在文字中间换行，不用另起一段那么大，比如你想在中间突然换行，但不想留那么多空白，就可以用br。 案例： 这是一行文字 案例： 这是正常显示的文字 链接标签（a）
链接标签a用来创建超链接，href属性指定链接地址，target="_blank"可以让链接在新标签页打开。 问答时间！
Q：链接标签怎么写？
A：很简单！点击这里去百度 图片标签（img）
图片标签img用来插入图片，src属性指定图片地址，alt属性写图片说明（当图片加载失败时会显示的文字）。 案例： 列表标签
列表标签有三种：有序列表（ol）、无序列表（ul）和定义列表（dl）。 表格时间！列表标签对比表： 案例： 表格标签
表格标签table用来创建表格，tr是行，td是单元格，th是表头单元格。 案例： 文本格式化标签
这些标签用来改变文本的显示方式：加粗（b）、斜体（i）、下划线（u）、删除线（del）、引用（blockquote）等。 案例：
这是加粗的文字
这是斜体的文字
这是带下划线的文字
【进阶技巧：语义化标签】
现代HTML5引入了很多语义化标签，让网页结构更清晰： 这些标签不仅让代码更清晰,对搜索引擎和屏幕阅读器都有帮助。 【实战案例：做个简单网页】
现在我们来整合一下，做个简单的个人简介网页： <!DOCTYPE html> 大家好,我是小明，一名前端开发工程师。 我的兴趣爱好是编程、摄影和旅行。 【HTML标签小贴士】 后面一定要有 【互动时间】
现在你是不是觉得HTML也没那么可怕？别急着关掉页面，赶紧在本地新建一个HTML文件，写写上面的代码，看看效果！遇到问题可以在评论区问我，我们一起解决！ 学习编程最重要的是动手实践,不要怕犯错，每个程序员都是从写错代码开始的！祝大家学习愉快，早日成为HTML高手！ 相关的知识点：<ul>标签，列表项使用<li>标签；有序列表使用<ol>标签，列表项同样使用<li>
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
<ol>
<li>步骤1</li>
<li>步骤2</li>
<li>步骤3</li>
</ol>
<table>、<tr>、<th>和<td>等子标签。<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
</table>
HTML标签的实际应用案例
<!DOCTYPE html>
<html>
<head>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个段落，用于介绍我们的网站。</p>
<a href="https://www.example.com">点击访问example.com</a>
<img src="image.jpg" alt="示例图片">
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
</table>
</body>
</html>
<h1>到<h6>标签来定义主标题和子标题，<p>标签来定义段落，<a>标签来创建链接，<img>标签来插入图片，以及<table>、<tr>、<th>和<td>标签来创建表格，通过这个简单的示例,你可以初步了解HTML基本标签的用法和作用。总结与展望
标签名
大小
用途
h1
最大
h2
较大
h3
较小
h4-h6
越来越小
欢迎来到我的个人网站
关于我
我的兴趣爱好
喜欢的电影
这是换行后的第二行文字
标签名
类型
例子
ol
有序列表
苹果
ul
无序列表
• 苹果
li
列表项
dl
定义列表
姓名
年龄
职业
张三
25
程序员
李四
30
设计师
这是删除的文字这是引用的文字
欢迎来到我的网站
关于我
<section id="skills">
<h2>我的技能</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</section>
<section id="contact">
<h2>联系方式</h2>
<p>邮箱：<a href="mailto:example@email.com">example@email.com</a></p>
<p>电话：<a href="tel:+123456789">123-456-789</a></p>
</section>
