当前位置:书生博客 > 而已集 > 学习笔记 > 正文

作者:书生

懂得了这世界上没有绝对的正确,能够接受别人有不同的三观和其衍生出来的思考方式。

手机扫码查看

Html的三种不同类型标签

说明:

本页记录了学习认知html中的标签元素三种不同的类型

Html中的标签元素可以分为三种类型:块级元素、行内元素和行内块级元素

一、块级元素的特点有:

  1. 每一个新的块级元素都是独占一行、且紧跟后面的元素也另起一行
  2. 每个元素设置height(高度)、width(宽度)、line-height(行高)padding-top/bottom(顶、底边距)
  3. 如果不去设置每个元素的height和width,那么该元素的height和width则与该元素的父元素一致。

父元素说明:html的标签都是有一个层架关系的,简单的例子就是html中的标签都是闭合的,闭合的中间还可以嵌套其他的标签,则嵌套在某个标签里面的标签就成了这个标签的子元素,外边的元素就是父元素。一个div里在嵌套一个div,外边的div就是里面div的父元素,代码示例如下:

<body>
    <div id="father">
    <div id="son">   </div>
    </div>
</body>

以上元素中id为father就是id为son的子元素,可以使用JavaScript来证明一下,如下图:

Html的三种不同类型标签

可以使用JavaScript的parentElement方法可以查看到id为son的父元素是id为father的div。

我们可以列出一些常用的块级元素:<div>、<p>、<ol>、<ul>、<table>、<blockquote>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<center>、<li>等。需要注意的一点是我们实际运用这些块级元素标签必须闭合!!!

 二、行内元素的特点则是:

  1. 每个元素都可和其他元素都在一行上面
  2. 每个元素不可设置height(高度)、width(宽度)、line-height(行高)padding-top/bottom(顶、底边距)
  3. 元素的宽度就是它包含的文字或图片的宽度,不可改变。

常用的行内元素有: <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<cite> 等。

需要注意的是行内元素与块级元素可以相互转化,比如在 CSS 中将行内元素设置为以块级元素的方式显示display: block,就将行内元素转化成了一个块状元素,这时候,我们可以设置该元素的长宽等原本不能设置的属性。 代码示例如下:

<div style="display:block">
</div>

上面写这样div就变成块级元素了

同样,我们也可以设置块级元素的display属性为display: inline,这样块级元素就可以再同一行显示了。行内块状元素像行内元素一样在同一行显示,又可以像块级元素一样设置高、宽、行高、边距。代码示例如下:

<div style="display:inline">
</div>

上面写这样div就变成行内元素了

三、行内块级元素就是集中了块级元素的:

  1. 和其他元素都在一行上;
  2. 元素的高度、宽度、行高以及顶和底边距都可设置

常用的行内块级元素:<img>、<input>等

其他的元素可以通过设置display: inline-block,转化为内联块状元素。

博主有话说:

作者:书生, 转载或复制请以 超链接形式 并注明出处 书生博客
原文地址:《Html的三种不同类型标签》 发布于2018-05-29

分享到:
赞(2) 打赏

评论 抢沙发

6 + 8 =


觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Html的三种不同类型标签

长按图片转发给朋友

欢迎来访本博客!

本博客分享各种活动线报,实用代码等一些比较实用的资源,感兴趣的话可以收藏一下哦~

了解一下

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录