靡不有初，鮮克有終。
前面一節(jié)課，體驗(yàn)了第一個(gè)網(wǎng)站頁(yè)面是如何編寫(xiě)出來(lái)的，接下來(lái)，來(lái)做一個(gè)完整的網(wǎng)站。
來(lái)做一個(gè)自己的個(gè)人網(wǎng)站，把自己的個(gè)人簡(jiǎn)歷放上去，然后發(fā)布到服務(wù)器上，并設(shè)置一個(gè)域名，這樣，其他人就可以通過(guò)域名訪問(wèn)這個(gè)個(gè)人簡(jiǎn)歷網(wǎng)站了。
設(shè)計(jì)網(wǎng)站
要編寫(xiě)一個(gè)網(wǎng)站，第一步就是要整理需求，然后設(shè)計(jì)網(wǎng)站要呈現(xiàn)的樣子，這個(gè)階段一般稱(chēng)為設(shè)計(jì)網(wǎng)站階段。
相信大家在網(wǎng)絡(luò)上也看到過(guò)很多網(wǎng)站，每個(gè)網(wǎng)站的設(shè)計(jì)風(fēng)格都不一樣，這都要靠設(shè)計(jì)人員根據(jù)需求將效果圖設(shè)計(jì)出來(lái)。
這里暫時(shí)找不到設(shè)計(jì)人員，那就自己來(lái)設(shè)計(jì)一番，雖然效果可能不是很美觀，但好歹是自己做出來(lái)的，自己掌握其中的原理就好了。
個(gè)人簡(jiǎn)介網(wǎng)站要呈現(xiàn)哪些內(nèi)容呢？
每個(gè)人的需求可能都不一樣，學(xué)哥這里先拋磚引玉，給出一個(gè)例子，大家可以在這個(gè)基礎(chǔ)上自己發(fā)揮。
首頁(yè)：
從上到下依次顯示：
標(biāo)題（學(xué)哥的個(gè)人簡(jiǎn)歷）
簡(jiǎn)介（文本，說(shuō)明學(xué)哥的基本概要情況）
工作經(jīng)歷（公司名／職位／職責(zé)，如有多個(gè)列表形式）
工作經(jīng)驗(yàn)（項(xiàng)目名／負(fù)責(zé)內(nèi)容／技術(shù)要素／相關(guān)鏈接，如有多個(gè)列表形式）
技術(shù)經(jīng)驗(yàn)（表格形式，技術(shù)點(diǎn)／經(jīng)驗(yàn)?zāi)陻?shù)）
個(gè)人興趣愛(ài)好（愛(ài)好／介紹）
大概的樣子是這樣設(shè)計(jì)的：
編程思路
首先將上節(jié)課的代碼全部復(fù)制過(guò)來(lái)，就有了一個(gè)基本的框架。
然后，修改標(biāo)題為【學(xué)哥的個(gè)人簡(jiǎn)介】，修改title內(nèi)容就好。
然后，先把有代表性的文字先寫(xiě)出來(lái)，如果是重復(fù)的顯示樣式的文字，則暫時(shí)可以不寫(xiě)，等全部顯示樣式調(diào)整好了之后，再增加文字內(nèi)容。
然后，先做簡(jiǎn)介部分，分成標(biāo)題和具體內(nèi)容，要考慮整體框架，怎么把各部分內(nèi)容分割開(kāi)來(lái)。
然后考慮標(biāo)題的顯示效果，包括背景色，文字顏色，文字大小，邊距。
然后考慮簡(jiǎn)介具體內(nèi)容的背景色，文字顏色，文字大小，還有如何換行。
簡(jiǎn)介部分做好之后，再做工作經(jīng)歷部分，標(biāo)題部分和簡(jiǎn)介一樣，可以重復(fù)利用。
工作經(jīng)歷的內(nèi)容部分，文字效果，還有文字前面空格。
工作經(jīng)驗(yàn)的部分和工作經(jīng)歷類(lèi)似。
技術(shù)經(jīng)驗(yàn)要用表格來(lái)實(shí)現(xiàn)。
再后面的個(gè)人愛(ài)好基本上就是和工作經(jīng)歷類(lèi)似。
接下來(lái)，由粗到細(xì)，由外到里，進(jìn)行一步一步說(shuō)明，如何做出這樣的個(gè)人網(wǎng)站。
先輸入內(nèi)容
打開(kāi)代碼編輯器，新建一個(gè)文件 index.html，輸入上節(jié)課的代碼，并修改title和body當(dāng)中的內(nèi)容如下：
為了方便起見(jiàn)，學(xué)哥是在Macbook電腦里面開(kāi)發(fā)的網(wǎng)頁(yè)程序。使用的文本編輯器是TextWrangler。
注意這里的第3行，第9行，第10行，第11行，第18行，其實(shí)是一行文本，由于學(xué)哥了截屏的時(shí)候讓文字更大，所以設(shè)置了一行只顯示60個(gè)字符，所以文本編輯器會(huì)看起來(lái)自動(dòng)換行了，其實(shí)根據(jù)行號(hào)還是同一行。一般的文本編輯器里面會(huì)顯示在同一行。這里大家注意不需要增加輸入換行。
如果你用的也是Macbook電腦，那么安裝了Chrome瀏覽器的話(huà)，看到的應(yīng)該就是下圖的樣子。
如果你用的是Windows電腦系統(tǒng)，那么前一節(jié)課已經(jīng)說(shuō)明過(guò)了，顯示效果基本是一樣的。
查看瀏覽器結(jié)果如下：
可以看到所有的文字都擠在一起了，并沒(méi)有按照程序里面的樣子顯示。這是因?yàn)闆](méi)有添加任何樣式描述，瀏覽器不知道該如何顯示這些內(nèi)容。記?。簽g覽器并不是像Word軟件這樣是“所見(jiàn)即所得”的。
這里，先選取代表性的文字，如果顯示效果是重復(fù)的內(nèi)容，則可以先不要編寫(xiě)出來(lái)。
后面等顯示效果調(diào)整好了，復(fù)制相同的實(shí)現(xiàn)方式即可。
使用
標(biāo)簽換行
要改變顯示的樣子，需要添加更多的描述符。
如果僅僅是想對(duì)內(nèi)容從上往下排列，那么最簡(jiǎn)單的分隔內(nèi)容方法就是使用換行標(biāo)簽
。
在上面代碼body里面的每一行文字后面都加上
。
刷新瀏覽器頁(yè)面：
標(biāo)簽是用來(lái)?yè)Q行的。它是一個(gè)空的HTML元素。
也可以使用
來(lái)完成。但是一般不推薦
，因?yàn)樗鼪](méi)有結(jié)束標(biāo)簽。
在未來(lái)的HTML規(guī)范中，是不允許出現(xiàn)未結(jié)束的標(biāo)簽的，為了將來(lái)兼容性考慮，一般都使用
標(biāo)簽。
使用<b>標(biāo)簽將文字加粗
要將【簡(jiǎn)介／工作經(jīng)歷／工作經(jīng)驗(yàn)（部分）】這3行文字加粗，可以使用<b>標(biāo)簽。
方法是在要加粗的文字前面插入代碼<b>，在文字后面插入結(jié)束標(biāo)簽</b>。
修改代碼如下：
刷新瀏覽器頁(yè)面：
設(shè)置整個(gè)網(wǎng)頁(yè)的背景顏色
整個(gè)網(wǎng)頁(yè)頁(yè)面的背景色默認(rèn)是白色的，有點(diǎn)刺眼，來(lái)改成淺灰色的吧。
在修改body標(biāo)簽的開(kāi)始標(biāo)簽為：<body style="background-color:#f0f0f0;">
刷新瀏覽器頁(yè)面：
可以看到底色是淺灰色了。
標(biāo)簽屬性
這里引入了一個(gè)新的概念：標(biāo)簽屬性。
屬性是用于給標(biāo)簽元素提供附加信息，可以讓標(biāo)簽具備更多展現(xiàn)的能力。
屬性總是以名稱(chēng)=值的形式出現(xiàn)，例如：name="value"，有點(diǎn)類(lèi)似于python語(yǔ)言里面的字典數(shù)據(jù)類(lèi)型的key和value一樣。
屬性總是在標(biāo)簽元素的開(kāi)始標(biāo)簽中設(shè)置。
屬性和屬性值對(duì)大小寫(xiě)不敏感，但是一般都是采用小寫(xiě)。
記住，屬性值一定要被包括在引號(hào)內(nèi)。雙引號(hào)是常用的，不過(guò)使用單引號(hào)也可以。
想了解每個(gè)HTML標(biāo)簽元素可使用的合法屬性，可以去搜索“HTML參考手冊(cè)”。
CSS樣式
style是屬性名，background-color: #f0f0f0 是屬性值。
style屬性的作用是給標(biāo)簽元素提供樣式說(shuō)明，讓元素呈現(xiàn)不同的樣式。
瀏覽器讀取到style樣式的時(shí)候，會(huì)按照指定的樣式進(jìn)行展示元素。
style屬性的值一般采用CSS來(lái)實(shí)現(xiàn)。
CSS的全稱(chēng)是Cascading Style Sheets，層疊樣式表。
CSS是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言。
CSS能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制。
CSS有詳細(xì)的規(guī)定，針對(duì)某個(gè)HTML元素可以使用哪些關(guān)鍵字來(lái)描述樣式。
具體的規(guī)定，可以去搜索“CSS參考手冊(cè)”。
比如，這里的background-color就是規(guī)定某個(gè)HTML元素的背景顏色。
顏色定義
顏色定義一般由一個(gè)十六進(jìn)制符號(hào)來(lái)定義，這個(gè)符號(hào)由紅色，綠色和藍(lán)色的值組成（RGB）。
每種顏色的最小值是0，對(duì)應(yīng)的十六進(jìn)制是#00；最大值是255，對(duì)應(yīng)的十六進(jìn)制是#FF。
前面教程中學(xué)習(xí)過(guò)二進(jìn)制，逢二進(jìn)一。那么相同道理，十六進(jìn)制就是逢十六進(jìn)一。
那么0到9后面，相應(yīng)的用A代表10，B代表11，直到F代表15。
比如十六進(jìn)制的C2換算成10進(jìn)制就是 12*16+2=194。
數(shù)字前面的#代表是十六進(jìn)制
如果是純紅色的，那么對(duì)應(yīng)的Red就是255，Green就是0，Blue就是0，換成十六進(jìn)制就是 #FF0000。
如果是純綠色的，那么對(duì)應(yīng)的Red就是0，Green就是255，Blue就是0，換成十六進(jìn)制就是 #00FF00。
如果是純黃色的，那么對(duì)應(yīng)的Red就是255，Green就是255，Blue就是0，換成十六進(jìn)制就是 #FFFF00。
前面用到的#f0f0f0，顏色是淺灰色。
大家可以去搜索“在線(xiàn)顏色選擇器”，可以輸入十六進(jìn)制，查看對(duì)應(yīng)的顏色。
注意，十六進(jìn)制的數(shù)值是大小寫(xiě)不敏感的。例如F0F0F0和f0f0f0是一樣的效果。
關(guān)于學(xué)習(xí)的一些技巧方法
一般而言，學(xué)哥的教程都是動(dòng)手型的，也就是基本會(huì)將每一個(gè)步驟都詳細(xì)說(shuō)明，但是也難免對(duì)某些概念的說(shuō)明比較簡(jiǎn)單。
這種時(shí)候，大家要學(xué)會(huì)根據(jù)教程中出現(xiàn)的關(guān)鍵概念去網(wǎng)上搜索相關(guān)知識(shí)，比如前面的“HTML參考手冊(cè)”“在線(xiàn)顏色選擇器”等等。
或者比如background-color的用法。
要學(xué)會(huì)用好搜索引擎來(lái)尋找相關(guān)的知識(shí)?？梢约由详P(guān)鍵字“教程”，或者“例子”，或者“百科全書(shū)”等等來(lái)搜索。
學(xué)哥會(huì)盡量說(shuō)明用到的新概念，但是關(guān)于概念的來(lái)龍去脈，以及更廣根深的用法，以及更多的參考例子，還是需要大家自己去尋找和練習(xí)，這樣才能掌握的更牢固，更深刻理解。
課后練習(xí)
將網(wǎng)頁(yè)的背景顏色修改為藍(lán)色進(jìn)行試驗(yàn)。
往期教程
因?yàn)榻坛淌窍盗薪坛蹋昂箨P(guān)聯(lián)性非常強(qiáng)，請(qǐng)大家按照微信公眾號(hào)【零基礎(chǔ)學(xué)編程】的歷史消息發(fā)布時(shí)間先后次序進(jìn)行閱讀。
