<script src="https://lf6-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制作一個簡單頁面(詳解)——零基礎自學網頁制作(完結篇)
TML是網頁內容的載體。內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息,可以包含文字、圖片等。網頁制作學習群:四九四零六,四九三四。
CSS樣式是表現。就像網頁的外衣。比如,標題字體、顏色變化,或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。
JavaScript是用來實現網頁上的特效效果。如:鼠標滑過彈出下拉菜單。或鼠標滑過表格的背景顏色改變。還有焦點新聞(新聞圖片)的輪換。可以這么理解,有動畫的,有交互的一般都是用JavaScript來實現的。
1、tml的固定結構
一個HTML文件是有自己固定的結構的。
<html>
<head>...</head>
<body>...</body>
</html>
代碼講解:
<html></html>稱為根標簽,所有的網頁標簽都在<html></html>中。
<head>
標簽用于定義文檔的頭部,它是所有頭部元素的容器。
頭部元素有<title>、<script>、<style>、<link>、 <meta>等標簽,頭部標簽在下一小節中會有詳細介紹。
在<body>和</body>標簽之間的內容是網頁的主要內容,如<h1>、<p>、<a>、<img>等網頁內容標簽,在這里的標簽中的內容會在瀏覽器中顯示出來。
2、<head>標簽的作用
文檔的頭部描述了文檔的各種屬性和信息,包括文檔的標題等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。
下面這些標簽可用在 head 部分:
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
3、<title>標簽
在<title>和</title>標簽之間的文字內容是網頁的標題信息,它會出現在瀏覽器的標題欄中。網頁的title標簽用。網頁制作學習交流群,四九四零六,四九三四。
于告訴用戶和搜索引擎這個網頁的主要內容是什么,搜索引擎可以通過網頁標題,迅速的判斷出網頁的主題。每個網頁的內容都是不同的,每個網頁都應該有一個獨
一無二的title。
例如:
<head>
<title>hello world</title>
</head>
<title>標簽的內容“hello world”會在瀏覽器中的標題欄上顯示出來,
4、標簽的用途
我們學習網頁制作時,常常會聽到一個詞,語義化。那么什么叫做語義化呢,說的通俗點就是:明白每個標簽的用途(在什么情況下使用此標簽合理)比如,網頁上的文章的標題就可以用標題標簽,網頁上的各個欄目的欄目名稱也可以使用標題標簽。
文章中內容的段落就得放在段落標簽中,在文章中有想強調的文本,就可以使
用 em 標簽表示強調等等。
講了這么多語義化,但是語義化可以給我們帶來什么樣的好處呢?
① 更容易被搜索引擎收錄。
②.更容易讓屏幕閱讀器讀出網頁內容。
更多精彩內容微信公眾平臺:網頁設計自學平臺
限時!!免費送Dreamweaver、js等前端教程
互聯網時代的今天,各種各樣的網頁充斥著我們的生活。只要使用瀏覽器,打開的每一個頁面都可以稱之為網頁。即使使用頭條這樣的APP,其內容布局、展示的方法也脫胎于網頁頁面設計的方法與原則。可以說頁面的概念已經遍布我們的信息化世界。
作為蕓蕓眾生中的一員,學習網頁制作對我們的事業、生活有怎樣的幫助呢?
第一,學習網頁制作有助于理解網絡信息的傳播運行機制,即使通過本課程不能全面了解這些核心機制,也能為大家鋪墊下繼續深入學習的知識基礎。即使自己不必親自制作網頁,在使用第三方工具時,比如微信公眾號、微信小程序或者其他自動網頁或網站生成工具時也會比沒有基礎的人更快的掌握這些工具。
第二,學好網頁制作是制作網站的基礎,如果您因為事業需要或者個人愛好打算制作自己的網站或博客,無論是打算使用php還是Java還是Python去構建您的網站,精通網頁制作技術是您的第一塊技術基石。
第三,如果您打算學習網絡爬蟲來分析一些網絡數據,了解網頁頁面構成也是必要基礎,至少您要知道一個網頁頁面中每個標簽中對應的是哪些信息,才能有的放矢拿到自己想要的信息。
第四,如果您想學習編程,但是缺少相應的基礎知識,看不懂復雜的C語言教學,那么從網頁制作入手嘗試理解編程的語法也是一個很不錯的選擇。
除此之外,瀏覽器可以做的事情越來越多,比如webgl的出現,可以讓我們通過瀏覽器構建3d世界,無論是虛擬現實(VR)還是增強現實(AR)都有很多開源免費的解決方案。TensorFlow的JavaScript版本的出現,讓我們可以通過結合瀏覽器學習使用人工智能技術,且非常容易實現。
所以,新的一年里,我打算做網頁制作的學習教程,讓更多沒有基礎卻對網絡技術感興趣的小伙伴能加入進來。
簡單來說學習網頁制作需要掌握三門技術。
第一,也是最基礎最核心的內容是HTML超文本標記語言。大家不必糾結HTML到底是什么,但是一定要記住它能干什么。HTML通俗來說可以比喻成容器。大家試想,網頁里都有哪些內容呢?
一般網頁中都會有文字、圖片、聲音、視頻、表格等內容,這些內容就是靠HTML中的標簽添加進頁面的。
所以說HTML這個工具就是個容器,我們使用HTML標簽語言為網頁添加所有需要的信息內容。
第二,CSS層疊樣式表,這是一個用來裝飾頁面的工具。如果說HTML是個信息容器,那么如何讓這些信息條理清晰的顯示出來呢?那就需要CSS來幫忙了。如下圖所示,這是一個最簡單的頁面,只用到了HTML,里面裝了一個標題和一個只有六個字的段落。
為了讓這個頁面看起來美觀些,我們為其添加css樣式表。添加后如圖所示:
我們可以看出來,CSS讓標題文字換了顏色,也居中顯示了,背景也變成了藍色。
第三,JavaScript,這個工具相比HTML和CSS來講是最難學習的,學習JavaScript就是在學習編程了。它雖然只是個腳本語言,但是用到的知識和其他編程語言相差不大。
那JavaScript能干什么呢?
首先,它能為頁面中添加很多交互效果。舉個例子,我們常見的圖片翻頁、輪播很多就是基于JavaScript腳本實現的。
其次,JavaScript可以為傳統頁面擴展出很多新功能,例如結合three.js我們可以很容易的在頁面中構建三維空間,或者實現一些3d游戲或其他三維動態演示效果。舉個例子(https://renaultespace.littleworkshop.fr/),打開可能略慢。3d展示的汽車廣告是不是很酷!
再次,JavaScript可以以網頁為基礎,實現各種各樣的在線小游戲,例如Phaser.js就是目前非常火的一個開源免費網頁游戲制作庫。phaser官網:http://phaser.io/
JavaScript為網頁的功能拓展提供了很多可能性,無論是3d顯示還是游戲制作還是未來的人工智能工具,都是由JavaScript都為大家提供了將功能引入到頁面的接口,這也是學習難度比較大的原因。不過只要堅持下去一定能學通的!
網頁是指我們看到的單個頁面。這些頁面分為靜態頁面和動態頁面兩種。靜態頁面指的是不能與服務器進行數據交互的頁面,顧名思義動態頁面指的是可以與服務器進行數據交互的頁面,這一點大家不必糾結。
簡單來說,靜態頁面寫好后什么樣就是什么樣,誰打開都是事先編輯好的內容,而動態頁面寫好后會隨著不同的訪問變換不同數據,動態頁面更像是一個頁面模板,隨時套用不同信息。
大部分網站中的頁面都是動態頁面。
如果使用靜態頁面做網站會出現什么問題呢?如果您有300篇博客文章,那您就要做300個靜態頁面來顯示,大型資訊網站信息量更加龐大,如果都用靜態頁面來做,占用的服務器空間也是龐大到不可想象。
網站中的動態頁面就解決了這個問題,例如一個簡單的網站我們只需一個主頁、文章頁、搜索頁基本上就可以了,這些頁面中沒有具體內容,我們稱之為模板。當您打開后,顯示的內容都是在數據庫中調出的。這樣,一個數據庫用來存儲壓縮過的精簡信息,這些信息通過不同頁面模板顯示在用戶面前就成為網站的基本運行模式。
例如在靜態頁面中顯示文字字數的代碼是這樣
<p>300字</p>
如果使用以php編寫的WordPress網站框架來動態顯示文章字數就是這樣
<p><?php echo zm_count_words($text); ?></p>
<?php echo zm_count_words($text); ?>這條語句可以調取數據庫中文章字數的記錄并顯示出來。這也我們通過這一條語句就可以顯示不同文章的字數了。
無論是靜態頁面還是動態頁面,他們的核心內容都是一樣的,HTML,CSS,JavaScript都是必修知識。只是靜態頁面在HTML中插入信息,而動態頁面插入的是調取數據庫信息的語句。
因此,我們這個教程看起來是在做靜態頁面,但是我們學習的也是制作網站的基礎知識。
第一,可以寫出靜態頁面。
第二,有能力讀懂他人寫好的頁面代碼。
第三,為繼續深入學習網站制作或更為炫酷的頁面制作打下基礎。
第四,掌握編程基礎,至少是基于JavaScript的。
我是大魚,致力于數字藝術技術分享!歡迎大家關注!祝愿大家2020年學有所成!
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>標簽實現文本內鏈接——零基礎自學網頁制作
*請認真填寫需求信息,我們會在24小時內與您取得聯系。