href 和 src 有什麼不同？ == ### 基本介紹 #### href - hypertext reference。超文本參考，也常被翻譯為超連結。 href是建立關係的，會link到跟這個檔案本身有關聯的東西 #### src - source。資源 src是for替代元素 載入這個資源，取代我原本這個tag在做的事，會成為這個elment的一部分，但href不是 ### 常用範例 #### href 1. link ``` <link rel="stylesheet" href="./style.css"> ``` >A link has two ends -- called anchors -- and a direction. The link starts at the "source" anchor and points to the "destination" anchor, which may be any Web resource (e.g., an image, a video clip, a sound bite, a program, an HTML document, an element within an HTML document, etc.). link 有兩個錨點。是說 link 本身是起始的錨點，訪問對象是 href 中設的錨點 rel 告訴瀏覽器：我是一個 stylesheet 喔，我要引入的是 ./style.css 這支檔案 2. a ``` <a href="https://www.google.com/"> ``` 在這讓 [a](https://www.google.com/) tag 點擊時，可以跳到引入的google網址 ``` <a href="#section1">Introduction</a><br> <a href="#section2">Some background</a><br> <a href="#section2.1">On a more personal note</a><br> ``` 在這讓 a tag 點擊時，可以跳到引入的錨點位置(在這邊是 html 中你設置的 section這幾個部分) #### src 1. script ``` <script src="script.js"></script> ``` 主要讓瀏覽器去插入這段 script 的資源，代替原本 script tag 做的事(原本要載入的這段要寫在srcipt裏面) (類似於將 js 檔案的內容轉儲到 script tag內) 2. img ``` <img src="./img/logo" alt=""> ``` 主要讓瀏覽器去插入這段 img 的資源，代替原本img tag做的事 --- 資源：https://vic3.medium.com/href-src%E5%88%B0%E5%BA%95%E8%A6%81%E7%94%A8%E5%93%AA%E4%B8%80%E5%80%8B-f36aa23e27c0 https://stackoverflow.com/questions/3395359/difference-between-src-and-href