前端網頁(一):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 設定背景影象是否及如何重複