各位小伙伴，在互聯(lián)網(wǎng)+的時(shí)代，你們了解網(wǎng)站嗎？其實(shí)，在生活中，我們時(shí)常接觸網(wǎng)頁(yè)，比如百度，淘寶……都是用網(wǎng)頁(yè)的形式表現(xiàn)出來(lái)的！可是親愛(ài)的小伙伴你們知道網(wǎng)頁(yè)是怎么制作出來(lái)的嗎？就目前而言，我們大中國(guó)的專(zhuān)業(yè)網(wǎng)站設(shè)計(jì)師不是很多，特別是參加網(wǎng)頁(yè)設(shè)計(jì)培訓(xùn)后成為專(zhuān)業(yè)型的網(wǎng)站設(shè)計(jì)人才還有很大的缺口，所以網(wǎng)頁(yè)設(shè)計(jì)的就業(yè)前景是非常樂(lè)觀的。咱們今天就分享一些制作網(wǎng)頁(yè)的基礎(chǔ)知識(shí)，話(huà)不多說(shuō)，上車(chē)吧~

1 HTML的編寫(xiě)工具

初學(xué)者或者當(dāng)需要有目的地學(xué)習(xí)HTML語(yǔ)言時(shí)，可以選擇簡(jiǎn)單的文本工具，如Windows自帶的記事本，或者功能更豐富的文本編輯軟件。如，可以使用DreamWeaver、FrontPage、Notepad++等軟件編寫(xiě)HTML文檔。使用記事本時(shí)首先新建文本文檔，右鍵選擇打開(kāi)方式選擇其他應(yīng)用程序更多應(yīng)用記事本，在其中填上HTML代碼，保存并關(guān)閉。將其擴(kuò)展名由.TXT改為.htm或者.html。就像這樣：

想要看運(yùn)行效果？So easy!直接雙擊打開(kāi)文件夾就好啦！需要修改代碼時(shí)，右擊文件選擇“打開(kāi)方式”–“記事本”即可。若擴(kuò)展名是.txt，系統(tǒng)會(huì)使用記事本打開(kāi)而無(wú)法看到瀏覽效果。某些計(jì)算機(jī)上可能設(shè)置了隱藏?cái)U(kuò)展名，則還需要在操作系統(tǒng)的文件夾選項(xiàng)中設(shè)置不隱藏已知文件的擴(kuò)展名。計(jì)算機(jī)工具文件夾選擇查看找到隱藏已知文件類(lèi)型的擴(kuò)展名把前面小鉤鉤去掉即可。

2 基本格式

學(xué)習(xí)html首先最基本的就是格式了，小編特地為你準(zhǔn)備了html的格式。

你以為打完這個(gè)代碼就可以了嗎？沒(méi)那么簡(jiǎn)單，還要保存呢?。剀疤崾荆篽tml格式保存哦！）

然后打開(kāi)網(wǎng)頁(yè)：

Title里面的是標(biāo)題，小伙伴們，是否看到神奇之處了呢？這才是開(kāi)頭！往下瞧，更多精彩等著你?。?！

3“導(dǎo)航欄”

聽(tīng)到這個(gè)“導(dǎo)航欄”，有沒(méi)有覺(jué)得很了不起呢。往下看，你也能做出了不起的導(dǎo)航欄。導(dǎo)航欄可是整個(gè)網(wǎng)頁(yè)的head，精美的導(dǎo)航欄讓你的網(wǎng)頁(yè)煥然一新。

什么？你覺(jué)得這些代碼“弱爆”了，區(qū)區(qū)幾個(gè)字母，制作成導(dǎo)航欄，居然需要這么多英文和字符。

4 插入picture，music，flash

雙十一剛過(guò)，你為美麗的衣服剁手了嗎？其實(shí)網(wǎng)頁(yè)的圖片就相當(dāng)于你的衣服一樣。沒(méi)有美麗的外表，就不能吸引別人來(lái)。讓我們給我們的網(wǎng)頁(yè)穿上美麗的小外套吧！把它裝扮的美美的！人靠衣裝，網(wǎng)頁(yè)靠圖片美！?。?/p>

又到小編裝逼時(shí)刻了，“URL”是圖片路徑（這是絕對(duì)鏈接），什么？你覺(jué)得打路徑太麻煩了，沒(méi)關(guān)系，我們還有另一個(gè)法寶。那就是──把圖片和網(wǎng)頁(yè)放在一起（同一個(gè)文件夾）──這叫相對(duì)鏈接。這樣網(wǎng)頁(yè)就不用跨過(guò)千山萬(wàn)水尋找圖片了。

像這樣把圖片和網(wǎng)頁(yè)放在一起，一切就變得easy了。

Width是設(shè)置圖片的寬，height設(shè)置的是圖片的高，border是設(shè)置圖片的邊框，align設(shè)置的是圖片的位置（center，left，right）。

你以為插入圖片就夠了嗎？還沒(méi)有，因?yàn)槲覀円闶虑椋?那接下來(lái)讓我們給網(wǎng)頁(yè)插入flash動(dòng)畫(huà)和music吧！

插入flash動(dòng)畫(huà)和music時(shí)我們可以<embed>…….</embed>標(biāo)簽或者用<object>……. ? </object>標(biāo)簽，在這里我就拿embed來(lái)做事例了。

小伙伴們有沒(méi)有覺(jué)得很有趣呢！width和height是設(shè)置動(dòng)畫(huà)窗口的寬度和長(zhǎng)度的，音樂(lè)也是這樣插入的哦?。?！小伙伴們記住了嗎？有沒(méi)有覺(jué)得我們的HTML越來(lái)越精彩有趣了！

HTML不好看？那我們就來(lái)裝飾它吧！這時(shí)候我們就需要用到強(qiáng)大的CSS了！那么問(wèn)題來(lái)了，該怎么引入CSS呢？這時(shí)候我們只需要在HTML的head里面鏈接一個(gè)CSS，就像這樣：

這樣的模式叫做外聯(lián)式。前面的代碼中也有這個(gè)鏈接，小伙伴們注意到了嗎？在創(chuàng)建CSS時(shí)，我們就打開(kāi)記事本>文件>保存>在命名那里填寫(xiě)css.css或者你想要的名字，在格式選擇所有格式，下面編程選擇UTF-8。這樣就可以了，有沒(méi)有很easy，在CSS里面我們就可以隨你所想，任你裝扮了！

5　區(qū)塊的設(shè)置

所謂區(qū)塊就是一個(gè)網(wǎng)頁(yè)的容器，它相當(dāng)于一個(gè)盒子，用代碼表示為div，如果你要給這個(gè)盒子命名，就用class或者id。我們的圖片，文字，動(dòng)畫(huà)，都是放進(jìn)里面的，所以我們可以用div來(lái)布局，我們做網(wǎng)頁(yè)時(shí)可以用一個(gè)大盒子裝起來(lái)，然后大盒子里面有很多個(gè)小盒子，里面的小盒子該怎么站，站哪里合適，就要看你的設(shè)計(jì)了。好了！div的大概定義就是這些了，你懂了嗎？

小白：“聽(tīng)不懂小編的話(huà)，div太難了！”

沒(méi)關(guān)系，接下來(lái)的事例就是讓你了解div了。

Float就是漂浮的意思，小伙伴們一定不理解它有什么用吧！讓我來(lái)告訴你吧。把float比作是我們軍訓(xùn)時(shí)的教官，而div就是就是學(xué)生，float就是命令div的站位的。

注：css里id是用#索引的，class下則是用.索引的！

6 超鏈接

一個(gè)網(wǎng)頁(yè)總少不了超鏈接，超鏈接如同傳送門(mén)可以將你傳送到別的網(wǎng)頁(yè)。讓我們看看這如同“任意門(mén)”般的超鏈接是如何用代碼書(shū)寫(xiě)的。

成功了，這就是我們的一個(gè)百度鏈接！一個(gè)通往百度的“任意門(mén)”！

什么？不想去百度？沒(méi)關(guān)系，我們把href里面的內(nèi)容改一下好不好？想去哪，就去哪。

什么？明明鏈接是青年網(wǎng)，頁(yè)面上卻寫(xiě)著百度？沒(méi)關(guān)系，咱把<a></a>中間的字給改了。

7　文字屬性

傳送門(mén)是做出來(lái)了，可是里面的字太難看了，找CSS化（zhen）妝（rong）吧。CSS可以對(duì)文字的多種屬性進(jìn)行修改，話(huà)不多說(shuō)，直接上干貨。

8　文本屬性

除了文字屬性，我們還有一個(gè)文本屬性。什么？文字屬性和文本屬性有什么區(qū)別？文字屬性更多是用來(lái)修改字的屬性，而文本屬性則是用來(lái)修改字與字之間的屬性，像字體間距、居中方式、行高，都是文本屬性。

9　背景屬性

最后我們來(lái)講個(gè)高大上的，背景屬性?。?！試想一下，一個(gè)任意門(mén)以廣闊無(wú)垠的藍(lán)天為背景，將會(huì)是一個(gè)多么夢(mèng)幻的景象。背景是裝飾一個(gè)網(wǎng)頁(yè)的重要屬性，包括背景色，背景圖片，背景圖片的滾動(dòng)方式。

注：只有塊級(jí)元素才擁有背景屬性?。?！

是時(shí)候表演真正的技術(shù)了！就用小編說(shuō)的這些來(lái)做一個(gè)網(wǎng)頁(yè)吧。

怎么樣？看著自己做出來(lái)的第一個(gè)網(wǎng)頁(yè)有沒(méi)有感到很興奮很激動(dòng)呢？不要驕傲，這只是些皮毛而已！