前端網頁（一）：HTML + CSS
HTML（HyperText Markup Language）超文字標記語言， “超文字”就是指頁面內可以包含圖片、連結，甚至音樂、程式等非文字元素。 它通過標記符號（標籤）來標記要顯示的網頁中的各個部分，這些語義化的標籤可以告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等），瀏覽器按順序閱讀網頁檔案，然後根據標記符解釋和顯示其標記的內容，對書寫出錯的標記將不指出其錯誤，且不停止其解釋執行過程，我們只能通過顯示效果來分析出錯原因和出錯部位。但需要注意的是，對於不同的瀏覽器，對同一標記符可能會有不完全相同的解釋，因而可能會有不同的顯示效果
字尾：一個網頁對應多個HTML檔案，超文字標記語言檔案以.htm或.html為副檔名,常用.html作為副檔名
結構：整個頁面由html標記包含，包括head和body兩部分
- <html>，說明該檔案是用超文字標記語言（本標籤的中文全稱）來描述的,它是檔案的開頭；而</html>，則表示該檔案的結尾。
- <head></head>，這2個標記符分別表示頭部資訊的開始和結尾。它本身不作為內容來顯示，但影響網頁顯示的效果。頭部中最常用的標記符是<title>和<meta>標記符，其中標題標記符用於定義網頁的標題，它的內容顯示在網頁視窗的標題欄中，meta定義了HTML文件中的元資料。
- <body></body>，網頁中顯示的實際內容均包含在這2個正文標記符之間。
CSS 指層疊樣式表 (Cascading Style Sheets)，是一種用來表現HTML的計算機語言，樣式定義如何顯示 HTML 元素， CSS可以將樣式定義在HTML元素的style屬性中，也可以將其定義在HTML文件header部分， 也可以將樣式宣告在一個專門的CSS檔案中，以供HTML頁面引用。通常儲存在外部樣式表中，即CSS 檔案中 ，外部樣式表可以極大提高工作效率。
字尾：通常用.css作為副檔名
選擇器：CSS給html頁面設定樣式，主要通過選擇器來完成，選擇器由兩個主要的部分構成：選擇器以及一條或多條宣告，如下圖所示：
選擇器通常是您需要改變樣式的 HTML 元素， 每條宣告由一個屬性和一個值組成， 屬性是希望設定的樣式，每個屬性有一個值，屬性和值用冒號分開。常用的三種基本選擇器有標籤選擇器、ID選擇器、類選擇器
- 標籤選擇器：通過標籤名選中html元素，如 p{color:"red"}
- ID選擇器：ID選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式，CSS 中 id 選擇器以 "#" 來定義。注意：ID屬性不要以數字開頭，數字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用。 如：
- CLASS選擇器：CLASS選擇器用於描述一組元素的樣式，class可以在多個元素中使用，CSS中類選擇器以一個點"."號顯示。
插入樣式表：將樣式表插入html頁面中有以下幾種方式:
- 外部樣式表(External style sheet) ：每個頁面使用 <link> 標籤連結到樣式表。 <link> 標籤在（文件的）頭部：<link rel="stylesheet" type="text/css" href="mystyle.css">
- 內部樣式表(Internal style sheet) ：可以使用 <style> 標籤在文件頭部定義內部樣式表
<style>
p {color:sienna;}
</style>
- 內聯樣式(Inline style)： 定義在html標籤內，此時，style可以看做標籤的屬性
<p >這是一個段落。</p>
CSS 註釋： 註釋是用來解釋程式碼的，瀏覽器會忽略它，CSS註釋以 "/*" 開始, 以 "*/" 結束
CSS網頁樣式是用來給html頁面加入一定的效果，讓其看起來更加美觀。
常用的樣式有以下幾個：
1.文字樣式：
- 顏色：顏色屬性被用來設定文字的顏色，通常有三種寫法
- 十六進位制值 - 如: ＃FF0000
- 一個RGB值 - 如: RGB(255,0,0)
- 顏色的名稱 - 如: red
- 對齊方式 ：文字排列屬性是用來設定文字的水平對齊方式，文字可居中或對齊到左或右,兩端對齊.
- {text-align:center;} 文字居中
- {text-align:right;} 文字右對齊，left為左對齊
- {text-align:justify;}每一行被展開為寬度相等，左，右外邊距是對齊
- 文字修飾：text-decoration 屬性用來設定或刪除文字的裝飾。
- {text-decoration:overline;}
- {text-decoration:line-through;}
- {text-decoration:underline;}
- 文字縮排：文字縮排屬性是用來指定文字的第一行的縮排。
- {text-indent:50px;}
2.文字樣式
- font 在一個宣告中設定所有的字型屬性
- font-family 指定文字的字體系列
- font-size 指定文字的字型大小
- font-style 指定文字的字型樣式
- font-variant 以小型大寫字型或者正常字型顯示文字
- font-weight 指定字型的粗細
3.連結樣式：可以通過css裝飾，超連結通常有以下四種狀態
- a:link - 正常，未訪問過的連結
- a:visited - 使用者已訪問過的連結
- a:hover - 當用戶滑鼠放在連結上時
- a:active - 連結被點選的那一刻
設定為若干鏈路狀態的樣式，也有一些順序規則：
a:hover 必須跟在 a:link 和 a:visited後面，a:active 必須跟在 a:hover後面
4.列表屬性：
- list-style 簡寫屬性。用於把所有用於列表的屬性設置於一個宣告中
- list-style-image 將圖象設定為列表項標誌。
- list-style-position 設定列表中列表項標誌的位置。
- list-style-type 設定列表項標誌的型別。
5.背景屬性：
- background 簡寫屬性，作用是將背景屬性設定在一個宣告中。
- background-attachment 背景影象是否固定或者隨著頁面的其餘部分滾動。
- background-color 設定元素的背景顏色。
- background-image 把影象設定為背景。
- background-position 設定背景影象的起始位置。
- background-repeat 設定背景影象是否及如何重複