块级元素&内联元素

一、块级元素、行内元素的特点

块级元素

定义：

块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一行。能容纳其他块元素或者内联元素。

特点：

1. 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（霸道，一个块级元素独占一行）
2. 元素的高度、宽度、行高以及顶和底边距都可设置。
3. 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>（块引用） 、<form>

行内元素（内联元素）

定义：

只占据它对应标签的边框所包含的空间。只能容纳文本或者其他内联元素。

特点：

1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

常用的内联元素有：

<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<br >

块级元素和内联元素之间的转换：

1. display

块元素默认display:block;行内非替换元素(a,span)默认为display：inline;行内替换元素(input)默认为display:inline-block;
a.display:none;不显示该元素，也不会保留该元素原先占有的文档流位置。
b.display:block;转换为块级元素。
c.display:inline;转换为行内元素。
d.display:inline-block;转换为行内块级元素。

2. float

当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的莫名空白。

3. position

当为行内元素进行定位时，position:absolute与position:fixed.都会使得原先的行内元素变为块级元素。

二、alt和title的区别

alt是html标签的属性，而title既是html标签，又是html属性。

1. title

title作为标签

用来给链接或者图片增加附加的说明信息的，网页的标题就是写在这对标签之内的。

title作为属性

用来为元素提供额外说明信息。例如，给超链接标签a添加了title属性，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果。
不光文字链接有title属性，图片也可以设置title属性。

2. alt

alt属性是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。

注意，alt是替代图像作用而不是提供额外说明文字的。根据一些SEO人士的说法，使用alt属性还具有搜索引擎优化效果，因为搜素引擎是无法直接读取图像的信息的，alt可以为其提供文字信息所以对搜索引擎比较友好。（这块不太懂。。。噗）

3. title属性

title和alt这两个属性同时用于img标签的时候。在旧版本的IE浏览器中，鼠标经过图像时显示的提示文字是alt的内容，而忽略了title属性，这个曾经误导了很多人。因此，如果想在IE中显示title的内容，要么title属性和alt一致，要么alt内容为空（“”，空格也不能有）。不过，在新版的IE（IE8及以上）中，已不会出现这种情况了。
另外，当a标签内嵌套img标签时，起作用的是img的title属性。

4. 图片title属性和图片alt属性区别？

图片title属性是不管图片是否存在，该提示都会显示，而alt属性是替代文字，是当图片没有打开或者图片不存在时候，那么该文字才会显示。另外还有在ie6浏览器下，如果一个图片没有title属性，有img alt属性，鼠标放在图片上也会有title属性那样的效果(都有提示信息)，不过这个是因为ie浏览器不标准的原因，firefox下就不会出现那样的情况了。

三、src和href的区别

1. href

标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系
a <a href="http://www.baidu.com" target="_blank">百度</a>
link 引用外部css <link type="text/css" href="iknow_base.css" rel="stylesheet" />
input type 中的onclick事件
<input type=button onclick="window.location.href('#')" />

2. src

表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。
img 图片<img src="/img/1.png" alt="1" />
rame iframe 框架集 <iframe src="1.gif"></iframe>
input type 为image的提交按钮 <input type="image" src="submit.jpg" alt="Submit" align="right" />
scirpt 脚本 <script type="text/javascript" src="org.js"></script>
style 样式表（胎死腹中的XHTML2中就将src属性推广到了所有元素。比如可以： <style src="common.css"> </style>）

<script src="js.js"></script>当浏览器解析到这一句的时候会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕，图片和框架等元素也是如此，类似于该元素所指向的资源嵌套如当前标签内，这也是为什么要把js放在底部而不是头部。

<link href="common.css" rel="stylesheet"/>当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css而不是使用@import。

补充：link和@import的区别

两者都是外部引用CSS的方式，但是存在一定的区别：
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

3. src和href的区别。

src是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。

src是source的简写，表示“源”，是引用一个资源将该元素的内容将整体替换。如果不写src，那么本身没有内容，script会不存在脚本代码，img会显示x，iframe会显示空白页。例如
<script type="text/javascript" src="b.js">alert(1)</script>
b.js:alert(2);
标准的浏览器里会显示2，因为本身的内容已经被替代了。

href是Hypertext Reference的缩写，表示“超链接”， 目的不是为了引用一个资源，而是为了建立一个“通道”，让当前标签能够链接到目标地址上，并不是为了把目标拉进页面本身内来替换本身的内容，例如a标签的href不会被当做一个资源替换自身，link标签本身并不包含实际的元素意义来做内容，它需要rel明确的表示被【被连接的文档是做什么的】。至于说为什么当初就决定外部样式表用link href来链接，而不是用style src来载入，可能是因为先贤们认为样式表更符合外部链接资源的特征，它更接近附属的资源，而不是内嵌的内容。