###### tags: `影片索引` # [FE101]目錄 ## 網頁背後到底是什麼？ 00:35 介紹[模版網頁](https://html5up.net/) & 範例介紹 01:50 用 sublime text 打開 html & 基本介紹 05:10 chrome 開發者工具 ## HyperText Markup Language, HTML 基礎 ### 絕對會用到的標籤：html、head 與 body 00:00 HTML 名字介紹 01:05 HTML 最基本組成 `<!doctype HTML>` `<html>` `<body>` 03:50 HTML 最基本的 tags `meta` `title` `<!-- --!>` ### HTML 最早存在的意義：h1~h6、p 00:10 HTML 古早的用途——顯示文章 01:16 `<h1>` - `<h6>` 標籤介紹 02:25 `<p>` paragraph 03:35 Lorem ipsum 介紹 ### 很常見的標籤：div 與 span 00:25 `<div>` division 01:55 span - 跨度 ### 顯示圖片就靠它：img 00:22 從網頁上複製圖片位址 00:30 在 HTML 加入 `<img>` 標籤（網路上的圖片） 01:30 `<img>` 標籤的屬性——`title` 02:05 `<img>` 標籤的屬性——`alt` ### 顯示清單：ul、ol 與 li 00:27 `<ul>` 無排序清單 01:07 `<ol>` 有排序清單 ### 保留完整格式：pre、br 00:10 為什麼要用這兩個標籤 01:25 `<pre>`標籤 ### 表格必備標籤：table、th、tr 與 td 00:10 名詞解釋 00:25 table 製作示範（使用`<tr>`、`<td>`） 02:35 `<th>` 介紹 ### 帶我走，到遙遠的以後：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 的理由 ### 直接用別人的網頁：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` ) ## 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 小結 ### 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 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 00:40 `::before` code 示範 01:45 實際應用時機 02:35 `::after` code 示範 03:25 `content: attr()` 介紹 06:50 一定要有 `content: ""` ### CSS Selector 的權重 03:10 記憶法和說明 04:10 權重計算方法說明和示範 08:25 例外——inline style 09:15 奧義——!important ## CSS 基礎 Part2：各種裝飾 ### 背景：background 00:00 四種放顏色方法 02:05 放圖片的方法 06:00 cover ### 把自己框起來：border 與 border-radius 00:15 border 03:00 border radius 03:15 outline v.s border 04:40 其他 border 用法——用css 畫圓形 05:45 其他 border 用法——用css 畫三角形 ### 離我遠一點，或我離你遠一點：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 ### 文字相關 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%) ## CSS 基礎 Part3：盒模型（box model） ### 鋼彈吊單槓：什麼是盒模型？ 00:40 padding & border 是往外面長的 03:30 Box-sizing:border-box; ### 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 介紹 ### 沒那麼難理解的 absolute 與 fixed 00:15 fixed 定位：根據 viewport 窗口做定位 01:55 absolute 絕對定位 03:30 決定絕對定為對象的做法 04:40 絕對定位的元素會從原本的排版流中移出 ### 決定圖層順序 00:50 z-index 設定示範 ### position: sticky 00:20 名詞解釋—— sticky ＝ 黏 01:00 使用示範(搭配 top: 使用)