行内元素与块级元素

今天下午面试了一道关于HTML的最基础的题，就是判断下列元素哪些是行内元素，哪些是块级元素？

把这道笔试题记录下来，是为了补充自己以前从未注意到的小知识点，在日后翻看时，巩固加深。

内联元素又称行内元素。

常见的以及面试时遇到的元素：div  , p  , form,   ul,  li ,  ol, dl,    form,   address,  fieldset,  hr, menu,  table，span,   strong,   em,  br,  img ,  input,  label,  select,  textarea,  cite, 

行内元素：div，p，h1~h6，from，address，fieldset，hr，menu,table，..

块级元素：span,   strong,   em,  br,  img ,  input,  label,  select,  textarea,  cite

行内元素（inline element）

a---锚点

b---字体加粗

br---换行（面试考过）

em---强调

font---字体设定

i---斜体

img---图片

input---输入框

label---表格标签

select---下拉选框

small---小字体文本

span---常用的行内元素，定义文本内区块

strike---中划线

strong---粗体强调

sub---下标

sup---上标

textarea---文本域，多行输入框

tt---电传文本

u---下划线

cite---引用

备注：红色为面试时问过，但平时不怎么注意的

块级元素

div---常见的块级元素

p---段落

address--地址

h1~h6---标题（从大到小）

ul---无序列表

ol---有序列表

dl---定义列表

table---表格

center---居中对齐模块

blockquote---块引用

dir---目录列表

fieldset---form控制组

form---表单

hr---换行

isindex---input prompt

menu----菜单列表

pre---格式化文本

noframes---frames可选内容，（对不支持frame的浏览器显示此区块内容）

noscript---可选脚本内容（对不支持script的浏览器显示此内容）

备注：蓝色为不常见/用的块级元素

可变元素---根据上下文语境决定该元素为块元素或内联元素

button---按钮

applet---java applet

del---删除文本

iframe---inline iframe

ins---插入文本

map---图片区块

object---对象

script---客户端脚本

备注：红色为常用的元素

行内元素与块级元素的区别：

①行内元素不会独占一行，块级元素独占一行；

②内联元素的margin-left / margin-right及padding-left / padding-rigtht是可以控制的，所以可以通过这4个属性来控制内联元素的宽度。

 

③行内元素中，可放块级元素，撑起自己的高度

④col, colgroup, frameset, html, style, table, tbody, tfoot, thead, title, tr, td 等几个元素标签是只读的，也就是不能使用innerHTML等进行动态赋值.

块级元素和行内元素的转换

① display:block;---设置元素为块级元素

②display:inline;---设置元素为行内元素

③display:inline-block---设置元素为行内块元素；即可设置宽高，但是并非独占一行