第二篇讀書計畫的主題是HTML/CSS。

還記得上一篇讀書計畫是在兩個月前哈哈哈。

我自從進新公司跟成功轉成前端工程師，每天都很忙碌，每天工作都很開心，毫不覺得我在工作，我覺得我在生活啊！！

然後，享受在公司跟同事社交、享受每天很刺激都跟美國同事開會，享受那種害怕做不出來(明明就很焦慮)的感覺XD

一不小心就拖了一點時間才回頭專注繼續讀書計畫，不過這次我有修正了一下研讀CSS的部分，因為我找到了一個學CSS的網站我覺得還不錯，所以我打算接下來的 CSS 部分就把這個網站順一遍，大概需要妥妥的一個月吧，扎實的把CSS學好，整趟CSS讀完可能也要個1-2個月，才會進入JavaScript的部分，看看今年能否把整個前端讀書計畫都讀完。

除此之外還要兼顧工作跟創業作品，好扎實啊～～！

那麼我們就開始進入 HTML/CSS 章節吧。

HTML/CSS 讀書項目

Note: 我在正式進入學CSS的時候發現另一個學習CSS的網站很好用，於是我決定把本來只看CSS cheat sheet的部分改為透過該網站學習，但這會讓整個CSS學習計畫拉比較長的天數，所以如果你對CSS沒有這麼有興趣，那只看cheatsheet也可以。

HTML/CSS
- [HTML] Cheatsheet
- [CSS] Learn CSS - web.dev 搭配 TailwindCSS 搭配 MDN (每天慢慢看可能也要個一個月吧，算很扎實)
- [CSS(替代方案)] Cheatsheet + 標準語法糖 - w3schools (如果對CSS沒興趣，可以直接這項簡單帶過)
- [CSS] 搭配 Hackerrank 證照題目交互學習
- [CSS] 41 CSS 面試題目 (選擇擺在這看或者移到最後皆可)
- [CSS] 看創意構想有2個影片 (滿滿的知識)
- (Pending) [CSS] 了解 Canvas, WebGL, SVG, CSS 3階層樣式表 or three.js，了解一下就好，不用太深入
- [Front-end] 簡單了解一些CSS框架 TailwindCSS, Sharon UI

詳請可參考完整讀書計畫目錄

Table of Content 內容

HTML Cheatsheet
- Img
- a href
- robots.txt
- HTML 5
- div
- atribute
- Head Tags
- Open Graph
CSS

HTML Cheatsheet

其實基本上就是照著這個Cheatsheet的內容複習一次，以下列舉一下我自己個人覺得會忽略或者不知道的要點。

Img

<img src="/demo.jpg" alt="baby" longdesc="desc.txt" width="100" height="48" />

img tag 有直接的 height 跟 width attribute，我之前寫css都是直接寫class style，但老是忘記html可以直接寫高寬的屬性。
img alt 和 longdesc，alt 就是對於圖片的簡短的文字描述。longdesc據說是對於圖片比較長的文字描述，參考文件的描述如下
- <img> 標籤的 longdesc 屬性與 alt 屬性類似，但它允許更長的描述性文字。longdesc 的值是一個指向包含影像說明的文件的 URL。如果說明多於 1024 個字元，那麼可以使用 longdesc 屬性來設定指向它的鏈接。
- 可是呢目前瀏覽器都還沒有支援 longdesc 屬性。因此，對於如何建立那些大塊的描述，我們的建議是建立一個超鏈接指向包含描述的頁面即可。

<a href="https://HTMLforBabies.com/"
   target="_blank" rel="external nofollow">Link</a>

再來是 <a> tag的屬性 rel and rev, 至從開始調查SEO後，我發現 rel這個屬性是其中一個優化SEO的要點，他能夠告訴機器人爬蟲這個連接跟現在看到的網站是什麼關係，不過詳細還沒有使用過，未來會嘗試看看。
target, 可以選擇點選網站時，會怎麼打開這個網站，比方說打開連結於開啟新的視窗(_blank)、佔整個視窗(_top)，還有其他。
hreflang, 可以指定或者說提示連結的網站是屬於哪個語言。

robots.txt

robots.txt 是一個放置在根目錄的文檔，他主要是讓機器人爬蟲知道這個網站能不能訪問。機器人會爬蟲你的網站後，在他們的資料庫建立關於你的網站的索引與資訊，接著會決定你的網站能不能被人在搜尋引擎上找到 (SEO)。

案例

User-agent: *
Disallow: /dont-index-this-folder/ <- 在這個目錄後的檔案都不要訪問
Sitemap: https://htmlcheatsheet.com/sitemap.xml <- 類似告訴機器人關於這個網站的地圖／導航，通常會另創另一個sitemap.xml檔案並由 robots.txt指定。

禁止訪問

User-agent: *
Disallow: /

robots.txt 跟 sitemap.xml 是我開始在經營這個個人網站，研究SEO後發現很重要的兩個檔案，若您的網站有需要SEO優化的話，可以研究實作這兩個檔案。

HTML 5

<header></header>
<article></article>
<section></section>
<main></main>
<aside>Sidebar</aside>
<address></address>
<footer></footer>

以上這些是HTML 5才出來的tags。

div

<p dir="rtl">This paragraph is in English but incorrectly goes right to left.</p>
<p dir="ltr">This paragraph is in English and correctly goes left to right.</p>

<hr />

<p>هذه الفقرة باللغة العربية ولكن بشكل خاطئ من اليسار إلى اليمين.</p>
<p dir="auto">هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>

div 的 dir 是我在開發 Next.js時挖到的一個屬性，dir 可以指定div裡的方向， rtl 就是靠右、ltr靠左、還有其他值。

atribute

HTML Tags裡有很多不同的屬性，可以多參考Cheatsheet內的Attributes 了解更多。

Head Tags

<head>
  <meta charset="utf-8">
  <!-- 這一行是瀏覽器適配性，特別是針對 IE，因為並不是所有的網站都能在 IE運行，這一行主要是設定這個網站要用ie哪個版本渲染網站 -->
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="canonical" href="https://htmlcheatsheet.com/" />

  <!-- 這些算是SEO的一部分，就是設定這個網站的名字、描述跟關鍵字，雖然先前的文章有說Google已經不會參考關鍵字了，但我認為還是寫一下會比較好 -->
  <title>HTML CheatSheet</title>
  <meta name="description" content="A brief page description">
  <meta name="keywords" content="html,cheatsheet" />
  <!--  -->

  <!-- 這些是跟SEO比較直接的設定、除了能夠讓機器人爬蟲了解資訊外，當你分享網站時，若有跳出分享的網址縮圖，也會顯示出設定的標題、描述跟圖片 -->
  <meta property="fb:admins" content="YourFacebookUsername" />
  <meta property="og:title" content="HTML CheatSheet" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://htmlcheatsheet.com/" />
  <meta property="og:image" content="https://htmlcheatsheet.com/images/html-cheatsheet.jpg" />
  <meta property="og:description" content="A brief page description" />
  
  <!-- 是設定若你在Apple想將這個網站新增到桌面時顯示的App Icon -->
  <link rel="apple-touch-icon" href="apple-touch-icon.png">

  <!-- 跟多語系相關的設定、指的是這個網站的原始版本的其他替代版本，然後hreflang是語系 -->
  <link rel="alternate" hreflang="es" href="https://htmlcheatsheet.com/spanish/" />

  <!-- import .css檔 -->
  <link rel="stylesheet" href="/styles.css">
  
  <!-- import js 檔 -->
  <script src="/script.js"></script>
</head>

Head Tags 是不會出現於網頁視覺畫面上的tags，它的功用主要是這個網頁的設定、SEO資訊。

Open Graph

也是跟優化SEO有關的設定，跟上面的內容有點重疊。

<head>
<!-- 這邊就是主要SEO的設定 -->
<title>The Rock (1996)</title>
<meta property="og:title" content="Cheat Sheet" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://htmlcheatsheet.com/" />
<meta property="og:image" content="https://htmlcheatsheet.com/demo.jpg" />

<!-- 這些是選擇性要加或者不加都可以 -->
<meta property="og:audio" content="https://htmlcheatsheet.com/track.mp3" />
<!-- 描述有 meta name="description" 可以取代這行，所以選擇性撰寫 -->
<meta property="og:description" content="A brief description" />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="HTML CheatSheet" />
<meta property="og:video" content="https://htmlcheatsheet.com/video.swf" />

.htaccess

最後是這一個項目，主要可以實現包括：資料夾密碼保護、使用者自動重定向、自訂錯誤頁面、更改檔案副檔案名、封禁特定IP位址的使用者、只允許特定IP位址的使用者、禁止目錄列表，以及使用其他檔案作為index檔案等功能。

CSS

正式進入CSS章節前，我本來只是想透過CSS Cheatsheet簡單帶過，可是考量到自己本身從高中的夢想就是偏前端視覺的部分，所以決定花比較多時間琢磨CSS這一塊，於是我把研讀計畫改為跟著這個Learn CSS - web.dev網站的步驟走。

搭配 TailwindCSS，可以從廣角的網狀角度切入，因為我本身就喜歡先看假設display這個有幾種style，然後再深入去瞭解每個style的呈現跟用法。搭配 MDN，可以把一些概念講得更透徹，而且也會推薦你其他相關的概念。

我一樣只節錄一些我自己本身不懂的概念。

Box Model

第一個重要的概念就是 Intrinsic size (內部尺寸) vs Extrinsic sizing (外部尺寸)。

我記得這一路來都是一邊實作一邊隨便抄人家的CSS來改，早就實作過這兩種概念，但卻不知道它們名稱。

Intrinsic size (內部尺寸)	Extrinsic sizing (外部尺寸)
主要是根據元素的內容決定尺寸大小	透過CSS屬性（例如 width、height、min-width、max-width、min-height 和 max-height）來設置，無論元素的內容多大多寬，外部尺寸就是固定的尺寸。

值得注意的是，intrinsic sizing (內部尺寸) 是瀏覽器的default設定，內部尺寸通常比外部尺寸來的更彈性。

我個人在刻CSS時也比較喜歡採用內部尺寸，除非是一些需要固定長寬以及考量到響應式網站的內容排版，才會去使用外部尺寸，內部尺寸使用好的話，排版跟響應式的縮放是很舒適的。

以下是幾個跟尺寸相關的屬性

padding: div的邊界落在 border box 的部分，padding就是div和內容中間要隔多少空格。值得注意的是如果你有設overflow屬性，那那條scroll bar會落在padding區域。
margin: 是圍繞在 div外的一圈邊界，一些屬性像是outline 跟 box-shadow 會佔據margin的空間。

通常 <div> 的default值是 display:block，但其實display有很多不同的value: 參照TailwindCSS display

而且，每個 HTML element 的 display 都不同，<div>的default是block，<li>的default是list-item，<span>是inline。

再來是 box-sizing: border-box; vs box-sizing: content-box;

參照 TailwindCSS

.my-box {
  width: 200px;
  border: 10px solid;
  padding: 20px;
}

.my-box {
  box-sizing: border-box;
    width: 200px;
    border: 10px solid;
    padding: 20px;
}

CSS 預設使用 default box-sizing: content-box，所以第一個css實際上寬度是 260px，而第二個是200px (總寬)。

Selector

Selector Type

再來進入 Selector的概念，基本上本人也只用過幾個，最常用的還是 .class，正所謂 .class 從頭到尾。

Universal selector (*): also known as a wildcard—matches any element.
Type selector (HTML element): matches a HTML element directly. (就是針對某個HTML Tag賦予機關槍式的style，使某個HTML Tag都是同個style)
Class selector (.class): matches any element that has that class applied to it. (A HTML element can have one or more items defined in their class attribute) - 個人很常使用這項，基本上就是寫在 <div class="">，而且一個class 用空格分開可以寫好多個class。
ID selector (#id): 通常拿來綁跟JS有關 (我說我)
Attribute selector ([data-type=‘primary’] or [data-type] without specific value): elements that have a certain HTML attribute, or have a certain value for an HTML attribute (長知識了，很少用)
- You can use case-sensitive attribute selectors by adding an s operator to your attribute selector.
- by adding an s: [data-type=‘primary’ s]
- This means that if a HTML element had a data-type of Primary, instead of primary, it would not get red text. You can do the opposite—case insensitivity—by using an i operator.
Grounping selectors: A selector doesn’t have to match only a single element. You can group multiple selectors by separating them with commas
Complex selectors
Compound selectors

Note: Attribute selector

/* A href that contains "example.com" */
[href*='example.com'] {
  color: red;
}

/* A href that starts with https */
[href^='https'] {
  color: green;
}

/* A href that ends with .com */
[href$='.com'] {
  color: blue;
}

Note: Grouping selectors

strong,
em,
.my-class,
[lang] {
  color: red;
}

Pseudo-classes and pseudo-elements

Pseudo-element 我到現在也還是不太會，在後面有個獨立的章節會好好的學。

CSS provides useful selector types that focus on specific platform state, like when an element is hovered, structures inside an element, or parts of an element.

Pseudo-classes (:)
Pseudo-element (::)

Pseudo-classes

/* Our link is hovered */
/* 只要滑鼠移到link上，就會變效果 */
a:hover {
  outline: 1px dotted green;
}

/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
  background: floralwhite;
}

Pseudo-element

關於更多的知識，會在後面的章節學到。

/* 就是這個用法還不怎麼會，但是在我的占卜服務裡有用到 */
.my-element::before {
  content: 'Prefix - ';
}

/* Your list will now either have red dots, or red numbers */
li::marker {
  color: red;
}

Note: 要注意的是 Pseudo-element 是使用雙冒號 (::)，可是在古老年代的css，瀏覽器是支援單冒號寫法，是長這樣 :before and :after，如果你需要支援古老的瀏覽器(例如 IE8)，你需要這樣寫。

/* Selectors with HTML elements */
article p:first-of-type {
  /* Declaration */ color: red; 
                    /*Property: Value*/
  font-size: 1.5em;
}

/* Selectors with Class */
.my-css-rule {

}

:first-of-type
- :first-child
:last-of-type
:nth-of-type

Complex selectors

我們學了一堆 selectors，但有的時候你還是想要擁有更好掌控 CSS的技術，你可以選擇 Complex selectors 或者下個章節將學到的 cascade。

Combinators (>)
- Descendant combinator (>)
- Next sibling combinator (+): 主要是同父元素的下一個元素
- Subsequent- sibling combinator (~): Instead of a + character however, use a ~ character. How this differs is that an element just has to follow another element with the same parent, rather than being the next element with the same parent. (同父元素，但不一定是下一個元素)
- Child combinator (>): 指向子元素

/* Descendant combinator */
  p strong {
  color: blue;
}

  p > strong {
  color: blue;
}

/* Next sibling combinator */
/* 這看起來就好難 */
.top > * + * {
  position: relative;
}

.top > * + *::before {
  content: "";
  width: 100%;
  height: 1.5em;
  background: #ff807b;
  position: absolute;
  bottom: 100%;
  left: 0;
  outline: 1px solid #9d0600;
}

.top * {
  margin-top: 1em;
}

Compound selectors

a.my-class {
  color: red;
}

這個範例是這個style效果只會 apply 到 <a class=".my-class">。

未來的章節也會學習到。

本節小課程 - Hidden vs Visibility

關於這個CSS的知識點，今天來介紹 Hidden vs Visibility，兩者都跟視覺上的不見或顯示相關。

我們來看一下TailwindCSS的官方網站

眼尖的人可以看到關於 hidden 有兩個概念

display: none;
visibility: hidden;

display: none; 是廣義上的 hidden，大部分的網頁設計，如果透過css class或 javascript去手動加入 hidden，都跟 display: none; 相關，這一行的意思是隱藏整個元素，所以如果有相鄰的其他元素，會因為他的隱藏而變動

抽象概念圖是這樣的

[div1][div2][div3]

假設今天把 div2 設成 display: none;，那會變成以下的樣子

[div1][div3]

相當於整個元素都被移除隱藏掉。

可是如果今天是 visibility 的 visibility: hidden;，則只是讓那個元素不顯示，但他的位置實際還是在的。

所以假設三個div位置是這樣

[div1][div2][div3]

將 div2 設成 visibility: hidden;後，長這樣:

[div1][___][div3]

大概就是這樣，這邊用字很容易混淆，但如果有特別被問到，要記得他們不太一樣，或者實際案例需要實作時，可以有兩種不同的隱藏方式。

Sign @MinaYu.

1萬小時 - 前端工程師成長計劃