html中行内元素、块级元素、行内块级元素有哪些，以及它们之间的区别

已于 2022-04-25 09:24:11 修改
阅读量5.3k 收藏 15
点赞数 4
文章标签： html css
于 2020-05-30 09:30:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyclyc_/article/details/106437105
版权

html中行内元素、块级元素、行内块级元素有哪些，以及它们之间的区别

  1. 行内元素：
    最常用的是span，其他还有a abbr b big br em i label

  2. 块级元素
    比较有代表性的是div 其余有p h1 h2 h3 h4 h5 h6 table ul li ol header section aside footer dl dd dt form hr pre tbody tfoot th thead tr

行内块级元素：img input td

行内元素的特点
相邻的行内元素不换行，设置宽高无效，margin设置仅左右方向有效，上下无效。padding设置上右下左都有效。水平方向上padding-left、padding-right、margin-left、margin-right都都有边距效果，但是垂直方向上padding-top、padding-bottom、margin-top、margin-bottom都不会产生边距效果。
块级元素的特点
能够自动开启新的一行，能够设置宽高，margin和padding对上下左右四个方向都有效。
行内块级元素的特点
元素排列在一行，不会自动换行，可以设置宽高和高度以及外边距和内边距的所有样式。三者关系如下。

display:inline 转为行内元素
display：block 转为块级元素
display:inline-block转为行内块级元素

此处有代码解释：来自转载

silence^
关注
详解HTML常用的标签中行内元素和块级元素
09-28
块级元素和行内元素的不同主要体现在它们的布局方式上，以及如何与周围的元素交互。 首先，块级元素（block element）的特性是它们会独占一行显示，其后自动换行，好像一个盒子一样，占据一整行空间。块级元素可以...
块级元素和行内元素
weixin_42434289的博客
10-06 758
块级元素和行内元素 块级元素 <address>定义地址 <caption>定义表格标题 <dd>定义列表中定义条目 <div>定义文档中的分区或节 <dl>定义列表 <dt>定义列表中的项目 <fieldset>定义一个框架集 <form>创建HTML表单 <h1>定义最大的标题 <h2>定义副标题 <h3>定义标题 <h4>定...
HTML中常见的行内元素与块级元素及它们区别
joke123x的博客
10-31 1054
行内元素： 块级元素： Angular管道： 跨域： NzModalService 数据库JDBC： 1.注册驱动 2.获取连接 3.获取操作数据的预处理对象 4.执行SQL，得到结果集 5.遍历封装结果集 6.释放资源 面包屑 当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值 不可继承：display, margin,border,padding,background,height,width,position 基本链接地址 基本元数据 鼠标移入：onmouseover 鼠标移出：onmous
前端CSS：行内元素、块级元素与行内块
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-24 796
通过本文的学习，你已经掌握了行内元素、块级元素和行内块元素的基础知识，以及如何在实际开发中应用这些元素。本文将深入探讨行内元素、块级元素和行内块元素的区别，通过丰富的示例和详细的代码片段，帮助读者更好地掌握这些元素的特点和应用场景。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。被设置为行内块元素。在这个例子中，我们混合使用了行内元素、行内块元素和块级元素。被设置为行内块元素。行内元素和行内块元素在同一行中显示，展示出不同元素类型的混合使用效果。
HTML基础知识（一）：行内元素，块级元素，行内块元素
前端
10-28 1万+
文章目录一、html元素分类二、块元素三、行内元素四、行内块元素五、替换元素和非替换元素六、元素转换 一、html元素分类 html元素：行内元素、块元素、行内块元素 二、块元素 常见的块级元素：< h1 >~< h6 >、< p >、< div >、< ul >、< ol >、< li >、< dd >、< dt >、< dl >等，其中 < div > 标签是最典型的
HTML行内元素和块级元素的区别
zbb202013030229的博客
12-13 2376
　HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。 一，行内元素与块级元素的区别： 1.行内元素与块级元素直观上的区别二、行内元素与块级元素的三个区别 行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。 块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。 2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它...
块级元素、行内元素、行内块元素的区别
m14260的博客
07-27 221
嘀嘀嘀！
css中行内元素和块级元素的区别
09-27
尽管它们默认表现为行内元素，但因为它们有内在的尺寸，比如图片的宽度和高度，因此可以设置`width`和`height`。对于表单元素，浏览器也会提供默认的样式，包括宽度和高度。 不可替换元素，如`<p>`、`<span>`等，...
IE6和IE7中行内元素后的浮动元素被折行的问题解决
09-27
然而，在IE6和IE7中，如果浮动元素前面有一个非浮动的行内元素，它们会错误地将浮动元素的当前行看作是非浮动元素的底部边界，从而导致浮动元素被推至下一行。此问题在IE8的快速渲染模式（Quirks Mode）下也会出现。...
html标签详细诠释（全）
码农研究僧的博客
03-21 1346
一个标签一一对应 <html> </html> 文本内容及标签 如果没有居中选项，可外加一个div容器 直接在内容中输入文字，即使换行，在html显示只是空格。 <h1>大标题</h1> <h2>小一点的标题</h2> <h3>再小一点的标题</h3> <h4>更小一点的标题</h4> 只有h1到h6的6个标题，依次字体递减 段落 <p>Hello...
css总结17:HTML块级元素&行内元素之分: <div> 和<span>
anjiye7641的博客
04-02 155
1 HTML 区块元素:大多数 HTML 元素被定义为块级元素或内联元素。 1.1 块级元素实例: <div> <h1>, <p>, <ul>, <table> 块级元素的特点: 独占一行,可设置宽高 1.2 行级元素实例 :<span> <a> 行级元素特点:一行可排布多个,不可设...
HTML标签块级元素与行内块元素区别，以及一些特殊元素的使用！
gfhdgo的博客
08-03 385
一、HTML简介 HTML不是一个编程语言，它是一门超文本标记语言。很多才学习前端的小伙伴总是将html认为是一门编程语言。它的作用是在于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 HTML特点 超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网 （WWW）盛行的原因之一，其主要特点如下： 1.简易性：超文本标记语言...
HTML5行内元素有哪些,块级元素和内联元素有哪些？两者有什么区别？
m0_49456900的博客
02-28 833
块级元素的display属性是block/table。其中块级元素有div、h1~h6、table、p、ul、ol、audio、video等； 内联元素的display属性是inline/inline-block。其中内联元素有span、img、input、button、a等。 区别： 块级元素：独占一行；可以设置宽高，当不设置宽高时，内容自动撑满；可以包含行内元素和其他块级元素。 行内元素：一行内可以放多个，不独占一行；不可以设置宽高，宽高由元素内部的内容决定，padding和margin的top
行内元素、块级元素和行内块元素
qq_45654474的博客
08-23 846
1、行内元素 （a）—— 标签定义链接 （b）—— 字体加粗 （br）—— 换行 （i）—— 斜体文本效果 （img）—— 在网页中嵌入图片 （input）—— 输入框 （span）—— 组合文档中的行内元素 （small）——呈现小号字体效果 （big）——呈现大号字体效果 （sub）—— 定义下标文本 （sup）—— 定义上标文本 2、块级元素 （div）—— 定义文档中的分区或节 （dl）—— 定义列表 （dt）—— 定义列表中的项目 （dd）—— 定义列表中定义条目 （h1 - h6）—— 定义标题
前端面试html自检（先看问题 自己自述一遍 不会再看答案 ）
qq_41867900的博客
05-26 710
推荐大家的使用本篇文章的方式，先看问题自己会不会，如果会的话，要自己说一遍，组织好语言。
HTML行内元素、块状元素、行内块状元素的区别
热门推荐
zhanglir333的博客
01-27 2万+
HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换： 　　(1)display:inline;转换为行内元素 　　(2)display:block;转换为块状元素 　　(3)display:inline-block;转换为行内块状元素 1.行内元素 　　行内元素最常使用的就是s
HTML中的行内元素、块级元素、空元素
前端小白的博客
10-06 453
空元素（void elements）是指没有闭合标签的元素。它们在 HTML 中没有内容，只有一个开启标签。HTML 中的行内元素（inline elements）通常用于在一行内显示，不会独占一行的空间。块级元素（block-level elements）通常会独占一行的空间，并且会在前后创建换行。：用于对文本或其他内联元素进行分组或添加样式。：用于创建用户输入字段。：用于创建用户输入字段。：表示斜体强调的文本。：用于无序和有序列表。：用于指定页面元数据。：用于创建水平分隔线。：用于引入外部资源。
html中哪些是行内元素,html行内元素有哪些
weixin_33585152的博客
06-07 1万+
html行内元素有：a、b、u、span、img、input、strong、select、sub、sup、label、em、button、textarea、tt、var、samp、br、cite、code、font、strike等等。本教程操作环境：windows7系统、HTML5版、Dell G3电脑。根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元...
HTML的语义【块元素】【行内元素】
m0_67176957的博客
02-23 538
在网页中HTML专门用来负责网页的结构，所以在使用HTML标签时，应该关注的是标签的语义，而不是它的样式 标题标签：h1~h6一共有六级标题 h1是一级标题， h2是二级标题， h3是三级标题 …… h6是六级标题 从h1~h6的重要性，h1最重要，h6最不重要 h1在网页中的重要性仅次于title标签，一般情况下一个页面中只有一个h1 一般情况下标题标签只会使用到h1~h3，h4~h6很少用 在页面中独占一行的元素称为块元素(block element) p标签表示页面中的一个.
html中行内元素有哪些
05-05
HTML 中的行内元素包括： - `<a>`：超链接 - `<abbr>`：缩写 - `<acronym>`：首字母缩略词 - `<b>`：粗体文本 - `<br>`：换行 - `<button>`：按钮 - `<cite>`：引用 - `<code>`：计算机代码 - `<em>`：强调文本 - `<i>`：斜体文本 - `<img>`：图像 - `<input>`：输入框 - `<label>`：标签 - `<q>`：短引用 - `<select>`：下拉列表框 - `<small>`：小号文本 - `<span>`：一般的行内元素容器 - `<strong>`：加重语气的文本 - `<sub>`：下标文本 - `<sup>`：上标文本 - `<textarea>`：多行文本输入框
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值