0. 引言
網站的搭建需要頁(yè)面、域名(míng)和雲服務(wù)器，這一篇教程是第一步，也就是關于頁(yè)面的制作(zuò)，如何将制作(zuò)好的頁(yè)面發布到雲服務(wù)器上，請參考之前的文(wén)章：對于對域名(míng)沒有(yǒu)要求的完全小(xiǎo)白的同學(xué)，可(kě)以嘗試最基礎的建站網站，例如竹子建站、凡科(kē)建站等。通過簡單的幾步操作(zuò)，就可(kě)以搭建一個基礎的展示頁(yè)面，好處在于步驟簡單、不用(yòng)花(huā)錢租服務(wù)器和域名(míng)，以及不用(yòng)弄備案，壞處在于頁(yè)面自由度較低，無法鍛煉自己的計算機水平，并且域名(míng)可(kě)能(néng)不好看。
不過目前來看，騰訊阿裏和華為(wèi)都有(yǒu)相關的雲服務(wù)，操作(zuò)也相對不是很(hěn)複雜，作(zuò)為(wèi)學(xué)生也有(yǒu)專門的優惠。
1. 基礎知識
頁(yè)面分(fēn)為(wèi)動态網頁(yè)和靜态網頁(yè)，注意動态網頁(yè)不是指網頁(yè)有(yǒu)動畫，而是指頁(yè)面内容可(kě)以通過不改變代碼實現。靜态網頁(yè)一般為(wèi)展示類型，也可(kě)以有(yǒu)很(hěn)多(duō)炫酷的動畫。
靜态頁(yè)面是不能(néng)随時改動的，靜态是一次性寫好放在服務(wù)器上進行浏覽的，如果想改動，必須在頁(yè)面上修改，然後再上傳服務(wù)器覆蓋原來的頁(yè)面，這樣才能(néng)更新(xīn)信息，使用(yòng)者不能(néng)随時修改。
動态頁(yè)面是可(kě)以随時改變内容的，有(yǒu)前後台之分(fēn)，管理(lǐ)員可(kě)以在後台随時更新(xīn)網站的内容，前台頁(yè)面的内容也會随之更新(xīn)。
這裏我所說的主要是靜态網頁(yè)，僅僅涉及到最基礎的HTML語言，動态網頁(yè)一般涉及到JSP、PHP、ASP等技(jì )術，而靜态網頁(yè)一般會涉及到HTML、CSS、Java Script等技(jì )術。
2. 所需工(gōng)具(jù)
所涉及的工(gōng)具(jù)有(yǒu)模版文(wén)件和編譯器，其中(zhōng)模版是從網上選擇下載的，編譯器常用(yòng)的有(yǒu)Sublime Text，編譯器的作(zuò)用(yòng)是将代碼轉換成機器語言，也就是0和1。
模版需要從網上下載模版再進行修改，當然也可(kě)以自己制作(zuò)，不過難度相對較高，也較耗時間。這裏我選擇的是模版之家（cssmoban），裏面可(kě)以選擇喜歡的免費模版下載。
下載好後解壓，文(wén)件夾裏的index1.html文(wén)件就是我們要編輯的主頁(yè)，選擇用(yòng)Sublime或Dreamweaver打開即可(kě)編輯，用(yòng)浏覽器打開即可(kě)預覽。Dreamweaver是Adobe的軟件，界面可(kě)以選擇初學(xué)者的上下樣式，更加容易上手，但對電(diàn)腦性能(néng)（應該是CPU）要求較高，我手上這台MBP13 2016款幾乎無法流暢使用(yòng)。
如上所示，整體(tǐ)由一組對應的<…>和</…>構成，head為(wèi)标題，body為(wèi)内容。
4. HTML屬性：
font屬性：也就是和字體(tǐ)相關的屬性，與Word這種可(kě)視化軟件不同，所有(yǒu)的修改都由代碼實現。
例如：
<font face=“黑體(tǐ)” color=“#000000” size=“5”>文(wén)字</font>
與字面意思相同，face是字體(tǐ)，color是顔色，可(kě)以輸入16進制RGB顔色或者blue等顔色名(míng)，size是文(wén)字大小(xiǎo)。
用(yòng)Find工(gōng)具(jù)定位到文(wén)字的位置，直接修改即可(kě)，Sublime保存後，刷新(xīn)浏覽器打開的頁(yè)面即可(kě)，如果是Dreamweaver，則可(kě)直接點擊頁(yè)面上的内容編輯。
Sublime修改文(wén)字示例：
division屬性：div内的内容為(wèi)一個整體(tǐ)，一個區(qū)塊，删除網頁(yè)某一塊内容以div為(wèi)單位删除，點擊左側行數處三角箭頭可(kě)以折疊快速删除。
例如：
<div>區(qū)塊内容</div>
删除某一區(qū)塊示例：
paragraph屬性：即段落屬性，會自動與上下内容分(fēn)開，形成一個單獨的段落。
例如：
<p align=“center”>段落内容</p>
超鏈接：
例如：
<a href=“XXX.html”>超鏈接</a>
将某網頁(yè)保存在文(wén)件夾下，這裏我新(xīn)建了一個名(míng)為(wèi)article的文(wén)件夾方便管理(lǐ)，在引号内輸入html文(wén)件的路徑和名(míng)稱，保存刷新(xīn)後即可(kě)看到導航欄的導航内容已經發生了變化。
其中(zhōng)<li>為(wèi)表單list，一般在導航欄比較常見。
image屬性：
例如：
<img src=“XXX.jpg” width=“50%”>
Img src就是image source，即圖片來源，一般圖片放在images文(wén)件夾裏，width即寬度，可(kě)以用(yòng)百分(fēn)比或者數值調整。
HTML的換行和空格：
HTML中(zhōng)文(wén)字的回車(chē)不能(néng)直接讀取，一般用(yòng)<br>即breakline換行，斷開兩行内容
例如：
第一行内容<br>第二行内容
一般情況下，空格可(kě)以直接讀取，若不能(néng)直接讀取，也可(kě)以使用(yòng) ，即空格。
例如：
前半句 後半句
