編輯環境
製作網頁不需要安裝任何程式語言編輯器， 所以不用擔心因為天不時、地不利、網不速，編輯器安裝半天還沒安裝成功，你就已經沒熱情學習了。
製作網頁只需要開啟電腦系統自帶的記事本，對的你沒聽錯，就是那個生成TXT 純文字文件的小小記事本。
在記事本中寫入網頁的標籤程式碼，然後將這個 TXT 文件另存為字尾名為。html 的檔案。
噔！ 噔！ 噔！雙擊開啟下面這個 HTML 檔案，你就可以在瀏覽器看見自己親手製作的網頁啦。（要注意的是，檔案圖示會隨著電腦預設瀏覽器的不同而改變）
HTML與CSS關係
學習製作一個靜態網頁需要掌握 HTML、CSS 語言。下面我們就來了解一下這兩個語言是分別用來實現什麼的。
1。 HTML 是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓別人瀏覽的資訊，
包含文字、圖片、連結等。
2。 CSS 是樣式表現，就像是網頁的外衣。比如，字型的選擇、大小和顏色變化，或插入圖片、邊框等，這些用來改變網頁外觀的東西稱之為表現。
如果將靜態網頁比做一個人的話，HTML 就是人的四肢、眼睛和骨頭這種實質性的東西，CSS 就是衣服、配飾和妝容等把人打扮得漂漂亮亮的表現。
HTML
HTML 是 HyperText Markup Language（超文字標記語言）的縮寫，是一種用於建立網頁的標準標記語言，使用標記標籤描述網頁中的文字、圖片、連結等，標記標籤由開始
標籤<>和結束標籤 >組成，兩者中間填入內容。
很官方？看不懂？沒關係，我舉一個例子你就可以 get 到了。下面是知乎的一個登入頁面。
我們可以看到，這個登入頁面主要包括主標題“知乎”、副標題“與世界分享你的知識、
經驗和見解”、兩個輸入框和“登入”按鈕。HTML 是表示內容和語義的，它不僅確定網頁有哪些文字內容，而且還用標記標籤告訴瀏覽器哪些文字是標題，哪些文字是按鈕，哪裡放置輸入框，甚至哪裡需要放置圖片。比如，“知乎”這兩個字的語義是主標題，所以它在頁面中字型最大。HTML中主標題（一級標題）的標記標籤是
，所以要將“知乎”兩個字賦予主標題的語義，可以在記事本中這樣寫：
知乎
。
HTML 的基本結構
開啟你電腦的記事本，把下面這段程式碼複製到記事本中吧，我們開始一步一步來製作網頁。
自我介紹
名字：
性別:
生日:
班級:
興趣愛好：
我先介紹一下HTML 的基本結構：
定義這個網頁是用 HTML 語言製作的。
稱為根標籤，所有的網頁標籤都要巢狀在中，標記著
HTML 的開始和結束。
表示 HTML 的頭部，描述 HTML 文件的各種屬性和資訊，包括網頁
的標題、CSS 樣式透過
標籤巢狀在頭部等。絕大多數 HTML 文件頭部放置的內容都不會顯示出來給網頁瀏覽者看到。
表示 HTML 的主體，展示給網頁瀏覽者看的文字、圖片和連結等都要放在標籤裡面。
定義網頁的字符集，不用太糾結是什麼意思，它的作用就是使網頁不會亂碼。但要注意的是，你在將記事本文件另存為。html檔案時，也要把檔案的字符集設為utf-8。
和 分別標記網頁的一級標題、二級標題，HTML一共有、、、
、
和
六級標題，h後面的數字數字越大，標題字號越小。
標籤程式碼：
在瀏覽器中顯示：
標記一個段落，如果想在網頁上顯示文章，就需要 標籤了，把文章的 標籤中。
標籤程式碼：
在瀏覽器中顯示：
還記得你剛剛複製貼上在記事本的程式碼嗎？現在輪到你來動手啦。在程式碼的相應標籤中寫入自己的資訊，然後另存為。html檔案，用瀏覽器開啟看一下你的自我介紹網頁吧。
新增圖片和超連結一個網頁不可能只有文字，還應該會包含一些圖片和超連結等。
定義圖片的標籤是
在瀏覽器中顯示：
我們在瀏覽網頁時，點選藍色帶下劃線的字型時可以連結到另一個網頁，這是用標籤實現的：
文字，target=”_blank”表示在新的空白頁開啟連結的網頁。
我們來嘗試一下，在網頁中新增一個“點選這裡瞭解更多”的文字連結到編玩邊學的官網主頁，你也可以選擇連結到自己喜歡的網頁。
標籤程式碼：
在瀏覽器中顯示：
點選之後：
快試一下在你自己的自我介紹網頁中加入連結到喜歡的網頁入口吧，比如你自己的QQ空間主頁或者部落主頁。
學到這裡，相信你已經可以用HTML語言製作一個簡單的靜態網頁了。
但，當你開啟用HTML製作的網頁時，你會忍不住內心os：emmmmmm，這頁面也太原始了吧，不符合現代人的審美啊。
前面提到的知乎登入頁面，如果只用HTML語言編寫，沒有CSS樣式，它是長這樣的。
這是因為HTML只表示網頁的內容和語義，並不會幫你把網頁打扮得漂漂亮亮的。所以我們還需要學習用CSS裝飾網頁的內容。
CSS全稱為“層疊樣式表 （Cascading Style Sheets）”，用於定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、對齊方式、字型加粗等。
CSS程式碼語法CSS樣式透過