整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          HTML之a(chǎn)標(biāo)簽的使用

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

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

          不在此篇文章的討論范圍內(nèi))

          1. 鏈接作用

          這個大家都很熟悉,就是點(diǎn)擊跳轉(zhuǎn)到我們設(shè)定的鏈接上,具體語法為:

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

          平常我們在點(diǎn)擊鏈接的時(shí)候有時(shí)候會在當(dāng)前頁面加載,有時(shí)候會在新標(biāo)簽頁加載,還有的甚至?xí)陆ù翱诩虞d,為什么會這樣呢?這里我們就需要引進(jìn)a標(biāo)簽的一個屬性target(僅在href屬性存在時(shí)才能使用)。根據(jù)w3c的文檔說明我們會看到target屬性有多個值,對應(yīng)的說明如下:

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

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

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

          2. 錨點(diǎn)定位

          除了鏈接到新地址,a標(biāo)簽還可以用來做頁面內(nèi)導(dǎo)航,即錨點(diǎn)定位,具體代碼如下:

          <div id="test">test</div>
          <a href="#test">跳轉(zhuǎn)</a>
          

          點(diǎn)擊跳轉(zhuǎn)即可定位到id為test的div所在的位置。

          3. 打電話/發(fā)短信/發(fā)郵件

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

          4. 下載

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

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

          接標(biāo)簽

          定義:從一個網(wǎng)頁指向另一個網(wǎng)頁的目的地,

          有四種類型:

          (1)鏈接覆蓋原有的鏈接



          (2)新開一個窗口



          (3)圖片鏈接



          (4)死鏈接



          html:

          <!doctype html>

          <html lang="en">

          <head>

          <meta charset="UTF-8" />

          <title>鏈接標(biāo)簽</title>

          </head>

          <body>

          <a href="https://www.baidu.com/"><font color="blue">百度</font></a>

          <a href="https://www.jd.com/" target="_blank"><font color="blue">京東</font></a>

          <a href="https://www.hao123.com/" target="_blank"><img src="../img/男孩子.png"/></a>

          <a href="#" target="_blank">死鏈接</a>

          </body>

          </html>

          天我們來看下html中<a></a>的特點(diǎn)與功能

          一 .a標(biāo)簽是超鏈接標(biāo)簽,首先我們說一下它的特點(diǎn):

          1.在網(wǎng)頁中默認(rèn)會有下劃線

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

          效果圖

          詳細(xì)代碼

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

          去掉下劃線

          二 .下面我們來看看a標(biāo)簽的幾個功能:

          1.跳轉(zhuǎn)頁面

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

          target 屬性

          值:_blank在新頁面打開

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

          跳轉(zhuǎn)頁面功能

          2.錨點(diǎn)

          作用:網(wǎng)頁太長時(shí),通過點(diǎn)擊頁面某一個導(dǎo)航,頁面直接到達(dá)該內(nèi)容,網(wǎng)頁還是該網(wǎng)頁,只是向下自己滑動。

          實(shí)現(xiàn)方法:在 href 的值里寫上#name,name對應(yīng)id的值

          下面是一個簡單例子,點(diǎn)擊顏色就會跳轉(zhuǎn)到相應(yīng)顏色區(qū)域

          錨點(diǎn)例子

          3.下載

          作用:實(shí)現(xiàn)網(wǎng)頁的下載功能

          實(shí)現(xiàn)方法:在 href 里寫上文件的地址就可以了

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

          下載功能

          三.此外,介紹一下a標(biāo)簽的顏色,給a標(biāo)簽換顏色也是會經(jīng)常用到的,但是怎么改呢?

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

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

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

          :hover鼠標(biāo)移入(懸停)(顏色)狀態(tài)

          :active鼠標(biāo)按下不動時(shí)候的(顏色)狀態(tài)

          改變a標(biāo)簽顏色

          今天的a標(biāo)簽就介紹到這里,你學(xué)到了嗎?


          主站蜘蛛池模板: 亚洲日韩中文字幕无码一区| 欧美日韩综合一区二区三区| 国产一区二区三区手机在线观看| 久久蜜桃精品一区二区三区| 日韩在线视频不卡一区二区三区| 亚洲变态另类一区二区三区 | 久久高清一区二区三区| 麻豆天美国产一区在线播放| 视频在线一区二区| 风间由美性色一区二区三区| 在线观看亚洲一区二区| 风间由美性色一区二区三区| 亚洲线精品一区二区三区| 亚洲一区二区三区久久| 国产美女av在线一区| 亚洲一区二区三区乱码在线欧洲| 无码精品久久一区二区三区 | 合区精品久久久中文字幕一区| 日韩亚洲一区二区三区| 日本中文字幕在线视频一区| 色婷婷av一区二区三区仙踪林 | 国产美女av在线一区| 精品一区二区三区视频| 国产精品久久无码一区二区三区网| 日韩精品人妻一区二区中文八零| 国产精品无码一区二区三区免费| 国产精品一级香蕉一区| 中文字幕在线一区二区在线 | 后入内射国产一区二区| 国产成人久久一区二区不卡三区 | 中文字幕在线播放一区| 国产av福利一区二区三巨| 一区二区在线播放视频| 国产成人一区在线不卡| 国产福利电影一区二区三区,免费久久久久久久精 | 国产成人综合精品一区| 波多野结衣在线观看一区| 国产熟女一区二区三区五月婷| 国产一区高清视频| 国偷自产av一区二区三区| 伦精品一区二区三区视频|