簡單又漂亮：小白入門網頁製作
網頁大家平時見的非常多，有的網頁簡約，有的網頁很華麗，那麼今天我就來分享一下製作網頁的基本操作。就以下面這個網頁為例：
1、製作網頁需要用到的工具
寫網頁不需要很多工具，因為寫出來的網頁只是一張圖片，沒有新增與後臺的互動，所以只需要使用HTML+CSS即可完成漂亮華麗的網頁（JS也可用來美化網頁，但有些難度，暫時略過）。建議大家寫程式碼時下載個編輯器，這樣寫起來方便一些。
2、HTML使用
一個網頁一般包含<head>和<body>兩部分，<head>中包含<title>等標籤，可以設定網頁的視窗屬性，<body>是一個網頁的主體部分，大致如下圖所示：
上圖是一個網頁的基本框架，接下來介紹一下每個標籤的作用。
<div>標籤可以看做一個容器，它裡面可以放很多東西，但是最主要的作用還是用來與其他東西分離開，讓內部的東西放在網頁的任何位置，定位功能可以用CSS實現，下面會詳細講。
<a>標籤定義超連結，用於從一張頁面連結到另一張頁面。最重要的屬性是 href 屬性，它指示連結的目標，如下程式碼可連線到百度
<a href="http://www.w3school.com.cn">W3School</a>
<h1>~<h6>標籤都表示的是標題，不同的是他們的大小不一樣
<img>
<img src="這裡寫檔案路徑">
<p>標籤內的內容表示普通文字，相應的還有其他標籤表示不同形式的文字，如b標籤表示粗體文字，big標籤可以是標籤內的文字比周圍的更大
<br>表示換行，在程式碼中打回車在網頁中是顯示不出來的，所以顯示的文字要換行時可以使用br標籤
<input>標籤功能很強大，他的type屬性決定他的種類：text表示單行文字輸入框，area表示多行文字輸入框，這兩種輸入的文字可見，password表示密碼輸入框，其輸入內容是不可見的，button表示按鈕，可以設定點選以後網頁的變化。這只是其中很少的幾種type屬性，其他的這次用不到就不說了。<input>
所有標籤都可以設定其id、class用來區分。
HTML只是寫文字、輸入框等基本東西，如果想要美觀還是要用CSS來寫。
3、CSS使用
CSS用來美化介面，那麼自然就不能讓所有東西都千篇一律，這樣就要用選擇器來選擇美化的物件，選擇器有派生選擇器、id選擇器和類選擇器。
派生選擇器可以直接指定標籤然後寫其美化方案，範圍比較大，比如選中h1標籤設定其字型、字號和顏色
h1{
font-size: 68px;
font-family: "STZhongsong";
text-transform: uppercase;
color: rgb(255, 255, 255);
text-align: center;
}
id選擇器需要在id前面加#號，如設定一個按鈕的寬和高
#btn1{
width: 80px;
height: 20px;
}
類選擇器則要在類前加.來選擇，如設定一個輸入框的背景顏色、寬高和字型大小
.input{
background-color: #f7f7f7;
width: 350px;
height: 50px;
font-size: 15px;
}
使用選擇器選中目標後就可以使用CSS的各種屬性來美化我們的網頁了，下面介紹幾種常用的屬性：
其中最重要的就是CSS的框模型，使用框模型就能設定一個標籤的位置，element是實際的內容，padding、border和margin都屬於邊框，是不可見的。常用的語句有margin-left、margin-bottom、padding-top、padding-right等語句來改變間距調整位置。
background-（屬性）可以設定括號內的屬性，比如改變的背景的顏色、背景圖片等。
background-color: #f7f7f7;
background-image: url(../img/background.png);
font-（屬性）可以設定括號內的屬性，比如字型顏色，字型大小和字型樣式等。
font-size: 25px;
font-family: "STZhongsong";
每個標籤都有width和height屬性可以改變標籤所佔位置的大小，配合框模型使用可以使標籤放到任何位置
還有一個比較華麗的就是hover屬性了，在標籤後加hover屬性，編輯裡面的內容可以讓滑鼠懸停在上面時該標籤發生相應的變化，下面的程式碼可以使滑鼠懸停在按鈕上時該按鈕變色且滑鼠有箭頭變為手指：
button:hover{
background-color: #ff6633;
cursor: pointer;
}
最後展示一下如何使用Git上傳檔案到碼雲上：
在下載倉庫後使用git add . 可以包含當前資料夾內的所有檔案
git commit -m ‘此處寫註釋’ 添加註釋
最後使用git push上傳檔案
如下圖所示
PS：以上部分參考w3school 線上教程，觀點純為個人觀點，有錯誤的地方歡迎大家指出。