家好,我是有聞愛學(xué),一名標(biāo)準(zhǔn)的程序員。我主要從事的是javaweb開發(fā),有些朋友可能不了解什么是javaweb。簡(jiǎn)單地說就是瀏覽器訪問的網(wǎng)站,javaweb大部分都可以做。
做了這么多年的開發(fā),真心覺得這一行真的不錯(cuò),除非遇到某些996的公司。
那么接下來我就為有興趣進(jìn)入這一行的或者想用這一行做個(gè)兼職的朋友們做一個(gè)簡(jiǎn)單的入門指導(dǎo)。我們今天的目標(biāo)是做一個(gè)簡(jiǎn)單的html頁面。高手請(qǐng)忽略。
第一步:
準(zhǔn)備一臺(tái)電腦(win7/10最好),在桌面新建一個(gè)文本文件如下圖(文件展示擴(kuò)展名請(qǐng)自行百度):
第二步:
打開此文件輸入如下內(nèi)容,如圖:
第三步:
關(guān)閉 編輯器,將此文件的擴(kuò)展名改為.html,保存如下圖:
第四:
雙擊index.html打開,出現(xiàn)如下效果就代表你的第一個(gè)html頁面制作成功啦!
是不是很簡(jiǎn)單,但這只是最簡(jiǎn)單的一個(gè)靜態(tài)頁面,我們平時(shí)訪問的網(wǎng)站要比這復(fù)雜的多。
以后我將繼續(xù)為大家講解更深層次的知識(shí)。
<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>文內(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">服役動(dòng)態(tài)</a>
<a style="margin: 0px 30px 0px 0px;"href="#chapter4">總體評(píng)價(jià)</a>
</div><!--使導(dǎo)航菜單懸停在頂端(結(jié)尾)-->
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;"><!--小div套大div隱藏滾動(dòng)條-->
<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)行首次升空飛行測(cè)試,13時(shí)08分成功著陸,歷時(shí)18分鐘。<br>
整個(gè)首飛過程在殲-10S戰(zhàn)斗教練機(jī)陪伴下完成 。
2016年10月28日,首次發(fā)布“空軍試飛員將駕殲-20飛機(jī)亮相中國(guó)航展”后,還陸續(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)場(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ó)航展在珠海迎來“高光時(shí)刻”:殲-20戰(zhàn)機(jī)在公開飛行展示中掛彈開倉,震撼獻(xiàn)禮人民空軍成立69周年紀(jì)念日。 <br>
2019年10月13日,慶祝人民空軍成立70周年航空開放活動(dòng)新聞發(fā)布上,空軍新聞發(fā)言人申進(jìn)科大校介紹殲-20戰(zhàn)機(jī)列陣人民空軍“王牌部隊(duì)”
<h2><a id="chapter3" >服役動(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ā)布消息稱,中國(guó)自主研制的殲-20近期將裝配國(guó)產(chǎn)發(fā)動(dòng)機(jī)。<br>
2017年7月30日,殲-20三機(jī)編隊(duì)參加在朱日和舉行的慶祝中國(guó)人民解放軍成立90周年閱兵。殲擊機(jī)梯隊(duì)飛來,3架殲-20隱形戰(zhàn)斗機(jī)以楔形編隊(duì)的形式在天空中飛過。<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)開展編隊(duì)訓(xùn)練。<br>
2018年2月9日,中國(guó)空軍新聞發(fā)言人申進(jìn)科大校發(fā)布消息,殲-20開始列裝空軍作戰(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ī)家族的“三劍客”,是未來聯(lián)合作戰(zhàn)的骨干力量
<h2><a id="chapter4" >總體評(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ī)供氧不足的問題,大面積停飛,出口受阻;韓國(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)度要求,研制開發(fā)我國(guó)自己的新一代隱身戰(zhàn)斗機(jī)。引領(lǐng)技術(shù)發(fā)展,指通過自主創(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ó)特色的數(shù)字化研發(fā)體系。建設(shè)卓越團(tuán)隊(duì),是指通過型號(hào)研制,錘煉一支愛黨愛國(guó)的研制隊(duì)伍,這些擁有報(bào)國(guó)情懷、創(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氣動(dòng)外形分析"><!--必須保證畫面尺寸與頁面顯示尺寸一致!-->
</map>
</div><!--小div(結(jié)尾)-->
</div><!--小div套大div隱藏滾動(dòng)條(結(jié)尾)-->
</div><!--使頁面居中顯示,并展視窗50%寬度(結(jié)尾)-->
</body>
</html>
1.頁面內(nèi)容居中顯示方法
2.導(dǎo)航欄懸停頂端方法
3.鼠標(biāo)滑過導(dǎo)航標(biāo)題或鏈接時(shí)改變背景色提示
3.隱藏滾動(dòng)條方法
4.圖片區(qū)域鏈接
大家結(jié)合代碼和技術(shù)解析,先自行分析一下每段代碼的作用,以及它們之間的前后關(guān)系。這一步練習(xí)對(duì)培養(yǎng)代碼閱讀能力很有好處,希望大家可以先自行閱讀分析。
下一次,我會(huì)逐步演示“頁面制作技術(shù)解析”中的五個(gè)步驟以及一些注意事項(xiàng)。
使用碎片時(shí)間,學(xué)習(xí)完整知識(shí)!關(guān)注大魚師兄,一起精研技藝。
HTML序章(學(xué)習(xí)目的、對(duì)象、基本概念)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML是什么?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
第一個(gè)HTML頁面如何寫?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML頁面中head標(biāo)簽有啥用?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識(shí)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中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
封閉在家學(xué)網(wǎng)頁制作!為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識(shí)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)頁制作
用HTML制作一個(gè)簡(jiǎn)單頁面(詳解)——零基礎(chǔ)自學(xué)網(wǎng)頁制作(完結(jié)篇)
疊樣式表(Cascading Style Sheet,簡(jiǎn)稱:CSS)是為網(wǎng)頁添加樣式的代碼。本節(jié)將介紹 CSS 的基礎(chǔ)知識(shí),并解答類似問題:怎樣將文本設(shè)置為黑色或紅色?怎樣將內(nèi)容顯示在屏幕的特定位置?怎樣用背景圖片或顏色來裝飾網(wǎng)頁?
和 HTML 類似,CSS 也不是真正的編程語言,甚至不是標(biāo)記語言。它是一門樣式表語言,這也就是說人們可以用它來選擇性地為 HTML 元素添加樣式。舉例來說,要選擇一個(gè) HTML 頁面里所有的段落元素,然后將其中的文本改成紅色,可以這樣寫 CSS:
p {
color: red;
}
不妨試一下:首先新建一個(gè) styles 文件夾,在其中新建一個(gè) style.css 文件,將這三行 CSS 保存在這個(gè)新文件中。
然后再將該 CSS 文件連接至 HTML 文檔,否則 CSS 代碼不會(huì)對(duì) HTML 文檔在瀏覽器里的顯示效果有任何影響。(如果你沒有完成前幾節(jié)的實(shí)踐,請(qǐng)復(fù)習(xí)處理文件 和 HTML 基礎(chǔ)。在筆記本里有這個(gè)方面的內(nèi)容!)
1、打開 index.html 文件,然后將下面一行粘貼到文檔頭(也就是 <head> 和 </head> 標(biāo)簽之間)。
<link href="styles/style.css" rel="stylesheet">
2、保存 index.html 并用瀏覽器將其打開。應(yīng)該看到以下頁面:
如果段落文字變紅,那么祝賀你,你已經(jīng)成功地邁出了 CSS 學(xué)習(xí)的第一步。
讓我們來仔細(xì)看一看上述CSS:
整個(gè)結(jié)構(gòu)稱為 規(guī)則集(通常簡(jiǎn)稱“規(guī)則”),各部分釋義如下:
注意其他重要的語法:
如果要同時(shí)修改多個(gè)屬性,只需要將它們用分號(hào)隔開,就像這樣:
p {
color: red;
width: 500px;
border: 1px solid black;
}
也可以選擇多種類型的元素并為它們添加一組相同的樣式。將不同的選擇器用逗號(hào)分開。例如:
p, li, h1 {
color: red;
}
選擇器有許多不同的類型。上面只介紹了元素選擇器,用來選擇 HTML 文檔中給定的元素。但是選擇的操作可以更加具體。下面是一些常用的選擇器類型:
選擇器名稱 | 選擇的內(nèi)容 | 示例 |
元素選擇器(也稱作標(biāo)簽或類型選擇器) | 所有指定(該)類型的 HTML 元素 | p 選擇 <p> |
ID 選擇器 | 具有特定 ID 的元素(單一 HTML 頁面中,每個(gè) ID 只對(duì)應(yīng)一個(gè)元素,一個(gè)元素只對(duì)應(yīng)一個(gè) ID) | #my-id 選擇 <p id="my-id"> 或 <a id="my-id"> |
類選擇器 | 具有特定類的元素(單一頁面中,一個(gè)類可以有多個(gè)實(shí)例) | .my-class 選擇 <p class="my-class"> 和 <a class="my-class"> |
屬性選擇器 | 擁有特定屬性的元素 | img[src] 選擇 <img src="myimage.png"> 而不是 <img> |
偽(Pseudo)類選擇器 | 特定狀態(tài)下的特定元素(比如鼠標(biāo)指針懸停) | a:hover 僅在鼠標(biāo)指針懸停在鏈接上時(shí)選擇 <a>。 |
選擇器的種類遠(yuǎn)不止于此,更多信息請(qǐng)參閱 選擇器。
譯注:再一次說明,中文字體文件較大,不適合直接用于 Web Font。
在探索了一些 CSS 基礎(chǔ)后,我們來把更多規(guī)則和信息添加至 style.css 中,從而讓示例更美觀。首先,讓字體和文本變得更漂亮。
第一步:找到之前Google Font 輸出的地址。并以<link>元素的形式添加進(jìn)index.html文檔頭(<head>和</head>之間的任意位置)。代碼如下:
<link href="https://fonts.font.im/css?family=Open+Sans" rel="stylesheet" type="text/css">
以上代碼為當(dāng)前網(wǎng)頁下載 Open Sans 字體,從而使自定義 CSS 中可以對(duì) HTML 元素應(yīng)用這個(gè)字體。
第二步:接下來,刪除 style.css 文件中已有的規(guī)則。雖然測(cè)試是成功的了,但是紅字看起來并不太舒服。
第三步:將下列代碼添加到相應(yīng)的位置,用你在 Google Fonts 找到的字體替代 font-family 中的占位行。( font-family 意味著你想要你的文本使用的字體。)這條規(guī)則首先為整個(gè)頁面設(shè)定了一個(gè)全局字體和字號(hào)(因?yàn)?<html> 是整個(gè)頁面的父元素,而且它所有的子元素都會(huì)繼承相同的 font-size 和 font-family):
html {
/* px 表示 “像素(pixels)”: 基礎(chǔ)字號(hào)為 10 像素 */
font-size: 10px;
/* Google fonts 輸出的 CSS */
font-family: 'Open Sans', sans-serif;
}
注:CSS 文檔中所有位于 /* 和 */ 之間的內(nèi)容都是 CSS 注釋,它會(huì)被瀏覽器在渲染代碼時(shí)忽略。你可以在這里寫下對(duì)你現(xiàn)在要做的事情有幫助的筆記。
譯注:/*``*/ 不可嵌套,/*這樣的注釋是/*不行*/的*/。CSS 不接受 // 注釋。
接下來為文檔體內(nèi)的元素(<h1> (en-US)、<li>和<p>)設(shè)置字號(hào)。將標(biāo)題居中顯示,并為正文設(shè)置行高和字間距,從而提高頁面的可讀性。
h1 {
font-size: 60px;
text-align: center;
}
p, li {
font-size: 16px;
/* line-height 后而可以跟不同的參數(shù),如果是數(shù)字,就是當(dāng)前字體大小乘上數(shù)字 */
line-height: 2;
letter-spacing: 1px;
}
可以隨時(shí)調(diào)整這些 px 值來獲得滿意的結(jié)果,以下是大體效果:
編寫 CSS 時(shí)你會(huì)發(fā)現(xiàn),你的工作好像是圍繞著一個(gè)一個(gè)盒子展開的——設(shè)置尺寸、顏色、位置,等等。頁面里大部分 HTML 元素都可以被看作若干層疊的盒子。
并不意外,CSS 布局主要就是基于盒模型的。每個(gè)占據(jù)頁面空間的塊都有這樣的屬性:
這里還使用了:
開始在頁面中添加更多 CSS 吧!大膽將這些新規(guī)則都添加到頁面的底部,而不要糾結(jié)改變屬性值會(huì)帶來什么結(jié)果。
html{
background-color:#00539f;
}
這條規(guī)則將整個(gè)頁面的背景顏色設(shè)置為 所計(jì)劃的顏色。
body{
width:600px;
margin:0 auto;
background-color:#ff9500;
padding:0 20px 20px 20px;
border:5px solid black;
}
現(xiàn)在是 <body> 元素。以上條聲明,我們來逐條查看:
h1{
margin: 0;
padding:20px 0;
color: #00539f;
text-shadow:3px 3px 1px black
}
你可能發(fā)現(xiàn)頁面的頂部有一個(gè)難看的間隙,那是因?yàn)闉g覽器會(huì)在沒有任何 CSS 的情況下 給 <h1>en-US等元素設(shè)置一些默認(rèn)樣式。但這并不是個(gè)好主意,因?yàn)槲覀兿M粋€(gè)沒有任何樣式的網(wǎng)頁也有基本的可讀性。為了去掉那個(gè)間隙,我們通過設(shè)置margin: 0;來覆蓋默認(rèn)樣式。
至此,我們已經(jīng)把標(biāo)題的上下內(nèi)邊距設(shè)置為 20 像素,并且將標(biāo)題文本與 HTML 的背景顏色設(shè)為一致。
需要注意的是,這里使用了一個(gè) text-shadow 屬性,它可以為元素中的文本提供陰影。四個(gè)值含義如下:
不妨嘗試不同的值看看能得出什么結(jié)果。
img{
display:block;
margin:0 auto;
}
最后,我們把圖像居中來使頁面更美觀。可以復(fù)用 body 的margin: 0 auto,但是需要一點(diǎn)點(diǎn)調(diào)整。<body>元素是塊級(jí)元素,意味著它占據(jù)了頁面的空間并且能夠賦予外邊距和其他改變間距的值。而圖片是內(nèi)聯(lián)元素,不具備塊級(jí)元素的一些功能。所以為了使圖像有外邊距,我們必須使用display: block 給予其塊級(jí)行為。
注:以上說明假定所選圖片小于頁面寬度(600 pixels)。更大的圖片會(huì)溢出 body 并占據(jù)頁面的其他位置。要解決這個(gè)問題,可以:
1)使用 圖片編輯器 來減小圖片寬度; 2)用 CSS 限制圖片大小,即減小 <img> 元素 width 屬性的值(比如 400 px)。
注:如果你暫時(shí)不能理解 display: block 和塊級(jí)元素與行內(nèi)元素的差別也沒關(guān)系;隨著你對(duì) CSS 學(xué)習(xí)的深入,你將明白這個(gè)問題。
如果你按部就班完成本文的實(shí)踐,那么最終可以得到以下頁面
相關(guān)推薦:
前端新手看過來,手把手帶你輕松上手html的實(shí)操
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。