• 編寫自然環(huán)境

  　　

　　制做網(wǎng)頁不用安裝一切編程語言在線編輯器，因此不必?fù)?dān)心由于天時(shí)常、地不好、網(wǎng)不速，在線編輯器安裝大半天還沒有安裝取得成功，你也就早已沒熱情學(xué)了。

　　制做網(wǎng)頁只必須開啟電腦操作系統(tǒng)內(nèi)置的記事本，對(duì)的你沒看錯(cuò)，就是那個(gè)轉(zhuǎn)化成TXT純文本文件的小小的記事本。

　　在記事本中載入網(wǎng)頁的標(biāo)簽編碼，隨后將這一TXT文本文檔另存文件后綴名為.html的文檔。

　　噔！噔！噔！雙擊鼠標(biāo)開啟下邊這一HTML文檔，你也就能夠在電腦瀏覽器看見自己親自制做的網(wǎng)頁啦。（要留意的是，文件圖標(biāo)會(huì)伴隨著電腦上默認(rèn)瀏覽器的不一樣而更改）

• HTML與CSS關(guān)聯(lián)

  　　

　　學(xué)習(xí)培訓(xùn)制做一個(gè)靜態(tài)數(shù)據(jù)網(wǎng)頁必須把握HTML、CSS語言。下邊大家就來了解一下這兩個(gè)語言是各自用于完成哪些的。

　　1.HTML是網(wǎng)頁內(nèi)容的媒介。內(nèi)容便是網(wǎng)頁創(chuàng)作者放到網(wǎng)頁頁面上要想讓他人訪問的信息內(nèi)容，

　　包括文本、圖片、連接等。

　　2.CSS是款式主要表現(xiàn)，就好像網(wǎng)頁的外套。例如，字體樣式的挑選、尺寸和色調(diào)轉(zhuǎn)變，或圖片、外框等，這種用于更改網(wǎng)頁外型的東西稱作主要表現(xiàn)。

　　假如將靜態(tài)數(shù)據(jù)網(wǎng)頁比成一個(gè)人得話，HTML便是人的四肢、雙眼和骨骼這類實(shí)際性的東西，CSS便是衣服褲子、飾品和妝面等把人穿著打扮得花枝招展的主要表現(xiàn)。

• HTML

  　　

　　HTML是HyperTextMarkupLanguage（HTML文件標(biāo)記語言）的簡(jiǎn)稱，是一種用以建立網(wǎng)頁的規(guī)范標(biāo)記語言，應(yīng)用標(biāo)識(shí)標(biāo)簽敘述網(wǎng)頁中的文本、圖片、連接等，標(biāo)識(shí)標(biāo)簽由剛開始標(biāo)簽和完畢標(biāo)簽/構(gòu)成，二者正中間填寫內(nèi)容。

　　很官方網(wǎng)？不明白？沒事兒，我舉一個(gè)事例你也就能夠get來到。下邊是知乎問答的一個(gè)登陸頁面。

　　我們可以見到，這一登陸頁面關(guān)鍵包含主題目“知乎問答”、小標(biāo)題“與全球共享你的專業(yè)知識(shí)、工作經(jīng)驗(yàn)和看法”、2個(gè)文本框和“登陸”按鍵。HTML是表明內(nèi)容和詞義的，它不但明確網(wǎng)頁有什么文字內(nèi)容，并且還用標(biāo)識(shí)標(biāo)簽告知電腦瀏覽器什么文字是題目，什么文字是按鍵，哪兒置放文本框，乃至哪兒必須置放圖片。例如，“知乎問答”這兩字的詞義是主題目，因此它在網(wǎng)頁頁面中字體樣式較大。HTML中主題目（一級(jí)標(biāo)題）的標(biāo)識(shí)標(biāo)簽是h1/h1，因此要將“知乎問答”兩字授予主題目的詞義，能夠在記事本中那樣寫：h1知乎問答/h1。

• HTML的基礎(chǔ)構(gòu)造

  　　

　　開啟你電腦上的記事本，把下邊這一段編碼拷貝到記事本中吧，大家剛開始一步一步來制做網(wǎng)頁。

　　！DOCTYPEhtmlhtmlheadmetacharset="utf-8"title簡(jiǎn)單自我介紹/title/headbodyh1姓名：/h1h2性別：/h2h2生辰：/h2h2班集體：/h2p個(gè)人愛好：/p/body/html

　　我先介紹一下HTML的基礎(chǔ)構(gòu)造：

　　！DOCTYPEhtml界定這一網(wǎng)頁是用HTML語言制做的。

　　html/html稱之為根標(biāo)簽，全部的網(wǎng)頁標(biāo)簽必須嵌套循環(huán)在html/html中，標(biāo)識(shí)著HTML的開始與結(jié)束。

　　head/head表明HTML的頭頂部，敘述HTML文本文檔的各種各樣特性和信息內(nèi)容，包含網(wǎng)頁的題目、CSS款式根據(jù)style標(biāo)簽嵌套循環(huán)在頭頂部等。絕大部分HTML文本文檔頭頂部置放的內(nèi)容都不容易顯示信息出去給網(wǎng)頁訪問者見到。

　　body/body表明HTML的行為主體，展現(xiàn)給網(wǎng)頁訪問者看的文本、圖片和連接等必須放到body標(biāo)簽里邊。

　　metacharset="utf-8"界定網(wǎng)頁的字符集，無需太擔(dān)心代表什么意思，它的功效便是使網(wǎng)頁不容易錯(cuò)碼。但要留意的是，你一直在將記事本文本文檔另存.html文檔時(shí)，還要把文檔的字符集設(shè)成utf-8。

　　title簡(jiǎn)單自我介紹/title標(biāo)識(shí)全部網(wǎng)頁的題目，出現(xiàn)在電腦瀏覽器對(duì)話框頂端的標(biāo)題欄。

　　h1/h1和h2/h2各自標(biāo)識(shí)網(wǎng)頁的一級(jí)標(biāo)題、二級(jí)標(biāo)題，HTML一共有h

　　1、h

　　2、h

　　3、h

　　4、h5和h6六級(jí)題目，h后邊的數(shù)據(jù)數(shù)據(jù)越大，題目字體大小越小。

　　標(biāo)簽編碼：

　　在電腦瀏覽器中顯示信息：

　　p/p標(biāo)識(shí)一個(gè)文章段落，假如想在網(wǎng)頁上顯示信息文章內(nèi)容，就必須p標(biāo)簽了，把文章內(nèi)容的文章段落放進(jìn)p標(biāo)簽中。

　　標(biāo)簽編碼：

　　在電腦瀏覽器中顯示信息：

　　還記住你不久拷貝在記事本的編碼嗎？如今輪到你來動(dòng)手能力啦。在編碼的相對(duì)標(biāo)簽中載入自身的信息內(nèi)容，隨后另存.html文檔，用打開瀏覽器看一下你的簡(jiǎn)單自我介紹網(wǎng)頁吧。

• 加上圖片和網(wǎng)頁鏈接

  　　

　　一個(gè)網(wǎng)頁不太可能僅有文本，還應(yīng)當(dāng)會(huì)包括一些圖片和網(wǎng)頁鏈接等。

　　界定圖片的標(biāo)簽是imgsrc="圖片詳細(xì)地址"。img是一個(gè)空標(biāo)簽，空標(biāo)簽的含意便是僅有剛開始標(biāo)簽，沒有完畢標(biāo)簽。src偏向圖片的詳細(xì)地址，詳細(xì)地址要放到雙引號(hào)內(nèi)，圖片詳細(xì)地址能夠是電腦上的本地文件還可以是在網(wǎng)上的線上圖片，推存應(yīng)用線上圖片的詳細(xì)地址。

　　在一張圖片上右鍵，挑選“拷貝圖片詳細(xì)地址”。

　　如今來試著一下吧，在你的簡(jiǎn)單自我介紹網(wǎng)頁放一張你自己的相片。這時(shí)要再度編寫.html文檔得話，右鍵文檔挑選“打開”為“記事本”，就可以再度編寫標(biāo)簽編碼了。

　　我覺得在網(wǎng)頁中加上一張編玩邊學(xué)的圖片，看一下我怎么做的吧。

　　標(biāo)簽編碼：

　　在電腦瀏覽器中顯示信息：

　　我們?cè)谠L問網(wǎng)頁時(shí)，點(diǎn)一下深藍(lán)色帶下橫線的字體樣式時(shí)能夠連接到另一個(gè)網(wǎng)頁，它是用a標(biāo)簽完成的：

　　ahref="總體目標(biāo)網(wǎng)站地址"target="_blank"文字/a，target=”_blank”表明在新的空白開啟連接的網(wǎng)頁。

　　大家來試著一下，在網(wǎng)頁中加上一個(gè)“點(diǎn)一下這兒掌握大量”的文字連接到編玩邊學(xué)的官方網(wǎng)站首頁，你也能夠挑選連接到自身喜愛的網(wǎng)頁。

　　標(biāo)簽編碼：

　　在電腦瀏覽器中顯示信息：

　　點(diǎn)一下以后：

　　快試一下在你自己的簡(jiǎn)單自我介紹網(wǎng)頁中添加連接到喜愛的網(wǎng)頁通道吧，例如你自己的QQ空間首頁或是部族首頁。

　　學(xué)得這兒，相信你早已可以用HTML語言制做一個(gè)簡(jiǎn)易的靜態(tài)數(shù)據(jù)網(wǎng)頁了。

• CSS

  　　

　　但，如果你開啟用HTML制做的網(wǎng)頁時(shí)，你能禁不住心里ｏｓ：emmmmmm，這網(wǎng)頁頁面也太初始了吧，不符當(dāng)代人的審美觀啊。

　　前邊提及的知乎登錄網(wǎng)頁頁面，假如僅用ＨＴＭＬ語言撰寫，沒有ＣＳＳ款式，它是長(zhǎng)那樣的。

　　這是由于HTML只表明網(wǎng)頁的內(nèi)容和詞義，并不會(huì)幫你將網(wǎng)頁穿著打扮得花枝招展的。因此大家還必須學(xué)習(xí)培訓(xùn)用CSS裝飾設(shè)計(jì)網(wǎng)頁的內(nèi)容。

　　CSS全稱之為“堆疊css樣式表(CascadingStyleSheets)”，用以界定HTML內(nèi)容在電腦瀏覽器內(nèi)的顯示信息款式，如字體大小、色調(diào)、兩端對(duì)齊方法、字體加粗等。

• CSS編碼英語的語法

  　　

　　CSS款式根據(jù)style/style標(biāo)簽嵌套循環(huán)在ＨＴＭＬ的頭頂部操縱網(wǎng)頁內(nèi)容的款式。

　　！DOCTYPEhtmlhtmlheadmetacharset="utf-8"title簡(jiǎn)單自我介紹/titlestyletype="text/css"/style/head

　　CSS款式由選擇符和申明構(gòu)成，而申明又由特性合值構(gòu)成。

　　選擇符又被稱為選擇符，指出網(wǎng)頁時(shí)要運(yùn)用款式標(biāo)準(zhǔn)的標(biāo)簽，如圖的事例便是把網(wǎng)頁中全部文章段落（p）的文本色調(diào)變?yōu)樯钏{(lán)色，而別的標(biāo)簽不容易遭受危害。

　　在英文大括號(hào)“｛｝”中的便是申明，特性就是指文字大小、色調(diào)、兩端對(duì)齊方法等，值就是指字體樣式實(shí)際有多大。色調(diào)實(shí)際是哪個(gè)等。特性合值中間用英文冒號(hào)“：”隔開，當(dāng)有好幾條申明時(shí)，正中間可以英文分號(hào)“;”隔開。

• CSS的常見特性

  　　

　　在這兒大家關(guān)鍵講幾類ＣＳＳ常見的特性。

　　網(wǎng)頁的字體樣式特性是font-family，常見的值有ＳｉｍＳｕｎ（宋體字）?。樱椋恚龋澹椋ê隗w字）　MicrosoftYahei（微軟雅黑）?。耍幔椋裕椋w）

　　大家來試著一下，將前邊做的簡(jiǎn)單自我介紹網(wǎng)頁的字體設(shè)置為常見的微軟公司雅黑字體。全部網(wǎng)頁的字體樣式包括在body標(biāo)簽中，因此選擇符為body.

　　標(biāo)簽編碼：

　　在電腦瀏覽器中顯示信息：

　　文字大小的特性是font-size，它的值常見的企業(yè)是px（清晰度），px的值越大字體大小越大；

　　字體樣式的特性是color，你能將它的值設(shè)定給你喜愛的色調(diào)。

　　用編碼將簡(jiǎn)單自我介紹網(wǎng)頁中文章段落p的字體大小變大一點(diǎn)，并將全部網(wǎng)頁body的字體樣式設(shè)定為與編玩邊學(xué)圖片類似的深藍(lán)色。文章段落的選擇符為p，全部網(wǎng)頁的選擇符為body。

　　標(biāo)簽編碼：

　　在電腦瀏覽器中顯示信息：

　　大家還能夠給網(wǎng)頁中的某一部分提升一個(gè)外框。

　　外框款式的特性是border-style，常見的值有solid（實(shí)線）和

　　dotted（虛線）

　　外框總寬的特性是border-width，它的值常見企業(yè)也是px（清晰度）

　　外框色調(diào)特性是border-color，你能設(shè)成自身喜愛的色調(diào)。

　　我覺得給姓名的一部分加一個(gè)鮮紅色的實(shí)線外框，因此選擇符是h1。

　　標(biāo)簽編碼：

　　在電腦瀏覽器中顯示信息：

　　清理網(wǎng)頁的CSS特性有很多類型，并且方式都不只一種，在這兒沒法一一詳細(xì)描述。快開啟記事本給你不久制做的簡(jiǎn)單自我介紹網(wǎng)頁加上一些漂亮的CSS款式吧。

　　雙擊鼠標(biāo)開啟html文檔你能發(fā)覺以前慘不忍睹的網(wǎng)頁越來越漂亮了哦。為自己點(diǎn)個(gè)贊吧！

　　以上內(nèi)容轉(zhuǎn)自編程少年青少年兒童編程愛好者交流學(xué)習(xí)小區(qū)-編程少年