我了解的：HTML行、块标签

最新推荐文章于 2023-12-08 15:37:27 发布

余九月丶

最新推荐文章于 2023-12-08 15:37:27 发布

阅读量1k

点赞数 3

分类专栏：我了解的HTML 文章标签： html

本文链接：https://blog.csdn.net/sepgit/article/details/107071348

版权

我了解的HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

行标签和块标签

块标签：单个标签独自一行占据，无论在HTML 文件内是如何书写都会再起一行的，我们称之为块标签。
行标签：在HTML 书写，都是在同一行中，不会主动的换行的我们称之为行标签，也叫内联标签。

这是我理解的行、块标签。这个两个定义是在HTML中非常基础的内容，属于必须要弄清楚并且掌握的部分。对之后的页面布局和CSS样式的书写都有着至关重要的意义。有时候，我们也将标签称之为元素。行、块标签=行、块元素，只是叫法不同，表达的意思还是相同的。

前言

在介绍两个标签之前，我们先使用Chrome打开百度的新闻页面，并且使用上一篇提到的‘检查’功能。
检查功能
打开之后单击红框内的‘鼠标指针’图案，单击后，这个图案会变成蓝色。这时候你就可以移动你的鼠标将指针放到页面上任何你想放到的位置。将鼠标移动到某个段落，会出现：

这一个‘蓝色’的块，就是我们所说的标签在网页上的展示出的内容。这里引入一点之后会介绍的CSS内容。以Chrome 为例：蓝色内容为一个标签的宽（width）、高（height）区域；橙色为标签的外边距（margin）；绿色为标签的内边距（padding）。
上图在检查中的显示为：
标签在页面中的对应
在这截图里，红色框的部分是标签在网页中的展示。蓝色框的内容，是我们在html 文件中敲的代码。在一开始学习HTML的时候，一定要多使用浏览器的‘检查’功能。他可以非常直观的告诉你，你写的东西到底是个什么样子。感兴趣的话，可以打开自己经常使用的网站，进行‘检查’操作。
到这里，看到页面的代码，再回头看看一开始的定义，会感到一伙，上方截图展示的区域标签好像和行、块标签的定义都不一样啊，是不是解释错了？放心，没有解释错。因为网站上标签的样式都是被CSS约束过的（CSS，我们之后也会有介绍）。

现在，我们具体介绍什么是行、块标签。这里介绍的标签都是他们最原本的样子。下面内容如果不做特殊说明，提到的标签都是双标签。如果遇到单标签会特殊说明。
工具：编辑器Visual Studio Code。浏览器 Chrome。

行标签

行标签不会主动换行
行标签设置 width 、height、纵向的margin、纵向的padding无效。但是水平方向上的margin、padding是有效的。
行标签没有默认的宽高。
原则上，行标签内部只会嵌套行标签，不嵌套块标签。

常用的行标签

标签	作用
a	超链接，跳转至 href 指向的网站，他是一个单标签
b	表示加粗文字
br	用于换行，在这之后的标签将另起一行
em	表示强调作用。在页面中的显示为斜体
i	表示斜体。页面中和em标签一样，在页面中使文字变成斜体
strong	表示强调作用。在页面中显示为加粗
span	表示区域

我们把上面介绍的几种标签在html文件里面写出来看看效果。因为行标签没有默认的宽高，所以我们在表中加入文字，这样可以直观的感受到行标签的特点（因为标签的特性，他们在没有用过CSS设置宽高时，会被内部的元素‘撑开’）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行标签</title>
</head>
<body>
    <a href="https://www.baidu.com/">点击我前往百度</a>
    <b>b标签，表示加粗</b>
    <strong>strong标签，表示强调，显示为加粗</strong>
    <i>i标签，表示斜体</i>
    <em>em标签，表示强调，显示为加粗</em>
    <span>span标签，span包裹的区域，没有额外的显示样式。</span>
    <span>这里用于介绍br标签 <br> 前面添加了br会换行 </span>
</body>
</html>

他们在页面上的显示为：

我们可以看到，虽然在代码中，我们的几个行标签都是隔行书写的，但是实际在页面中的展示还是在同一行中的，直到br 标签的位置，才换行了。当然这里你可以使用‘检查’功能，将鼠标移动到文字上看看他们在浏览器中是怎么展示的。如果还是感觉不好理解，你可以将根据行标签的特性：不会主动另起一行显示，把他理解成页面中的文字。因为文字在页面中是不会主动换行，这样可以方便理解一点。但是行标签绝对不等同于文字。

块标签

块标签在页面中显示都会另起一行。
块标签可以设置：width、height、margin、padding。
块标签默认高度为0，但是默认宽度为父元素的100%。也就是子元素的宽度，在不设置时，会默认继承父元素为父元素的宽度。
块标签是中可以嵌套块标签，也可以嵌套行标签。

这里介绍下什么叫父元素，什么叫子元素。在html 中，标签都是一层套一层的。根据块标签的介绍的最后一条，块标签中可以嵌套行、块标签。

<div></div>
<ul>
	<li></li>
</ul>

div 就是一个块标签，在div 的起始标签和结束标签之间，才是我们放置具体内容的地方。div 和 ul 两个是兄弟标签，没有什么特殊的意义。li 标签就是做为ul 的内容，放置在 ul 标签的内部。这样，ul 标签就是li 标签的父元素。li 标签就是 ul 标签的子元素。这个关系非常重要。

标签	作用
div	表示文档中的区域，没有具体表现。在html中做为最最常用，最最基础的标签。
p	段落标签，又来表示文字段落
ul	表示无序列表，结合li使用，表现为列表的前面为 ‘点’ 而不是数字
ol	表示有序列表，结合li使用，表现为列表的前面为数字
li	表示列表项，不单独使用，必须结合ul,ol一起使用
h1-h6	标题标签，页面显示为加粗

同样的，来看看效果:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块标签</title>
</head>
<body>
    <div>div，最基础的标签</div>
    <h1>标题标签h1</h1>
    <h2>标题标签h2</h2>
    <h3>标题标签h3</h3>
    <h4>标题标签h4</h4>
    <h5>标题标签h5</h5>
    <h6>标题标签h6</h6>
    <p>p标签，段落标签 111</p>
    <p>p标签，段落标签 222</p>
    <ul>
        <li>无序标签ul，必须结合li 111</li>
        <li>无序标签ul，必须结合li 222</li>
        <li>无序标签ul，必须结合li 333</li>
    </ul>
    <ol>
        <li>有序标签ol，必须结合li 111</li>
        <li>有序标签ol，必须结合li 222</li>
        <li>有序标签ol，必须结合li 333</li>
    </ol>
</body>
</html>

显示为

好了，我们发现，块标签会自动的换行。但是又有一点点的疑惑，块标签不是只是另起一行吗，为什么感觉标题标签之间；段落标签之间的像是换了两行来书写的。这个是正常的，部分标签都会有自己自带的CSS样式，上面的标题标签和段落标签，就是因为这个原因导致的，两行之间的间距会比较大。这个在后续的CSS介绍中也会详细的说明。