背景：

年底將至，本人這只才出門的前端菜鳥，終于有空閑的時間來整理一下最近投簡歷時出現(xiàn)的問題。有的是經(jīng)常使用但是沒有仔細留意造成的；有的是個人認為根本沒人使用而忽略的。為了下次不出現(xiàn)這種錯誤，進行一下總結(jié)。問題的答案有的是本人自己總結(jié)的，有的是查找資料獲取到的。對于查找到的答案會特別標注。如果本文有什么問題的話，希望大家積極留言，本人會對文章進行修改。

HTML：

　1.div圖片img與div容器下有距離的解決辦法

　　這個問題經(jīng)常出現(xiàn)在網(wǎng)站的布局，也是前端面試官作為瀏覽器兼容性經(jīng)常提起的“老標兵”。

　　出現(xiàn)狀況：IE6,IE7下的img與div（塊元素）會出現(xiàn)一些間隔，IE7才會有這個問題，IE8下是沒有的。

　　出現(xiàn)原因：圖片和文字等行內(nèi)元素默認是和父級元素的baseline（baseline是基線，這里我們認為它是水平貫穿div、豎直位置確定的一條橫線就行。）對齊的，而baseline又和父級底邊有必定間隔（與font-size,font-family有關(guān)），所以設(shè)置vertical-align:top ?/ ?bottom / text-top / text-bottom 都能夠防止這種狀況呈現(xiàn)。而且不光li，其他的block元素中包括img也會有這個景象。

　　解決方案：

　　方法一：定義圖片img標簽vertical-align:bottom，vertical-align:middle，vertical-align:top。

　　　　　　img{vertical-align:bottom;}

　　方法二：定義容器里的字體大小為0。
　　　　　　div?{
　　　　　　　　width:110px;
　　　　　　　　border:1px?solid?#000000;
　　　　　　　　font-size:0
　　　　　　　　}

　2.高亮顯示內(nèi)容（一個面試當(dāng)中的問題，對于搜索結(jié)果的關(guān)鍵詞進行高亮顯示。因為平常在使用中很少見，所以就沒進行關(guān)注，由此可見自己的基礎(chǔ)儲備需要提高）。

　　標簽：<mark></mark>

　　?作用：使用mark標簽元素，可以高亮顯示文檔中的文字以達到醒目的效果。

　　 解決方案：

　　　　<p>使用mark標簽元素，可以<mark>高亮</mark>顯示文檔中的文字以達到醒目的效果。</p>

　　注：使用strong、em元素同樣能達到這樣的效果，不推薦使用strong、em元素，因為strong、em元素的作用是強調(diào)文本，并非僅僅是高亮顯示文本。

　3.HTML標簽的padding與margin問題（初開始對于使用padding與margin都是比較粗糙的。對于標簽布局設(shè)置都是以試為主。這個問題是需要立即解決）

　　問題分析：對于HTML標簽進行劃分，一般可以分為：塊級元素，行內(nèi)元素，空元素（可能劃分的名稱不同，但是大約可以分為這三類）。一般我們接觸到的都是塊級元素與行內(nèi)元素。首先我們先分析這兩種類型標簽的不同。

　　　　塊級元素：塊級元素會獨占一行，其寬度自動填滿其父元素寬度。

　　　　行內(nèi)元素：?行內(nèi)元素不會獨占一行，相鄰的行內(nèi)元素會排列在同一行里，直到一行排不下，才會換行，其寬度隨元素的內(nèi)容而變化。

　　注：一般情況下，塊級元素可以設(shè)置 width, height屬性，行內(nèi)元素設(shè)置width, ?height無效(注意：塊級元素即使設(shè)置了寬度，仍然是獨占一行的)

　　結(jié)果：

　　　　 ?塊級元素可以設(shè)置margin 屬性和 padding屬性.并能正確顯示。

　　　　? 行內(nèi)元素的水平方向的padding-left / padding-right / margin-left / margin-right 都產(chǎn)生邊距效果，但是豎直方向的padding-top / padding-bottom / margin-top / margin-bottom都不會產(chǎn)生邊距效果。（水平方向有效，豎直方向無效）

　　答案參考于：Jackie_Xie的Html中行內(nèi)元素有哪些？塊級元素有哪些？

　　4.src,url與href的區(qū)別？

　　　URL(Uniform Resource Locator,統(tǒng)一資源定位符):統(tǒng)一資源定位符是對可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問方法的一種簡潔的表示，是互聯(lián)網(wǎng)上標準資源的地址。互聯(lián)網(wǎng)上的每個文件都有一個唯一的URL，它包含的信息指出文件的位置以及瀏覽器應(yīng)該怎么處理它。（我們可以簡單的理解為是把資源文件存放到無數(shù)文件夾中的一個里面，而我們可以通過文件路徑查找到該文件，而該文件路徑是唯一的）

　　　分類：

　　　　1、絕對URL（absolute URL）

　　　　絕對URL（absolute URL）顯示文件的完整路徑，這意味著絕對URL本身所在的位置與被引用的實際文件的位置無關(guān)。

　　　　2、相對URL（relative URL）

　　　　以包含URL本身的文件夾的位置為參考點，描述目標文件夾的位置。如果目標文件與當(dāng)前頁面（也就是包含URL的頁面）在同一個目錄（也就是同一個文件夾下），那么這個文件的相對URL僅僅是文件名和擴展名，如果目標文件在當(dāng)前目錄的子目錄中，那么它的相對URL是子目錄名，后面是斜杠，然后是目標文件的文件名和擴展名（比如在a文件夾下有b文件夾與c.txt,而在b文件夾下有d.txt,而我們要以c.txt為參考點，獲取d.txt，那么url="./d.txt"）。如果目標文件與當(dāng)前頁面不在同一個目錄下，則需要使用"../"（../的作用是返回該目標文件的上一層路徑），一直到目標文件所在的文件夾與當(dāng)前頁面所在的文件夾有共同的父文件夾，然后在此查找目標文件的路徑。

　　　重點：href和src 的定義與區(qū)別

　　　href和src是有區(qū)別的，而且是不能相互替換的。我們在可替換的元素上使用src，然而把href用于在涉及的文檔和外部資源之間建立一個關(guān)系。

　　　href（Hypertext Reference）

　　　指定網(wǎng)絡(luò)資源的位置，從而在當(dāng)前元素或者當(dāng)前文檔和由當(dāng)前屬性定義的需要的錨點或資源之間定義一個鏈接或者關(guān)系。（或者可以理解為超文本引用，指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點）或當(dāng)前文檔（鏈接）之間的鏈接，它與頁面直接的關(guān)系為鏈接的關(guān)系，在加載它的時候頁面本身也不會停止其他內(nèi)容的加載。）

　　　例：<link href="style.css" rel="stylesheet" />

　　　瀏覽器明白當(dāng)前資源是一個樣式表，頁面解析不會暫停（由于瀏覽器需要樣式規(guī)則去畫或者渲染頁面，渲染過程可能會被暫停）。這與把css文件內(nèi)容卸載<style>標簽里不相同，因此建議使用link標簽而不是@import來把樣式表導(dǎo)入到html文檔里

　　　src（Source）

　　　僅僅嵌入當(dāng)前資源到當(dāng)前文檔元素定義的位置。（表示的是引入文件，目的是要把文件加載到html頁面中去，當(dāng)瀏覽器解析的時候會暫停其他的內(nèi)容而會先加載src內(nèi)容，必須要等到src的內(nèi)容加載完成之后才會執(zhí)行后面。這就是為什么js文件往往放在了html文件的最下面的原因。如果是在頁面head上放了js文件，目前我知道的一種方法來實現(xiàn)js最后加載的方法就是在js腳本里使用:window.onload事件處理。）

　

?

　　　

　　

　　

總結(jié)

以上是生活随笔為你收集整理的那些容易遗忘的web前端问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。