一、塊級元素、行內元素的特點

塊級元素

定義：

塊級元素占據其父元素（容器）的整個空間，因此創建了一個“塊”。通常瀏覽器會在塊級元素前后另起一行。能容納其他塊元素或者內聯元素。

特點：

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 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來載入，可能是因為先賢們認為樣式表更符合外部鏈接資源的特征，它更接近附屬的資源，而不是內嵌的內容。