tags: `影片索引`

[FE101]目錄

網頁背後到底是什麼？

00:35 介紹模版網頁 & 範例介紹
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 )

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: 使用)

tags: 影片索引