用HTML制作一個簡單頁面(代碼閱讀練習(xí))——零基礎(chǔ)自學(xué)網(wǎng)頁制作
頁面效果展示
頁面完整代碼
<!DOCTYPE HTML><html><head> <title>文內(nèi)鏈接</title><style>a:hover{background-color:yellow;}</style></head> <body ><div style="width:50%;margin:auto;"><!--使頁面居中顯示,并展視窗50%寬度--><div style="position:fixed; top:0px;"><!--使導(dǎo)航菜單懸停在頂端--><a style="margin: 0px 30px 0px 10px;" href="#chapter1">試飛進(jìn)程</a><a style="margin: 0px 30px 0px 0px;" href="#chapter2">研制情況</a><a style="margin: 0px 30px 0px 0px;" href="#chapter3">服役動態(tài)</a><a style="margin: 0px 30px 0px 0px;"href="#chapter4">總體評價(jià)</a></div><!--使導(dǎo)航菜單懸停在頂端(結(jié)尾)--><div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;"><!--小div套大div隱藏滾動條--><div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" ><p><!--小div--><h2><a id="chapter1" >試飛進(jìn)程</a></h2>殲-20隱形戰(zhàn)斗機(jī)首架技術(shù)驗(yàn)證機(jī)于2011年1月11日中午12時(shí)50分左右進(jìn)行首次升空飛行測試,13時(shí)08分成功著陸,歷時(shí)18分鐘。<br>整個首飛過程在殲-10S戰(zhàn)斗教練機(jī)陪伴下完成 。2016年10月28日,首次發(fā)布“空軍試飛員將駕殲-20飛機(jī)亮相中國航展”后,還陸續(xù)發(fā)布了“殲-20戰(zhàn)機(jī)列裝空軍作戰(zhàn)部隊(duì)”“空軍殲-20戰(zhàn)機(jī)首次開展海上方向?qū)崙?zhàn)化訓(xùn)練”等。<h2><a id="chapter2">研制情況</a></h2>在2016年11月1日,第十一屆珠海航展,殲-20首次進(jìn)行空中飛行展示。兩架殲-20做了公開飛行,不僅在現(xiàn)場引起轟動,也立刻被西方媒體大量報(bào)道。殲-20是中國現(xiàn)代空中力量的代表作,也進(jìn)入了世界最先進(jìn)的第五代戰(zhàn)斗機(jī)行列,它是中國國防能力高速發(fā)展的一個象征。<br>2018年11月11日,第十二屆中國航展在珠海迎來“高光時(shí)刻”:殲-20戰(zhàn)機(jī)在公開飛行展示中掛彈開倉,震撼獻(xiàn)禮人民空軍成立69周年紀(jì)念日。 <br>2019年10月13日,慶祝人民空軍成立70周年航空開放活動新聞發(fā)布上,空軍新聞發(fā)言人申進(jìn)科大校介紹殲-20戰(zhàn)機(jī)列陣人民空軍“王牌部隊(duì)”<h2><a id="chapter3" >服役動態(tài)</a></h2>2017年3月9日,中央電視臺報(bào)道殲-20戰(zhàn)斗機(jī)正式進(jìn)入空軍序列。<br>2017年3月13日,《中國日報(bào)》發(fā)布消息稱,中國自主研制的殲-20近期將裝配國產(chǎn)發(fā)動機(jī)。<br>2017年7月30日,殲-20三機(jī)編隊(duì)參加在朱日和舉行的慶祝中國人民解放軍成立90周年閱兵。殲擊機(jī)梯隊(duì)飛來,3架殲-20隱形戰(zhàn)斗機(jī)以楔形編隊(duì)的形式在天空中飛過。<br>2017年9月28日,在中國國防部行記者會上,國防部新聞發(fā)言人吳謙大校介紹殲-20飛機(jī)已經(jīng)列裝部隊(duì)。<br>2017年11月10日上午,中國空軍發(fā)言人申進(jìn)科大校表示,殲-20 列裝部隊(duì)后,已經(jīng)開展編隊(duì)訓(xùn)練。<br>2018年2月9日,中國空軍新聞發(fā)言人申進(jìn)科大校發(fā)布消息,殲-20開始列裝空軍作戰(zhàn)部隊(duì)。<br>2018年10月30日,中國空軍4架殲-20隱形戰(zhàn)斗機(jī)現(xiàn)身珠海金灣機(jī)場上空。<br>2019年10月1日,殲-20現(xiàn)身慶祝中華人民共和國成立70周年閱兵式;閱兵中,殲-20與殲-16、殲-10C三型飛機(jī)分別以5機(jī)楔隊(duì)組成戰(zhàn)斗隊(duì)形接受檢閱;該三款殲擊機(jī)被譽(yù)為中國空軍殲擊機(jī)家族的“三劍客”,是未來聯(lián)合作戰(zhàn)的骨干力量<h2><a id="chapter4" >總體評價(jià)</a></h2>殲-20是眼下亞洲區(qū)域最先進(jìn)的戰(zhàn)機(jī),這讓中國空軍在面對日本、韓國與印度等國家的空軍時(shí)占有顯著優(yōu)勢。外媒將殲-20與其他國家戰(zhàn)機(jī)進(jìn)行了對比。俄羅斯蘇霍伊蘇-57戰(zhàn)斗機(jī)由于研制進(jìn)度幾度推遲,尚未正式交付入役;美國F-35戰(zhàn)斗機(jī)也多次出現(xiàn)飛機(jī)供氧不足的問題,大面積停飛,出口受阻;韓國KF-X隱形戰(zhàn)機(jī)先是被爆出因掌握不了關(guān)鍵技術(shù)而被迫降成四代半戰(zhàn)機(jī)的情況,后又傳出了合作方印尼打算撤資并已告知韓國的消息。因此,中國殲-20戰(zhàn)機(jī)成為亞太區(qū)域領(lǐng)跑的優(yōu)勢戰(zhàn)機(jī)。<br>中國空軍正向全疆域作戰(zhàn)的現(xiàn)代化戰(zhàn)略性軍種邁進(jìn),成為有效塑造態(tài)勢、管控危機(jī)、遏制戰(zhàn)爭、打贏戰(zhàn)爭的重要力量。殲-20戰(zhàn)機(jī)列裝空軍作戰(zhàn)部隊(duì),將進(jìn)一步提升空軍綜合作戰(zhàn)能力,有助于空軍更好的肩負(fù)起維護(hù)國家主權(quán)、安全和領(lǐng)土完整的神圣使命。<br>殲20是我國自主研制的第五代戰(zhàn)斗機(jī),它的研制實(shí)現(xiàn)了既定的四大目標(biāo)——打造跨代新機(jī)、引領(lǐng)技術(shù)發(fā)展、創(chuàng)新研發(fā)體系、建設(shè)卓越團(tuán)隊(duì)。打造跨代新機(jī),是按照性能、技術(shù)和進(jìn)度要求,研制開發(fā)我國自己的新一代隱身戰(zhàn)斗機(jī)。引領(lǐng)技術(shù)發(fā)展,指通過自主創(chuàng)新實(shí)現(xiàn)強(qiáng)軍興軍的目標(biāo)。殲20在態(tài)勢感知、信息對抗、協(xié)同作戰(zhàn)等多方面取得了突破,這是中國航空工業(yè)從跟跑到并跑,再到領(lǐng)跑的必由之路。創(chuàng)新研發(fā)體系,是指建設(shè)最先進(jìn)的飛機(jī)研制條件和研制流程。通過一大批大國重器的研制,我們建立了具有我國特色的數(shù)字化研發(fā)體系。建設(shè)卓越團(tuán)隊(duì),是指通過型號研制,錘煉一支愛黨愛國的研制隊(duì)伍,這些擁有報(bào)國情懷、創(chuàng)新精神的優(yōu)秀青年是航空事業(yè)未來發(fā)展的生力軍。未來,我們將在戰(zhàn)斗機(jī)的機(jī)械化、信息化、智能化發(fā)展征程上不斷前行。</p><img border="0" src="img/image1.jpg" usemap="#map" / ><map name="map" id="map"><area shape="poly" coords="142,62,186,175,246,236,243,298,263,323,396,338,478,313,516,246,496,224,320,158,348,142,336,129,232,108" href="https://www.zhihu.com/question/284642168" / title="殲20氣動外形分析"><!--必須保證畫面尺寸與頁面顯示尺寸一致!--></map></div><!--小div(結(jié)尾)--></div><!--小div套大div隱藏滾動條(結(jié)尾)--></div><!--使頁面居中顯示,并展視窗50%寬度(結(jié)尾)--></body> </html>
頁面制作技術(shù)解析
1.頁面內(nèi)容居中顯示方法
2.導(dǎo)航欄懸停頂端方法
3.鼠標(biāo)滑過導(dǎo)航標(biāo)題或鏈接時(shí)改變背景色提示
3.隱藏滾動條方法
4.圖片區(qū)域鏈接
大家結(jié)合代碼和技術(shù)解析,先自行分析一下每段代碼的作用,以及它們之間的前后關(guān)系。這一步練習(xí)對培養(yǎng)代碼閱讀能力很有好處,希望大家可以先自行閱讀分析。
下一次,我會逐步演示“頁面制作技術(shù)解析”中的五個步驟以及一些注意事項(xiàng)。
使用碎片時(shí)間,學(xué)習(xí)完整知識!關(guān)注大魚師兄,一起精研技藝。
目錄
HTML序章(學(xué)習(xí)目的、對象、基本概念)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML是什么?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
第一個HTML頁面如何寫?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML頁面中head標(biāo)簽有啥用?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性2(路徑詳解)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格1(基本元素)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格2(表格頭部與腳部)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格3(間距與顏色)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格4(行顏色與表格嵌套)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
封閉在家學(xué)網(wǎng)頁制作!為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單3(下拉列表、多行文字輸入)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單4(form的action、method屬性)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作
為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的圖片區(qū)域鏈接方法詳解——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML圖片區(qū)域鏈接注意事項(xiàng)與Gimp基本用法——零基礎(chǔ)自學(xué)網(wǎng)頁制作