这是我参与「4月日新计划更文活动」的第4天。
今天想总结一下行内标签跟块级标签的区别，把自己这段时间学到的知识梳理一下输出来。
如果正好有朋友需要这方面的知识，那我会很开心的。
首先，在前端html中我们常常使用一些类似span、div之类的标签。平时没怎么注意他们的区别，这周系统的学习了之后，发现我们常用的标签还分成行标签跟块标签。
常用的行标签一般有：a、input、label、em、i、b、strong等等。
我给大家写一个行内标签的例子。
效果如下：
我再把对应的代码贴出来：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" contect="web前端 | 技术文章" />
<meta name="description" contect="写web前端技术文章的地方" />
<meta name="author" contect="写前端的小北" />
<title>行内标签例子</title>
</head>
<body>
<h3>写一个行内标签的例子</h3>
<a href="https://www.baidu.com">百度一下</a>
<label for="text">
这是我写的内容：<input type="text" value="haha" />
</label>
<em>这是斜体</em> |
<i>这是字体图标</i> |
<b>这是粗体</b> |
<strong>我是加粗的字体</strong>
</body>
</html>
还有一些常用到的块级标签。比如：div、p、h1、h2、h3、h4、h5、h6、ul、ol、li、dl、dt、dd。
同样我写一个块级标签页面，效果如下：
我再把对应的代码贴出来：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" contect="web前端 | 技术文章" />
<meta name="description" contect="写web前端技术文章的地方" />
<meta name="author" contect="写前端的小北" />
<title>块级标签例子</title>
</head>
<body>
<h3>写一个块级标签的例子</h3>
<div>这是div标签</div>
<p>这是段落标签</p>
<h1>这是h1标签</h1>
<h2>这是h2标签</h2>
<h3>这是h3标签</h3>
<h4>这是h4标签</h4>
<h5>这是h5标签</h5>
<h6>这是h6标签</h6>
<ul>
<li>这是无序列表1</li>
<li>这是无序列表2</li>
</ul>
<dl>
<dt>这是标题</dt>
<dd>这是内容</dd>
</dl>
</body>
</html>
在进行页面布局的时候，要根据具体的标签语义，让页面的标签语义化更好。同时要注意标签是属于行内标签还是块级标签，两者相结合，更好的进行页面的效果展示。
看到掘金上的好文章，如果对你有帮助，顺手点个赞，或者把文章收藏。不用担心找不到了，以后也能经常收到类似好回答，我会持续进行更新。
