零基礎(chǔ)10天學(xué)會(huì)網(wǎng)頁(yè)制作第一天
時(shí)間：2022-08-30 13:33:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2022-08-30 13:33:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
Hello,大家好，我是AbnerMing，從這篇文章起，我們開始進(jìn)入為期10天的網(wǎng)頁(yè)制作學(xué)習(xí)，具體怎么學(xué)習(xí)，及未來(lái)的就業(yè)前景，還請(qǐng)大家去看上一篇文章《零基礎(chǔ)10天學(xué)會(huì)網(wǎng)頁(yè)制作之前言》，這篇文章已經(jīng)很詳細(xì)的介紹了，廢話不多說(shuō)，進(jìn)入正題吧。
第一天的課程，比較簡(jiǎn)單，基本上沒有很難的知識(shí)點(diǎn)，目錄如下：
1、簡(jiǎn)單介紹網(wǎng)頁(yè)制作及市場(chǎng)前景 2、接下來(lái)如何學(xué)習(xí)，定好目標(biāo) 3、網(wǎng)頁(yè)是怎么制作的 4、什么是Html 5、什么是Css 6、如何進(jìn)行開發(fā)（IDE的選擇） 7、認(rèn)識(shí)網(wǎng)頁(yè)結(jié)構(gòu)html，head，body 8、h1~h6標(biāo)簽 9、p標(biāo)簽 10、img標(biāo)簽 11、今日總結(jié)及作業(yè)1、簡(jiǎn)單介紹網(wǎng)頁(yè)制作及市場(chǎng)前景這個(gè)在昨天的前言中已經(jīng)很詳細(xì)的介紹了，這里在重復(fù)一遍，什么是網(wǎng)頁(yè)制作，顧名思義，就是在互聯(lián)網(wǎng)上開發(fā)網(wǎng)頁(yè)，對(duì)于互聯(lián)網(wǎng)中網(wǎng)頁(yè)，我們肯定司空見慣，你所瀏覽的任何網(wǎng)站，比如，百度，頭條，淘寶，京東，大學(xué)網(wǎng)站，公司官網(wǎng)等等，都是網(wǎng)頁(yè)，也就是說(shuō)，你在Pc端或移動(dòng)端中的瀏覽器，或者APP嵌套的H5，所看到的，都是一個(gè)網(wǎng)頁(yè)，與我們的生活息息相關(guān)。
市場(chǎng)前景，像在一線城市，北上廣深，需求量很大，中等的前端工程師，起碼都在12K以上這個(gè)水平，當(dāng)然了高級(jí)的更高，30多K,40多K的也大有人在，所以，只要學(xué)的扎實(shí)，實(shí)力雄厚，那么薪資這個(gè)也不在話下，大家可以去智聯(lián)，Boss，拉鉤等招聘渠道，自己搜一搜這個(gè)行業(yè)的薪資，是不是我說(shuō)的這樣，可以去驗(yàn)證一下。
2、接下來(lái)如何學(xué)習(xí)，定好目標(biāo)還是如昨天說(shuō)的一樣，學(xué)習(xí)，特別是自學(xué)，這個(gè)是需要很大毅力的，堅(jiān)持是很重要的，一定要知道，學(xué)習(xí)是為自己而學(xué)，不是為了別人，想要拿到一個(gè)高薪，必定要付出更多的努力；給自己定好一個(gè)目標(biāo)，比如學(xué)成后，我要找多少的錢的工作，這個(gè)很有必要的，因?yàn)樗梢詴r(shí)長(zhǎng)的去鞭策你前進(jìn)。
3、網(wǎng)頁(yè)是怎么制作的我們?cè)诰W(wǎng)上所看到的百度，淘寶，京東，今日頭條等等，這些網(wǎng)頁(yè)是怎么制作呢？這里先給大家一個(gè)定義，不需要刻意的去記，因?yàn)榻酉聛?lái)的課程，都會(huì)一一的講解，首先呢，肯定是由人進(jìn)行開發(fā)的，這里的人一般都是指程序員，也就是以后對(duì)于我們的定義，說(shuō)的高大尚些，就是前端工程師，通過使用IDE(開發(fā)工具)，編寫代碼，完成的一個(gè)個(gè)網(wǎng)頁(yè)，通過上傳到服務(wù)器，再由域名解析后，就是我們所看的各個(gè)網(wǎng)頁(yè)，當(dāng)然，中間還有一些流程，這些呢我們后續(xù)再說(shuō)，畢竟我們才剛?cè)腴T，先了解再說(shuō)。
編寫的是什么代碼，才能組成的一個(gè)網(wǎng)頁(yè)呢，不妨我們以百度為例子，打開百度的官網(wǎng)，點(diǎn)擊鼠標(biāo)右鍵，點(diǎn)擊查看網(wǎng)頁(yè)源代碼。
我們看到了什么，是不是如下圖：
當(dāng)然了，不止百度，你打開任何的網(wǎng)站，查看源代碼后，基本上都是如上圖，這就是組成網(wǎng)頁(yè)的代碼，前端里俗稱標(biāo)簽。
4、什么是Html通過上述第三項(xiàng)，我們?cè)诰W(wǎng)頁(yè)源代碼中不難發(fā)現(xiàn)，都是有一個(gè)一個(gè)的“<>”組成的，這里的左右尖括號(hào)，就是書寫網(wǎng)頁(yè)的代碼，俗稱標(biāo)簽，這些就是Html，是描述網(wǎng)頁(yè)的一種語(yǔ)言，叫，超文本標(biāo)記語(yǔ)言，英文是：HyperText Markup Language，簡(jiǎn)稱：HTML。
這里簡(jiǎn)單的概述一下，HTML呢， 不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言，所為的標(biāo)記語(yǔ)言就是由一套標(biāo)記標(biāo)簽組成的，和上述我們看到的源代碼里類似，對(duì)于這些概念性的東西，大家不用死記硬背，只需要了解即可。
HTML發(fā)展至今，已經(jīng)經(jīng)歷了很多版本的更新迭代，每個(gè)版本的出現(xiàn)，都是一次革故鼎新。
5、什么是Css上述我們知道了什么是Html，知道了網(wǎng)頁(yè)都是用Html進(jìn)行開發(fā)的，那么什么是css呢？簡(jiǎn)單來(lái)說(shuō)，就是樣式。我們可以看到，很多的網(wǎng)站做的都比較高端，大氣，上檔次，非常漂亮，其實(shí)這些絕大數(shù)都是用css來(lái)開發(fā)修飾的，也就是說(shuō)，通過css，我們可以控制頁(yè)面的美觀，文字的大小，顏色，各個(gè)標(biāo)簽的位置，動(dòng)效等，使得html變得美觀，大方。用一個(gè)很簡(jiǎn)單的例子，用人來(lái)比喻，HTML就好比是一個(gè)裸體，CSS呢就是各種不同的衣服，用房子來(lái)比喻，HTML是一個(gè)毛坯，CSS就是精裝修所用的材料。
6、如何進(jìn)行開發(fā)（IDE的選擇）俗話說(shuō)的好，工欲善其事必先利其器，我們?nèi)绾稳鴮懘a呢，當(dāng)然了，開始學(xué)的話，用記事本是最好的，因?yàn)橛浭卤緵]有任何的聯(lián)想提示，必須一個(gè)一個(gè)進(jìn)行書寫，特別能鍛煉我們的標(biāo)簽意識(shí)，加深我們的代碼能力，這個(gè)我是比較推薦的，后續(xù)如果對(duì)標(biāo)簽熟練了，我們可以再轉(zhuǎn)到其他工具上。
熟練之后，我們選擇的工具就比較多了，比如Dreamweaver,WebStorm,IntelliJ,pycharm等等，任何一個(gè)開發(fā)編程語(yǔ)言的IDE（開發(fā)工具），幾乎都支持web開發(fā)，那么具體選擇哪一款，主要是看個(gè)人喜好，目前市面上用的最多的是WebStorm,接下來(lái)的課程，我們也主要是選擇這款開發(fā)工具進(jìn)行開發(fā)，如何進(jìn)行下載和安裝，到時(shí)，我們選擇它開發(fā)的時(shí)候會(huì)一點(diǎn)一點(diǎn)講到，前邊兩三天，我們還是用原始的記事本進(jìn)行開發(fā)，主要目的只有一個(gè)，加深大家對(duì)標(biāo)簽的熟練，多培養(yǎng)代碼感。
7、認(rèn)識(shí)網(wǎng)頁(yè)結(jié)構(gòu)html，head，body前邊，通過查看各個(gè)網(wǎng)頁(yè)源代碼，我們是不是發(fā)現(xiàn)了一個(gè)共同的問題，可以看看下面幾個(gè)圖：
今日頭條源代碼截圖：
百度源代碼部分截圖：
Android干貨鋪源代碼截圖：
源代碼太多了，截圖并沒有截全，希望大家可以實(shí)際去看下各個(gè)源代碼，通過查看源代碼，我們發(fā)現(xiàn)了一個(gè)什么現(xiàn)象，是不是都有這幾個(gè)標(biāo)簽，這就一個(gè)網(wǎng)頁(yè)的組成結(jié)構(gòu)，如下圖：
網(wǎng)絡(luò)上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網(wǎng)頁(yè)內(nèi)容，聲明有助于瀏覽器中正確顯示網(wǎng)頁(yè)。
通用的聲明如下：
HTML5 <!DOCTYPE html>HTML 4.01 "
http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0 "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
head標(biāo)簽，顧名思義，就是頭部元素，在head里，我們可以聲明文檔的編碼，標(biāo)題，作者，描述，引入外部的css,JavaScript等資源，這個(gè)是個(gè)很重要的元素。
中文編碼，我們就可以這樣在head里去寫
<meta charset="utf-8"/>
body標(biāo)簽是我們的主體內(nèi)容，我們?nèi)蘸笏械臉?biāo)簽代碼都要書寫在這里
雖然說(shuō)標(biāo)簽的書寫，不區(qū)分大小字母，但是html4.0后，一般規(guī)定使用小寫字母，我們可以去看那些主流的網(wǎng)站，也基本采用的是小寫字母，這個(gè)我們一定要注意。
還有一個(gè)需要注意的，HTML標(biāo)簽中，絕大部分標(biāo)簽，都是雙標(biāo)簽，有開始有結(jié)尾，類似，也就說(shuō)是成對(duì)出現(xiàn)的，當(dāng)然了也有單標(biāo)簽，這個(gè)日后會(huì)介紹。
不妨，我們花個(gè)幾分鐘，在記事本上，把網(wǎng)頁(yè)的主體結(jié)構(gòu)給寫一寫吧，在視頻中，我也會(huì)帶著大家去寫一寫，在頭條(北漂程序員老李)，微信公眾號(hào)（一個(gè)北漂程序員），視頻，文字教程，我會(huì)同步更新，記得關(guān)注我哦~
8、h1~h6標(biāo)簽了解了網(wǎng)頁(yè)的主體結(jié)構(gòu)后，我們已經(jīng)知道了，body標(biāo)簽里是書寫網(wǎng)頁(yè)內(nèi)容的，我們?cè)诰W(wǎng)上經(jīng)?？吹揭恍┖谏臉?biāo)題文字，那么這些內(nèi)容，我們?cè)撊绾物@示呢？h1到h6就可以滿足我們需求，來(lái)，我們一起來(lái)寫一寫吧，新建一個(gè)記事本文件，這里我起名“day_01.txt”，如下圖：
打開文檔，在文檔里我寫上標(biāo)簽內(nèi)容，如下圖：
點(diǎn)擊保存后，更改后綴為“.html”:
右鍵，選擇打開方式，在瀏覽器中打開，我們就看到了下圖：
上邊就是h1到h6所展示的效果，簡(jiǎn)單吧，以后比如在文章中定義標(biāo)題，我們就可以選擇對(duì)應(yīng)的來(lái)寫，在head里我們定義了一個(gè)title，標(biāo)簽，其實(shí)就是網(wǎng)頁(yè)的標(biāo)題，我用紅色箭頭標(biāo)了出來(lái)。
9、p標(biāo)簽我們經(jīng)?？葱侣?，一個(gè)新聞，除了標(biāo)題之外，還有什么，新聞內(nèi)容，對(duì)吧，也就是每段的內(nèi)容，我們就可以使用p標(biāo)簽寫展示。
我們還在，原來(lái)那個(gè)文件里寫，右鍵，打開方式，選擇記事本打開。
寫好后，點(diǎn)擊保存，右鍵，打開方式，使用瀏覽器打開。
對(duì)于p標(biāo)簽，也是一個(gè)很簡(jiǎn)單的標(biāo)簽，大家多練習(xí)一下，試著，多寫幾個(gè)段落吧。
10、img標(biāo)簽當(dāng)我們已經(jīng)掌握了h標(biāo)簽和p標(biāo)簽后，基本上一個(gè)無(wú)圖的新聞列表，我們就可以搞定了，有的朋友就要問了，我想加入圖片，該如何實(shí)現(xiàn)呢，哎，加入圖片就要說(shuō)到這個(gè)img標(biāo)簽了，img標(biāo)簽是個(gè)單標(biāo)簽，這個(gè)我們注意一下，語(yǔ)法如下：
<img src="" />
src呢，是img的固有屬性，指向的是一個(gè)圖片路徑，這個(gè)圖片路徑呢，可以是網(wǎng)上的一個(gè)圖片鏈接，也可以是本地的一張圖片。
比如我們要實(shí)現(xiàn)下圖的效果，該怎么實(shí)現(xiàn)呢？
這里我們分析一下，一共兩部分組成，上邊是標(biāo)題，下面是圖片，標(biāo)題，我們可以使用h系列標(biāo)簽實(shí)現(xiàn)，圖片呢，我們就可以使用img來(lái)實(shí)現(xiàn)，這里使用本地的圖片吧，后續(xù)我們會(huì)講到，遠(yuǎn)程和本地圖片，還有圖片相關(guān)路徑的選擇，圖片資源如下，大家可以右鍵選擇保存。
這里我把圖片保存到了同級(jí)的目錄下，如下圖：
接著，我們更改day_01.html:
效果如下圖：
11、今日總結(jié)及作業(yè)畢竟第一天，內(nèi)容還是比較簡(jiǎn)單的，一是認(rèn)識(shí)網(wǎng)頁(yè)結(jié)構(gòu)，知道一個(gè)網(wǎng)頁(yè)都有哪些標(biāo)簽組成，是干什么的，二是掌握，h,p,img標(biāo)簽的使用。
今天作業(yè)，實(shí)現(xiàn)一個(gè)新聞列表
圖片素材如下（可右鍵保存）：
好了，第一天的課程就到這里吧，我是AbnerMing，一個(gè)北漂的程序員，期待您的關(guān)注！
在線咨詢
