HTML 超常用标签！+案例（重要！）标题标签+段落标签+换行标签+文本格式化标签+div和span标签+图像标签和路径+超链接标签

本文链接：https://blog.csdn.net/weixin_45586870/article/details/120532279

这篇博客详细介绍了HTML的基础标签使用，包括标题标签、段落标签、换行标签、文本格式化标签、div和span标签、图像标签和路径、以及超链接标签。强调了每个标签的语义和应用场景，提供了丰富的示例代码，帮助读者理解和掌握HTML的基本结构。

摘要由CSDN通过智能技术生成

学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是指标签的含义，即这个标签是用来干嘛的。根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

1、标题标签

标题标签 <h1> - <h6>（重要）
为了使网页更具有语义化，我们经常会在页面中用到标题标签。
HTML 提供了 6 个等级的网页标题，即<h1> - <h6> 。
具体实现：

 <h1> 我是一级标题 </h1>

特点：
1.加了标题的文字会变的加粗，字号也会依次变大。
2. 一个标题独占一行。

    <h1>标题一共六级选,</h1>
    <h2>文字加粗一行显。</h2>
    <h3>由大到小依次减，</h3>
    <h4>从重到轻随之变。</h4>
    <h5>语法规范书写后，</h5>
    <h6>具体效果刷新见。</h6>

显示效果如下：
在这里插入图片描述

2、段落标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。
具体实现：

 <p> 我是一个段落标签 </p>

特点：
1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
2. 段落和段落之间保有空隙。

3、换行标签

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签 <br />。
具体实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>在中国IT教育行业发展的轨迹中，<br /> 能始终秉承着初心做教育的企业为数不多，而在李老师的心中，学校教育就是其中之一。在11年的风雨历程中，传智播客在中国IT教育行业留下了“为莘莘学子改变命运而讲课，为千万学生少走弯路而著书”的独特烙印。同时，传智播客也凭借着良好的口碑、更注重品质的教学及优秀的业绩增长成功吸引了众多知名投资者们的青睐，其中不乏创新工场、经纬、君度、蓝图、北城壹号等多个投资机构。</p>

    <p>不久前，学校新加入了几位知名股东，其中包括创投圈的大咖——创新工场的李老师。在中国，李老师至少影响了70和80后两代人，然而翻开他的履历，我们并没有看到诸如马云、马化腾那样堪称传奇的成功经历，我们看到的只是一位厚积薄发、深耕在世界IT互联网行业多年的“导师”：</p>
</body>
</html>

显示效果：
在这里插入图片描述

特点：
1. <br /> 是个单标签。
2. <br /> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

4、文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。
在这里插入图片描述
重点记住加粗和倾斜。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文本格式化标签</title>
</