自學web前端之html(三)超鏈接、錨鏈接和功能性鏈接

前言
前面總結的是頭部標籤和常用標籤,下面這篇帖子就總結一些超鏈接、錨鏈接和功能性鏈接。

超鏈接

通過點擊可以從一個頁面跳轉到另一個頁面,實現頁面間的導航。當鼠標移動到超鏈接時,箭頭會變成一隻小手。
用法:使用<a>標籤創建超鏈接
語法:

<a href="http://www.baidu.com">點擊跳轉到百度</a>

屬性:
(1)href=“鏈接地址/路徑”。
(2)target=”指定打開鏈接的位置”
取值:(看應用場景。)
1._self默認值 表示在當前頁面打開;
2._blank在空白窗口(新的窗口)打開
3._parent 在父級框架中打開
4._top 在最頂層中打開
5.自定義打開

/*新窗口打開*/
<a href="http://www.baidu.com" target="_blank">
點擊跳轉到百度</a>

錨鏈接

通過點擊可以從頁面跳轉到指定的位置(成爲錨點)

頁面內的錨鏈接

頁面內的跳轉

<a name="frist"></a>/*定義錨點名稱frist*/
<a href="#frist"></a>/*跳轉到frist位置*/

頁面間的錨鏈接

頁面間的跳轉
從Thefrist.html頁面中轉入Thesecond.html頁面中並且將位置定到second所在的位置。
先在Thesecond.html定義一個名爲frist的錨點。

<a name="second"></a>

在Thefrist.html頁面中設置錨鏈接。

<a href="Thesecond.html#second"></a>

功能性鏈接

實現特殊功能的鏈接
1.下載圖片

<a href="img/qq.jpg">點擊下載圖片</a>

2.發送郵件

<a href="mailto:1967760xx37qq.com">聯繫我們</a>

3.引用腳本語言

<a href="javascript:alert('哈哈哈哈')"></a>

心得:學習html語言的過程確實很好玩,html的語言也很有趣,也比c++、python這種編程語言每個標籤有很多種屬性,可以根據自己的需求設置屬性,除了這幾個帖子之外還有表單標籤和一些新增的標籤。下面我會在寫css樣式中提到,就不再在html中一一總結了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章