服務熱線 400-660-5555 （轉1）
網站建設
制做網頁不用安裝一切編程語言在線編輯器，因此不必擔心由于天時常、地不好、網不速，在線編輯器安裝大半天還沒有安裝取得成功，你也就早已沒熱情學了。
制做網頁只必須開啟電腦操作系統內置的記事本，對的你沒看錯，就是那個轉化成TXT純文本文件的小小的記事本。
在記事本中載入網頁的標簽編碼，隨后將這一TXT文本文檔另存文件后綴名為.html的文檔。
噔！噔！噔！雙擊鼠標開啟下邊這一HTML文檔，你也就能夠在電腦瀏覽器看見自己親自制做的網頁啦。（要留意的是，文件圖標會伴隨著電腦上默認瀏覽器的不一樣而更改）
學習培訓制做一個靜態數據網頁必須把握HTML、CSS語言。下邊大家就來了解一下這兩個語言是各自用于完成哪些的。
1.HTML是網頁內容的媒介。內容便是網頁創作者放到網頁頁面上要想讓他人訪問的信息內容，
包括文本、圖片、連接等。
2.CSS是款式主要表現，就好像網頁的外套。例如，字體樣式的挑選、尺寸和色調轉變，或圖片、外框等，這種用于更改網頁外型的東西稱作主要表現。
假如將靜態數據網頁比成一個人得話，HTML便是人的四肢、雙眼和骨骼這類實際性的東西，CSS便是衣服褲子、飾品和妝面等把人穿著打扮得花枝招展的主要表現。
HTML是HyperTextMarkupLanguage（HTML文件標記語言）的簡稱，是一種用以建立網頁的規范標記語言，應用標識標簽敘述網頁中的文本、圖片、連接等，標識標簽由剛開始標簽和完畢標簽/構成，二者正中間填寫內容。
很官方網？不明白？沒事兒，我舉一個事例你也就能夠get來到。下邊是知乎問答的一個登陸頁面。
我們可以見到，這一登陸頁面關鍵包含主題目“知乎問答”、小標題“與全球共享你的專業知識、工作經驗和看法”、2個文本框和“登陸”按鍵。HTML是表明內容和詞義的，它不但明確網頁有什么文字內容，并且還用標識標簽告知電腦瀏覽器什么文字是題目，什么文字是按鍵，哪兒置放文本框，乃至哪兒必須置放圖片。例如，“知乎問答”這兩字的詞義是主題目，因此它在網頁頁面中字體樣式較大。HTML中主題目（一級標題）的標識標簽是h1/h1，因此要將“知乎問答”兩字授予主題目的詞義，能夠在記事本中那樣寫：h1知乎問答/h1。
開啟你電腦上的記事本，把下邊這一段編碼拷貝到記事本中吧，大家剛開始一步一步來制做網頁。
！DOCTYPEhtmlhtmlheadmetacharset="utf-8"title簡單自我介紹/title/headbodyh1姓名：/h1h2性別：/h2h2生辰：/h2h2班集體：/h2p個人愛好：/p/body/html
我先介紹一下HTML的基礎構造：
！DOCTYPEhtml界定這一網頁是用HTML語言制做的。
html/html稱之為根標簽，全部的網頁標簽必須嵌套循環在html/html中，標識著HTML的開始與結束。
head/head表明HTML的頭頂部，敘述HTML文本文檔的各種各樣特性和信息內容，包含網頁的題目、CSS款式根據style標簽嵌套循環在頭頂部等。絕大部分HTML文本文檔頭頂部置放的內容都不容易顯示信息出去給網頁訪問者見到。
body/body表明HTML的行為主體，展現給網頁訪問者看的文本、圖片和連接等必須放到body標簽里邊。
metacharset="utf-8"界定網頁的字符集，無需太擔心代表什么意思，它的功效便是使網頁不容易錯碼。但要留意的是，你一直在將記事本文本文檔另存.html文檔時，還要把文檔的字符集設成utf-8。
title簡單自我介紹/title標識全部網頁的題目，出現在電腦瀏覽器對話框頂端的標題欄。
h1/h1和h2/h2各自標識網頁的一級標題、二級標題，HTML一共有h
1、h
2、h
3、h
4、h5和h6六級題目，h后邊的數據數據越大，題目字體大小越小。
標簽編碼：
在電腦瀏覽器中顯示信息：
p/p標識一個文章段落，假如想在網頁上顯示信息文章內容，就必須p標簽了，把文章內容的文章段落放進p標簽中。
標簽編碼：
在電腦瀏覽器中顯示信息：
還記住你不久拷貝在記事本的編碼嗎？如今輪到你來動手能力啦。在編碼的相對標簽中載入自身的信息內容，隨后另存.html文檔，用打開瀏覽器看一下你的簡單自我介紹網頁吧。
一個網頁不太可能僅有文本，還應當會包括一些圖片和網頁鏈接等。
界定圖片的標簽是imgsrc="圖片詳細地址"。img是一個空標簽，空標簽的含意便是僅有剛開始標簽，沒有完畢標簽。src偏向圖片的詳細地址，詳細地址要放到雙引號內，圖片詳細地址能夠是電腦上的本地文件還可以是在網上的線上圖片，推存應用線上圖片的詳細地址。
在一張圖片上右鍵，挑選“拷貝圖片詳細地址”。
如今來試著一下吧，在你的簡單自我介紹網頁放一張你自己的相片。這時要再度編寫.html文檔得話，右鍵文檔挑選“打開”為“記事本”，就可以再度編寫標簽編碼了。
我覺得在網頁中加上一張編玩邊學的圖片，看一下我怎么做的吧。
標簽編碼：
在電腦瀏覽器中顯示信息：
我們在訪問網頁時，點一下深藍色帶下橫線的字體樣式時能夠連接到另一個網頁，它是用a標簽完成的：
ahref="總體目標網站地址"target="_blank"文字/a，target=”_blank”表明在新的空白開啟連接的網頁。
大家來試著一下，在網頁中加上一個“點一下這兒掌握大量”的文字連接到編玩邊學的官方網站首頁，你也能夠挑選連接到自身喜愛的網頁。
標簽編碼：
在電腦瀏覽器中顯示信息：
點一下以后：
快試一下在你自己的簡單自我介紹網頁中添加連接到喜愛的網頁通道吧，例如你自己的QQ空間首頁或是部族首頁。
學得這兒，相信你早已可以用HTML語言制做一個簡易的靜態數據網頁了。
但，如果你開啟用HTML制做的網頁時，你能禁不住心里ｏｓ：emmmmmm，這網頁頁面也太初始了吧，不符當代人的審美觀啊。
前邊提及的知乎登錄網頁頁面，假如僅用ＨＴＭＬ語言撰寫，沒有ＣＳＳ款式，它是長那樣的。
這是由于HTML只表明網頁的內容和詞義，并不會幫你將網頁穿著打扮得花枝招展的。因此大家還必須學習培訓用CSS裝飾設計網頁的內容。
CSS全稱之為“堆疊css樣式表(CascadingStyleSheets)”，用以界定HTML內容在電腦瀏覽器內的顯示信息款式，如字體大小、色調、兩端對齊方法、字體加粗等。
CSS款式根據style/style標簽嵌套循環在ＨＴＭＬ的頭頂部操縱網頁內容的款式。
！DOCTYPEhtmlhtmlheadmetacharset="utf-8"title簡單自我介紹/titlestyletype="text/css"/style/head
CSS款式由選擇符和申明構成，而申明又由特性合值構成。
選擇符又被稱為選擇符，指出網頁時要運用款式標準的標簽，如圖的事例便是把網頁中全部文章段落（p）的文本色調變為深藍色，而別的標簽不容易遭受危害。
在英文大括號“｛｝”中的便是申明，特性就是指文字大小、色調、兩端對齊方法等，值就是指字體樣式實際有多大。色調實際是哪個等。特性合值中間用英文冒號“：”隔開，當有好幾條申明時，正中間可以英文分號“;”隔開。
在這兒大家關鍵講幾類ＣＳＳ常見的特性。
網頁的字體樣式特性是font-family，常見的值有ＳｉｍＳｕｎ（宋體字） ＳｉｍＨｅｉ（黑體字） MicrosoftYahei（微軟雅黑） ＫａｉＴｉ（楷體）
大家來試著一下，將前邊做的簡單自我介紹網頁的字體設置為常見的微軟公司雅黑字體。全部網頁的字體樣式包括在body標簽中，因此選擇符為body.
標簽編碼：
在電腦瀏覽器中顯示信息：
文字大小的特性是font-size，它的值常見的企業是px（清晰度），px的值越大字體大小越大；
字體樣式的特性是color，你能將它的值設定給你喜愛的色調。
用編碼將簡單自我介紹網頁中文章段落p的字體大小變大一點，并將全部網頁body的字體樣式設定為與編玩邊學圖片類似的深藍色。文章段落的選擇符為p，全部網頁的選擇符為body。
標簽編碼：
在電腦瀏覽器中顯示信息：
大家還能夠給網頁中的某一部分提升一個外框。
外框款式的特性是border-style，常見的值有solid（實線）和
dotted（虛線）
外框總寬的特性是border-width，它的值常見企業也是px（清晰度）
外框色調特性是border-color，你能設成自身喜愛的色調。
我覺得給姓名的一部分加一個鮮紅色的實線外框，因此選擇符是h1。
標簽編碼：
在電腦瀏覽器中顯示信息：
清理網頁的CSS特性有很多類型，并且方式都不只一種，在這兒沒法一一詳細描述。快開啟記事本給你不久制做的簡單自我介紹網頁加上一些漂亮的CSS款式吧。
雙擊鼠標開啟html文檔你能發覺以前慘不忍睹的網頁越來越漂亮了哦。為自己點個贊吧！
以上內容轉自編程少年青少年兒童編程愛好者交流學習小區-編程少年
添加動力小姐姐微信
電話咨詢
400-660-5555 （轉1）
