簡單聊聊錨點與map標簽的熱點錨點

本文聊的是錨點和熱點區(qū)域的錨點


想要更詳細的了解錨點可以學習

張鑫旭的技術(shù)之錨點傳送門

其實錨點還算簡單,是學習的少了才不知道熱點區(qū)域map這個標簽表锻,所以特來總結(jié)與分享。

有什么用乞娄?

一篇長文想要快速通過目錄來進行閱讀之類的功能

介紹

百度百科-錨點:是網(wǎng)頁制作中超級鏈接的一種瞬逊,又叫命名錨記。命名錨記像一個迅速定位器一樣是一種頁面內(nèi)的超級鏈接仪或,運用相當普遍确镊。

個人理解的錨點:快速定位,hash范删。由于在地址的后面價格#的大部分都是hash蕾域,如今的單頁路由的原理也和hash有關(guān)。


hash

錨點的使用a標簽的href是個關(guān)鍵
幾種使用方法:

a標簽href 跳轉(zhuǎn)對象為元素為id 也可以通過name來進行跳轉(zhuǎn)前提有name屬性
// 大家可以給元素加點css
<a href="#1F"></a>
<a href="#2F"></a>

<div id="1F">1F</div>
<a name="2F">2F</a>
在圖片上也想做錨點到旦?用map
<body>
        
        ![](cat.jpg)
        <map name="Map">
          <area shape="poly" coords="245,18,254,97,255,143,263,161,258,182,256,217,250,239,242,257,240,281,237,296,272,297,302,300,325,299,338,296,354,297,375,298,394,298,408,298,419,298,421,291,416,282,413,264,409,250,402,232,395,215,387,196,386,183,381,170,372,160,371,150,378,138,378,123,376,96,377,81,379,70,382,53,384,33,380,22,374,16,360,24,354,37,350,47,341,55,326,59,309,61,295,61,279,49,274,36,262,31,257,23" href="#F1">
        </map>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <span id="F1">
        喵旨巷!
        </span>
    
    </body>
點擊貓進行跳轉(zhuǎn)

簡單介紹一下map的用法:
注意要告訴他用哪個map,area是告訴他在圖片上的區(qū)域

<img src="" usemap="#Map">
<map name="Map">
    <area>
</map>

area中有重要的幾個屬性:

  1. coords 這個是要選中的地區(qū)里面有圓添忘、矩形采呐、多邊形
  2. href 跳轉(zhuǎn)的地址、錨點
  3. 有需要可以看這個 菜鳥教程-area

tip:可以通過DW中有熱點選擇的功能搁骑,還算方便斧吐,省去了坐標的問題

就寫到這又固,我自己都覺得想應付人,但是這個東西只是不知道煤率,想了解幾分鐘就能上手了仰冠,謝謝大家!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末蝶糯,一起剝皮案震驚了整個濱河市洋只,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌裳涛,老刑警劉巖木张,帶你破解...
    沈念sama閱讀 218,204評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件众辨,死亡現(xiàn)場離奇詭異端三,居然都是意外死亡,警方通過查閱死者的電腦和手機鹃彻,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,091評論 3 395
  • 文/潘曉璐 我一進店門郊闯,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人蛛株,你說我怎么就攤上這事团赁。” “怎么了谨履?”我有些...
    開封第一講書人閱讀 164,548評論 0 354
  • 文/不壞的土叔 我叫張陵欢摄,是天一觀的道長。 經(jīng)常有香客問我笋粟,道長怀挠,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,657評論 1 293
  • 正文 為了忘掉前任害捕,我火速辦了婚禮绿淋,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘尝盼。我一直安慰自己吞滞,他們只是感情好,可當我...
    茶點故事閱讀 67,689評論 6 392
  • 文/花漫 我一把揭開白布盾沫。 她就那樣靜靜地躺著裁赠,像睡著了一般。 火紅的嫁衣襯著肌膚如雪赴精。 梳的紋絲不亂的頭發(fā)上组贺,一...
    開封第一講書人閱讀 51,554評論 1 305
  • 那天,我揣著相機與錄音祖娘,去河邊找鬼失尖。 笑死啊奄,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的掀潮。 我是一名探鬼主播菇夸,決...
    沈念sama閱讀 40,302評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼仪吧!你這毒婦竟也來了庄新?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,216評論 0 276
  • 序言:老撾萬榮一對情侶失蹤薯鼠,失蹤者是張志新(化名)和其女友劉穎择诈,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體出皇,經(jīng)...
    沈念sama閱讀 45,661評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡羞芍,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,851評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了郊艘。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片荷科。...
    茶點故事閱讀 39,977評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖纱注,靈堂內(nèi)的尸體忽然破棺而出畏浆,到底是詐尸還是另有隱情,我是刑警寧澤狞贱,帶...
    沈念sama閱讀 35,697評論 5 347
  • 正文 年R本政府宣布刻获,位于F島的核電站,受9級特大地震影響瞎嬉,放射性物質(zhì)發(fā)生泄漏蝎毡。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,306評論 3 330
  • 文/蒙蒙 一佑颇、第九天 我趴在偏房一處隱蔽的房頂上張望顶掉。 院中可真熱鬧,春花似錦挑胸、人聲如沸痒筒。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽簿透。三九已至,卻和暖如春解藻,著一層夾襖步出監(jiān)牢的瞬間老充,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評論 1 270
  • 我被黑心中介騙來泰國打工螟左, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留啡浊,地道東北人觅够。 一個月前我還...
    沈念sama閱讀 48,138評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像巷嚣,于是被迫代替她去往敵國和親喘先。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,927評論 2 355

推薦閱讀更多精彩內(nèi)容