整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML之a標簽的使用

          到a標簽,大家第一時間想到的一定是a標簽的鏈接作用,除了鏈接,我們還能想到什么呢?

          下面的篇幅我們一起來討論html中a標簽的用途。(針對html5討論,html5中不支持的功能

          不在此篇文章的討論范圍內)

          1. 鏈接作用

          這個大家都很熟悉,就是點擊跳轉到我們設定的鏈接上,具體語法為:

          <a href="xxx(鏈接地址)">跳轉</a>
          

          平常我們在點擊鏈接的時候有時候會在當前頁面加載,有時候會在新標簽頁加載,還有的甚至會新建窗口加載,為什么會這樣呢?這里我們就需要引進a標簽的一個屬性target(僅在href屬性存在時才能使用)。根據w3c的文檔說明我們會看到target屬性有多個值,對應的說明如下:

          _blank -->總在一個新打開、未命名的新標簽頁中載入目標文檔。
          _self -->在當前標簽頁中載入目標文檔(默認選項,無需特別聲明)
          _parent -->在當前框架(frame)的父框架(父級frame)中載入目標文檔
          _top -->在當前框架(frame)的頂部框架(頂級frame)中載入目標文檔
          framename -->在指定的框架中載入目標文檔
          

          注意:以上屬性只能在新標簽或者當前標簽載入目標文檔,那么如何能夠在新窗口載入目標文檔呢?我們需要用到js中的window.open()方法,具體代碼如下:

          <script type="text/javascript">
           function openNewWindow(url, title)
           {
           window.open(url, title);
           }
          </script>
          <a href='javascript:openNewWindow("xxx(鏈接地址)", "標題")'>跳轉</a>
          

          2. 錨點定位

          除了鏈接到新地址,a標簽還可以用來做頁面內導航,即錨點定位,具體代碼如下:

          <div id="test">test</div>
          <a href="#test">跳轉</a>
          

          點擊跳轉即可定位到id為test的div所在的位置。

          3. 打電話/發短信/發郵件

          <a href="tel:電話號碼">打電話</a>
          <a href="sms:電話號碼">發短信</a>
          <a href="mailto:郵箱地址">發郵件</a>
          

          4. 下載

          <a href="xxx(下載地址)" download="文件名">下載</a>
          

          注意:以上下載地址要與原頁面同源,否則無法下載。download的值可以缺省,如果缺省則按文件默認名命名。

          天我們來看下html中<a></a>的特點與功能

          一 .a標簽是超鏈接標簽,首先我們說一下它的特點:

          1.在網頁中默認會有下劃線

          2.不會繼承父級的顏色樣式

          效果圖

          詳細代碼

          其中,自帶的下劃線不美觀,但我們可以用以下代碼解決,ctrl+s保存后,下劃線就沒有了

          去掉下劃線

          二 .下面我們來看看a標簽的幾個功能:

          1.跳轉頁面

          href 屬性要跳轉頁面的地址(沒地址的情況下可以寫一個#),即可以給網絡的地址也可以給本地的地址

          target 屬性

          值:_blank在新頁面打開

          _self 在本頁面打開(默認的)

          跳轉頁面功能

          2.錨點

          作用:網頁太長時,通過點擊頁面某一個導航,頁面直接到達該內容,網頁還是該網頁,只是向下自己滑動。

          實現方法:在 href 的值里寫上#name,name對應id的值

          下面是一個簡單例子,點擊顏色就會跳轉到相應顏色區域

          錨點例子

          3.下載

          作用:實現網頁的下載功能

          實現方法:在 href 里寫上文件的地址就可以了

          注意:如果你要下載的文件瀏覽器能夠讀出來,那它就不會被下載,而是會被直接打開。如果就想讓瀏覽器下載所有文件,那就在a標簽里添加一個屬性download( h5 新增屬性,不兼容IE低版本),它的值寫上文件的名字加后綴名

          下載功能

          三.此外,介紹一下a標簽的顏色,給a標簽換顏色也是會經常用到的,但是怎么改呢?

          這里用到了“偽類”,偽類:針對元素的某種狀態添加的不同樣式

          a :link 未訪問鏈接的(顏色)狀態

          :visited訪問過的鏈接的(顏色)狀態

          :hover鼠標移入(懸停)(顏色)狀態

          :active鼠標按下不動時候的(顏色)狀態

          改變a標簽顏色

          今天的a標簽就介紹到這里,你學到了嗎?

          覽器支持

          所有主流瀏覽器都支持 <a> 標簽。

          標簽定義及使用說明

          <a> 標簽定義超鏈接,用于從一個頁面鏈接到另一個頁面。

          <a> 元素最重要的屬性是 href 屬性,它指定鏈接的目標。

          在所有瀏覽器中,鏈接的默認外觀如下:

          • 未被訪問的鏈接帶有下劃線而且是藍色的

          • 已被訪問的鏈接帶有下劃線而且是紫色的

          • 活動鏈接帶有下劃線而且是紅色的

          提示和注釋

          提示:如果沒有使用 href 屬性,則不能使用 hreflang、media、rel、target 以及 type 屬性。

          提示:通常在當前瀏覽器窗口中顯示被鏈接頁面,除非規定了其他 target。

          提示:請使用 CSS 來改變鏈接的樣式。

          HTML 4.01 與 HTML5之間的差異

          在 HTML 4.01 中,<a> 標簽既可以是超鏈接,也可以是錨。在 HTML5 中,<a> 標簽是超鏈接,但是假如沒有 href 屬性,它僅僅是超鏈接的一個占位符。

          HTML5 有一些新的屬性,同時不再支持一些 HTML 4.01 的屬性。

          屬性

          New :HTML5 中的新屬性。

          屬性描述
          charsetchar_encodingHTML5 不支持。規定目標 URL 的字符編碼。
          coordscoordinatesHTML5 不支持。規定鏈接的坐標。
          downloadNewfilename指定下載鏈接
          hrefURL規定鏈接的目標 URL。
          hreflanglanguage_code規定目標 URL 的基準語言。僅在 href 屬性存在時使用。
          mediaNewmedia_query規定目標 URL 的媒介類型。默認值:all。僅在 href 屬性存在時使用。
          namesection_nameHTML5 不支持。規定錨的名稱。
          relalternateauthorbookmarkhelplicensenextnofollownoreferrerprefetchprevsearchtag規定當前文檔與目標 URL 之間的關系。僅在 href 屬性存在時使用。
          revtextHTML5 不支持。規定目標 URL 與當前文檔之間的關系。
          shapedefaultrectcirclepolyHTML5 不支持。規定鏈接的形狀。
          target_blank_parent_self_topframename規定在何處打開目標 URL。僅在 href 屬性存在時使用。
          typeNewMIME_type規定目標 URL 的 MIME 類型。僅在 href 屬性存在時使用。注:MIME = Multipurpose Internet Mail Extensions。

          全局屬性

          <a> 標簽支持 HTML 的全局屬性。

          事件屬性

          <a> 標簽支持 HTML 的事件屬性。

          創建超級鏈接

          本例演示如何在 HTML 文檔中創建鏈接。

          將圖像作為鏈接

          本例演示如何使用圖像作為鏈接。

          在新的瀏覽器窗口打開鏈接

          本例演示如何在新窗口打開一個頁面,這樣的話訪問者就無需離開您的站點了。

          創建電子郵件鏈接

          本例演示如何鏈接到一個郵件。(本例在安裝郵件客戶端程序后才能工作。)

          創建電子郵件鏈接 2

          本例演示更加復雜的郵件鏈接。

          使用錨跳轉到同一個頁面的不同位置

          本例演示如何使用錨的 id 屬性跳轉到頁面的不同位置( HTML5 不支持 name 屬性)

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!


          主站蜘蛛池模板: 亚洲av高清在线观看一区二区| 福利一区二区视频| 亚洲欧洲专线一区| 中文字幕av一区| 精品国产一区二区麻豆| 日韩人妻无码一区二区三区| 精品久久综合一区二区| 国产精品一区二区久久不卡| www亚洲精品少妇裸乳一区二区| 亚洲AV日韩综合一区| 日本免费一区二区三区四区五六区| 一区二区高清在线观看| 日韩在线视频一区| 精品国产一区二区三区| 无码精品一区二区三区| 亚洲中文字幕乱码一区| 国产一区二区三区乱码网站| 国产激情视频一区二区三区| 国产亚洲一区二区手机在线观看 | 精品人妻AV一区二区三区| 国产亚洲3p无码一区二区| 成人国产一区二区三区| 亚洲国产高清在线一区二区三区 | 精品在线视频一区| 天天躁日日躁狠狠躁一区| 日本福利一区二区| 日本一区二区三区精品国产| 一区二区三区日本电影| 亚洲片国产一区一级在线观看| 国产丝袜无码一区二区视频| 日韩免费视频一区| 国产一区二区精品久久91| 国产伦精品一区二区三区无广告 | 好爽毛片一区二区三区四| A国产一区二区免费入口| 亚洲色精品aⅴ一区区三区| 日韩国产精品无码一区二区三区| 色窝窝无码一区二区三区色欲| 亚洲一区二区三区四区视频 | 国产一区二区免费| 精品成人乱色一区二区|