【src和href有什么不同】在網頁開發中，`src` 和 `href` 是兩個常見的屬性，它們都用于鏈接外部資源，但使用場景和功能有所不同。理解兩者的區別對于開發者來說非常重要，尤其是在處理圖片、腳本、樣式表和超鏈接時。
一、總結
| 屬性 | 用途 | 描述 | 常見用法 |
| `src` | 引入外部資源（如圖片、腳本） | 指定資源的路徑，瀏覽器會加載并執行或顯示該資源 | ` `, `<script src="script.js">` |
| `href` | 創建超鏈接或引用外部資源（如樣式表、頁面） | 指向另一個資源的位置，通常用于導航或引入樣式 | ``, `` |
二、詳細說明
1. `src` 屬性
- 作用：`src`（source 的縮寫）主要用于指定某個元素需要加載的外部資源。
- 常見元素：
- ``：加載圖片
- `<script>`：加載 JavaScript 腳本
- `<iframe>`：嵌入其他網頁
- 特點：
- 瀏覽器會直接加載并執行該資源。
- 如果資源無法加載，可能會影響頁面的正常顯示或功能。
2. `href` 屬性
- 作用：`href`（hyperlink reference 的縮寫）用于定義超鏈接或引用外部資源。
- 常見元素：
- ``：創建超鏈接
- ``：引入 CSS 樣式表
- ``：定義圖像地圖中的鏈接區域
- 特點：
- 主要用于導航或引用資源，不直接加載內容。
- 如果資源無法訪問，通常不會影響頁面的基本結構。
三、關鍵區別對比
| 特點 | `src` | `href` |
| 是否加載資源 | 是 | 否（除非是鏈接到頁面） |
| 是否執行代碼 | 是（如腳本） | 否 |
| 是否影響頁面結構 | 可能影響 | 一般不影響 |
| 使用場景 | 圖片、腳本、框架等 | 鏈接、樣式表等 |
四、實際應用示例
- `src` 示例：
```html
<script src="app.js"></script>
```
- `href` 示例：
```html
```
五、總結
`src` 和 `href` 雖然都涉及資源鏈接，但它們的用途和行為有明顯差異。`src` 更注重資源的加載與執行，而 `href` 更強調鏈接與引用。在實際開發中，合理使用這兩個屬性，有助于提升頁面性能和用戶體驗。
