整合營銷服務商

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

          免費咨詢熱線:

          用HTML制作一個簡單頁面(代碼閱讀練習)-零基礎自學網頁制作


          面效果展示


          <script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>


          頁面完整代碼

          <!DOCTYPE HTML>
          <html>
          <head> 
          <title>文內鏈接</title>
          <style>
          a:hover
          {
          background-color:yellow;
          }
          </style>
          </head> 
          <body >
          <div style="width:50%;margin:auto;"><!--使頁面居中顯示,并展視窗50%寬度-->
          <div style="position:fixed; top:0px;"><!--使導航菜單懸停在頂端-->
          <a style="margin: 0px 30px 0px 10px;" href="#chapter1">試飛進程</a>
          <a style="margin: 0px 30px 0px 0px;" href="#chapter2">研制情況</a>
          <a style="margin: 0px 30px 0px 0px;" href="#chapter3">服役動態</a>
          <a style="margin: 0px 30px 0px 0px;"href="#chapter4">總體評價</a>
          </div><!--使導航菜單懸停在頂端(結尾)-->
          <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" >試飛進程</a></h2>
          殲-20隱形戰斗機首架技術驗證機于2011年1月11日中午12時50分左右進行首次升空飛行測試,13時08分成功著陸,歷時18分鐘。<br>
          整個首飛過程在殲-10S戰斗教練機陪伴下完成 。
          2016年10月28日,首次發布“空軍試飛員將駕殲-20飛機亮相中國航展”后,還陸續發布了“殲-20戰機列裝空軍作戰部隊”“空軍殲-20戰機首次開展海上方向實戰化訓練”等。
          <h2><a id="chapter2">研制情況</a></h2>
          在2016年11月1日,第十一屆珠海航展,殲-20首次進行空中飛行展示。兩架殲-20做了公開飛行,不僅在現場引起轟動,也立刻被西方媒體大量報道。殲-20是中國現代空中力量的代表作,也進入了世界最先進的第五代戰斗機行列,它是中國國防能力高速發展的一個象征。<br>
          2018年11月11日,第十二屆中國航展在珠海迎來“高光時刻”:殲-20戰機在公開飛行展示中掛彈開倉,震撼獻禮人民空軍成立69周年紀念日。 <br>
          2019年10月13日,慶祝人民空軍成立70周年航空開放活動新聞發布上,空軍新聞發言人申進科大校介紹殲-20戰機列陣人民空軍“王牌部隊”
          <h2><a id="chapter3" >服役動態</a></h2>
          2017年3月9日,中央電視臺報道殲-20戰斗機正式進入空軍序列。<br>
          2017年3月13日,《中國日報》發布消息稱,中國自主研制的殲-20近期將裝配國產發動機。<br>
          2017年7月30日,殲-20三機編隊參加在朱日和舉行的慶祝中國人民解放軍成立90周年閱兵。殲擊機梯隊飛來,3架殲-20隱形戰斗機以楔形編隊的形式在天空中飛過。<br>
          2017年9月28日,在中國國防部行記者會上,國防部新聞發言人吳謙大校介紹殲-20飛機已經列裝部隊。<br>
          2017年11月10日上午,中國空軍發言人申進科大校表示,殲-20 列裝部隊后,已經開展編隊訓練。<br>
          2018年2月9日,中國空軍新聞發言人申進科大校發布消息,殲-20開始列裝空軍作戰部隊。<br>
          2018年10月30日,中國空軍4架殲-20隱形戰斗機現身珠海金灣機場上空。<br>
          2019年10月1日,殲-20現身慶祝中華人民共和國成立70周年閱兵式;閱兵中,殲-20與殲-16、殲-10C三型飛機分別以5機楔隊組成戰斗隊形接受檢閱;該三款殲擊機被譽為中國空軍殲擊機家族的“三劍客”,是未來聯合作戰的骨干力量
          <h2><a id="chapter4" >總體評價</a></h2>
          殲-20是眼下亞洲區域最先進的戰機,這讓中國空軍在面對日本、韓國與印度等國家的空軍時占有顯著優勢。外媒將殲-20與其他國家戰機進行了對比。俄羅斯蘇霍伊蘇-57戰斗機由于研制進度幾度推遲,尚未正式交付入役;美國F-35戰斗機也多次出現飛機供氧不足的問題,大面積停飛,出口受阻;韓國KF-X隱形戰機先是被爆出因掌握不了關鍵技術而被迫降成四代半戰機的情況,后又傳出了合作方印尼打算撤資并已告知韓國的消息。因此,中國殲-20戰機成為亞太區域領跑的優勢戰機。<br>
          中國空軍正向全疆域作戰的現代化戰略性軍種邁進,成為有效塑造態勢、管控危機、遏制戰爭、打贏戰爭的重要力量。殲-20戰機列裝空軍作戰部隊,將進一步提升空軍綜合作戰能力,有助于空軍更好的肩負起維護國家主權、安全和領土完整的神圣使命。<br>
          殲20是我國自主研制的第五代戰斗機,它的研制實現了既定的四大目標——打造跨代新機、引領技術發展、創新研發體系、建設卓越團隊。打造跨代新機,是按照性能、技術和進度要求,研制開發我國自己的新一代隱身戰斗機。引領技術發展,指通過自主創新實現強軍興軍的目標。殲20在態勢感知、信息對抗、協同作戰等多方面取得了突破,這是中國航空工業從跟跑到并跑,再到領跑的必由之路。創新研發體系,是指建設最先進的飛機研制條件和研制流程。通過一大批大國重器的研制,我們建立了具有我國特色的數字化研發體系。建設卓越團隊,是指通過型號研制,錘煉一支愛黨愛國的研制隊伍,這些擁有報國情懷、創新精神的優秀青年是航空事業未來發展的生力軍。未來,我們將在戰斗機的機械化、信息化、智能化發展征程上不斷前行。
          </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(結尾)-->
          </div><!--小div套大div隱藏滾動條(結尾)-->
          </div><!--使頁面居中顯示,并展視窗50%寬度(結尾)-->
          </body> 
          </html>

          頁面制作技術解析

          1.頁面內容居中顯示方法

          2.導航欄懸停頂端方法

          3.鼠標滑過導航標題或鏈接時改變背景色提示

          3.隱藏滾動條方法

          4.圖片區域鏈接

          大家結合代碼和技術解析,先自行分析一下每段代碼的作用,以及它們之間的前后關系。這一步練習對培養代碼閱讀能力很有好處,希望大家可以先自行閱讀分析。

          下一次,我會逐步演示“頁面制作技術解析”中的五個步驟以及一些注意事項。

          使用碎片時間,學習完整知識!關注大魚師兄,一起精研技藝。

          目錄

          HTML序章(學習目的、對象、基本概念)——零基礎自學網頁制作

          HTML是什么?——零基礎自學網頁制作

          第一個HTML頁面如何寫?——零基礎自學網頁制作

          HTML頁面中head標簽有啥用?——零基礎自學網頁制作

          初識meta標簽與SEO——零基礎自學網頁制作

          HTML中的元素使用方法1——零基礎自學網頁制作

          HTML中的元素使用方法2——零基礎自學網頁制作

          HTML元素中的屬性1——零基礎自學網頁制作

          HTML元素中的屬性2(路徑詳解)——零基礎自學網頁制作

          使用HTML添加表格1(基本元素)——零基礎自學網頁制作

          使用HTML添加表格2(表格頭部與腳部)——零基礎自學網頁制作

          使用HTML添加表格3(間距與顏色)——零基礎自學網頁制作

          使用HTML添加表格4(行顏色與表格嵌套)——零基礎自學網頁制作

          16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

          HTML中的塊級元素與內聯元素——零基礎自學網頁制作

          初識HTML中的<div>塊元素——零基礎自學網頁制作

          在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

          封閉在家學網頁制作!為頁面嵌入PDF文件——零基礎自學網頁制作

          HTML表單元素初識1——零基礎自學網頁制作

          HTML表單元素初識2——零基礎自學網頁制作

          HTML表單3(下拉列表、多行文字輸入)——零基礎自學網頁制作

          HTML表單4(form的action、method屬性)——零基礎自學網頁制作

          HTML列表制作講解——零基礎自學網頁制作

          為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

          音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

          HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

          HTML中的圖片區域鏈接方法詳解——零基礎自學網頁制作

          HTML圖片區域鏈接注意事項與Gimp基本用法——零基礎自學網頁制作

          用HTML制作一個簡單頁面(詳解)——零基礎自學網頁制作(完結篇)

          一篇文章中我分享了一段圖文標簽,這篇文章主要給大家詳細解釋一下這些代碼的作用和意義,以及編寫網頁代碼的格式與思路。

          下面我貼上html代碼:

          <!--HTML-->
          <div>
          <h2>這是我的第一個網頁</h2>
          <p>BODY標簽表示網頁主體元素的容器,它包含了網頁所有的html標簽如:文本、圖片、列表等等。以后我們編寫的網頁標簽都需要放在這里面,這里我寫了一段文字,它就會在瀏覽器里顯示出來。這些就構成了我們網頁的基本格式,大家也不需要去背,知道表示什么意思就行,需要的時候直接拿來用。</p>
          <p><img src="http://m.jungjaehyung.com/uploadfile/2024/0808/20240808041226646.png"></p>
          </div>
          

          從代碼當中可以發現,所有的標簽內容都被一個div標簽所包含著,div屬于組合塊級元素,常用來區分不同的區域或模塊,它可以是獨立的,可分割的,它有自動換行的屬性,但你可以通過使用css來給它定義樣式或布局。

          h2屬于標題標簽,從h1到h6都可以自定義,一般網頁的標題或者需要著重表現的都可以用,p標簽表示段落或者一段文字介紹,img標簽表示頁面中的圖像,你可以直接引入圖片地址,注意,它是一個單標記。

          那么知道了這些標簽的意義,我們就可以根據自己實際的需求給這段html代碼定義css樣式,

          首先,我想給整個區域限制一個高度和寬度,那么我們就應該這樣寫:

          <style type="text/css">
          div {
           width: 300px; /*這里給個300像素的寬度*/
          }
          
          ... /*未完待續*/
          
          </style>
          

          如果想加入其他的樣式可以繼續定義,如:添加一個背景顏色,添加一個內邊距或外邊距。

          div {
           width: 300px; /*這里給個300像素的寬度*/
           background: #f2f2f2; /*這里給一個灰色的背景*/
           padding: 20px; /*這里給一個20像素的內邊距*/
           margin: 20px; /*這里給一個20像素的外邊距*/ 
          }
          

          注意:內邊距的意思就是一個獨立的區塊或者標簽往內部擴展距離,外邊距就是往外部擴展距離,新入門的同學這里容易搞混。

          接下我們定義標題,標題比較簡單,比如,給它一個20像素的大小,標題顏色為紅色,需要讓它居中,那么就應該這樣寫:

          h2 {
           font-size: 20px; /*這里給個20像素的字體大小*/
           color: #ff0000; /*這里給一個紅色的字體顏色*/
           text-align: center; /*讓它居中*/
          }
          ```
          

          文字介紹和標題差不多,就是字體小一點,注意的是需要給段落定義一個行高,調整段落之間的間隔。

          p {
           font-size: 14px; /*這里給個14像素的字體大小*/
           color: #333; /*這里給一個黑色的字體顏色*/
           line-height: 24px; /*這里給一個24像素的行高*/
          }
          

          最后圖片就更簡單了,直接讓它自適應寬度,跟隨div,設置一個100%。

          img {
          	width: 100%;
          }
          

          一個簡單的網頁代碼和設計思路就這樣完成了,如果你懂了這些代碼的作用和意義,那么恭喜你,你就基本入門了,因為所有的網頁代碼基本都是按照這種格式和思路編寫的。下一篇給大家繼續介紹其他常用的html+css標簽以及實戰演示,謝謝觀看!!!

          設網站是一個復雜的任務,使用模板可以簡化一部分的工作量。下面是一些建設網站時使用模板時需要注意的事項:

          1. 選擇適合的模板:在選擇模板時,要確保它滿足你網站的需求和目標。考慮你網站的類型、目標受眾和功能需求等因素,選擇一個與之匹配的模板。

          2. 自定義模板:模板可以充分發揮作用,但同時也需要對其進行自定義以滿足你的需求。可以通過編輯和調整模板的布局、顏色、字體、圖標等來使其更符合你的品牌和風格。

          3. 保持簡潔:一個簡潔的網站設計對用戶而言更易于理解和導航。不要過度使用復雜的效果和功能,使頁面變得擁擠和混亂。保持頁面結構清晰,內容明確,并確保用戶可以輕松找到他們需要的信息。

          4. 兼容性和響應式設計:確保你選擇的模板在多種設備和瀏覽器上都能正常工作。響應式設計可以使網站在不同尺寸的屏幕上展現出效果,為用戶提供更好的瀏覽體驗。

          5. 優化加載速度:網站的加載速度對用戶體驗和頁面排名都非常重要。選擇一個加載速度較快的模板,并對圖像、腳本和樣式表等進行優化以確保性能。

          6. SEO友好:搜索引擎優化(SEO)是提高網站在搜索引擎結果頁上排名的過程。選擇一個模板,確保它包含有利于SEO的元素,如標題標簽、元標記和友好的URL結構等。

          7. 測試和調整:在將網站發布之前,務必進行充分的測試和調整。確保所有鏈接和功能都正常工作,檢查頁面在不同設備和瀏覽器上的顯示效果,并進行必要的調整和修復。

          8. 安全性:保護網站的安全性對于任何網站都十分重要。確保你的模板更新和保持互聯網上的安全實踐,以防止惡意攻擊和數據泄露。

          9. 及時更新:定期更新你的網站內容和模板,以保持其新鮮和吸引力。添加新的功能和改進,并與時俱進,以確保網站的用戶體驗和競爭力。

          總結起來,使用模板建設網站需要選擇適合的模板,進行自定義和調整,保持簡潔和清晰的設計,確保兼容性和響應式設計,優化加載速度,進行SEO優化,進行測試和調整,確保安全性,并定期更新內容和模板。通過遵循這些注意事項,你可以更好地利用模板來建設一個成功的網站。


          主站蜘蛛池模板: 精品欧洲av无码一区二区14| 精品国产日韩亚洲一区| 99精品高清视频一区二区| 精品国产日产一区二区三区| 亚洲熟女综合一区二区三区| 红杏亚洲影院一区二区三区| 精品久久久久久无码中文字幕一区 | 国产福利电影一区二区三区,日韩伦理电影在线福 | 中文字幕在线看视频一区二区三区| 国产肥熟女视频一区二区三区| 3d动漫精品啪啪一区二区中| 三上悠亚精品一区二区久久| 黑人一区二区三区中文字幕| 亚洲一区二区三区国产精品无码| 在线观看午夜亚洲一区| 高清一区二区三区| 无码精品不卡一区二区三区| 精品国产福利一区二区| 国产AV午夜精品一区二区入口 | 精品无人区一区二区三区在线| 99国产精品一区二区| 国产精品99无码一区二区| 精品女同一区二区| 国产三级一区二区三区| 日韩精品一区二区三区国语自制 | 亚洲日本久久一区二区va| 无码一区二区三区在线观看| 国产一在线精品一区在线观看| 亚洲一区二区三区无码影院| 无码毛片一区二区三区中文字幕 | 亚洲制服丝袜一区二区三区 | 国产福利一区二区在线视频 | 亚洲综合av一区二区三区不卡| 亚洲一区精品视频在线 | 中文字幕久久久久一区| 国产一区二区精品尤物| 国产色综合一区二区三区| 国产午夜精品一区二区三区漫画 | 麻豆AV无码精品一区二区| 国产乱码一区二区三区四| 另类国产精品一区二区|