html块级元素与内联元素的区别

1、 块级元素（block element）：

概念理解：如果不用css控制，块级元素在文档流中以一行显示，及它所占的宽度为其父级元素所占的宽度，若超过宽度会重新另起一行显示，高度会随着内容高度的增加而增加。

可以用display:inline属性将块级元素转换为内联元素形式显示，这样块级元素就不会重新起行显示，而是变成行内元素与其他元素在一行内显示。

常见的html元素是：<p>。

常见块级元素标签有：

<address>：内容以斜体显示；

<blockquote>:引用，有时候会是斜体，会在正常文本中脱离出来，如果不用css控制该属性的margin:0;那么该元素的内容会自动在左右进行缩进，上下也有一定的间边距，

如果设置margin:0；那么该块引用的高度就是内容的高度，而宽度就是父级元素的宽度。

如需把页面作为 strict XHTML （严格的可扩展的html）进行验证，那么 <blockquote> 元素必须包含块级元素，比如这样：

<blockquote>

<p>here is a long quotation here is a long quotation</p>

</blockquote>　

<center>：水平居中

<dir>:目录列表，同上，默认有margin值，而且有padding-left值。

<div>:区域或块。

<dl>:定义列表：有默认的margin-top和margin-bottom值，且值相同。

<fieldset>:控制组，有默认的边框。通常内嵌form元素。

<h1>…<h6>：标题，默认的有margin-top和margin-bottom值，且值的大小相同.

<isindex>：单标签。会自动生成一个form表单，表单中有默认的索引搜索框，并且有上下两条底边，左右没有。

<menu>:菜单。有默认的margin-top和margin-bottom值，值相同，还有padding-left值。

<pre>:格式化文本。有默认的margin-top和margin-bottom值，值相同。保留输入时的样式，不改变，常用于再网页中输入数学公式等格式不要求改变的饿内容。

<ol>:有序列表。有默认的margin-top和margin-bottom值，值相同，有一定的padding-left值，但该部分用于填充项目编号内容，如果css控制padding:0，

那么项目编号将会消失不存在，可以通过改变list-style-type属性来调整项目编号的样式：

disc：实心圆；

circle：空心圆；

square：实心方块；

decimal：十进制数字；

lower-roman：小写罗马数字；

upper-roman：大写罗马数字；

lower-alpha：小写英文字母；

upper-alpha：大写英文字母；

none：不显示项目符号和编号。

<table>:虽然宽度和高度根据需要需要设置，如果不设置tr和td，系统会认为table高度和宽度为0，若有tr和td并且当中有内容，那么宽度和高度是随内容决定的，

但是有另一个table元素时，就会另起一行显示。它的宽度虽不是整行父级元素的宽度，但是该行剩下的宽度也不会被其他元素占用，因为元素内容后面相当于有一个换行符。

<ul>：同ol。只是项目符号默认的时实心原点。和ol标签一样可以通过list-style-type属性来改变项目符号的样式。

<p>:段落，总是另起一行，通过display：inline 或者display:inline-block属性来使段落与其他元素在一行显示。

2、 内联元素/行内元素/内嵌元素/直进式元素（inline element）:

概念理解：内联元素就是在一行中显示的内容，和其他元素都是在一行显示，它的高度和宽度是由它当中的内容决定的，其中内容一般为文字或图片，这些文字或图片的宽度有多少，

该行内元素的宽度和高度就该是多少。用display:block 可以使行内元素以块元素形式显示，它会另起一行显示，宽度也变为了其父级元素所在的宽度。常见的html元素是<a>。

* a - 锚点

* abbr - 缩写

* acronym - 首字

* b - 粗体(不推荐)-----》改为：strong

* bdo - bidi override:定义文字的显示方向（不常用）：有属性dir=”ltr”或dir=”rtl”表示将文字从左向右输出还是从右向左输出，例如：123，ltr就为：123；rtl就为：321显示。该标签不常用。

* big - 大字体-----》已被w3c抛弃，不使用

* small - 小字体文---》通常用css代替

* br - 换行

用于定义的标签：

* cite - 引用，有倾斜效果。

* code - 计算机代码(在引用源码的时候需要)，颜色会比一般问题颜色稍浅。

* dfn - 定义字段，一个定义项目：字体稍倾斜，程度不如cite强，且文字颜色比cite文字颜色稍深。

* em – 斜体强调

strong - 粗体强调

* samp - 定义样本文本

* var - 定义变量

* kbd - 定义键盘文本

* font - 字体设定(不推荐)---》一般使用css来代替，而不再在html中再使用该标签来设置字体。

* i - 斜体 标签定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。在没有其他元素可以使用时，比如 <b>, <cite>, <dfn>, <em>, <q>, <small>, <strong>，请使用 <i> 标签。

可用font-style：normal;属性去除其斜体效果。

* img - 图片：单标签

* input - 输入框：单标签

* label - 表格标签 （它的for属性，可以将其和另外的元素对应起来 ，详细见链接：http://www.w3school.com.cn/tiy/t.asp?f=html_label）

* q - 短引用：默认内容被双引号包起来。

* s - 中划线(不推荐) 和删除线del以及strike效果相同，但是strike不适用，通常用del来代替，和s标签效果相同。

* select - 项目选择，常和option连用，构成一个下拉列表。默认的有margin值。

* span - 常用内联容器，定义文本内区块

* strike - 中划线

* sub - 下标-à不常用

* sup - 上标-à不常用

* textarea - 多行文本输入框：默认为两行的高度，如需设置高度和宽度可以通过属性cols=”X”和rows=”X”来设置。

* tt - 电传文本：加小的字体。

* u - 下划线