面試—塊級、行內、內聯元素的特點,常見的元素的特點屬性(href、src的區別,alt和title的區別)

cosmos033發表於2018-08-07

塊級元素:每個元素獨佔一行;支援所有的樣式;不設定寬度時寬度等於父元素寬度;換行符不會解析;

                   常用的塊狀元素有:<div>,<p>,<h1>~<h6>,<ol>,<ul>,<dl>,<form>,<table>,<address>...

行內元素:在一行有空間時,多個元素可以在同一行顯示;不支援寬高樣式,使用上下margin和padding等樣式會出現問題;寬度                       由內容(文字圖片等)撐開;換行符會被解析(不同瀏覽器下顯示的寬度也不同);

                    常用的內聯元素有:<span>,<br>,<a>,<em>,<b>,<i>,<strong>...

內聯元素:(同時具備塊級和行內元素的特點)元素都在一行上;元素的高度、寬度、行高以及頂和底邊距都可設定!

                     常用的內聯塊狀元素有:<img>,<input>,<td>

塊狀元素與內聯元素的轉換

display樣式

1.block:當前元素轉換為區塊元素

2.inline:當前元素轉換為內聯元素

3.inline-block:當前元素轉換為內聯塊元素

4.none:當前元素轉換為不佔位元素(既該元素隱藏)

 href屬性與src屬性

href是a標籤的屬性,用於指定超連結目標的 URL。

                       絕對 URL - 指向另一個站點(比如 href="http://www.baidu.com")

                       相對 URL - 指向站點內的某個檔案(href="index.html")

                       錨 URL - 指向頁面中的錨(href="#top")

src屬性是<link>,<script>標籤的屬性,用於規定外部指令碼檔案的 URL。

                        絕對 URL - 指向其他站點(比如 src="http://www.baidu.com")

                         相對 URL - 指向站點內的檔案(比如 src="/scripts/example.js")

區別:

1 請求資源型別不同

(1)href 指向網路資源所在位置,建立和當前元素(錨點)或當前文件(連結)之間的聯絡。

(2)在請求 src 資源時會將其指向的資源下載並應用到文件中,比如 JavaScript 指令碼,img 圖片;

2 作用結果不同

(1)href 用於在當前文件和引用資源之間確立聯絡;

(2)src 用於替換當前內容;

3 瀏覽器解析方式不同

(1)若在文件中新增 ,瀏覽器會識別該文件為 CSS 檔案,就會並行下載資源並且不會停止對當前文件的處理。這也是為什麼建議使用 link 方式載入 CSS,而不是使用 @import 方式。

(2)當瀏覽器解析到 ,會暫停其他資源的下載和處理,直到將該資源載入、編譯、執行完畢,圖片和框架等也如此,類似於將所指向資源應用到當前內容。這也是為什麼建議把 js 指令碼放在底部而不是頭部的原因。

alt和title的區別

1.alt是html標籤的屬性,而title既是html標籤,又是html屬性。

2.title作為屬性時,用來為元素提供額外說明資訊。例如,給超連結標籤a新增了title屬性,把滑鼠移動到該連結上面是,就會顯示title的內容,以達到補充說明或者提示的效果。

alt屬性則是用來指定替換文字,只能用在img、area和input元素中(包括applet元素),用於網頁中圖片無法正常顯示時給使用者提供文字說明使其瞭解影象資訊。注意,(alt是替代影象作用而不是提供額外說明文字的。)根據一些SEO人士的說法,使用alt屬性還具有搜尋引擎優化效果,因為搜素引擎是無法直接讀取影象的資訊的,alt可以為其提供文字資訊所以對搜尋引擎比較友好。

相關文章