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

一、  块级元素（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属性来使段落与其余元素在一行显示。

 

 

二、  内联元素/行内元素/内嵌元素/直进式元素（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 - 下划线