靡不有初盒蟆，鮮克有終。
前面一節(jié)課浩螺，體驗了第一個網(wǎng)站頁面是如何編寫出來的患蹂，接下來，來做一個完整的網(wǎng)站系草。
來做一個自己的個人網(wǎng)站晓猛，把自己的個人簡歷放上去，然后發(fā)布到服務(wù)器上绩社，并設(shè)置一個域名祭隔，這樣，其他人就可以通過域名訪問這個個人簡歷網(wǎng)站了。
設(shè)計網(wǎng)站
要編寫一個網(wǎng)站，第一步就是要整理需求次员，然后設(shè)計網(wǎng)站要呈現(xiàn)的樣子啡专，這個階段一般稱為設(shè)計網(wǎng)站階段眯停。
相信大家在網(wǎng)絡(luò)上也看到過很多網(wǎng)站，每個網(wǎng)站的設(shè)計風(fēng)格都不一樣皇拣，這都要靠設(shè)計人員根據(jù)需求將效果圖設(shè)計出來腥沽。
這里暫時找不到設(shè)計人員窿锉，那就自己來設(shè)計一番，雖然效果可能不是很美觀鼻疮，但好歹是自己做出來的怯伊，自己掌握其中的原理就好了。
個人簡介網(wǎng)站要呈現(xiàn)哪些內(nèi)容呢判沟？
每個人的需求可能都不一樣耿芹，學(xué)哥這里先拋磚引玉，給出一個例子挪哄，大家可以在這個基礎(chǔ)上自己發(fā)揮吧秕。
首頁：
從上到下依次顯示：
標(biāo)題（學(xué)哥的個人簡歷）
簡介（文本，說明學(xué)哥的基本概要情況）
工作經(jīng)歷（公司名／職位／職責(zé)迹炼，如有多個列表形式）
工作經(jīng)驗（項目名／負(fù)責(zé)內(nèi)容／技術(shù)要素／相關(guān)鏈接砸彬，如有多個列表形式）
技術(shù)經(jīng)驗（表格形式，技術(shù)點／經(jīng)驗?zāi)陻?shù)）
個人興趣愛好（愛好／介紹）
大概的樣子是這樣設(shè)計的：
編程思路
首先將上節(jié)課的代碼全部復(fù)制過來斯入，就有了一個基本的框架砂碉。
然后，修改標(biāo)題為【學(xué)哥的個人簡介】刻两，修改title內(nèi)容就好增蹭。
然后，先把有代表性的文字先寫出來磅摹，如果是重復(fù)的顯示樣式的文字滋迈，則暫時可以不寫，等全部顯示樣式調(diào)整好了之后户誓，再增加文字內(nèi)容饼灿。
然后，先做簡介部分帝美，分成標(biāo)題和具體內(nèi)容碍彭，要考慮整體框架，怎么把各部分內(nèi)容分割開來证舟。
然后考慮標(biāo)題的顯示效果硕旗，包括背景色，文字顏色女责，文字大小漆枚，邊距。
然后考慮簡介具體內(nèi)容的背景色抵知，文字顏色墙基，文字大小软族，還有如何換行。
簡介部分做好之后残制，再做工作經(jīng)歷部分立砸，標(biāo)題部分和簡介一樣，可以重復(fù)利用初茶。
工作經(jīng)歷的內(nèi)容部分颗祝，文字效果，還有文字前面空格恼布。
工作經(jīng)驗的部分和工作經(jīng)歷類似螺戳。
技術(shù)經(jīng)驗要用表格來實現(xiàn)。
再后面的個人愛好基本上就是和工作經(jīng)歷類似折汞。
接下來倔幼，由粗到細(xì)，由外到里爽待，進(jìn)行一步一步說明损同，如何做出這樣的個人網(wǎng)站。
先輸入內(nèi)容
打開代碼編輯器鸟款，新建一個文件 index.html膏燃，輸入上節(jié)課的代碼，并修改title和body當(dāng)中的內(nèi)容如下：
為了方便起見欠雌，學(xué)哥是在Macbook電腦里面開發(fā)的網(wǎng)頁程序蹄梢。使用的文本編輯器是TextWrangler疙筹。
注意這里的第3行富俄，第9行，第10行而咆，第11行霍比，第18行，其實是一行文本暴备，由于學(xué)哥了截屏的時候讓文字更大悠瞬，所以設(shè)置了一行只顯示60個字符，所以文本編輯器會看起來自動換行了涯捻，其實根據(jù)行號還是同一行浅妆。一般的文本編輯器里面會顯示在同一行。這里大家注意不需要增加輸入換行障癌。
如果你用的也是Macbook電腦凌外，那么安裝了Chrome瀏覽器的話，看到的應(yīng)該就是下圖的樣子涛浙。
如果你用的是Windows電腦系統(tǒng)康辑，那么前一節(jié)課已經(jīng)說明過了摄欲，顯示效果基本是一樣的。
查看瀏覽器結(jié)果如下：
可以看到所有的文字都擠在一起了疮薇，并沒有按照程序里面的樣子顯示胸墙。這是因為沒有添加任何樣式描述，瀏覽器不知道該如何顯示這些內(nèi)容按咒。記壮儆纭：瀏覽器并不是像Word軟件這樣是“所見即所得”的。
這里励七，先選取代表性的文字玻淑，如果顯示效果是重復(fù)的內(nèi)容，則可以先不要編寫出來呀伙。
后面等顯示效果調(diào)整好了补履，復(fù)制相同的實現(xiàn)方式即可。
使用
標(biāo)簽換行
要改變顯示的樣子剿另，需要添加更多的描述符箫锤。
如果僅僅是想對內(nèi)容從上往下排列，那么最簡單的分隔內(nèi)容方法就是使用換行標(biāo)簽
雨女。
在上面代碼body里面的每一行文字后面都加上
谚攒。
刷新瀏覽器頁面：
標(biāo)簽是用來換行的。它是一個空的HTML元素氛堕。
也可以使用
來完成馏臭。但是一般不推薦
，因為它沒有結(jié)束標(biāo)簽讼稚。
在未來的HTML規(guī)范中括儒，是不允許出現(xiàn)未結(jié)束的標(biāo)簽的，為了將來兼容性考慮锐想，一般都使用
標(biāo)簽帮寻。
使用<b>標(biāo)簽將文字加粗
要將【簡介／工作經(jīng)歷／工作經(jīng)驗（部分）】這3行文字加粗，可以使用<b>標(biāo)簽赠摇。
方法是在要加粗的文字前面插入代碼<b>固逗，在文字后面插入結(jié)束標(biāo)簽</b>。
修改代碼如下：
刷新瀏覽器頁面：
設(shè)置整個網(wǎng)頁的背景顏色
整個網(wǎng)頁頁面的背景色默認(rèn)是白色的藕帜，有點刺眼烫罩，來改成淺灰色的吧。
在修改body標(biāo)簽的開始標(biāo)簽為：<body style="background-color:#f0f0f0;">
刷新瀏覽器頁面：
可以看到底色是淺灰色了洽故。
標(biāo)簽屬性
這里引入了一個新的概念：標(biāo)簽屬性贝攒。
屬性是用于給標(biāo)簽元素提供附加信息，可以讓標(biāo)簽具備更多展現(xiàn)的能力收津。
屬性總是以名稱=值的形式出現(xiàn)饿这，例如：name="value"浊伙，有點類似于python語言里面的字典數(shù)據(jù)類型的key和value一樣。
屬性總是在標(biāo)簽元素的開始標(biāo)簽中設(shè)置长捧。
屬性和屬性值對大小寫不敏感嚣鄙，但是一般都是采用小寫。
記住串结，屬性值一定要被包括在引號內(nèi)哑子。雙引號是常用的，不過使用單引號也可以肌割。
想了解每個HTML標(biāo)簽元素可使用的合法屬性卧蜓，可以去搜索“HTML參考手冊”。
CSS樣式
style是屬性名把敞，background-color: #f0f0f0 是屬性值弥奸。
style屬性的作用是給標(biāo)簽元素提供樣式說明，讓元素呈現(xiàn)不同的樣式奋早。
瀏覽器讀取到style樣式的時候盛霎，會按照指定的樣式進(jìn)行展示元素。
style屬性的值一般采用CSS來實現(xiàn)耽装。
CSS的全稱是Cascading Style Sheets愤炸，層疊樣式表。
CSS是一種用來表現(xiàn)HTML或XML等文件樣式的計算機(jī)語言掉奄。
CSS能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級精確控制规个。
CSS有詳細(xì)的規(guī)定，針對某個HTML元素可以使用哪些關(guān)鍵字來描述樣式姓建。
具體的規(guī)定诞仓，可以去搜索“CSS參考手冊”。
比如引瀑，這里的background-color就是規(guī)定某個HTML元素的背景顏色狂芋。
顏色定義
顏色定義一般由一個十六進(jìn)制符號來定義榨馁，這個符號由紅色憨栽，綠色和藍(lán)色的值組成（RGB）。
每種顏色的最小值是0翼虫，對應(yīng)的十六進(jìn)制是#00屑柔；最大值是255，對應(yīng)的十六進(jìn)制是#FF珍剑。
前面教程中學(xué)習(xí)過二進(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)制
如果是純紅色的蝠嘉，那么對應(yīng)的Red就是255最疆，Green就是0，Blue就是0努酸，換成十六進(jìn)制就是 #FF0000。
如果是純綠色的蚊逢，那么對應(yīng)的Red就是0，Green就是255箫章，Blue就是0烙荷，換成十六進(jìn)制就是 #00FF00。
如果是純黃色的檬寂，那么對應(yīng)的Red就是255，Green就是255昼伴，Blue就是0，換成十六進(jìn)制就是 #FFFF00圃郊。
前面用到的#f0f0f0女蜈，顏色是淺灰色。
大家可以去搜索“在線顏色選擇器”伪窖，可以輸入十六進(jìn)制，查看對應(yīng)的顏色覆山。
注意，十六進(jìn)制的數(shù)值是大小寫不敏感的勋篓。例如F0F0F0和f0f0f0是一樣的效果。
關(guān)于學(xué)習(xí)的一些技巧方法
一般而言譬嚣，學(xué)哥的教程都是動手型的，也就是基本會將每一個步驟都詳細(xì)說明甸陌，但是也難免對某些概念的說明比較簡單盐股。
這種時候，大家要學(xué)會根據(jù)教程中出現(xiàn)的關(guān)鍵概念去網(wǎng)上搜索相關(guān)知識疯汁，比如前面的“HTML參考手冊”“在線顏色選擇器”等等幌蚊。
或者比如background-color的用法谤碳。
要學(xué)會用好搜索引擎來尋找相關(guān)的知識∫缍梗可以加上關(guān)鍵字“教程”，或者“例子”搓茬，或者“百科全書”等等來搜索队他。
學(xué)哥會盡量說明用到的新概念，但是關(guān)于概念的來龍去脈麸折，以及更廣根深的用法垢啼，以及更多的參考例子窜锯，還是需要大家自己去尋找和練習(xí)，這樣才能掌握的更牢固衬浑，更深刻理解放刨。
課后練習(xí)
將網(wǎng)頁的背景顏色修改為藍(lán)色進(jìn)行試驗尸饺。
往期教程
因為教程是系列教程助币，前后關(guān)聯(lián)性非常強螟碎，請大家按照微信公眾號【零基礎(chǔ)學(xué)編程】的歷史消息發(fā)布時間先后次序進(jìn)行閱讀。
