文本內(nèi)鏈接
最后這些關(guān)于html的內(nèi)容有點(diǎn)查漏補(bǔ)缺的意思了，這一次是關(guān)于文本內(nèi)鏈接的使用方法苛白，簡(jiǎn)單來(lái)說(shuō)就是我們的頁(yè)面中有一個(gè)章節(jié)名稱(chēng)目錄焰檩，如何點(diǎn)擊目錄中的名稱(chēng)倾芝，就能正好在頁(yè)面中顯示相應(yīng)內(nèi)容。
如圖所示：
點(diǎn)擊目錄的"總體評(píng)價(jià)"跳轉(zhuǎn)到相應(yīng)內(nèi)容箭跳，如圖：
就是這樣的一個(gè)效果晨另。在很多網(wǎng)頁(yè)中經(jīng)常看到谱姓。
這個(gè)案例我們會(huì)分三部分來(lái)講解借尿。
今天主要學(xué)習(xí)如何使用<a>標(biāo)簽進(jìn)行頁(yè)面內(nèi)鏈接，已及從其他網(wǎng)頁(yè)鏈接該頁(yè)面內(nèi)的指定內(nèi)容屉来。
這里會(huì)有一個(gè)問(wèn)題路翻，就是點(diǎn)擊鏈接后，文字內(nèi)容會(huì)置頂顯示茄靠，這個(gè)默認(rèn)形式會(huì)給我們帶來(lái)不便茂契，解決方案較復(fù)雜，會(huì)在最后一次講解中給出慨绳。
下一次我們來(lái)學(xué)習(xí)如何對(duì)圖片添加映射超鏈接掉冶，映射超鏈接的意思是，假如我的圖片中有兩個(gè)人物或物象脐雪，考慮讀者會(huì)感興趣厌小，想了解更多內(nèi)容，如何框選出物象邊緣來(lái)添加鏈接战秋，這就是圖像映射超鏈接召锈。如圖：使用一個(gè)平時(shí)不可見(jiàn)的邊框來(lái)制作圖片映射鏈接，確保感興趣的讀者能點(diǎn)擊到畫(huà)面中的目標(biāo)物體获询。
最后一部分我們將回答今天結(jié)尾的問(wèn)題涨岁，也就是如何解決置頂問(wèn)題。這一部分也會(huì)作為HTML部分結(jié)束的綜合練習(xí)吉嚣，和css部分啟蒙的預(yù)熱練習(xí)梢薪。，
首先看一下今天的基礎(chǔ)代碼
<!DOCTYPE HTML> <html> <head> <title>文內(nèi)鏈接</title> </head> <body > <a>試飛進(jìn)程</a> <a>研制情況</a> <a>服役動(dòng)態(tài)</a> <a>總體評(píng)價(jià)</a> <p> <h2><a>試飛進(jìn)程</a></h2> 殲-20隱形戰(zhàn)斗機(jī)首架技術(shù)驗(yàn)證機(jī)于2011年1月11日中午12時(shí)50分左右進(jìn)行首次升空飛行測(cè)試尝哆，13時(shí)08分成功著陸秉撇，歷時(shí)18分鐘。<br>整個(gè)首飛過(guò)程在殲-10S戰(zhàn)斗教練機(jī)陪伴下完成 秋泄。2016年10月28日琐馆，首次發(fā)布"空軍試飛員將駕殲-20飛機(jī)亮相中國(guó)航展"后，還陸續(xù)發(fā)布了"殲-20戰(zhàn)機(jī)列裝空軍作戰(zhàn)部隊(duì)""空軍殲-20戰(zhàn)機(jī)首次開(kāi)展海上方向?qū)崙?zhàn)化訓(xùn)練"等恒序。 <h2><a>研制情況</a></h2> 在2016年11月1日瘦麸，第十一屆珠海航展，殲-20首次進(jìn)行空中飛行展示歧胁。兩架殲-20做了公開(kāi)飛行滋饲，不僅在現(xiàn)場(chǎng)引起轟動(dòng)厉碟，也立刻被西方媒體大量報(bào)道。殲-20是中國(guó)現(xiàn)代空中力量的代表作屠缭，也進(jìn)入了世界最先進(jìn)的第五代戰(zhàn)斗機(jī)行列箍鼓，它是中國(guó)國(guó)防能力高速發(fā)展的一個(gè)象征。<br>2018年11月11日呵曹，第十二屆中國(guó)航展在珠海迎來(lái)"高光時(shí)刻"：殲-20戰(zhàn)機(jī)在公開(kāi)飛行展示中掛彈開(kāi)倉(cāng)款咖，震撼獻(xiàn)禮人民空軍成立69周年紀(jì)念日。 <br>2019年10月13日奄喂，慶祝人民空軍成立70周年航空開(kāi)放活動(dòng)新聞發(fā)布上铐殃，空軍新聞發(fā)言人申進(jìn)科大校介紹殲-20戰(zhàn)機(jī)列陣人民空軍"王牌部隊(duì)" <h2><a>服役動(dòng)態(tài)</a></h2> 2017年3月9日，中央電視臺(tái)報(bào)道殲-20戰(zhàn)斗機(jī)正式進(jìn)入空軍序列砍聊。<br>2017年3月13日背稼，《中國(guó)日?qǐng)?bào)》發(fā)布消息稱(chēng)贰军，中國(guó)自主研制的殲-20近期將裝配國(guó)產(chǎn)發(fā)動(dòng)機(jī)玻蝌。<br>2017年7月30日，殲-20三機(jī)編隊(duì)參加在朱日和舉行的慶祝中國(guó)人民解放軍成立90周年閱兵词疼。殲擊機(jī)梯隊(duì)飛來(lái)俯树，3架殲-20隱形戰(zhàn)斗機(jī)以楔形編隊(duì)的形式在天空中飛過(guò)。<br>2017年9月28日贰盗，在中國(guó)國(guó)防部行記者會(huì)上许饿，國(guó)防部新聞發(fā)言人吳謙大校介紹殲-20飛機(jī)已經(jīng)列裝部隊(duì)。<br>2017年11月10日上午舵盈，中國(guó)空軍發(fā)言人申進(jìn)科大校表示陋率，殲-20 列裝部隊(duì)后，已經(jīng)開(kāi)展編隊(duì)訓(xùn)練秽晚。<br>2018年2月9日瓦糟，中國(guó)空軍新聞發(fā)言人申進(jìn)科大校發(fā)布消息，殲-20開(kāi)始列裝空軍作戰(zhàn)部隊(duì)赴蝇。<br>2018年10月30日菩浙，中國(guó)空軍4架殲-20隱形戰(zhàn)斗機(jī)現(xiàn)身珠海金灣機(jī)場(chǎng)上空。<br>2019年10月1日句伶，殲-20現(xiàn)身慶祝中華人民共和國(guó)成立70周年閱兵式劲蜻；閱兵中，殲-20與殲-16考余、殲-10C三型飛機(jī)分別以5機(jī)楔隊(duì)組成戰(zhàn)斗隊(duì)形接受檢閱先嬉；該三款殲擊機(jī)被譽(yù)為中國(guó)空軍殲擊機(jī)家族的"三劍客"，是未來(lái)聯(lián)合作戰(zhàn)的骨干力量 <h2><a>總體評(píng)價(jià)</a></h2> 殲-20是眼下亞洲區(qū)域最先進(jìn)的戰(zhàn)機(jī)楚堤，這讓中國(guó)空軍在面對(duì)日本坝初、韓國(guó)與印度等國(guó)家的空軍時(shí)占有顯著優(yōu)勢(shì)浸剩。外媒將殲-20與其他國(guó)家戰(zhàn)機(jī)進(jìn)行了對(duì)比。俄羅斯蘇霍伊蘇-57戰(zhàn)斗機(jī)由于研制進(jìn)度幾度推遲鳄袍，尚未正式交付入役绢要；美國(guó)F-35戰(zhàn)斗機(jī)也多次出現(xiàn)飛機(jī)供氧不足的問(wèn)題，大面積停飛拗小，出口受阻重罪；韓國(guó)KF-X隱形戰(zhàn)機(jī)先是被爆出因掌握不了關(guān)鍵技術(shù)而被迫降成四代半戰(zhàn)機(jī)的情況，后又傳出了合作方印尼打算撤資并已告知韓國(guó)的消息哀九。因此剿配，中國(guó)殲-20戰(zhàn)機(jī)成為亞太區(qū)域領(lǐng)跑的優(yōu)勢(shì)戰(zhàn)機(jī)。<br>中國(guó)空軍正向全疆域作戰(zhàn)的現(xiàn)代化戰(zhàn)略性軍種邁進(jìn)阅束，成為有效塑造態(tài)勢(shì)呼胚、管控危機(jī)、遏制戰(zhàn)爭(zhēng)息裸、打贏戰(zhàn)爭(zhēng)的重要力量蝇更。殲-20戰(zhàn)機(jī)列裝空軍作戰(zhàn)部隊(duì)，將進(jìn)一步提升空軍綜合作戰(zhàn)能力呼盆，有助于空軍更好的肩負(fù)起維護(hù)國(guó)家主權(quán)年扩、安全和領(lǐng)土完整的神圣使命。<br>殲20是我國(guó)自主研制的第五代戰(zhàn)斗機(jī)访圃，它的研制實(shí)現(xiàn)了既定的四大目標(biāo)——打造跨代新機(jī)厨幻、引領(lǐng)技術(shù)發(fā)展、創(chuàng)新研發(fā)體系腿时、建設(shè)卓越團(tuán)隊(duì)况脆。打造跨代新機(jī)，是按照性能批糟、技術(shù)和進(jìn)度要求格了，研制開(kāi)發(fā)我國(guó)自己的新一代隱身戰(zhàn)斗機(jī)。引領(lǐng)技術(shù)發(fā)展跃赚，指通過(guò)自主創(chuàng)新實(shí)現(xiàn)強(qiáng)軍興軍的目標(biāo)笆搓。殲20在態(tài)勢(shì)感知、信息對(duì)抗纬傲、協(xié)同作戰(zhàn)等多方面取得了突破满败，這是中國(guó)航空工業(yè)從跟跑到并跑，再到領(lǐng)跑的必由之路叹括。創(chuàng)新研發(fā)體系算墨，是指建設(shè)最先進(jìn)的飛機(jī)研制條件和研制流程。通過(guò)一大批大國(guó)重器的研制汁雷，我們建立了具有我國(guó)特色的數(shù)字化研發(fā)體系净嘀。建設(shè)卓越團(tuán)隊(duì)报咳，是指通過(guò)型號(hào)研制，錘煉一支愛(ài)黨愛(ài)國(guó)的研制隊(duì)伍挖藏，這些擁有報(bào)國(guó)情懷暑刃、創(chuàng)新精神的優(yōu)秀青年是航空事業(yè)未來(lái)發(fā)展的生力軍。未來(lái)膜眠，我們將在戰(zhàn)斗機(jī)的機(jī)械化岩臣、信息化、智能化發(fā)展征程上不斷前行宵膨。 </p> </body> </html>
看著復(fù)雜架谎，實(shí)際上主要都是些內(nèi)容文字，簡(jiǎn)化后的代碼如下：
<!DOCTYPE HTML> <html> <head> <title>文內(nèi)鏈接</title> </head> <body > <a>試飛進(jìn)程</a> <a>研制情況</a> <a>服役動(dòng)態(tài)</a> <a>總體評(píng)價(jià)</a> <p> <h2><a>試飛進(jìn)程</a></h2> 殲-20隱形........首次開(kāi)展海上方向?qū)崙?zhàn)化訓(xùn)練"等辟躏。 <h2><a>研制情況</a></h2> 在2016年......"王牌部隊(duì)" <h2><a>服役動(dòng)態(tài)</a></h2> 2骨干力量 <h2><a>總體評(píng)價(jià)</a></h2> 殲-20是眼下亞洲區(qū)域最先進(jìn)的戰(zhàn)機(jī)......不斷前行谷扣。 </p> </body> </html>
就是在<body></body>中添加四個(gè)<a></a>標(biāo)簽來(lái)寫(xiě)入標(biāo)題，并列寫(xiě)入一個(gè)<p></p>標(biāo)簽捎琐，并在<p></p>標(biāo)簽中添加文字內(nèi)容和<h2></h2>標(biāo)簽会涎。這時(shí)需要注意的是，<h2></h2>中還要用<a></a>標(biāo)簽夾住標(biāo)題野哭。
頁(yè)面效果如下：
下面我們來(lái)添加文章內(nèi)部鏈接
添加文章內(nèi)部鏈接需要一前一后兩個(gè)<a></a>標(biāo)簽在塔。一個(gè)是目錄中的<a></a>,如圖：
一個(gè)是正文中的標(biāo)題上的<a></a>,如圖：
添加內(nèi)部鏈接的辦法非常簡(jiǎn)單幻件，首先我們把目錄中的標(biāo)題<a></a>標(biāo)簽稱(chēng)為"召喚者"拨黔。把正文中的標(biāo)題中的<a></a>標(biāo)簽稱(chēng)為"被召喚者"。如果您學(xué)過(guò)《》這篇教程就會(huì)知道绰沥，一個(gè)標(biāo)簽召喚或調(diào)用另一個(gè)標(biāo)簽需要能叫出被調(diào)用標(biāo)簽的名字篱蝇！
所以先要給"被召喚者"起名字，起名字的方法有兩種徽曲，一種是name=""零截，還有一種是id=""，建議大家都寫(xiě)上秃臣，因?yàn)橛械臑g覽器不支持name屬性涧衙。具體寫(xiě)法如下：
<h2><a name="chapter1" id="chapter1">試飛進(jìn)程</a></h2>
在"召喚者"<a>標(biāo)簽中使用href屬性來(lái)叫出"被召喚者"的名字！示例代碼如下：需要在引號(hào)中添加#后再寫(xiě)名字奥此。
<!DOCTYPE HTML> <html> <head> <title>文內(nèi)鏈接</title> </head> <body > <a href="#chapter1">試飛進(jìn)程</a><!--看這里--> <a>研制情況</a> <a>服役動(dòng)態(tài)</a> <a>總體評(píng)價(jià)</a> </body> </html>
<a>標(biāo)簽有點(diǎn)懶弧哎，只叫名字的話它會(huì)假裝聽(tīng)不見(jiàn)，所以還要具體描述它的特征稚虎，讓它不好意思偷懶撤嫩，也就是前后兩個(gè)<a></a>標(biāo)簽中間夾的文字內(nèi)容要一致，比如上文中的兩個(gè)<a>中間的內(nèi)容都是"試飛進(jìn)程"蠢终。如果字不一樣序攘，休想叫得動(dòng)"被召喚者"茴她。
效果如下：
點(diǎn)擊后，試飛進(jìn)程標(biāo)簽跳到了視窗的最頂端程奠，如圖：這種頂在視窗頂端的顯示的方式我們稱(chēng)之為"置頂"丈牢。
下面我們使用這個(gè)方法，為剩下的標(biāo)題添加頁(yè)面內(nèi)鏈接瞄沙。
打開(kāi)外部頁(yè)面中指定信息位置的方法
首先赡麦，我們復(fù)制一下這個(gè)頁(yè)面文件命名為"打開(kāi)外部頁(yè)面文件指定位置.html"，然后刪掉<p></p>和其中內(nèi)容帕识。示例代碼如下：
<!DOCTYPE HTML> <html> <head> <title>打開(kāi)外部頁(yè)面文件指定位置</title> </head> <body > <a href="#chapter1">試飛進(jìn)程</a> <a href="#chapter2">研制情況</a> <a href="#chapter3">服役動(dòng)態(tài)</a> <a href="#chapter4">總體評(píng)價(jià)</a> </body> </html>
方法非常簡(jiǎn)單泛粹，在href中添加外部頁(yè)面路徑即可！示例代碼如下：
<a href="文內(nèi)鏈接ceshi.html#chapter1">試飛進(jìn)程</a>
依次添加后肮疗，頁(yè)面效果如下：
點(diǎn)擊其中一個(gè)標(biāo)題"研制情況"晶姊，頁(yè)面跳轉(zhuǎn)，如圖：
這里伪货，置頂?shù)膯?wèn)題就出現(xiàn)了们衙，如果我們的文章目錄一直在視圖的頂部，每次點(diǎn)擊頁(yè)面內(nèi)鏈接時(shí)碱呼，頂部的目錄就會(huì)和標(biāo)題重疊蒙挑，非常不美觀，解決這個(gè)問(wèn)題就要涉及到<div>布局的應(yīng)用愚臀，我們以后再說(shuō)忆蚀。
OK！今天我們的內(nèi)容結(jié)束了姑裂，下一次學(xué)習(xí)圖片映射鏈接功能馋袜。
喜歡的朋友請(qǐng)關(guān)注我，點(diǎn)贊也會(huì)讓我動(dòng)力滿滿舶斧。
