# 認識 HTML、CSS 與實作第一個網頁 ###### tags: `HTML` `CSS` ## 建造網站好比建造一棟房子 - **HTML**：超文字標記式語言(Hypertext Markup Language)，負責房子的骨架與結構，好比多少個房間、幾層樓等。 - **CSS**：階層式樣式表(Cascading Style Sheets)，負責房子的裝潢，好比顏色、壁紙花樣等。因為用途是裝飾，所以無法單獨使用，要搭配HTML。 - **JavaScript：** 負責房子的功能運作，例如：接上電源之後切換開關燈泡就會亮。 ## HTML 是一種標記式語言(Markup Language)不是程式語言(Programming Language) HTML只是把資料做標記讓瀏覽器讀取，主要的作用在於告訴瀏覽器「網頁應該要有哪些元素」。 正確使用各種標籤分類，可以幫助搜尋引擎辨識網站內容，提高搜尋精確度。 ## 標籤與元素 * 起始標籤 Opening tag * 結束標籤 Closing tag * 內容 Content * 元素 Element > 元素(Element)：由起始標籤＋結束標籤＋內容 [color=#907bf7] 起始與結束標籤，兩兩成對把內容包起來，所以```<h1>內容在中間</h1>```這樣標記就是一個 h1 元素。 - 元素有屬性(Attribute)，屬性寫在起始標籤之中，可以有很多種屬性，要撰寫多個屬性時屬性彼此間要有一個空格。 - 可以把Style樣式寫在起始標籤中，形成一種inline-CSS - 少數標籤不需結束標籤，稱作空標籤(Empty Tag)，直接將屬性寫在起始標籤內表達，例如： ``` <img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley Face"> <p style="color: darkorange;"><b>"This is a text in darkorange and with bold effect."</b></p> ``` - 上面的``<img>``本身是空標籤，由於沒有包裹內容只有標籤本身，這樣的元素稱作空元素。 - src屬性：指定圖片來源，(source) - alt屬性指定：當圖片無法顯示時的替代說明文字(alternative)。 - 元素可以包裹元素(巢狀結構)，標籤包裹順序需由內而外兩兩相對，例如：在``<p>``元素中再度於「bold」字樣前後加上表達粗體的``<b>``標籤 - 在``<p>``起始標籤中加上style屬性將文字指定為深橘色。 ## HTML文件的結構 ![](https://i.imgur.com/k7zHeGn.jpg) ### 宣告：<!Doctype html> + 告訴瀏覽器這是一個HTML文件 + 有驚嘆號代表這是HTML5版本，遵守W3C全球資訊網協會所制定之標準 ### ``<html>`` 又被視為根元素（root element），包含了所有顯示在這個頁面上的內容。 ### ``<head>`` 被``<head>``標籤所包起來的內容(意即整個``<head>元素``)雖然不會顯示於網頁瀏覽者眼前，但卻包含許多重要資訊，例如： + ``<meta charset="UTF-8">`` 字元集使用「UTF-8」這種字元編碼讓(絕大多數的)語言文字能正常顯示於瀏覽器上。 + ``<meta name="viewport" content="width=device-width, initial-scale=1.0">`` 指定螢幕寬度為裝置寬度，畫面載入初始縮放比例 100%。 [說明參考Amdis Liu](https://medium.com/frochu/html-meta-viewport-setting-69fbb06ed3d8) + ``<title>Title is here</title>`` 會顯示在網頁頁籤上的文字 ![](https://i.imgur.com/IQtulfW.jpg) ### ``<body>`` 所有會顯示於網頁瀏覽者眼前的內容 列舉常見有以下： * 文件標題 headings * 段落 paragraphs * 連結 link * 清單 list #### 文件標題 ``<h1>~<h6>`` 是六種由大到小的預設標題尺寸分級。如果要更細緻的指定文字大小例如24pt，就得另撰寫CSS。 ``` <h1>This is a h1 text.</h1> <h2>This is a h2 text.</h2> <h3>This is a h3 text.</h3> <h4>This is a h4 text.</h4> <h5>This is a h5 text.</h5> <h6>This is a h6 text.</h6> ``` > 顯示結果 > ![](https://i.imgur.com/23V01MK.jpg =40%x) #### 段落``<p>`` ``<p>``代表paragraph，文字內容置於``<p>``標籤之中能讓瀏覽器辨認內容是一個文字段落，幫助分類。 ``` <p>This is a paragraph paragraph paragraph paragraph.</p> ``` > 顯示結果(外表上看不出和一般文字的差別) > ![](https://i.imgur.com/f205ejY.jpg) #### 連結 ``<a>`` ``<a>``元素(element)中加上href這個屬性可以讓被包裹的文字成為超連結。 ``` <a href="https://www.goolge.com.tw">Google Homepage</a> ``` > 顯示結果![](https://i.imgur.com/EUPrWMn.jpg =40%x) #### 清單``<ul>`` ``<ol>`` ``<li>`` 要搭配``<li>``使用才看得出效果。 + ``<ul>``無順序清單（Unordered lists） ``` <ul> <li>無順序清單-蘋果</li> <li>無順序清單-香蕉</li> <li>無順序清單-橘子</li> </ul> ``` > 顯示結果 ![](https://i.imgur.com/q2tnvWq.jpg =30%x) + ``<ol>``有順序清單（Ordered lists） ``` <ol> <li>冠軍</li> <li>亞軍</li> <li>季軍</li> </ol> ``` > 顯示結果 ![](https://i.imgur.com/xyWH9VB.jpg =30%x) ## css CSS搭配HTML使用，可以指定元素擁有各種樣式屬性。寫法分3種： - **inline-CSS** + inline CSS 直接把樣式寫在起始標籤中，屬性值使用雙引號``" "``包裹起來，且必須使用分號``;``結尾。 ![](https://i.imgur.com/veT7I7o.jpg) - **internal-CSS** + 把樣式用``<style>``標籤寫在``<head>``之中，再用id或是class選取特定元素，展現出樣式。 + id 使用``#``選擇 + class 使用``.``選擇 + 全部屬性用左右大括號``{}``包起來 + 每個屬性都要用用``;``結尾 ![](https://i.imgur.com/gspSI4V.jpg) - **external-CSS** - 把CSS樣式單獨存為一個副檔名為``.css``的樣式檔 - 於``<head>``元素中使用``<link>``指定檔案路徑將CSS樣式導入 external-CSS內容 ![](https://i.imgur.com/K0i7Ra2.jpg) link導入css ![](https://i.imgur.com/twuoR3c.jpg) 三者顯示結果 ![](https://i.imgur.com/hUbJs4K.jpg =50%x) :::info 提醒：一定要記得撰寫 `<link rel="stylesheet" href="style.css">` 這一行，自己剛開始學時常犯蠢忘記引入樣式檔，或是樣式檔路徑寫錯，誤以為CSS套用失敗，白白困惑好幾分鐘。 :::