第七週前端課程筆記

坊間有兩套css reset
一套是meyerweb，另一套是Normalize。
但要記得，它們兩個不能共同使用。
所以，當你使用bootstrap的scss的時候，就不要再使用meyerweb了，
因為，bootstrap的css reset就有載入normalize了。

在專案的head中，常用的語法

<head>
    <meta charset="UTF-8">
    <title>HTML、CSS教學</title>
    <link rel="shortcut icon" href="favicon.ico">
    <meta name='description' content='網站描述文字' />


    <meta property="og:title" content="FB的標題" />
    <meta property="og:description" content="FB的描述">
    <meta property="og:type" content="website" />
    <meta property="og:url" content="FB上的網址" />
    <meta property="og:image" content="FB的圖片" />

    <link href="圖片路徑" rel="apple-touch-icon" />

    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />

    <link rel="stylesheet" href="CSS檔案路徑">
    <script type="text/javascript" src="JS檔案路徑"></script>
</head>

a. 你特別注意一下第三行<link rel="shortcut icon" href="favicon.ico">
這一行的目的就是在你的網站的title名稱旁邊放入你在href中，指定的小圖，

像這邊這個例子，就是放入左邊的這張圖。

b. 你在這個<head></head>裡面的第7 - 第11行，有關property="og:xxxx"，
這系列的內容，都是用來設定你的網頁在facebook上面的圖示或標題、內容要怎麼呈現。

接著，你可以到facebook 給開發者的檢查工具的網址中
https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fwww.ithome.com.tw%2Fnews%2F142005
在裡面的搜尋框內，貼上你想要偵測的網站，
接著，你就可以在這個facebook的開發者頁面中，看到該網址在facebook的頁面底下
會呈現什麼照片，標題是呈現什麼內容，
以此，來確認是否你在<head></head>裡面撰寫有關”og:xxx”的內容，有沒有如你設計的內容呈現。

c. 在<head></head>的第13行，是給apple的手機用的。
它的意思是，在safari中，有一個功能，當你想把某個圖式或網址加到我的最愛的時候，該網址會吃到你在這一行程式碼裡面
所設定的圖示，並以這個圖示呈現在你的手機桌面上，乍看之下，會很像一個app，但其實不是，它是儲存了你在safari上加入我的最愛的網址或其他內容。

d. 在<head></head>的第15行，是給IE看的。
這是為了讓IE變成最高水準，但這行可加可不加，但若你有要做IE的網頁的話，就要加這一行，。

e. 在<head></head>的第17行，就是放你這個網頁的css檔案。
記住~~~ 你要先放css檔案，讓你的網頁的css樣式先出來，不然，使用者會不知道該網頁到底有沒有在運行。

f. 在<head></head>的第18行，就是放你的js檔案。

最後的最後~~~ 你的head要記得這樣設計喔~~這樣比較全方位都照顧到XDD

在xd.Adobe中，你想要知道兩個元素之間的距離為多少，你可以在點選其中一個元素後，
按住Alt鍵並點選另一個元素，此時，畫面上就會呈現兩個元素之間的間隔距離為何。