加載 onclick事件 button .com alternate bmi 為什麽 建議 開發

src

• img 圖片 <img src="/img/1.png" alt="1" />
• rame iframe 框架集 <iframe src="girl.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>
  ）

href

• a <a href="http://www.baidu.com" 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(‘#‘)" />

以上是src和href會被用到的標簽，下面來看看他們的區別。

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

以上主要內容引自為什麽加載 JavaScript 使用 "src"，CSS 使用 "href"？有其含義還是歷史語法遺留？

鏈接：https://www.jianshu.com/p/797bceab922b

href 表示超文本引用（hypertext reference） 引用 建立聯系

src 表示來源地址 source   引入

src和href之間存在區別，能混淆使用。src用於替換當前元素，href用於在當前文檔和引用資源之間確立聯系。

src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。

<script src ="js.js"></script>

當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入當前標簽內。這也是為什麽將js腳本放在底部而不是頭部。

href是Hypertext Reference的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，如果我們在文檔中添加

<link href="common.css" rel="stylesheet"/>

那麽瀏覽器會識別該文檔為css文件，就會並行下載資源並且不會停止對當前文檔的處理。這也是為什麽建議使用link方式來加載css，而不是使用@import方式。

至於說為什麽當初就決定外部樣式表用link href來鏈接，而不是用style src來載入，可能是因為先賢們認為樣式表更符合外部鏈接資源的特征，它更接近附屬的資源，而不是內嵌的內容。比如考慮alternate stylesheets，在同一時間只需要鏈接一組樣式表，而不是載入所有。當然你可以簡單的歸結為歷史遺留（也就是當初某個瀏覽器開發者的一個偶然決定導致）。

鏈接：https://www.zhihu.com/question/19708137/answer/13562191

src和href使用總結