生活
行内元素 、行内元素不能设置背景属性
2023-04-13 00:11  浏览:46

常用的行内元素有

1、常见的块元素有h1~h6、p、div、ul、ol、li等,其中div标签是最典型的块元素。

2、常见的行内元素有a、strong、b、em、i、del、s、ins、u、span等,其中span标签最典型的行内元素。有的地方也成内联元素

3、在行内元素中有几个特殊的标签——img /、input /、td,可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素。

HTML块级元素和行内元素

一、从概念的角度来看块级元素和行级元素咱们可以理解为:

    块级元素 一般都是新起一行,可以容纳行内元素和其他块级元素;

    行内元素 一般都是语义级别的基本元素,一般只能容纳文本或者其他行内元素。

二、块级元素和行内元素的区别

    1、块级元素会独占一行,其宽度自动填满其父元素宽度;行内元素会排列到同一行里,其宽度随元素的内容变化而变化。

    2、块级元素可以设置宽高;行内元素设置宽高无效。

    3、块级元素可以设置margin,padding属性;行内元素的水平方向的padding会有边距效果,但是竖直方向的padding没有效果。

常用块级元素列表:

div     定义文档中的分区或节

h1、h2、h3、h4、h5、h6     定义标题,数字越小字体越大越粗

p     段落标签

ul     定义无序列表

ol     定义有序列表

li     定义列表项目

dl     定义列表

dt     定义列表中的项目

dd     定义列表中的条目

hr     创建一条水平线

常用行级元素列表:

span     组合文档中的行内元素

i     倾斜文本

em     定义为强调的内容

b     字体加粗

strong     语气更强的强调内容

a     标签可定义锚

img     嵌入图片

input     输入框

select     创建单选或多选菜单

textarea     多行文本输入框

button     按钮标签

sub     下标文本

sup     上标文本

什么是块元素和行内元素? 请分别列出五个块元素和行内元素

块级元素(block-level)

块元素会独自占据一整行,或者多行,可以任意设置其大小尺寸,是用于搭建网页布局的必须部分,使网页结构更加紧凑合理。

块级元素有以下几个特点:

总是另起一行(特立独行)

可以设置其宽度、高度,内外边距

在不手动设置宽度的情况下,宽度默认为所在容器的100%(即容器宽度)

可以容纳行内元素和其他块元素。

行内元素(inline-level)

行内元素也称为内联元素,行内元素不占有独立区域,其大小仅仅被动的依赖于自身内容的大小(例如文字和图片),所以一般不能随意设置其宽高、对齐等属性。常用于控制页面中文本的样式。

行内元素的特点:

总是和相邻的行内元素在同一行上(物以类聚)

设置宽高无效,水平方向的padding和margin属性可以设置,但是垂直方向上的无效。

默认宽度是他自身内容的宽度。

行内元素只能容纳其他行内元素或者文本。

特殊:a比较特殊,可以放块级元素,但是链接里面不能再放链接。

块级元素 li,p,div,h1,table

行内元素a,span,sub,sup,i,b

Html中行内元素有哪些?

a - 锚点;

a***r - 缩写;

acronym - 首字;

b - 粗体(不推荐);

bdo - bidi override;

big - 大字体;

br - 换行;

cite - 引用;

code - 计算机代码(在引用源码的时候需要);

dfn - 定义字段;

em - 强调;

font - 字体设定(不推荐);

i - 斜体;

img - 图片;

input - 输入框;

kbd - 定义键盘文本;

label - 表格标签;

q - 短引用;

s - 中划线(不推荐);

samp - 定义范例计算机代码;

select - 项目选择;

***all - 小字体文本;

span - 常用内联容器,定义文本内区块;

strike - 中划线;

strong - 粗体强调;

sub - 下标;

sup - 上标;

textarea - 多行文本输入框;

tt - 电传文本;

u - 下划线;

var - 定义变量。

根据CSS规范的规定,每一个网页元素都有一个displ***属性,用于确定该元素的类型,每一个元素都有默认的displ***属性值,比如div元素,它的默认displ***属性值为“block”,成为“块级”元素(block-level);而span元素的默认displ***属性值为“inline”,称为“行内”元素。div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形的样子;与之相反,像“span”“a”这样的行内元素,则没有自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度、宽度、内外边距等属性,都是无效的。

行内、块状元素区别:

块级元素会独占一行,其宽度自动填满其父元素宽度,行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的内容而变化。

一般情况下,块级元素可以设置 width, height属性,行内元素设置width,  height无效(注意:块级元素即使设置了宽度,仍然是独占一行的)块级元素可以设置margin 和 padding.  行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效)

彻底搞懂行内元素,块级元素,行内块元素

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。

当然,他们之间也是可以转换的。

行内元素特征:

(1)设置宽高无效

(2)对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间 

(3)不会自动进行换行

元素:span 修饰字体和标签,还有和这两个标签可以直接做出平方的效果

块状元素特征:

(1)能够识别宽高

(2)margin和padding的上下左右均对其有效

(3)可以自动换行

(4)多个块状元素标签写在一起,默认排列方式为从上至下

元素:div、p、nav、aside、header、footer、section、article、ul-li、address

行内块状元素特征:

(1)不自动换行

(2)能够识别宽高

(3)默认排列方式为从左到右

综合了行内元素和块状元素的特性

总结

不管块级元素还是行内元素,区别主要是三个方面:一是排列方式,二是宽高边距设置,三是默认宽度。

块级元素会独占一行,而内联元素和内联块元素则会在一行内显示。

块级元素和内联块元素可以设置 width、height 属性,而内联元素设置无效。

块级元素的 width 默认为 100%,而内联元素则是根据其自身的内容或子元素来决定其宽度。

而行内块级元素又同时拥有块级元素和行内元素的特点。

Html中行内元素有哪些?块级元素有哪些

1、行内元素:a–锚点;a***r–缩写;acronym–首字;b–粗体(不推荐);bdo–bidi override;big–大字体;br–换行;cite–引用。

code–计算机代码(在引用源码的时候需要);dfn–定义字段;em–强调;font–字体设定(不推荐);i–斜体;img–图片。input–输入框。

kbd–定义键盘文本;label–表格标签;q–短引用;s–中划线(不推荐);samp–定义范例计算机代码;select–项目选择;***all–小字体文本。

span–常用内联容器,定义文本内区块;strike–中划线;strong–粗体强调;sub–下标;sup–上标;textarea–多行文本输入框;tt–电传文本;u–下划线;var–定义变量。

2、块级元素:address-地址;blockquote-块引用;center-居中对齐块;dir-目录列表;div-常用块级容器,也是css l***out的主要标签;dl-定义列表。

fieldset-form控制组;form-交互表单;h1-大标题;h2-副标题;h3-3级标题;h4-4级标题;h5-5级标题;h6-6级标题;hr-水平分隔线。

isindex-input prompt;menu-菜单列表;noframes-frames可选内容,(对于不支持frame的浏览器显示此区块内容)。

noscript-可选脚本内容(对于不支持script的浏览器显示此内容);ol-排序表单;p-段落;pre-格式化文本;table-表格;ul-非排序列表(无序列表)。

扩展资料

行内元素特点:和其他元素都在一行上;高度、行高和顶以及底边距都不可改变;宽度就是它的文字或图片的宽度,不可改变。

总的来说,内联元素一般都是基于语义级(semantic)的基本元素,它只能容纳文本或者其他内联元素,通常被包括在块元素中使用,常见内联元素有“a、b、br”等。

块级元素的特点:总是在新行上开始;高度,行高以及外边距和内边距都可控制;宽度缺省是它的容器的100%,除非设定一个宽度。它可以容纳内联元素和其他块元素。

参考资料来源:百度百科-块元素

参考资料来源:百度百科-内联元素

关于行内元素和行内元素不能设置背景属性的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

发表评论
0评