html替换元素特点,行内元素,块元素,置换元素(替换元素,非替换元素) img属于什么元素...

html元素分类

部分初学者估计是和我一样,刚开始只注意到了html元素分为块元素(block)和行内元素(inline).这里先简单的说下行内元素和块元素的特性:

block:(div/p/dl/form/h1-h6/ol/ul):

独占一行

高度有里面的元素撑开

宽度默认100%(继承父元素宽度)

可以设置外边距/内边距

可以包裹其他任意元素

p标签比较特殊: 不可包裹块元素(只存放文本)

这里要说下p元素中放个块元素会发生什么:

这个在浏览器中就会被解析为

行内元素特性:(a/b/em/i/img/span)

和其他行内元素处于同一行

不支持宽高

上下外边距无效,auto无效(不支持auto居中)

内边距只对内联元素产生影响,无视块元素

标签中间的空格解析

a 比较特殊 能包裹块元素(区域链接)

看到这里,一些动手写过code的同学估计就会有疑问????行内元素不能设置上下外边距(margin-top, margin-bottom), 但是他居然对生效了.

好吧,这个问题同时也让我头疼一阵子.有些人会说可以把img看作是拥有inline-block(行内块元素)的特性,但是是inline(行内元素),是不是有点绕口, 也就跟着一知半解的这么记了记,会用就行.根据我查的资料,我是这么理解的(fllowing):

是替换内联元素replaced inline element.

行内元素同时也分为替换内联元素和非替换内联元素:

不可替换元素

HTML的大多数元素是不可替换元素,即内容直接表现给用户端(直接呈现给浏览器界面).

段落内容

段落

是一个不可替换元素,文字"段落内容"全部被显示出来

可替换元素

替换元素就是浏览器根据元素的标签和属性,来决定元素具体显示内容.

先用简单的input便签来说明下

在更改type 的赋值时, input样式也会随之更改,eg:,等等, 不同的type值 呈现的样子会不一样.

img

浏览器会根据标签的src属性的值来读取图片信息并且显示出来,如果只是查看html代码就看不到图片的实际内容.

行内非替换元素特性

行内替换元素遵从上面的行内元素的特性

行内替换元素特性

width,height,margin的四个方向,padding的四个方向 都正常显示,并且遵循标准的css盒模型

哪些是替换元素,那些事非替换元素

具体哪些元素是替换元素呢?

`videotextarea`inout,还有一些元素只在特殊情况下表现为可替换元素:audio canvas,通过CSScontent属性插入的对象北辰做匿名可替换元素(anonymous replaced elements).