html,第三課:鏈接基礎

大家好,我是你們的“浪花一朵”。上篇文章中給大家介紹了html的段落與大字標題這兩個雙標籤。今天我們將要學習雙標籤a。即為鏈接。如果是第一次看到我的文章,可以關注作者,然後翻看作者之前的課程哦!這篇文章的第五步至關重要,切記多看幾遍.

零基礎網頁設計/前端/html,第三課:鏈接基礎

現在我們進入正題:

第一步:先做一下基本操作,讓網頁內容和網頁邊緣沒有間隙.

零基礎網頁設計/前端/html,第三課:鏈接基礎

第二步:看一下鏈接的基本結構,href指的是『用來』“指定路徑”的屬性,href後面引號內的內容即為其“指定的路徑”。有了鏈接,我們可以幹很多事,比如,點擊它過後①跳到另一個網頁②下載文件,圖片等③鏈接到同一個網頁的指定位置.

零基礎網頁設計/前端/html,第三課:鏈接基礎

第三步:目前我們不知道要鏈接到哪裡?先用井號作為路徑。把“鏈接”二字寫在標籤對之間,瀏覽器中打開後,可以看到鏈接的名稱為“鏈接”,顏色為藍色,有下劃線,這是鏈接的基本樣式,以後講css之後會告訴大家怎麼更改樣式,如去掉下劃線等.

零基礎網頁設計/前端/html,第三課:鏈接基礎

下面是點擊過後的樣子,變成了紫色.

零基礎網頁設計/前端/html,第三課:鏈接基礎

第四步:我們現在實現點擊鏈接後鏈接到百度網頁的效果,記住,網頁一定要寫全☞,如https://www.baidu.com,可以把後面的“鏈接”二字換成“百度”,更真實哦.

零基礎網頁設計/前端/html,第三課:鏈接基礎

第五步:我們現在實現點擊鏈接後下載文件的效果,首先將一個文件,比如一個壓縮包放到html文件的同級目錄下,然後把該文件的全名寫在href屬性中,記住,後綴名也不能少.

零基礎網頁設計/前端/html,第三課:鏈接基礎

在瀏覽器中點擊這個鏈接,在網頁下方可以得到如下效果.

零基礎網頁設計/前端/html,第三課:鏈接基礎

如,圖片等其他文件,可以自己嘗試,這裡就不多說了.


第六步:加粗的這段代碼































































d


複製粘貼一下,運行。先看代碼(下面的圖),可以看到我們給最上面的雙標籤a設置了一個id為a1,id很好理解,就相當於給了這個標籤一個學號,方便點名,每一個標籤只能有一個id。最底下的那個a標籤的href屬性後面的“#a1”就等於是對a1點名,根據第二步對href屬性的介紹,可以得出,它指定的路徑

id為a1的那個標籤。可以看到後面有一個標籤叫span,是個雙標籤,它的作用是圈住一段文字,對圈住的文字進行操作,注意☞
是『換行符』,他是單標籤
。既然鏈接到a1的方法已經講過了,如圖箭頭,那麼,鏈接到s1是不是也能看懂呢?看不懂可以在評論區問我.

零基礎網頁設計/前端/html,第三課:鏈接基礎

最後,你應該注意的是,網頁中顯示的文字是寫在標籤的什麼位置上。還有,別忘了運行哦.

今天的文章到這裡就結束了,如果還有什麼問題或者好的建議,可以在評論區提出哦!聽說動動手指點贊並轉發的人會變帥或變美哦!


分享到:


相關文章: