---
# System prepended metadata

title: HTML and CSS learning process and details

---

# HTML and CSS learning process and details

剛好有時間來好好學習網程設，這篇主要紀錄HTML+CSS的一些學習心得還有細節

我是從MDN的文件來學的
https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML

Getting Started with HTML
---
Reference: https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Getting_started

**HighLights**
* HTML是一種Markup Language(用來告訴瀏覽器該如何呈現網頁)，不是一種程式語言
* 由elements組成，且elements不區分大小寫，ex: \<title> 標籤可以寫成 \<TitlE> ，任何大小寫排列組合都可以，不過為了readibility還是維持小寫比較好。
:::info
**甚麼是element?**
以下三項加起來就是element
1. opening tag
2. closing tag
3. content
:::

element又區分成幾種重要的類別，以下有兩個我認為重要的觀念
* 區塊級元素: 在頁面中獨佔一行，做為頁面的structural elements。不會nesting在行內元素中。
* 行內元素: 放在區塊級元素中的內容，不會成為一行

以下有個範例來介紹
將以下的code放入頁面中，看看有甚麼不同
```html=
//行內元素
<strong>Hello</strong><strong>Hey</strong>
//區塊級元素
<p>Hello</p><p>Hey</p>
```
:::success
展示區塊

<strong>Hello</strong><strong>Hey</strong>
<p>Hello</p><p>Hey</p>
:::

可以看到行內元素不會換行，而區塊級元素會自己換行，並且上下都有自己的空間，這些空間是由於瀏覽器套用的**CSS styling**

其實在HTML 5當中元素的類別已經被重新定義，遠較這兩種複雜，詳細可見: https://html.spec.whatwg.org/multipage/indices.html#element-content-categories

* 空元素(empty elements): 通常用來嵌入物件在頁面中。並非所有元素都有opening tag和closing tag這樣的組合，例如 \<img> 
    例如將以下的code放入頁面會有這樣的效果
```html=
<img src = "https://s.yimg.com/ny/api/res/1.2/DrotxunOuC3lt2bpuaOIyA--/YXBwaWQ9aGlnaGxhbmRlcjt3PTY0MDtoPTM2MA--/https://s.yimg.com/uu/api/res/1.2/AiK5e8BSCt0itRpj796AFg--~B/aD01NDA7dz05NTk7YXBwaWQ9eXRhY2h5b24-/http://media.zenfs.com/en/homerun/feed_manager_auto_publish_494/ee117c4fe22149cd52eeae301eec1a17">
```
<img src = "https://s.yimg.com/ny/api/res/1.2/DrotxunOuC3lt2bpuaOIyA--/YXBwaWQ9aGlnaGxhbmRlcjt3PTY0MDtoPTM2MA--/https://s.yimg.com/uu/api/res/1.2/AiK5e8BSCt0itRpj796AFg--~B/aD01NDA7dz05NTk7YXBwaWQ9eXRhY2h5b24-/http://media.zenfs.com/en/homerun/feed_manager_auto_publish_494/ee117c4fe22149cd52eeae301eec1a17">

<p>
    
</p>

* 屬性 Attributes: 關於元素的額外資訊，格式應該如下
```html=
<p class = "attribute">Content</p>
```

  例如以下在\<a> 元素底下加入屬性後，會發生甚麼不同呢
```html=
//only 1 attribute
<p>
    This is my <a href="https://github.com/yi-shin-cheng">Github Page</a>
</p>

//add attributes
<p>
    This is my <a href="https://github.com/yi-shin-cheng" title="YiShin Cheng's Github Page" target="_blank">Github Page</a>
</p>
```
<p>
    This is my <a href="https://github.com/yi-shin-cheng">Github Page</a>
</p>

<p>
    This is my <a href="https://github.com/yi-shin-cheng" title="YiShin Cheng's Github Page" target="_blank">Github Page</a>
</p>

:::info
**href**是用來提供想要連上的網址
**title**是用來附加有關連結的資訊
**target**用來表示是否在新分頁開啟此連結，"_blank"代表是，""代表否
:::

如果忘記加上attributes的引號，會發生甚麼事情呢?
就以上的例子來說，如果我忘記加上title的引號
```html=
<p>
    This is my <a href="https://github.com/yi-shin-cheng" title=YiShin Cheng's Github Page>Github Page</a>
</p>
```
這時候title會認為自己有四個屬性，一個是title(內容只有YiShin)，另外三個則是boolean attributes，Cheng's、Github、Page。這會導致意想不到的錯誤，所以一定要記得加上引號

---

再來我們看到一個基本的html檔案會具備的幾個元素
```html=
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

```

1. <!DOCTYPE html> : 用來標註文件類型。從前是個重要的東西，作為遵守一系列規範的連結，現在No one cares。只需要形式上的加入它就夠了。
2. \<html>\</html>: root element。用來包裹住頁面全部內容。
3. \<head>\</head>: 關於頁面的所有重要資訊。
4. \<meta charset="utf-8"> : 用來表示你的文件所使用的文字編碼，utf-8基本上包含所有你可能使用到的語言字元編碼，所以通常會加上它。
5. \<body>\</body> : 你想呈現的內容

Head in HTML
---
*期末考終於結束了，有時間繼續*
Reference: https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML

**Highlights**
* head裏頭的內容不會顯示在頁面上，主要是用來容納文件的metadata
* \<title> 是用來表示HTML文件標題的metadata
* Metadata is data that describes data
* 幾種常見的metadata有\<meta charset="">、\<meta name="description" content="some descriptions">等等
* 有種很酷的metadata是由facebook發明的[Open Graph Data](https://ogp.me/)
* 把以下的code加入head當中可以引入你想用css stylesheet
```html=
<link rel="stylesheet" href="my-css-file.css">
```
* 用以下的方法把javascript給加入網頁，此部分不一定要加在head裡面，通常會加在整個HTML文件的最下方(注意，script不是empty element，所以我們需要closing tag)
```html=
<script src="my-js-file.js"></script>
```


HTML texts
---
Reference: https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals

**Highlights**
* 架構化層級，\<h1>應該用來表示整個頁面的標題，\<h2>用來表示各章節標題，依此類推，共有六個層級可用
* 一個頁面最好只用一個\<h1>
* 不要在\<h2>之前使用\<h3>
* 頂多使用到三個層級，不然讀起來很亂
* \<em>斜體\</em>
* \<strong>粗體\</strong>
* \<i>italic\</i>、\<b>bold\</b>、\<u>underline\</u>，應該知道他們是甚麼意思，不過現在已經不常用


Hyperlinks
---
Reference: https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks

作為許多網頁的必要元素，這篇文章讓我獲益良多

**Highlights**
例如以下基本的超連結
<p>
    This is my <a href="https://github.com/yi-shin-cheng" title="YiShin Cheng's Github Page" target="_blank">Github Page</a>
</p>

裡面的元素在第一篇已經介紹過，title可以用來提醒使用者關於這個連結的一些資訊，target則是可以選擇要在原來的頁面跳轉連結還是開啟一個新頁面

* Block level links
點擊以下圖片
<p>
    <a href="https://www.youtube.com/watch?v=3wdHpm6wQME">
        <img src="https://www.vscinemas.com.tw/vsweb/upload/film/film_20220419003.jpg" alt="a link to the movie: top gun">
    </a>
</p>

```html=
<p>
    <a href="https://www.youtube.com/watch?v=3wdHpm6wQME">
        <img src="https://www.vscinemas.com.tw/vsweb/upload/film/film_20220419003.jpg" alt="a link to the movie: top gun">
    </a>
</p>
```

* URL(Uniform Resource Locator)，通常一個網頁的網址是由它的 網域名稱+該網頁html檔的檔案位置 ，來組成的
* 通常一個專案的根目錄都會放置一個index.html來做為瀏覽該專案的入口，大多的web server也會在沒有特別指出的時候，自己尋找index.html
* href裡面可以放很多種形式的url來連到相同的頁面，分別為絕對URL和相對URL
* href裡面放相對url就是代表要連過去的網頁和當前網頁的關係
* 盡量使用相對url，增加可讀性也增加效率，絕對url會讓瀏覽器先查看該網域的DNS，然後再一步一步找到該網頁，相對url的話，瀏覽器就可以直接從那個server開始搜尋
* 要連結到非html文件時一定要先聲明

