---
# System prepended metadata

title: 認識 HTML、CSS 與實作第一個網頁

---

# 認識 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)**：由起始標籤＋結束標籤＋內容
所以```<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)

