面試—塊級、行內、內聯元素的特點,常見的元素的特點屬性(href、src的區別,alt和title的區別)
塊級元素:每個元素獨佔一行;支援所有的樣式;不設定寬度時寬度等於父元素寬度;換行符不會解析;
常用的塊狀元素有:<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可以為其提供文字資訊所以對搜尋引擎比較友好。
相關文章
- 塊級元素和行內元素的區別
- HTML的行內元素與塊級元素的區別?HTML
- html塊元素和內斂元素的區別HTML
- 塊元素和行內元素的區別與轉換
- HTML的display屬性將行內元素、塊狀元素、行內塊狀元素互相轉換以及三者的區別HTML
- href 和 src 的區別
- 行內元素與塊狀元素 行內替換元素與行內非替換元素的區別
- CSS中px和em屬性的特點與區別CSS
- 常見塊元素和內聯元素
- 標籤上title與alt屬性的區別
- HTML 裡 img 元素的 src 和 srcset 屬性有何區別?HTML
- CSS的塊級元素和行內元素CSS
- 塊級元素和行內元素分別有哪些
- char,nchar,varchar,nvarchar的區別和特點
- 淺談src與href的區別
- HTML 塊級元素和內聯元素HTML
- 塊級元素和行內元素
- 行內元素和塊級元素
- 塊狀元素、內聯元素和內聯塊狀元素
- @Validated和@Valid的區別?校驗級聯屬性(內部類)
- url、href、src區別
- CSS 塊級元素和行內元素和行內塊元素 及其相互轉換CSS
- 內聯元素和塊級元素相互轉換
- 行內元素的padding和margin屬性padding
- 前端開發入門到實戰:html塊級元素和行級元素的區別和認識前端HTML
- 行內元素和塊級元素使用浮動後的變化
- 02 CSS塊級元素和行內元素CSS
- 軟體危機和軟體缺陷的特點和區別
- CISC和RISC是什麼?它們的特點和區別?
- JDK內建執行緒池的共同點和區別JDK執行緒
- jQuery獲取元素內部元素和獲取內容的區別、獲得輸入框value的方法jQuery
- CSS塊級/內聯元素CSS
- Angular5 - Vue.js -ReactJS 的區別和特點AngularVue.jsReact
- linux ext4,ext3的特點和區別Linux
- 【Privilege】SYSOPER和SYSDBA特權的區別與聯絡
- 行內元素和塊計元素需要注意的地方
- CSS塊狀元素和內聯元素CSS
- HTML_行內元素、塊級元素、空元素HTML