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

1 HTML的編寫工具

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

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

2 基本格式

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

你以為打完這個代碼就可以了嗎？沒那么簡單，還要保存呢?。剀疤崾荆篽tml格式保存哦?。?/p>

然后打開網(wǎng)頁：

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

3“導(dǎo)航欄”

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

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

4 插入picture，music，flash

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

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

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

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

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

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

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

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

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

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

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

小白：“聽不懂小編的話，div太難了！”

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

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

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

6 超鏈接

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

成功了，這就是我們的一個百度鏈接！一個通往百度的“任意門”！

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

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

7　文字屬性

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

8　文本屬性

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

9　背景屬性

最后我們來講個高大上的，背景屬性?。。≡囅胍幌?，一個任意門以廣闊無垠的藍(lán)天為背景，將會是一個多么夢幻的景象。背景是裝飾一個網(wǎng)頁的重要屬性，包括背景色，背景圖片，背景圖片的滾動方式。

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

是時候表演真正的技術(shù)了！就用小編說的這些來做一個網(wǎng)頁吧。

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