HTML代码中的块元素和行内元素

这也应该算前端基本知识了,以前都没注意到过,专门百度了下,把要点贴了出来。。。

内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,常见内联元素”a”。 块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素cite加上display:block这样的属性,让他也有每次都从新行开始的属性。让他也有每次都从新行开始的属性即成为块元素,同样我们可以把块元素加上display:inline这样的属性,让他也在一行上排列。

block(块)元素的特点

①总是在新行上开始;

②高度,行高以及外边距和内边距都可控制;

③宽度缺省是它的容器的100%,除非设定一个宽度。

④它可以容纳内联元素和其他块元素

inline元素的特点

①和其他元素都在一行上;

②高,行高及外边距和内边距不可改变;

③宽度就是它的文字或图片的宽度,不可改变

④内联元素只能容纳文本或者其他内联元素

◎ address – 地址

◎ blockquote – 块引用

◎ center – 举中对齐块

◎ dir – 目录列表

◎ div – 常用块级容易,也是css layout的主要标签

◎ 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 – 非排序列表

内联元素(inline element)

◎ a – 锚点◎ abbr – 缩写

◎ acronym – 首字

◎ b – 粗体(不推荐)

◎ bdo – bidi override

◎ big – 大字体

◎ br – 换行

◎ cite – 引用

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

◎ dfn – 定义字段

◎ em – 强调

◎ font – 字体设定(不推荐)

◎ i – 斜体

◎ img – 图片

◎ input – 输入框

◎ kbd – 定义键盘文

◎ label – 表格标签

◎ q – 短引用

◎ s – 中划线(不推荐)

◎ samp – 定义范例计算机代码

◎ select – 项目选择

◎ small – 小字体文本

◎ span – 常用内联容器,定义文本内区块

◎ strike – 中划线

◎ strong – 粗体强调

◎ sub – 下标

◎ sup – 上标

◎ textarea – 多行文本输入框

◎ tt – 电传文本

◎ u – 下划线

◎ var – 定义变量

可变元素

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

◎ applet – java applet

◎ button – 按钮

◎ del – 删除文本

◎ iframe – inline frame

◎ ins – 插入的文本

◎ map – 图片区块(map)

◎ object – object对象

◎ script – 客户端脚本