web前端工程師：那些容易被遺忘的web前端問題
背景：
年底將至，本人這隻才出門的前端菜鳥，終於有空閑的時間來整理一下最近投簡歷時出現的問題。有的是經常使用但是沒有仔細留意造成的；有的是個人認為根本沒人使用而忽略的。為了下次不出現這種錯誤，進行一下總結。問題的答案有的是本人自己總結的，有的是查找資料獲取到的。對於查找到的答案會特別標註。如果本文有什麼問題的話，希望大家積極留言，本人會對文章進行修改。
HTML：
1.div圖片img與div容器下有距離的解決辦法
這個問題經常出現在網站的布局，也是前端面試官作為瀏覽器兼容性經常提起的「老標兵」。
出現狀況：IE6,IE7下的img與div（塊元素）會出現一些間隔，IE7才會有這個問題，IE8下是沒有的。
出現原因：圖片和文字等行內元素默認是和父級元素的baseline（baseline是基線，這裡我們認為它是水平貫穿div、豎直位置確定的一條橫線就行。）對齊的，而baseline又和父級底邊有必定間隔（與font-size,font-family有關），所以設置vertical-align:top / bottom / text-top / text-bottom 都能夠防止這種狀況呈現。而且不光li，其他的block元素中包括img也會有這個景象。
解決方案：
方法一：定義圖片img標籤vertical-align:bottom，vertical-align:middle，vertical-align:top。
img
方法二：定義容器里的字體大小為0。 div { width:110px; border:1px solid #000000; font-size:0 }
2.高亮顯示內容（一個面試當中的問題，對於搜索結果的關鍵詞進行高亮顯示。因為平常在使用中很少見，所以就沒進行關注，由此可見自己的基礎儲備需要提高）。
標籤：
作用：使用mark標籤元素，可以高亮顯示文檔中的文字以達到醒目的效果。
解決方案：
使用mark標籤元素，可以高亮顯示文檔中的文字以達到醒目的效果。
註：使用strong、em元素同樣能達到這樣的效果，不推薦使用strong、em元素，因為strong、em元素的作用是強調文本，並非僅僅是高亮顯示文本。
3.HTML標籤的padding與margin問題（初開始對於使用padding與margin都是比較粗糙的。對於標籤布局設置都是以試為主。這個問題是需要立即解決）
問題分析：對於HTML標籤進行劃分，一般可以分為：塊級元素，行內元素，空元素（可能劃分的名稱不同，但是大約可以分為這三類）。一般我們接觸到的都是塊級元素與行內元素。首先我們先分析這兩種類型標籤的不同。
塊級元素：塊級元素會獨佔一行，其寬度自動填滿其父元素寬度。
行內元素： 行內元素不會獨佔一行，相鄰的行內元素會排列在同一行里，直到一行排不下，才會換行，其寬度隨元素的內容而變化。
註：一般情況下，塊級元素可以設置 width, height屬性，行內元素設置width, height無效(注意：塊級元素即使設置了寬度，仍然是獨佔一行的)
結果：
塊級元素可以設置margin 屬性和 padding屬性.並能正確顯示。
行內元素的水平方向的padding-left / padding-right / margin-left / margin-right 都產生邊距效果，但是豎直方向的padding-top / padding-bottom / margin-top / margin-bottom都不會產生邊距效果。（水平方向有效，豎直方向無效）
答案參考於：Jackie_Xie的Html中行內元素有哪些？塊級元素有哪些？
4.src,url與href的區別？
URL(Uniform Resource Locator,統一資源定位符):統一資源定位符是對可以從互聯網上得到的資源的位置和訪問方法的一種簡潔的表示，是互聯網上標準資源的地址。互聯網上的每個文件都有一個唯一的URL，它包含的信息指出文件的位置以及瀏覽器應該怎麼處理它。（我們可以簡單的理解為是把資源文件存放到無數文件夾中的一個裡面，而我們可以通過文件路徑查找到該文件，而該文件路徑是唯一的）
分類：
1、絕對URL（absolute URL）
絕對URL（absolute URL）顯示文件的完整路徑，這意味著絕對URL本身所在的位置與被引用的實際文件的位置無關。
2、相對URL（relative URL）
以包含URL本身的文件夾的位置為參考點，描述目標文件夾的位置。如果目標文件與當前頁面（也就是包含URL的頁面）在同一個目錄（也就是同一個文件夾下），那麼這個文件的相對URL僅僅是文件名和擴展名，如果目標文件在當前目錄的子目錄中，那麼它的相對URL是子目錄名，後面是斜杠，然後是目標文件的文件名和擴展名（比如在a文件夾下有b文件夾與c.txt,而在b文件夾下有d.txt,而我們要以c.txt為參考點，獲取d.txt，那麼url="./d.txt"）。如果目標文件與當前頁面不在同一個目錄下，則需要使用"../"（../的作用是返回該目標文件的上一層路徑），一直到目標文件所在的文件夾與當前頁面所在的文件夾有共同的父文件夾，然後在此查找目標文件的路徑。
重點：href和src 的定義與區別
href和src是有區別的，而且是不能相互替換的。我們在可替換的元素上使用src，然而把href用於在涉及的文檔和外部資源之間建立一個關係。
href（Hypertext Reference）
指定網路資源的位置，從而在當前元素或者當前文檔和由當前屬性定義的需要的錨點或資源之間定義一個鏈接或者關係。（或者可以理解為超文本引用，指向網路資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，它與頁面直接的關係為鏈接的關係，在載入它的時候頁面本身也不會停止其他內容的載入。）
例：
瀏覽器明白當前資源是一個樣式表，頁面解析不會暫停（由於瀏覽器需要樣式規則去畫或者渲染頁面，渲染過程可能會被暫停）。這與把css文件內容卸載標籤里不相同，因此建議使用link標籤而不是@import來把樣式表導入到html文檔里
src（Source）
僅僅嵌入當前資源到當前文檔元素定義的位置。（表示的是引入文件，目的是要把文件載入到html頁面中去，當瀏覽器解析的時候會暫停其他的內容而會先載入src內容，必須要等到src的內容載入完成之後才會執行後面。這就是為什麼js文件往往放在了html文件的最下面的原因。如果是在頁面head上放了js文件，目前我知道的一種方法來實現js最後載入的方法就是在js腳本里使用:window.onload事件處理。）
關注小編加小編扣q-u-n：7--6-7--050--7-7--1,獲取web前端資料免費教程
TAG:web前端小渝老師 |