[FE101] 前端基礎：HTML 與 CSS

###### tags: `待複習` `影片索引` # [FE101] 前端基礎：HTML 與 CSS ## 網頁背後到底是什麼？ 00:35 介紹[模版網頁](https://html5up.net/) & 範例介紹 01:50 用 sublime text 打開 html & 基本介紹 05:10 chrome 開發者工具 - command + r 可以重新整理 - <3 這個介紹方式好好懂！！:sparkling_heart: ## HyperText Markup Language, HTML 基礎超文本標記語言 ### 絕對會用到的標籤：html、head 與 body 00:00 HTML 名字介紹 01:05 HTML 最基本組成 `<!doctype HTML>` `<html>` `<body>` 03:50 HTML 最基本的 tags `meta` `title` ` <title> 這會顯示在頁籤上 </title> </head> <body>  </body> </html> ``` - 不加`<!doctype HTML>`有時候瀏覽器會誤判你要用哪種方式渲染。 ### HTML 最早存在的意義：h1~h6、p 00:10 HTML 古早的用途——顯示文章 01:16 `<h1>` - `<h6>` 標籤介紹 02:25 `<p>` paragraph 03:35 Lorem ipsum 介紹 - Lorem ipsum 提供測試版面用的亂數文字 ### 很常見的標籤：div 與 span 排版的感覺的標籤們 00:25 `<div>` division 01:55 span - 跨度 - span 是一個行內標籤，可以用在文字裡面 - `div` 會換行 ### 顯示圖片就靠它：img 00:22 從網頁上複製圖片位址 00:30 在 HTML 加入 `<img>` 標籤（網路上的圖片） 01:30 `<img>` 標籤的屬性——`title` 02:05 `<img>` 標籤的屬性——`alt` - img 是一個自成一組的標籤 - alt 是「替代文字」，在圖片顯示不出來時會顯示alt 內容 ### 顯示清單：ul、ol 與 li 00:27 `<ul>` 無排序清單 01:07 `<ol>` 有排序清單 - `<li>` 是 list item ### 保留完整格式：pre、br 00:10 為什麼要用這兩個標籤 01:25 `<pre>`標籤 - html 只會顯示一個 space - `<pre>` preformatted text 使用示範 - `<br />` line break 使用示範 ### 表格必備標籤：table、th、tr 與 td 00:10 名詞解釋 00:25 table 製作示範（使用`<tr>`、`<td>`） 02:35 `<th>` 介紹 - `<table>` 表格 - `<tr>` table row （橫） - `<td>` table cell （格） - `<th>` table header（表格標題） ### 帶我走，到遙遠的以後：a 00:15 名詞解釋 & 功能概述 00:30 連到網頁外面的位址（`href:" "`） 01:15 target 說明 01:55 連到網頁裡面的位址 (`id` `#`) ### 語意化的 UI 標籤：main、nav、footer 等等 00:05 main 的用法 00:31 nav, navigaiton 導覽列 01:05 footer 簡述 01:45 用 Semantic elements 的理由 - 包起來其實在呈現上並不會有不同 - Semantic elements，語義化元素 - 讓開發者更好閱讀和維護 - 其他語意化元素 - [MDN Semantics](https://developer.mozilla.org/en-US/docs/Glossary/Semantics) - [New Sementic Element in HTML5](https://www.w3schools.com/html/html5_semantic_elements.asp) ### 直接用別人的網頁：iframe 00:10 iframe 使用示範 01:20 iframe 使用條件——沒有被 block 的網站才可以用 - 大網站通常都會擋起來了 ### 表單相關標籤：form、input、textarea 00:22 `type="text"` 01:05 `type="summit"` 02:25 `type="password"` 03:05 `type="email"` 03:50 `type="date"` 04:30 `typr="radio"`（單選框）(`name` `label` `for` `id`) 07:50 `type="checkbox"`(`lable` `for` ) - input attribute - type - text - password - summit（提交鍵） - value - email - 可以用 div 換行 - 用`name` 把同一題單選題放在一起 - 更多 input 種類：[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) - 說好的 textarea 呢？ ## SEO 與相關標籤：meta tag 00:25 SEO 介紹 01:35 SEO 範例 03:10 meta `keywords` `description` `title` 介紹 03:45 meta property `og` 介紹 (facebook 常用的) 06:05 JSON-ld `<script>` （google 在看的） 07:45 robots.txt 給網頁爬蟲看的檔案 09:00 sitemap.xml 介紹 10:10 複習 11:10 示範 JSON-ld 實際對 google 產生的效果 12:10 繼續複習 12:30 link alternate，把不同語言的同一網站互相結合 13:10 meta property，連接推薦 app 版或 twitter 的標籤 14:05 SEO 進一步說明 14:55 Google search console 介紹 15:55 小結 - 主動優化 - meta `keywords` `description` - meta property `og` open graph protocol (facebook 常用的) - JSON-ld.org - 為什麼是 SEO team ？ ### Escape：該怎麼顯示標籤？ 00:55 介紹 Escape 跳脫 01:20 符號代碼`>` `&gt`；`<` `&lt`；`&` `&amp` ## CSS 基礎 Part1：Selector ### 選我選我選我選我：CSS selector 00:50 CSS 簡介 01:10 第一種方式——直接寫在元素上面 02:00 第二種方式——在 head 裡面加入 css 03:00 第三種方式——用 link 連接 `.css` 檔 - CSS 用到的頻率很高，所以要好好學！ - HTML 難維護 ### CSS Selector：我全部都要（universal selector） 00:30 選所有元素:`*` ### CSS Selector：標籤 00:15 標籤 selector 示範 ### CSS Selector：id 與 class 00:30 id selector 示範 01:20 class selector 示範 ### CSS Selector：同時符合 00:35 code 示範：接在一起寫 01:15 選同時擁有兩個 class 的元素時 ### CSS Selector：底下的元素 01:20 用`.lv1 > div` 選底下的元素 02:50 `tag class` v.s. `class > tag` ### CSS Selector：~ 與 + 00:40 `+` 旁邊的 03:00 `~` 右邊所有的 04:50 實際用途示例 07:25 注意點 ### CSS Selector：Pseudo-classes，以 hover 為例 01:00 code 示範 01:55 devtool debug 示範 ### CSS Selector：nth-child 01:55 :nth-child(odd/even) 02:15 :nth-child 做選擇的原理和注意點 05:15 和標籤合用時的示範 06:25 :nth-child(3n) 07:10 :nth-child(3n+1) ### CSS Selector：before 與 after :sparkles::sparkles: 有好用的東西！！ 00:40 `::before` code 示範 01:45 實際應用時機 02:35 `::after` code 示範 03:25 `content: attr()` 介紹 06:50 `content: ""` 一定要有 - data symbol 是什麼？ - 自定一些 attribute 時會用 data 開頭 - `content:attr('標籤名稱')` - 用這個方法可以取的標籤名放在 `::before`或 `::after`的位置上 ### CSS Selector 的權重 03:10 記憶法和說明 04:10 權重計算方法說明和示範 08:25 例外——inline style 09:15 奧義——!important ## CSS 基礎 Part2：各種裝飾 ### 背景：background 00:00 四種放顏色方法 02:05 :bangbang: 放圖片的方法 06:00 cover - `background`這個 CSS property 的值可以放什麼？ - 放顏色 - value - 有支援的顏色，如`pink` - hex-code 如： #f31193 - rgb(255, 255, 255) - rgba(255, 255, 255, 1) 最後一個放透明度 - 放圖片 - value: - `url("圖片位址")` - no-repeat; - 決定圖片位置 - top/center/bottom/left/right - 用順時針出現順序決定控制哪一個 - background-size - value - 100px 100px - 100% 100%(填滿 container) - contain （不變形，符合瀏覽器短邊） - cover （不變形，隨著瀏覽器縮放，但不會有留白） - 用哪個 CSS property 設定區塊高度？ - height - value: - 100px; - 例如：`height:100px;` - 用哪個 CSS property 設定區塊寬度？ - width - value: - 2000px; ### 把自己框起來：border 與 border-radius 00:15 border 03:00 border radius 03:15 outline v.s border 04:40 其他 border 用法——用css 畫圓形 05:45 其他 border 用法——用css 畫三角形 - 如何加上邊框？ - border - value: - 20px - border radius - px - outline 是什麼？ - 外框線 - 不會動到元素位置 ### 離我遠一點，或我離你遠一點：margin 與 padding 01:25 padding 簡寫方式 02:30 margin 02:55 覆蓋 user agent style sheet ### 文字相關：color、font-family、font-weight 與 line-height 01:10 font-size 01:20 font-weight 02:10 font-family 03:15 letter-spacing 03:40 line-height 05:15 text-align 06:10 垂直置中的兩種方法：line-height & padding - color ### 文字相關 part2：word-break 與 white-space 00:00 word-break 01:50 white-space:nowrap ### overflow 與 text-overflow 00:25 overflow:hidden 00:40 overflow:scroll 01:35 text-overflow: elipsis 02:05 使用 text-overflow: elipsis 的條件 ### 加了我質感瞬間升級：transition 00:00 transition 簡介 00:20 code 示範 01:25 想要做出更好的畫面可以這樣做 ### transform 00:15 常用的 value——scale（搭配 transition） 01:20 常用的用法 value——rotate 02:20 常用的用法 value——translate 03:35 妙用——讓物件置中 translate(-50%,-50%) - 用 transform 移位不會動到其他元素 ## CSS 基礎 Part3：盒模型（box model） ### 鋼彈吊單槓：什麼是盒模型？ 00:40 padding & border 是往外面長的 03:30 Box-sizing:border-box; ### :bangbang: display 的三種形式：block、inline 與 inline-block 00:50 display:block; 01:15 block 會佔滿一整行 02:05 inline 元素調 width 和 height 無效 02:35 inline 元素調 margin 只會動左右 03:20 padding 會影響背景，但不會影響元素位置 05:10 inline-block `botton` `input` `select` 對外像 inline 可以併排，對內像 block 可以調各種屬性 ## CSS 基礎 Part4：定位（position） ### 最好理解的兩種：static 與 relative 00:30 static 介紹 02:10 relative 介紹 ### :bangbang: 沒那麼難理解的 absolute 與 fixed 00:15 fixed 定位：根據 viewport 窗口做定位 01:55 absolute 絕對定位 03:30 決定絕對定為對象的做法 04:40 絕對定位的元素會從原本的排版流中移出 ### 決定圖層順序 00:50 z-index 設定示範 ### :bangbang: position: sticky 00:20 名詞解釋—— sticky ＝黏 01:00 使用示範(搭配 top: 使用) 想放進 anki ： - font-weight - word-break 是什麼？