第二篇讀書計畫的主題是 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
- [x] [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 內容
- [x] HTML Cheatsheet
- [x] Img
- [x] a href
- [x] robots.txt
- [x] HTML 5
- [x] div
- [x] atribute
- [x] Head Tags
- [x] Open Graph
- [x] CSS
- [x] Box Model
- [x] Selector
- [x] Selector Type
- [x] Pseudo-classes and pseudo-elements
- [x] Complex selectors
- [x] Compound selectors
- [x] 本節小課程 - Hidden vs Visibility
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
<a href="https://HTMLforBabies.com/" target="_blank" rel="external nofollow"
>Link</a
>
- 再來是
<a>
tag 的屬性rel
andrev
, 至從開始調查 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" />
</head>
.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]
大概就是這樣,這邊用字很容易混淆,但如果有特別被問到,要記得他們不太一樣,或者實際案例需要實作時,可以有兩種不同的隱藏方式。