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